Photoshopの基本機能だけでミニサイズのアイコンを作成するチュートリアル
Post on:2011年7月5日
Photoshopの基本的な機能を使うだけで、ミニサイズのアイコンを作成するチュートリアルを紹介します。

[ad#ad-2]
下記は各ポイントを意訳したものです。
Step 1:新規ドキュメントの作成
Photoshopで新規ドキュメントを作成[Ctrl+N]します。
ここでは、幅:14px、高さ:14px、背景(カンバスカラー):透明、にします。

Step 2:アウトラインを描く
鉛筆ツール[B]を選択し、ブラシのサイズを1pxにします。描画色を暗いグレーにし、ページアイコンのアウトラインを描きます。
直線は、始点で[Shift]を押しながらクリックし、終点でクリックすると描けます。

描いたピクセルを消す時は、消しゴムツール[E]で1px単位でできます。
Step 3:ベースのグラデーション
自動選択ツール[W]で、グラデーションを適用する範囲を選択します。新しいレイヤーを作成[Ctrl+Shift+N]し、前景:明るいグレー、背景:ホワイト、をセットし、グラデーションツール[G]を斜めに適用します。

Step 4:ハイライトとシャドウ
新しいレイヤーを作成[Ctrl+Shift+N]し、ハイライトとして内側の上部に1pxのホワイトのラインを描きます。シャドウは、内側の下部に1pxのグレーのラインを描きます。

Step 5:レイヤーのグループ化
レイヤーパレットで全てのレイヤーを選択し、レイヤーをグループ化[Ctrl+G]します。

Step 6:鉛筆を描く
鉛筆を描く際も、最初にアウトラインを描き、内部のエリアをグラデーションで塗ります。描き終わったら、別のレイヤーグループを作成しまとめます。

作成するアイコンセットで一貫したカラーを使用する場合は、使用したカラーをスウォッチに登録しておくとよいでしょう。
Step 7:再利用
作成したアイコンをレイヤーグループで管理し、それらを組み合わせて、さまざまなアイコンを作成することができます。

Step 8:ウェブ用に書き出し
完成したアイコンは、[Ctrl+Shift+Alt+S]でウェブ用の画像フォーマットに書き出します。

[ad#ad-2]
sponsors