デザイン

超簡単!ピクセルベースでフラットアイコンをつくろう!

まずはIllustratorでピクセルを扱う下準備をしよう!

Illustratorでウェブやモバイルのスクリーンデザインをする場合に必ず確認するべき点があります。キレイに仕上げるため、必ずチェックしておいてください。もちろんカラーモードはRGBです。

(1)ガイド・グリッドを1ピクセルに設定
(2)変形パネルから「ピクセルグリッドに整合」をチェック
(3)「表示」→「ピクセルプレビュー」をチェック
(4)「表示」→「ピクセルにスナップ」をチェック

blog_pix2

以上で、準備は完了です。尚、編集時に拡大や縮小を行う場合は「ピクセルグリッドに整合」にチェックが入っていると、意図しない変形が起こるので注意が必要です。

最小限のフォルムでシンプルなアイコンをつくろう!

近年主流のフラットデザイン、マテリアルデザインを参考にシンプルで使いやすいアイコンを制作していきましょう。
ここではウェブデザインやモバイルアプリのメニューなど、幅広い用途で使用可能なベーシックなデザインのアイコンを制作していきます。
デザインの要素を極力省くことで、ウェブやモバイルのスクリーンで一定の視認性が確保できますし、制作の工数も最小限で済みます。
基本的な流れとしては、大まかな形を作った後、パスファインダーやペンツールで整形していきます。

blog_pix3

使いやすいアイコンを意識し、アイコンのバリエーションも制作してみよう!

一つのアイコンで多様な使い方をする場合が多々有ります。例えばドキュメントのアイコンなどは「新規ドキュメント」「ドキュメント削除」「ドキュメント複製」「ドキュメントアップロード」など様々な用途が想定されます。使いやすいアイコンを意識するればこれらは同時に制作しておいた方がいいでしょう。
普段使用しているコンピューターやモバイルアプリなどの操作を参考にバリエーションを展開してみましょう。

blog_pix4

今回はIllustratorのピクセルベースでのデザインの準備、アイコン制作について触れてみました。ベクターアイコンはピクセルパーフェクトで制作することで様々なデバイスに対応可能になり、またSVGなどの展開も可能です。皆さんもいろいろなアイコンを制作してみてください!

この記事が気に入ったら
いいね ! しよう

Illustratorworksの動画はこちら
キャラクター・イラスト制作をご検討の方

COMMENT

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

CAPTCHA