Twitterでブログ更新情報を配信中

オリジナルのアイコン作成!基本ツールと10分あれば誰でもできる

サイト作成中にアイコンが必要になることって多いですよね。サービス内容だったり、ステップによる説明だったり、画像よりもイラストのほうがわかりやすい場合があります。今はイラストの無料ダウンロードやFontAwesomeというアイコンフォントを利用できるので、一から作成しなくてもすぐに素材が用意できます。

その一方で色調やオブジェクトの追加で工夫することはできますが、イメージ通りのイラストを探すのは時間もかかりますし、見つかるとは限りません。

そこで今回はオーソドックスなパソコンとスマホを題材に、オリジナルのアイコンを作成する練習をしていきます。自作できるようになれば表現の幅も増えて、制作者としての選択肢も広がりますよ!

はじめに

長方形ツールの使い方やカラーの変更はこちらを参考にしてくださいね。

【Illustrator初心者向け】図形とペンツールで操作に慣れる①

クリッピングマスクやパスファインダーでオリジナル感を出すときは、こちらを読んでみてください。

【Illustrator初心者向け】クリッピングマスクとパスファインダーで操作に慣れる②

パソコンのディスプレイを作成

まずは長方形ツールで四角を描きます。はじめは背景色を黒、線をなしにしてください。

長方形ツールで黒い四角を作成

長方形の角、4か所に点があります。その一点をクリックしたまま内側にドラッグします。角丸の長方形になりました。

四角を丸角にする

先ほどの角丸長方形とは別に、背景色白の長方形を用意します。

長方形ツールで白い四角を作成

パソコンの土台を作成

次にパソコンの土台部分の長方形を用意します。左下と右下の点をShiftキーを押しながら順にクリックして選択します。つづいて四角の内側にドラッグ。

長方形ツールで黒い四角を作成

各パーツを整列していきます。すべて選択した状態で、補助メニューから整列>水平方向中央に分布の順にクリック。

各パーツを整列

パソコンのディスプレイ内のデザイン

こちらは任意ですが、パソコンの雰囲気を出すために作成します。

白い長方形の中に四角を二つ用意します。正方形にしたいときはShiftキーを押しながらドラッグしてくださいね。右側の四角を選択するとバウンディングボックス(枠線と白い正方形のハンドルのこと)で囲まれるので、カーソルが左右の黒い矢印に変わったら右側へドラッグします。

長方形ツールでディスプレイ内を作成

できた長方形をShiftキーでそれぞれクリックしてグループ化します。

四角をグループ化

Altキーを押しながらドラッグすると同じものがコピーされます。3つ目以降はCtrl+Dで繰り返しコピーができます。

同じものをコピー

スマホを作成

パソコンを作成したときの手順でスマホのアイコンを作ります。重ね順を変更することで、後ろに隠れてしまったパーツを前面に出せますよ。

スマホアイコンを作成

FontAwesomeのような簡易版アイコンの完成です!

完成

カラーを変更

最後にカラーを変更してイラスト風に近づけていきましょう。

簡易版のアイコンでは枠線がなかったので、線に色を設定し補助メニューで線幅を太くします。

スタイルを調整

ディスプレイに光沢感を出していきます。ペンツールを選択し、ディスプレイに沿ってアンカーポイントを打ち三角形を作成します。

ディスプレイに三角を配置

パネルからプロパティを開き、不透明度を30%くらいに設定します。半透明になれば大丈夫です。プロパティがないときはメニューバーからウィンドウを選択し、プロパティをクリック。

不透明度30%の半透明にする

イラスト版アイコンの完成です!

完成

【Illustrator】クリッピングマスクした画像はCCライブラリとアセットの書き出しで保存

「はじめに」でご紹介した基本ツールと合わせて、題材を変えてぜひ続けてくださいね。 難しいときは、サムネイル画像のようなイラストを模倣するところからはじめるといいかもしれません。

これで簡易版、イラスト版のアイコン二種類が作れるようになりました。便利な無料の素材を使うのもいいですが、オリジナルのイラストが描けるようになると探す手間も省けますし、技術者として強みにもなりますよ!

サイト制作にかかる時間や費用などのコストを考えて適切に取り入れていきましょう!