暑さが和らいできましたね。
今回は、初めてロゴやアイコン作成に挑戦する人のために大まかな手順をご紹介しようと思います。
完成物によって多少やり方は変わると思いますが、この内容を押さえておけばある程度カバーできるんじゃないでしょうか。
1.手書きラフ
手書きで大まかなラフを描きます。
この時点でゆらゆらの線でも、下手くそでも問題ありません。
Googleの画像検索である程度のイメージを掴んでおきましょう。とくにアイコンの場合、ユーザーの想像とかけ離れているとユーザビリティを損なうので、共通認識を押さえつつオリジナリティが加わるといい感じのものができます。
2.写真撮影＋貼り付け
ラフ画をスマホなどで撮影し、パソコンに送ります。
3.ベクターでなぞる
Illustratorを開き、先ほどの画像を取り込みます。
取り込んだ画像を透明30%くらいにして固定(Ctrl+2)します。
ラフ画に沿ってベクターの線を引いていきます。
全部なぞり終えたら一旦グループ化し、線だけのグループとして残しておきましょう。
後で線幅を変えたり、細かい調整が必要になった時、この線グループから始めると早いです。
必要最小サイズにする。
Web用のアイコンを作る場合、線幅は最低1px以上必要です。
ラフ画は役目を終えたので消します。
4.ベクターのアウトライン化
線のグループをコピーし、アウトライン化します。
5.パスファインダーで分解
パスファインダーで分解します。
6.余分なパーツを削除
グループをダブルクリックし、完成品に不要なパーツを削除します。
この時、線も塗りもないパーツがこっそり含まれているので全部削除します。
適当な線を引き、塗りなし・線なしにします。
自動選択ツール(Y)を使い今描いた線を選択すると消すべきパーツを全て選択できます。
必要なパーツや関係ない他のレイヤーが消えてしまわないように注意しましょう。
また、線に隙間があると後で塗りが残らなくなってしまうので、必要に応じて隙間を埋めておきましょう。
7.パスファインダーで結合
グループを選択し、パスファインダーで結合します。
8.塗りのベースを用意
全体を覆う四角を描き線と違う色に変更します。
完成品の配色で面積の一番広い色にしておくと効率的です。
四角をレイヤーの一番後ろに配置します(Ctrl+Shift+[)。
9.パスファインダーで分割
線と面を選択しパスファインダーで分割します。
10.配色
完成イメージに沿って配色していきます。
11.完成
以上で完成です。
オリジナルのアイコンを作るときは大体この手順で作成しています。
単色や線だけで構成するならもっと簡単ですね。1〜3までは同じです。
