アイコンのデザインって奥深い！最近のアイコンに使われている、シンプルなすごいデザインテクニック
Post on:2017年3月21日
sponsors
アイコンは、非常に奥深いデザインです。
サイトやアプリのさまざまなアクションを示すためのビジュアルキューであり、プロダクトやサービスに固有のアイデンティティーを与えることができます。
無料のアイコンは確かに便利です。しかしあなた以外もダウンロードして、そのアイコンを利用しています。アイコンのデザインに少し手を加えて、視覚的な深みを与え、アイコンにオリジナリティをだすデザインのチュートリアルを紹介します。
How to Quickly Turn Boring Icons into Original Masterpieces
アイコンの基本的な作り方は、前回の記事を参考にしてみてください。
シンプルな図形を組み合わせて作成する驚きのテクニックが満載です。
下記は各ポイントを意訳したものです。
※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。
- Material Designのアイコンを見てみよう
- ボルト アイコンの作り方
- チャット アイコンの作り方
- チェックマーク アイコンの作り方
- フラッグ アイコンの作り方
- ハート アイコンの作り方
- マウンテン アイコンの作り方
- ピープル アイコンの作り方
- フローティング スクエア アイコンの作り方
- レター アイコンの作り方
- ケーキ アイコンの作り方
Material Designのアイコンを見てみよう
Googleのガイドラインには「Material Designとはメタファである」と定義されています。Material Designは、物理世界から視覚的な手がかりを得て、すべてのインターフェースを標準化するための新しいビジュアル言語です。アクセシブルで、インターフェースの魅力とユーザーエクスペリエンスを向上させるために迅速に適用することができます。
シンプルな幾何学的な形と印象的なカラーを使用
基本的な形をベースにしたフラットデザインのトレンドは、マテリアルデザインに影響を与えました。アイコンを描く要素として、最も適している形を慎重に選択するのがポイントです。
繊細なシャドウを加えて奥行きを追加
ドロップシャドウはオブジェクトに光の効果を与え、デザインに奥行きを与える良い方法です。自然の光を作り出す時は、左上の隅から光を当てるのが一般的です。
ドロップシャドウの代わりに、カラーシェードを使用
シャドウに複数のカラーシェードを使用すると、奥行きはより美しくデザインできます。たとえば、Gmailのアイコンでは、Mの形にさまざまなレッドのシェードが使用され、封筒にもさまざまなグレーのシェードが使用されています。
Material Designのアイコンは、下記からダウンロードできます。
このデザインの原則をもとにしたアイコンの作り方を解説します。基本的には、同じカラーの3つのシェードを使用します。
アイコンのファイルもダウンロードできるので、ぜひ試してみてください。
ボルト アイコンの作り方
オリジナルのアイコンを2つに分割し、上部を上に見えるように移動します。この2つの形が交差しているポイントに、シャドウを適用します。
シャドウには、3種類のイエローを使用し、上部は明るく、下部は暗い色調を使用し、シャドウは最も暗い色合いを適用します。
チャット アイコンの作り方
オリジナルのアイコンでは2つの形の間に空白があり、シャドウの効果があります。カラーシェードで、その空白にシャドウを作ります。下の形にはギャップで直角を形成するポイントを選択し、左上隅に直角を作るまで上に移動します。上の形をコピーし、コピーした形を右に移動します。コピーした形と下の形を選択し、パスファインダーで除算を作成し、前のコピーとの交差点のみを保持します。
シャドウには、3種類のブルーを使用し、、最も明るいカラーを上部に、最も暗いカラーを空白に、最も暗いカラーを下部に適用します。
チェックマーク アイコンの作り方
チェックマークのアイコンで、紙が折り畳まれたエフェクトを作成します。アイコンを複製し、右上の余分な2つのポイントを削除し、その後左の2つも削除します。左の折り目を複製し、右上に移動します。あとは、2つの形を交差させて、紙が折り畳まれたようなシャドーのエフェクトを作成します。
シャドウには最も暗いカラー、長い形に2番目に暗いカラー、そしてトップに明るいカラーを適用します。
フラッグ アイコンの作り方
最初に角を丸めて、フラッグのベースを抜き出します。折り畳まれたエフェクトを作成するには、斜めに交差する2本の線をトレースします。パスファインダーを使って、フラッグの形をラインで分割します。
ベースをグレーにして、フラッグに3つのカラーシェードを適用します。
ハート アイコンの作り方
ハートのアイコンを複製し、左半分を抜き出します。一番上の右のポイントから下に向かって対角線をトレースします。作成した形をハートでオーバーラップし、右に移動してシャドウのシェイプを減算します。
分割した形に合わせて、ピンクのカラーシェードを適用します。
マウンテン アイコンの作り方
オリジナルのアイコンの内側の空白は、シャドウを配置できる場所を示しています。最初に、2つの三角形を作成します。小さい三角形のコピーを右に移動し、シャドウのシェイプとして交差している箇所を抽出します。
最も明るいカラーを左に、2番目を大きな三角形に、最も暗いカラーを中間部分に、ブラウンの3つのカラーシェードを適用します。角を丸くすると、ソフトなイメージになります。
ピープル アイコンの作り方
左の人物の下部を選択して、右の人物の下部に複製します。3つの重なった形を選択し、パスファインダーの分割ツールを適用します。
手前の人物に最も明るいカラーを、奥の人物に2番目に明るいカラーを、シャドウに最も暗いカラーを適用します。
フローティング スクエア アイコンの作り方
下の形を選択し、その中央の上のポイントをダイヤモンドの形になるまで上に移動します。上の形を複製し、空白の形と重なるように下に移動します。下の2つの形を選択し、パスファインダーで分割ツールを適用します。できた形から、2つの下の部分だけを保持し、余分なポイントを削除します。
中央に最も暗いカラーを適用し、レッドの3つのカラーシェードを適用します。
レター アイコンの作り方
ダイレクト選択ツールで、内側のダイヤモンドの上のポイント選択します。ペンツールを使用して、セグメント上のポイントを右側に追加します。余分なポイントがあるので、紙に見えるように、2つの上のポイントを持ち上げ、それぞれを右と左に移動することで、ネガティブスペースを作り直すことができます。すべてを選択し、パスファインダーで除算を適用します。封筒から上部の紙の形を分離し、紙の上に封筒の部分を複製してシャドウの形状を切り取った後に、3つのカラーシェードを適用します。
ケーキ アイコンの作り方
ケーキの底の形を複製し、左右の端を内側に動かして幅を狭めます。作成した形をオリジナルのアイコンの上に移動し、アイシングシェイプに重なるようにポイントを延長します。重なり合ったすべての形をパスファインダーで分割し、最初に作成した狭いケーキベースの横にある余分なポイントを削除します。
アイシングとろうそくには明るいオレンジ、ベースには暗いシェード、炎の形とシャドウのエッジには濃いオレンジを適用して、ケーキを完成させます。
sponsors
