32x32で明確な家のアイコンを描画します(ala FatCow)

アイコンの描画方法(サイズ32x32、パートI)



Adobe Photoshopで32x32のアイコンを作成するためのレッスンに注目したいと思います。 このレッスンでは、多くの労力をかけることなくアイコンを描画する方法を学ぶことができます-結果として、インターフェイスのアイコンを描画することはそれほど難しいタスクではなく、忍耐強く、Adobe Photoshopで作業することのアイデアが必要であることを理解できます

40.png39.png

それでは始めましょう! まず、アイコンのサイズが大きくなったりスタイルが似たりしないように、一連のアイコンを描くためのテンプレートを作成する必要があります。



まず、Adobe Photoshopプログラムを実行し、[ファイル]> [新規]メニューに移動するか、Ctrl + Nキーを押して、サイズが32x32ピクセルで解像度が72 dpiの画像を作成します。

アイコンを描く方法

さらに、アイコンが明確でぼやけたエッジを持ち、将来それらがはっきりと対照的に見えるように、グリッドの表示を設定する必要があります(グリッド)、描画の際にガイドされるため、画像はピクセルで構成されているため、表示する必要があります1ピクセル単位のグリッド。

メニューの[編集]> [設定]> [ガイド、グリッドとスライス]に移動するか、キーボードのCtrl + Kを押して、画像に示すように設定します。

アイコンを描く方法

これでテンプレートを作成し、それに基づいて小さな傑作を作成します。 アイコンの影を意味するため、これを考慮する必要があります。 影のサイズをアイコンの下に2ピクセル、両側に1ピクセルにすることを計画しているため、30x30に加えて影がアイコンになります。 便宜上、アイコン画像と対応するスペースを割り当てた影の境界をさらに確認できるガイドを配置しましょう。

03.png

その結果、テンプレートの準備が整い、アイコンの描画に直接進むことができます。

アイコンを描く方法

ホームアイコン

描画する図形を明確に見るために、黒の塗りつぶしを使用します。 だからツールで pen_tool.png ペンツール(K)は、ホームアイコンのベースを描画します。

アイコンを描く方法

次に、目的の色とアウトラインを指定するには、[レイヤー]> [レイヤースタイル]> [グラデーションオーバーレイ]移動しeae6c9からcbcfbaへのグラデーション塗りつぶしを作成ます

アイコンを描く方法

その後、形状が将来的に対照的になるように、この形状に形状を割り当てます。 これを行うには、[レイヤー]> [レイヤースタイル]> [ストローク...]に移動し、線を1ピクセルの太さで868686の色にします

アイコンを描く方法

それは私たちが得るべきものです

アイコンを描く方法

同じツールを使用して pen_tool.png ペンツール(K)は屋根のベースを描きます

アイコンを描く方法

必要な色を指定します-レイヤー>レイヤースタイル>グラデーションオーバーレイ...に移動し、カラーb06a00からカラー8c4d00にグラデーションで塗りつぶします。

アイコンを描く方法

この結果が得られます

アイコンを描く方法

さて、すでにいくつかのアウトラインが表示されていますが、今度はフォームを詳細で補足します-ツールを使用して restange_tool.png 長方形ツール(U)パイプを描く

アイコンを描く方法

eae6c9から色cbcfbaへのパイプにグラデーション塗りつぶしを割り当てます。今回はグラデーションを水平に向けます。

アイコンを描く方法

前と同様に、1ピクセルの厚さと868686の色のアウトラインを追加します

アイコンを描く方法

私たちは...

アイコンを描く方法

バックグラウンドでパイプを非表示にし、ツールを使用して restange_tool.png 長方形ツール(U)は別の屋根要素を描画します

アイコンを描く方法

ce9128から色b06a00へのグラデーションを割り当てます...

アイコンを描く方法

...そして、 a86600色で1ピクセルの太いアウトラインを追加します

アイコンを描く方法

私たちは見て...

アイコンを描く方法

完成した要素と背景へのパイプを非表示にし、再びツールを使用して restange_tool.png 長方形ツール(U)はドアを引きます

アイコンを描く方法

そして、色b06a00から色cd9128へのグラデーションに慣れている操作を実行します

アイコンを描く方法

...そして、ラインを忘れないでください...厚さ1ピクセル、色a75700

アイコンを描く方法

結果を見て...

アイコンを描く方法

結果は非常に素晴らしい家ですが、アイコンに詳細を記入し続けます-クリック restange_tool.png 長方形ツール(U)と屋根裏部屋の窓を描く

アイコンを描く方法

さて、そして、再び、勾配は2e8ce0から7cc6fdです

アイコンを描く方法

1ピクセルの太いアウトラインと色4381c8を割り当てます

アイコンを描く方法

結果を評価する...

アイコンを描く方法

私たちの家はほとんど準備ができていますが、あまりにも平らに見えます-ハイライトの助けを借りてボリュームを追加します。

新しいレイヤーを作成し、ツールを使用して pencil_tool.png 鉛筆(B)は2本の線を引きます

アイコンを描く方法

[レイヤー]> [レイヤースタイル]> [グラデーションオーバーレイ]に移動し、色000000から色ffffffにグラデーションで塗りつぶします。 Blend Modeパラメーターに注意してください-値をScreenに設定します

アイコンを描く方法

次の結果が得られるはずです

アイコンを描く方法

必要な効果を得るには、レイヤーに次の操作を適用する必要があります

アイコンを描く方法

その結果、このような効果が得られます

アイコンを描く方法

今、屋根の下でハイライトを作ります。 新しいレイヤーを作成し、同じツールを使用します pencil_tool.png 鉛筆(B)を描く

アイコンを描く方法

このオブジェクトのグラデーションは過去とまったく同じになるため、時間を節約し、以前に行ったレイヤーからスタイルをコピーするだけです。 スタイルをコピーするには、最初にハイライトされているレイヤーを右クリックし、ドロップダウンメニューで[レイヤースタイルのコピー]を選択します。 次に、屋根の下にまぶしさのあるレイヤー上でマウスの右ボタンをクリックし、メニューから「レイヤースタイルの貼り付け」を選択します。 したがって、黒と白のグラデーションでスタイルをコピーしました-レイヤー自体を操作するために残っています

アイコンを描く方法

結果は次のようになります

アイコンを描く方法

ハイライトを追加し続けます。 各ハイライトは個別のレイヤー上にある必要があるため、スタイルの操作が簡単になることに注意してください...さらに4つのハイライトを描画します-それぞれ個別のレイヤーに

アイコンを描く方法

時間を節約することをお勧めします。最初のハイライトを作成したレイヤーからスタイルをコピーします。 次に、コピーしたスタイルを最後の4つのレイヤーのそれぞれに割り当てます。 また、各レイヤーに対して、対応する操作を実行します

アイコンを描く方法

その結果、次のようになります

アイコンを描く方法

この段階では、家は完成しているように見えますが、それでも土台を強調して仕上げを仕上げることができます。 これを行うには、ツールを使用します pencil_tool.png 鉛筆(B)、色f3f3eaを選択して、次を描画します

アイコンを描く方法

ほぼ完了。 以下に、色b5b8a3のみの別の行を追加します。

アイコンを描く方法

私たちの家が影を追加することは残っています。 これを行うには、すべてのレイヤーを選択し、それらを1つのグループにグループ化します。これがソースになります。 次に、グループのコピーを作成します。このコピーでは、すべてのレイヤーを1つに圧縮します-メニューの[レイヤー]> [レイヤーの結合](Ctrl + E)に移動します。 これが影を適用するレイヤーになり、ソースコードを非表示にします

アイコンを描く方法

次に、[レイヤー]> [レイヤースタイル]> [ドロップシャドウ]に移動し、次のパラメーターでシャドウを割り当てます

アイコンを描く方法

そして、最終的に、アイコンを使用する準備ができました!

アイコンを描く方法

アイコンを描く方法 私のレッスンがお役に立てば幸いです。 それがどのように終わり 、どこで始まったか。



All Articles