を使ってちょっとしたデザインをする事があったので普段も使える様にGIMP(フリーのグラフィックソフト)で実践、記録として残す。
ざっくり言ってしまうとwebで使えるボタンを作ろうというググればアホほどひっかかる話なのだがー(こことか)
個人的にちょっとしたカルチャーショック(web上のボタンはこんな風に作られていたのかーそりゃ俺のボタンは見た目クソな訳だあ！)を受けてしまったのでこの気付きをどうにかあなたと共有できないかとかそんな話。
2年前に作成したボタン(項目？)らしきもの
黄色塗ったバージョンもあるのはマウスが載ったときに切り替えるつもりだったのでしょう。
原色ﾍﾞﾀｧな感じもあいまって素人臭さがアレですね。
続いて先日作成した「気付き」を得た後のボタンです。
webページで言うところのグローバルナビゲーションの左2つです。
どうでしょう？2年前の物よりは格段にボタン感(?)が増したと思います。
ちなみに、同じボタンが上下2つならんで居るように見えますが、下半分の画像はグラデーション部分が上下反転しており上の画像から切り替えることであたかもボタンが押されているような演出になります。
さて、前置きが長くなりましたがGIMPを使って上記の様なボタンを作成していきましょう。
※GIMPの基本的な操作等の解説は他所に任せます。
1. 「ファイル」「新しい画像」から新しい画像の作成を開始する。サイズは640*400程度で。
2. 新しいレイヤを作成します。このレイヤでボタンを作成します。
レイヤウィンドウの左下のアイコンから～
下記画像赤枠内の黄色い破線内が新しく作成したレイヤです。
3. この新しく出来たレイヤをグラデーションで塗りつぶします。
描画色、背景色を任意の色(両方同じ色に設定した後、片方だけ明度をいじるのが定番かも)に設定。
これで原色ベタ塗りクソボタンともおさらばです。
グラデーションをかける。手順2で作成したレイヤの上端から下端に向けてマウスをドラッグするよろし。
上手いじゃないか！4. ボタンらしくするため角を丸めます。
範囲選択を制する者はグラフィックツールを征する。と、かの偉い人は言わなかったとか。
レイヤーウィンドウにある手順2で作成したレイヤの上で右クリック
さらに現れたメニューの「不透明部分を選択範囲に」をクリック
これでグラデーションを塗った部分だけが選択されます。
その状態でウィンドウ上部のメニューから「選択」「角を丸める」をクリック。
現れたウィンドウを画像の通りすすめる。
↓こんな感じで角が丸まった選択範囲(黒の破線)になると思います。
選択範囲を反転させ要らない角の部分を切り取ります。
ウィンドウ上部のメニューから「選択」「選択範囲の反転」とクリック
※画像を用意するのが遅れたため画像内の作業の進み具合が異なりますが無視してください；
ウィンドウ上部のメニューから「編集」「切り取り」とクリック
↓の様に角が切り取られます。
5. ボタンの縁を少し暗い色で塗り輪郭をはっきりさせます。
手順4で行った「不透明部分を選択範囲に」を再度行います。
その状態で「選択」「縁取り選択」とクリック。
新しく出たウィンドウを画像の通り進める。
↓の様に縁1ピクセルが選択範囲となります。
描画色を変更します。ここではベースの色からさらに明度だけを下げています。
鉛筆ツールをクリック
縁取った選択範囲を塗りつぶします。
6. ドロップシャドウを掛けて少し浮いたように見えるようにします。
手順4, 5で行った「不透明部分を選択範囲に」を再度行います。
もう3度目なので工程画像は貼りません笑
不透明部分の選択が出来たら「フィルター」「照明と投影」「ドロップシャドウ」とクリック。
現れたウィンドウを画像の通り進めます。
↓の様になります。なかなか良い感じになってきたと思います。
この新しく書き出された影の部分は別のレイヤとして書き出されているので
後の作業効率を考えてひとつにまとめてしまおうと思います。
レイヤーウィンドウの"背景"レイヤの目のマークをクリックし
"背景"レイヤを一旦、非表示にします。
右の画像のようになればおｋです。
レイヤーウィンドウ内の適当な場所で右クリックし現れたメニューの「可視部分をレイヤーに」をクリック。
目のマークが付いている複数のレイヤをひとつのレイヤにまとめて新しいレイヤとして書き出します。
右の画像の様なレイヤが生成されると思います。
※余談ですが同じメニュー内にある「可視レイヤーの統合」でも同じようなことが出来ますが、こちらは結合後のレイヤを生成した後、結合前のレイヤを破棄してしまいます。
作業のバックアップも兼ねて結合前のレイヤは残していくのが無難かと思われます。
分かり安い様に結合後のレイヤに名前をつけ、結合前のレイヤは非表示にしてしまいましょう。
レイヤの名前が表示されている部分をダブルクリックで名前を編集できます。
ここでは "ボタン・ボード完成" と付けています。
右の画像では結合前のレイヤの目のアイコンをクリックして非表示に切り替えています。
7. 仕上げにテキストを配置します。
フォントはフォントリストの一番下にあったものを選んでます。
"トップページ"を黒で、その下に"Top"を白で書いてます。
完成。
下の画像は"Top"が背景の色と似ているのでアウターグローを掛けて輪郭をはっきりさせています。
アウターグローに関してはGIMPのデフォルトに入っていないのでここでは解説しません。
それでも気になるって方はこちらが詳しい
ボタン作成工程の解説は以上で終了です。
ここまで読んで頂いた方に私が感じた様な気付きがあったなら光栄です。
# 記事作成に手間取りすぎて何が言いたかったか本題を忘れたのは内緒。
をぼちぼち読み進めていたのが1.5ヶ月程前。
と
を