MILLEN BOX

音楽好きの元組み込みソフトエンジニアによるプログラミング(主にiOSアプリ開発)の勉強の記録

ファミコンのボタン(っぽいもの)を描く!! (Pixelmator3.3.3)

皆様いかがお過ごしでしょうか。
本日はプログラムから少し離れまして、お絵描きをしたいと思います。

描くものはズバリ ボタン です。
ではいきましょう。

使用するお絵描きアプリについて

私はPixelmatorというアプリを使用しています。(Ver 3.3.3)
今まで触ったことのあるお絵描きツールと比較しても特に違和感なく使えます。
あと、とにかく価格がお手ごろです!
AppStoreで¥3,600。私はセールで¥1,900(だったと思う)で買いました。

Pixelmator

Pixelmator

  • Pixelmator Team
  • グラフィック&デザイン
  • ¥3,600

また少し高くなりますが、Sketchというアプリも今キテいるらしいです。

Sketch 3

Sketch 3

  • Bohemian Coding
  • グラフィック&デザイン
  • ¥11,800

ボタンの描き方

自分手順1

ということで、今回はPixelmatorを使用していることを想定して手順を記載していきます。
が、他のツールでもそんなに違和感なく作成できると思います。(簡単なお絵描きだし)

今回はファミコンのコントローラーに見えるようなボタンを目指します。
まずファイルを新規作成します。
今回はサイズ 240x240 で作成していくことにします。
f:id:anthrgrnwrld:20151016202527p:plain

メニューの表示から ツール, レイヤー, シェイプ を表示しておいて下さい。
f:id:anthrgrnwrld:20151016202530p:plain

以上でお絵描きの準備は完了です。

自分手順2

ツールを選択して下さい。 f:id:anthrgrnwrld:20151016202532p:plain

そしてキャンバスをクリックして下さい。丸が出来ます。
丸を二つ作って以下の画像のように配置して下さい。 (shiftキーを押しながら調整すると真円のまま大きさ変更出来ます。)
f:id:anthrgrnwrld:20151016202533p:plain
尚、上の画像は分かりやすいように円それぞれ塗りつぶし色を変更してます。

自分手順3

円を一つ選択して下さい。どちらでも構いません。
そしてシェイプパレットで、塗りつぶしグラデーション を選択します。
f:id:anthrgrnwrld:20151016210255p:plain

そうすると円に何かしらのグラデーションがかかります。
次にグラデーションの色部分をクリックしてグラデーションパレットを出します。
f:id:anthrgrnwrld:20151016202537p:plain
ど真ん中のグレー→ブラックのグラデーションを選択して下さい。
そうすると以下の画像のようになります。
f:id:anthrgrnwrld:20151016202539p:plain

この作業をもう一方の円でも行います。
結果、以下画像のようになります。
f:id:anthrgrnwrld:20151016202541p:plain

自分手順4

一方の円のグラデーションの方向を逆さまにします。
(今回の場合だと内円)
こんな風に。
f:id:anthrgrnwrld:20151016202547p:plain f:id:anthrgrnwrld:20151016202548p:plain f:id:anthrgrnwrld:20151016202549p:plain

すると、あら不思議。
ファミコンボタンの出来上がり!
見えませんか?(ん?見えない?)
f:id:anthrgrnwrld:20151016202551p:plain

自分手順5

あとはバックのレイヤーを削除して一先ず完成です。
f:id:anthrgrnwrld:20151016202553p:plain
削除! f:id:anthrgrnwrld:20151016202555p:plain
こんな風になります。
f:id:anthrgrnwrld:20151016202557p:plain

自分手順6

これで終わりではありません。

  • 押していない時
  • 押している時

の2種類のボタン画像を作成しておかなければなりません。
それでは 押している時 の画像を作成しましょう。

まず手順5までで作成したファイルを 複製 して下さい。 ファイル → 複製 から選択できます。
f:id:anthrgrnwrld:20151016202608p:plain
f:id:anthrgrnwrld:20151016202610p:plain

自分手順7

押している時の状態を以下の2点で表現します。

  • グラデーションのグレーを少し明るくする
  • つの丸をすこーーーし小さくする

グレー側の明るさの変更はグラデーションパレットから可能。
(グレー側の色欄をクリックしたら、色の選択画面が出てきます。)
f:id:anthrgrnwrld:20151016202602p:plain

小さくする変更は、本当にすこーーーしでいいと思います。
あんまり変化が大きいと違和感が出ます。
大きさ変更後、画像を右下に寄せるとさらに効果的です。

上記を適応すると、こんな画像が出来上がります。
f:id:anthrgrnwrld:20151016202614p:plain

自分手順7

あとはファイルの保存と、イメージを書き出して終了です。
f:id:anthrgrnwrld:20151016202616p:plain

完成品

  • ボタンを押していない時
    f:id:anthrgrnwrld:20151016202522p:plain

(Pixelmatorのファイルはこちら)
▶︎buttonDefault.pxm.zip - Google ドライブ

  • ボタンを押している時
    f:id:anthrgrnwrld:20151016202524p:plain

(Pixelmatorのファイルはこちら)
▶︎buttonSelected.pxm.zip - Google ドライブ

私はデザインについて全くび素人で、いろいろ試行錯誤して上記手順を作りました。
誰かのお役に立てることを祈っています。