Adobe Illustratorのシェイプツールを使用してベクターシェイプを巧みに組み合わせ、デジタルプロジェクトでつかえる印象的なアイコンをデザインしましょう。
icon-design-main

このサンプルプロジェクトでは、ソーシャルメディアのプロフィール画像に使用するカメラのアイコンをデザインします。電子履歴書のポートフォリオにリンクするボタンとしても使います。

icon-design-intro

プロジェクトを作成する

Illustratorを起動し、「新規」をクリックするか、Ctrl+Nキー(Windows)またはCommand+Nキー(macOS)を押します。Webタブを選択し、右側にサイズを入力します。ここでは、幅と高さを400 pxに設定しました。ヒント:アイコンをデザインする際は、正方形で作成すると便利です。

「作成」をクリックします。

icon-design-fig1

基本的なシェイプを描く

まず、カメラの本体を描きます。

ツールパネルで長方形ツールを選択します。アートボードをクリックしてドラッグし、長方形を作成します。

図のように、長方形の上に重なるように、2つ目の小さい長方形を描きます。 

スマートガイドを参考にすると、2つの長方形の中央を揃えることができます。大きい長方形と小さい長方形の中心を結ぶマゼンタ色のガイドが縦に表示されるまで、小さい長方形の中心ウィジェット(中心の円)をドラッグします。

Illustratorのスマートガイドの使用方法についてさらに詳しく

icon-design-fig2a

次に、フラッシュを描きます。

長方形ツールを長押しすると他のツールが表示されるので、その中から楕円形ツールを選択します。ドラッグして、内側に十字線ガイドが表示されたところが真円です。ちょうどよい大きさのところでマウスボタンを離します。

ヒント:円の縦横比を保持してサイズを変更するには、Shiftキーを押しながらコーナーハンドルをドラッグします。

必要に応じて中心ウィジェットをドラッグして、円の位置を調整します。

icon-design-fig2b

次に、レンズのシェイプを作成します。

楕円形ツールを選択して、マウスポインターを大きい長方形の中央に置くと、画面に「中心 」と表示されます。Alt(Windows)またはOption(macOS)キーを押しながらドラッグして、中央から円を作成します。十字線ガイドが表示され、ちょうどよい大きさになったところでマウスボタンを離します。

画面の端で小さい円を作成します。小さい円の中心をクリックして、大きい円の中にドラッグし、「交差」または「中心」が表示されたら、マウスボタンを離します。

icon-design-fig2c

シェイプを結合する

長方形のシェイプどうしを結合します。

Vキーを押すと、選択ツールに切り替わります。大きい長方形をクリックし、Shiftキーを押しながら小さい長方形をクリックして、両方とも選択します。シェイプ形成ツールを選択して、図のように2つの長方形を通るようドラッグします。

icon-design-fig3

カラーを適用する 

シェイプに塗りのカラーと様々な線の属性を適用します。

Vキーを押して選択ツールに切り替えます。カメラの本体を選択して、プロパティパネルのアピアランスにある、塗りのカラースウォッチをクリックします。右上のスウォッチのオプションを選択し、スウォッチパネル内のカラーをクリックします。次に、線のカラースウォッチをクリックして「なし」を選択し、線を消します。

フラッシュの円も同様に、塗りを白、線をなしにします。

レンズでは、まず外側の円を選択し、Shiftキーを押しながら内側の円も選択します。塗りはなし、線は白に設定します。線幅を太く、5 ptにします。

icon-design-fig4

仕上げに一工夫する

シェイプの角を丸くすると、洗練された印象になります。

カメラの本体を選択します。Aキーを押してダイレクト選択ツールに切り替え、コーナーハンドルをドラッグして、すべての角を一括して丸めます。

icon-design-fig5

web出力用に保存する

アートボードに合わせてアイコンのサイズを変更するには、「選択/すべてを選択」を選択し、アイコン全体を選択します。Vキーを押して選択ツールに切り替えます。Alt+Shiftキー(Windows)またはOption+Shiftキー(macOS) を押しながらコーナーハンドルをドラッグし、円の縦横比を保持したまま中心点を基準にしてサイズを変更します。最後にアイコンの中心をドラッグして位置を変更します。

icon-design-fig6a

「ファイル/保存」を選択します。名前を指定し、Adobe Illustrator(AI)形式で保存します。このファイルはIllustratorでいつでも編集できます。

オンラインに投稿できる最終版を保存するには、「ファイル/書き出し/スクリーン用に書き出し」を選択します。書き出し先とPNG形式を選択します。

ヒント:書き出しをする前にアートボードのサイズを変更できます。拡大・縮小のドロップダウンメニューで幅または高さを選択し、新たにサイズを入力します。

歯車アイコンをクリックし、アンチエイリアスのドロップダウンメニューで「アートに最適(スーパーサンプリング)」を選択します。「設定値を保存」をクリックしてから、「アートボードを書き出し」をクリックします。

icon-design-fig6b

お楽しみいただけましたか。web用にアートワークを保存する方法についてさらに詳しくは、web・アプリデザイン用アセットの書き出しをご覧ください。

01/13/2020
Jing Wei
このページは役に立ちましたか。