2009年1月11日日曜日

光沢のある立体的なボタン・アイコン



Photoshopのチュートリアルを参考にしてGIMPで作成する場合、ボタン・アイコンなどはテクスチャーと比べると作りやすいと思いますが、グラデーションが単調で光沢を綺麗に出すのが難しいです。

GIMPバージョン:2.6.4

注意:以下の説明以外の数値は初期状態で設定してあります。

  1. ファイル→新しい画像を選択して、幅:500px、高さ:500px、解像度:72dpiに設定。
  2. レイヤー→レイヤーを追加を選択して、レイヤー名を「メイン」に変更。
  3. ツールボックスから【矩形選択】をクリックして画像の上を適当にドラッグ。その後、角を丸めるをチェックしてツールボックスの値を半径:10.0、開始位置X:100px、開始位置Y:190px、大きさX:300px、大きさY:80に設定。選択→選択範囲をパスにを選択。
  4. ツールボックスの【ブレンド】をクリック、描画色:F60000、背景色:9a0000、グラデーション:描画色から背景色(RBG)に設定。レイヤー「メイン」を選択して、上から下へまっすぐにドラッグ。選択→選択範囲の解除Sucript-Fu→Layer Effect→Inner Shadowを選び、Sucript-Fu:Inner Shadowウィンドウの値を、色:AE0000、Blending Mode:Multiply、Offset Distance:5.0に設定。
  5. レイヤー→レイヤーを追加を選択して、レイヤー名を「光沢」に変更。その後、このレイヤーを一番上へ移動。その後、ツールボックスから【矩形選択】をクリックしてから画像の上を適当にドラッグ。その後、角を丸めるをチェックしてツールボックスの値を半径:10.0、開始位置X:105px、開始位置Y:195px、大きさX:290px、大きさY:35に設定。
  6. 6に続いてツールボックスから【ブレンド】を選び、前景色:ffffff、グラデーション:描画色から透明に設定。選択範囲に対して上から下へまっすぐにドラッグ。その後、レイヤーダイヤログから不透明度:80.0に設定。選択範囲の解除。
  7. ツールボックスから【テキスト】を選択後、画像をクリック。GIMPテキストエディタウィンドウが現れるので「GIMP」と入力後、ウィンドウを閉じる。そのままツールボックスのテキストの値をフォント:Arial Bold Italic、大きさ:35px、文字間隔:3.0に設定。
  8. テキストの位置を揃えるため、パスダイヤログからパスを表示して、右クリック→パスを選択範囲にを選択。ツールボックスの【移動】クリック。移動対象:選択範囲に設定。
  9. ツールボックスから【整列】を選択後、「GIMP」テキストをクリック。基準:選択範囲を選んだ後、整列:中央揃え(水平方向の)および中央揃え(垂直方向の)をクリック。選択の解除。パスダイヤログのパスを非表示。
  10. レイヤーダイヤログのテキストレイヤー「GIMP」を選択し、右クリック→テキストを選択範囲にを選択。ツールボックスの【ブレンド】をクリック。描画色:ffffff、背景色:8d8888、不透明度:70.0、グラデーション:描画色から背景色 (RBG)、オフセット:60.0に設定。選択範囲に対して上から下へまっすぐにドラッグ。選択→選択の解除
  11. 11に続いて、Sucript-Fu→Layer Effect→Dorop Shadowを選びSucript-Fu:Dorop Shadowウィンドウの値を、色:7c0000、不透明度:60.0、サイズ:5.5、Offset Distance:2.0に設定。選択→選択を解除。
  12. レイヤー→レイヤーを追加を選択して、レイヤー名を「反射」に変更。パスダイヤログのパスを右クリック→パスを選択範囲にツールボックスから【移動】をクリック、移動対象:選択範囲に設定。選択範囲を真下にドラッグして、レイヤー「メイン」の画像に2px隙間を空けて配置。
  13. ツールボックスから【ブレンド】を選び、描画色:ffffff、背景色:F60000、グラデーション:描画色から背景色(RBG)、オフセット:70.0に設定。レイヤー「反射」上の選択範囲に対して下から上へまっすぐにドラッグ。レイヤーダイヤログで不透明度:30に設定。


参考書籍:Photoshopプロフェッショナル ロゴデザイン CS3/CS2/CS/7.0対応


0 件のコメント:

コメントを投稿