Uiデザイン

図像学の超簡単ガイド

カスタムアイコンをデザインするのに平均してどれくらい時間がかかりますか？

数分？ 10分？より長いです？ 10分以内に10個の素晴らしいアイコンを作成する方法を紹介したとしたらどうでしょうか。

図像学は、ブランドの視覚言語に追加されるコミュニケーションの一形態であるため、カスタムアイコンセットは、単純で一般的なものよりも意味があり、魅力的です。ほとんどのデザイナーは、カスタムアイコンの作成方法をわざわざ学ぶことはありません。これは主に、それが学習キューに追加するもう1つのコースだからです。

そこで私は、10分以内に図像学の基本を学ぶのに役立つ非常に簡単なガイドの作成に着手しました（つまり、それを意味します）。

作成できるカスタムアイコンプロジェクトの複雑な形状の作成を開始するためのまったく新しい世界が開かれます。これにより、他の群衆からあなたを区別し、デザイナーとしての競争力を得ることができます。

もともと、私はこのガイドを作成するために触発されましたこのGIF Morgan Allan Knutsonによる、位置情報サービスアイコンを数秒で作成する方法を示しています。私はそれがさわやかで、スマートで、そして速いと思いました。カスタムアイコンを作成するプロセスをわかりやすく説明し、それがいかに簡単であるかを示します。アイコンは、実際には、正方形、三角形、円などの基本的な形状の組み合わせまたは変形から生じる幾何学的形状です。ロゴやアイコンのデザインの経験則は、物事をシンプルに保つことです。

この記事の目的は、単純な形状のみを使用して、それぞれ10秒以内に10個のアイコンを作成することです。

重要な注意点： この投稿ではAdobeIllustratorを使用しますが、SketchやFigmaを使用しても同じ結果を得ることができます。シェイプ上のポイントを追加または削除する必要があるときはいつでも、「ペンツール（P）」を使用します。ポイントの選択と移動は、「直接選択ツール（A）」を使用して行います。

目のアイコン

図のように、色を変えながら最大から最小に向かって4つの円を中央揃えにします。最大の円で、後ろに向かって、左右のポイントを中心から引き離します。最後に、最小の内側の円を次の円の端に移動して、虹彩に照明効果を作成します。

ヒント： 白い円を使用する代わりに、（パスファインダーパネルを使用して）2つの円をそれぞれの下の円から減算するだけです。背景にきれいな結果を作成します。

矢印アイコン

アートでデザインとはどういう意味ですか

最初の正方形のエッジにこれらの余分なポイントを追加する場所がすべてです。 ヒント： 別の方法として、矢印のような形の細い線を描くこともできます。

バッテリーアイコン

ストロークで1つの正方形を使用し、塗りつぶしで2つの正方形を使用します。ストロークの形に1つの塗りつぶされた正方形を含め、2つ目の正方形を外側に置いてバッテリーの先端を形成しながら、プロポーションで遊ぶだけです。

ヒント： ストロークの太さとパディングを試して、視覚的なバランスを維持します。

箇条書きアイコン

単純な正方形から始めます。右に1回複製します。長い長方形に変形します。全体を選択し、1つの正方形サイズのスペースを挟んで2回複製します。

ヒント： 正方形を円に置き換えて、より柔らかな外観を作成します。

クラウドアイコン

3つの異なるサイズの円を描きます。 2つの最小の円を下に揃えてベースを作成し、その間に最大の円を高い位置に配置します。小さな円の1つを変形して、雲の底を作成します。

ヒント： さまざまな円のサイズを使用して、より有機的に見える雲を取得します。

フォワードプレイアイコン

長い長方形を描きます。左端の中心にポイントを追加し、上下のポイントを削除します。三角形が1つできたので、その形状を右に1回複製するだけで、アイコンが完成します。

ヒント： これをさらに速く行うには、正方形ではなく三角形から始めます。

じょうごアイコン

長い長方形から始めます。左端と右端の中心に点を追加します。これで、上端を水平方向に伸ばしれば完了です。

ヒント： 2つの正方形を端から端まで配置し、最上部の端を水平に伸ばします。

再生/一時停止アイコン

平行な3つの長い長方形から始めます。最も幅の広い長方形を三角形に変形します。

ヒント： または、1つの三角形を描画し、その後に2つの平行な長方形を描画します。

位置矢印アイコン

これは、モーガンの位置情報サービスアイコンのリミックスです。正方形を1つ描いてから、左下の点を対角線方向に引き、反対側の点を通過するまで上に移動します。

ヒント： Illustratorでは、Shiftキーを押しながらポイントをドラッグすると、対角線の角度を正しく保ちながら対称性を保つことができます。

位置ピンアイコン

大きな円の内側の円をノックアウトします（パスファインダーパネルを使用）。一番下の点を真下にドラッグし、形成された角度をシャープにします。「ペンツール（P）」に切り替え、「Shift」キーを押しながらその点をクリックします。

ヒント： その転換点で丸みを帯びた角を使用して、外観を柔らかくします。点が選択されている間に、[変換]オプションパネルで[角の半径]の値を調整します。

サウンドアイコン

じょうごアイコンと同じですが、90度回転しています。

ヒント： じょうごアイコンをコピーして貼り付け、時計回りに回転させるだけです。

波のアイコン

直線を描き、その長さ全体に等距離で点を追加します。変更するポイントを下にドラッグし、すべてが滑らかになるまで隅々まで丸めます。

ヒント： 線の先端を丸めて、さらに滑らかな外観にします。

ApeeScapeアイコン

これはボーナスアイコンです。

十分な太さのストロークで正方形を描きます。はさみツールを使用して、右上と左下のポイントをカットします。これにより、形状が2つに分割されます。下半分を上に動かし、全体を反時計回りに45度回転させます。

ヒント： 線の太さやロゴ内部の余白にご注意ください。

C ++をマスターする方法

アイコンは1,000語の価値があります。

画像は千の言葉に値するとよく耳にします。これはアイコンに非常に当てはまります。アイコンは長い文や単語を置き換えて、視覚的なスペース、使いやすさ、美しさを最適化します。シンプルで効果的なアイコンのセットを作成する方法を知ることは、大いに役立ちます。そして、基本的な形状のセットを観察して利用することで、それがいかに迅速かつ簡単にできるかを見てきました。

要約すると、図像学の10の主なルールは次のとおりです。