退屈なアイコンをすばやくオリジナルの傑作に変える方法

アイコンは私たちのデザインの不可欠な部分です。 これらはさまざまなアクションを示す視覚的な手がかりであり、製品に固有のアイデンティティを与えることができます。 しかし、同じアイコンセットをダウンロードし、すべてのWebサイトのすべてのアイコンをほぼ同じように見せることで、その重要性を祝うことを選択することがよくあります。 そのような重要な何かを扱うなんて方法。

この問題に対処するために、私はデザイナーがアイコンに視覚的な深みを加え、それらが表す製品に固有のものにするのに役立つガイドを作成しました。 このチュートリアルは、主に影響力のあるGoogleマテリアルデザインに触発されています。

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.ハートアイコン

ハートのアイコンを複製します。

形状の左半分を分離します。

右上の点から下向きに対角線をトレースします。

結果の形状をハートと重ねてから、右に移動して影の形状を減算します。 ピンクの3つの色合いを適用します。

6.山のアイコン

元のアイコン内の空のギャップは、シャドウを配置できる場所を示しています。

各ピックから2つの三角形を作成します。

小さい方のコピーを右に移動し、結果の交差をシャドウシェイプとして抽出します。

左側を最も明るく、大きな三角形を2番目に明るく、中央の影を最も暗くして、3色の茶色を適用します。 結果を柔らかくするために、いくつかのコーナー半径を適用します。

7.人のアイコン

左側の人物の下部を選択して複製します。 そのコピーを右側の人に合わせます。 次に、重なり合う3つの形状を選択し、「パスファインダー」パネルから「分割」ツールを適用します。 次に、色を実装して仕上げます。

8.フローティングスクエアアイコン

下の形状を選択し、その中央の上の点をひし形のようになるまで上に移動します。

上部のひし形を複製し、コピーを10または20ピクセル下に移動します。

下の2つの形状を選択し、「パスファインダー」パネルから「分割」ツールを適用します。

結果として得られる交差した形状から、下の2つのピースのみを保持し、余分なポイントを削除します。

真ん中に最も暗い部分を割り当てながら、3色の赤を適用してまとめます。

9.文字アイコン

「ダイレクトセレクションツール（A）」で、封筒の形の2番目に高いポイントを選択します。

「ペンツール」を使用して、セグメントの右側にポイントを追加します。

余分なポイントができたので、上の2つのポイントを持ち上げて、図のように左右に動かすことで、そのネガティブスペースを紙のように変形できます。

すべてを選択し、「パスファインダー」パネルから分割を適用します。 上の紙の形を封筒から分離し、紙の上に封筒の部分を複製して影の形を切り取り、3つの青の色合いを適用します。

10.ケーキアイコン

ケーキの下部の複製バージョンを分離します。

左右の端を内側に動かして幅を狭くします。

結果の形状を元のアイコンの上に移動し、アイシング形状と重なるように高いポイントを拡張します。

「パスファインダー」を使用して、重なり合うすべての形状の分割を作成し、前に作成した狭いケーキベースの横にある余分なポイントを削除します。

アイシングとキャンドルに明るいオレンジ、ベースに暗い色合い、炎の形と影のエッジにさらに暗いオレンジを適用して、ケーキを完成させます。

アイコンセットのルックアンドフィールを改善する

マテリアルのスタイルでアイコンを作成するのは簡単です。 必要なのは、思慮深い幾何学的形状、大胆な色合い、およびドロップシャドウ効果の適切な組み合わせだけです。

幸いなことに、このチュートリアルで行ったように、すべてのアイコンを最初から作成する必要はありません。 既存の無料のフラットアイコンから始めて、今学んだ簡単なテクニックを適用することができます。

ご意見をお聞かせください。 以下にあなたの考え、コメント、フィードバックを残してください。

•••

Toptal Designブログでさらに読む：

• デザインの原則とその重要性
• 最高のUXデザイナーポートフォリオ–刺激的なケーススタディと例
• ゲシュタルトのデザイン原理を探る
• Adobe XDとSketch–どのUXツールがあなたに適していますか？
• トップデザイナーが使用する10のUX成果物