サイトや広告バナーをつくる際に、イメージアイコンを使うことがよくあります。
ただ、配布されているイメージアイコンを使用する場合、
「形を少し変えたい！」
「複数のアイコンを組み合わせて使いたい！」
など、サイトなどの雰囲気に合うよう、手を加えたくなる時があります。
ただ、データの加工が不可だったり、加工するのに時間がかかったり…
時間短縮のために配布素材を使ったのに意味がなかった！なんてこともあります。
そんな時はイメージアイコンを
最初から自分で作る！ というのも1つの方法です。
今回は、Fireworksを使って簡単に立体的なアイコンを作る方法を
ご紹介したいと思います。
作業は単純。
- パスの合体
- パスの切り抜き
- 拡大縮小
の繰り返しです。
1.形をつくる
- 楕円を2つ描きます
- 楕円の上に四角を重ねて合体させます
- 合体したパスの上にさらに四角を重ねて切り抜き、余分な部分をカットします
- 合体パスを楕円パスの下に配置して濃い色をのせて立体感をだします
2.影とハイライトをつくる
- 先に作った楕円をコピーして2つつくり、1つの楕円は少し縮小します
- 楕円を並べて三日月の形になるよう切り抜きます
- 三日月を重ねて影にします
さらに複製して反転させればハイライトになります
- 反転させ影とハイライト部分をつくります
3.円錐をつくる
- 楕円を2つつくり、1つは横幅だけを小さくします
- 楕円に重なるように四角をつくります
- 楕円に重なるように四角をつくります
- 四角の下の部分を変形ツールでゆがませます
- 楕円と四角を合体させます
- あとはひたすらそれの繰り返し、形をつくっていきます
4.色を付ける
形がある程度できたら、色をのっけていきます。
ポイントは、
- 右と左のどちらから光があたってることにするか
- 中にあるものは濃く、底になるほど濃くなる
これを意識しながら色をつけます。
そして、できたのがこちら！
画像ファイル（ベクトルデータ）のダウンロード（195KB）
細かい行程は省きましたが、アイコンができるまでを動画にとってみたので
詳しくはこちらをみていただければと思います！
動画撮り終えたあと、ちょっとハイライトをいれたので
制作時間は、トータル22分くらいです。
今回はサイズが大きいので、パスをつけてキレイな陰影をつけました。
もっと小さなサイズのアイコンであれば、パスではなくドロップシャドウなどを使って陰影をつける手法もあります。
これだと、もっと短時間にアイコンがつくれます。
次回は、↓これを５分で作る方法をご紹介します！
関連した記事：
■ 「日本でいちばん社員満足度が高い会社の非常識な働き方」
この記事へのコメント (0)
コメントはまだありません。
ページの先頭に戻る
コメントを投稿