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