Photoshopの基本機能だけでミニサイズのアイコンを作成するチュートリアル

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

Photoshopのキャプチャ

How to Design Mini Icons

[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

top of page

©2018 coliss