: マットなボタンを0円&3分で作る作り方。

自分、プログラマです。基本的にデザインはデザイナーさんの仕事です。しかし、デモなどで簡単なイメージを見せるときに、いちいちデザイナーさんにお願いするのも大変という事で、ラフでデモぐらいなら耐えるマットっぽいボタンの作り方。どちらかというと自分用メモ

基本的なテクニックはこのGimp で輝きのある画像を作成する(今度こそフリーの画像編集ソフト『GIMP』をマスターしようという人の為のまとめ*ホームページを作る人のネタ帳)サイトからの流用ですが、そこまで作り込まなくてもという部分をカットして最適化してみました。

手順

1.新規にファイルを作成します。

200
 たとえば、96x96pxでファイルを作成します。
 この時に、背景色は透明にしておきます。

2.選択領域の角を丸めます

 選択>>角丸め を選び
 20%程度丸めます。

 ※一般的に、新規作成後は領域が全範囲選択されていると思いますが、されていないバージョンがあったばあいは、先に選択>>全て で領域を選択して下さい。

3.選択領域を縮小します

 選択>>縮小 を選び
 3px程 縮小します。

 影の部分を作るために選択領域を縮小します。
 白いエッジの外側の影を広く付けたい場合は沢山。
 狭く付けたい場合は少しだけ縮小します。

4.選択領域を黒で塗りつぶします

201
 道具>>作画ツール>>ブレンドで塗りつぶします。
 のちのちこれが影の材料になります。

6.レイヤーを追加します

 背景色透明でレイヤーを追加します。

7.選択領域を白で塗りつぶします

202
 これがのちのちエッジになります。

8.レイヤーを追加します

9.選択領域を縮小します

 選択>>縮小 を選び
 3px程 縮小します。

 これがエッジの幅になります。
 エッジを太くしたい場合はもっと多く
 エッジを補足したい場合はもっと小さくすれば良いです。

9.白と黒でグラデーションを作ります

203
 道具>>作画ツール>>ブレンドでグラデーションを作ります。
 前景色を白、背景色を黒 形状を線形 反復をなし 不透明度を100 モードを標準でしょりします

 ここで、ドラッグアンドドロップでグラデーションを作ります。
 たとえば、左上の、作画領域よりもだいぶ左上からドラッグを初めて
 画面中心よりもやや右下でドロップするとサンプルのようなグラデーションになります。


10.一番最初のレイヤーを選択します。

 レイヤーウインドウが出ていなければ、ダイアログ>>レイヤーで出します。
 一番最初のレイヤーを選択します。

11.選択を解除します。

 選択>>なしで選択を解除します

12.ぼかします

204
 フィルタ>>ぼかす>>ガウシアンぼかし でぼかします。
 パラメータは水平垂直とも5ぐらいでも良いです。
 最初の2で影の部分を大きく取った場合は比例して、大きくしてください。

13.完成です

 あとは好きな文字を上に書いたり、アイコンを張ったりしてください。

簡易手順なので、簡単です

 すごいグラヒクスというわけではありませんが、プログラマがダミー画像用に使うには十分な品質ではないでしょうか?

 手順的にも13操作で終わりますし、レイヤーウインドウが開かれていれば、テンポ良く、ぽんぽん、進める手順になっているので、基本的には3分もあれば作業は終了するはずです。なれていれ1分かからないかと(w

 元の手順と比べレイヤーの移動が最適化されていて、アルファチャネルを使わないというのが、プログラマ的手順の最適化だと

 オリジナルでは下半分が黒くて、グラデは上半分だけにかける処理がされていますが・・・なんとなく、鏡面っぽくすると、文字も鏡面っぽくしないといけないので・・・そこまでするの?というのもあり、割愛しましたが、この手順に領域の半分化を入れればオリジナル通りの画像も作成できます。

簡易手順なので、変更も簡単です

 他の色が欲しい場合は、グラデーションの手順を違う2色にして、ドラッグ&ドロップの距離をいろいろ変えて試してみて下さい。

 そこそこ使えるものがいろんな色でできるはずです。

関連

GIMP2を使おう

今度こそフリーの画像編集ソフト『GIMP』をマスターしようという人の為のまとめ*ホームページを作る人のネタ帳

Gimp で輝きのある画像を作成するメモ – bend tail

Leave a Reply

メールアドレスが公開されることはありません。

注意(NOTICE)

コメントの投稿は反映までに時間がかかる場合があります。 Post Comments may take some minutes to publish.