いくつかのシンプルなシェイプを組み合わせて、Adobe XD CCでアプリやwebデザインに使用できるアイコンを作ります。
mobile-menu-icon_1000x560

メモ帳と鉛筆のアイコンを作成します。練習用ファイルをダウンロードできるほか、同じような手順で独自のアイコンをデザインすることもできます。メモ帳の基本的なシェイプは、中に線がある正方形です。鉛筆は長方形からスタートします。

mobile-menu-icon_step1

メモ帳の線のように、要素を複製できる部分を探します。リピートグリッドを使用すると、要素を均等に配置することが簡単にできます。

mobile-menu-icon_step2

さらに、角を丸くして鉛筆片側の消しゴムを表現します。シェイプをダブルクリックしてパスに変換します。その後、消しゴムの形状作成と同様に、ポイントを追加して簡単にデザインを変えられるようにします。鉛筆にディテールを加えるために線を追加します。要素をグループ化し、オブジェクトを簡単に移動できるようにします。

mobile-menu-icon_step3

ここまで終わったら、仕上げをおこないます。鉛筆を回転させ、メモ帳の上に移動します。メモ帳の前面に鉛筆が配置されるように、重なり順を設定します。最後にカラーを適用します。白色の境界線と緑色の塗りにしましょう。

mobile-menu-icon_step4

アプリのデザインで新しいアイコンがどのように表示されるかを確認します。

mobile-menu-icon_step_5

これらのテクニックを組み合わせることで、アプリやwebデザインで使用できる様々なアイコンを作成できます。

11/12/2018

提供元:Serge Vasil

Adobe Stock提供元:Leonid

このページは役に立ちましたか。