Uiデザイン
退屈なアイコンをオリジナルの傑作にすばやく変換する方法
アイコンは私たちのデザインの不可欠な部分です。これらはさまざまなアクションを示す視覚的な手がかりであり、製品に固有のアイデンティティを与えることができます。しかし、同じアイコンセットをダウンロードし、各Webサイトの各アイコンを以前のものと同じにすることで、その重要性を祝うことを選択することがよくあります。そのような重要なものを扱うなんて方法でしょう！
この問題を解決するために、私はデザイナーがアイコンに視覚的な深みを加え、それらが表す製品に固有のものにするのに役立つガイドを作成しました。このチュートリアルは、主にGoogleマテリアルデザインガイドに触発されています。
Googleマテリアルデザインの原則
どのように言いますか グーグル 、「素材は比喩です。」物理的な世界から視覚的な手がかりを借りて、すべてのインターフェイスを標準化するための新しい視覚言語を作成します。マテリアルデザインの原則は次のとおりです。 アクセシブル これをすばやく適用して、さまざまなインターフェイスの視覚的な魅力とユーザーエクスペリエンスを向上させることができます。
1.シンプルな幾何学的形状と印象的な色を使用する
マテリアルデザインの「フラット」デザイントレンドもフラットな形状に基づいており、アイコンが表す要素を最もよく表す形状を慎重に選択しました。アイコンが表現している要素を最もよく表す形状を慎重に選択してください。
2.微妙な影で深さを追加します
ドロップシャドウは、オブジェクトへの光の影響をシミュレートするため、目をだましてデザインに奥行き感を与える良い方法です。
自然光は、左上隅から来るものとしてシミュレートされることが多いことに注意してください。
3.カラーシェードを使用してドロップシャドウを置き換えます
各色は、視覚的な奥行きをシミュレートするために複数の色相で使用されます。たとえば、Gmailアイコンでは、M字型に使用されているさまざまな赤の色合いを確認でき、封筒のフラップの下には、灰色の暗い色合いが使用されています。
方法：ステップバイステップのデモンストレーション
マテリアルデザインスタイルのより単純なバージョンを適用し、各アイコンに、一般的な「長い影」効果の代わりに、同じ色の3つの色合いのみを使用し、影を平らで短く保ちます。
リソース
始めましょう。
1.稲妻アイコン
アイコンを2つに分割し、上部を高く表示します。これは、両方の形状の交点にシャドウ効果を作成することで実現できます。黄色の3つの色合いを使用します。上が最も明るい色、下が暗い色を使用し、影のためにさらに暗い色を維持します。
2.チャットアイコン
元のアイコンでは、2つのバブルの間のスペースに少し影の効果があり、そこに影を作成します。
下の形状で、空間内で直角の点を選択し、左上隅で直角になるまで左に移動します。
上のバブルを複製し、コピーを下と右に移動します。コピーとその下のバブルシェイプを選択し、パスファインダーを使用してスライスを作成し、前のコピーとの交点を1つだけ保持します。
これで、青の3つの色合いを適用して、最も明るいものを上に、1つを中央に、2番目に暗いものを下に配置できます。
3.チェックマークアイコン
折紙効果を作成します。アイコンを複製し、右上の2つの余分なヒントを削除してから、反対側の左側を削除して、さらに2つの部分を削除します。
左側の折り目を複製し、右側に移動します。
2つの形状を交差させて、シャドウ効果を作成します。次に、影に最も暗い色、最も長い部分に2番目に暗い色、上部に最も明るい色を残して、3つの色合いを適用します。 ### 4。フラグアイコン 
端を丸めることから始め、次に旗の付け根を取り除きます。
折り畳み効果を作成し、2本の交差する線を斜めに描きます。 「パスファインダー」を使用して、旗の形を線で分割し、ベースを灰色のままにして、旗に3色の緑を適用します。
5.ハートアイコン
ハートのアイコンを複製します。
企業はパートナーになることができます
形状の左半分を分離します。
右上の点から下に対角線を引きます。
得られたシェイプをハートでオーバーレイし、それを右に移動してシャドウからシェイプを減算します。ピンクの3つの色合いを適用します。
6.山のアイコン
元のアイコン内の空のスペースは、影を付けることができる場所を示しています。
各ピークから2つの三角形を作成します。
小さい方のコピーを右に移動し、結果の交点を影の形状として抽出します。
左側が最も明るく、最大の三角形が2番目に明るく、中央の影が最も暗いようにして、3色の茶色を適用します。結果を滑らかにするために、コーナーに少し半径を適用します。
7.人のアイコン
左側の人の下部を選択して複製します。そのコピーを右側の人に合わせます。次に、重なり合う3つの形状を選択し、[パスファインダー]パネルから[分割]ツールを適用します。次に、色を実装して終了します。
8.正方形のフローティングアイコン
下部の形状を選択し、上部の中央の先端をひし形のようになるまで上に移動します。
ひし形の上部の形状を複製し、コピーを10または20ピクセル下に移動します。
下の2つの形状を選択し、[パスファインダー]パネルから[分割]ツールを適用します。
結果として得られる交差する形状のうち、下の2つの部分を保持し、余分なポイントを消去します。
真ん中に最も暗いものを割り当てながら、赤の3つの色合いを適用して終了します。
if（$ _ post）
9.文字アイコン
「直接選択（A）」ツールを使用して、文字の形の2番目に高い点を選択します。
「ペン」ツールを使用して、セグメントの右側にポイントを追加します。
余分なポイントができたので、上の2つのポイントを持ち上げて、図のように左右に移動することで、そのネガティブスペースを紙のように再形成できます。
すべてを選択し、「パスファインダー」パネルから仕切り形状を適用します。上部の紙の形を封筒から分離し、封筒の上部を紙の上に複製して影の形を切り取り、3つの青の色合いを適用します。
10.ケーキアイコン
ケーキの底の複製バージョンを分離します。
左右の端を内側に動かすことで幅を狭めます。
結果のシェイプを元のアイコンの上に移動し、最も高いポイントを伸ばしてフロスティングシェイプと重ねます。
「パスファインダー」を使用して、重なり合うすべての形状の分割を作成し、前に作成したケーキの狭いベースの横にある余分なドットを削除します。
フロスティングとキャンドルに明るいオレンジ、ベースに暗い色合い、炎の形とエッジの影にさらに暗いオレンジを適用して、ケーキを完成させます。
アイコンセットの外観を改善する
マテリアルスタイルでアイコンを作成するのは簡単です。よく考えられた幾何学的形状、豊かな色調、ドロップシャドウ効果の適切な組み合わせが必要です。
良いニュースは、このチュートリアルで行ったように、すべてのアイコンを最初から作成する必要がないことです。既存の無料のフラットアイコンから始めて、今学んだ簡単なテクニックを適用できます。
あなたが作ったものを本当に見たいです。コメントやカスタムアイコンを自由に共有してください。
