EC studio EC studio デザインブログ

さて、今回は前回の「Fireworksで立体的なアイコンを作る方法」よりも
もっと簡単にできるアイコンの作り方です。

今回は5分で作れるアイコンのご紹介!!
…の予定でしたが、ブログ記事用に作り直したら7分ちょうどかかりました。
すみません…
操作自体は簡単なので、速い方は5分でできると思います。
ぜひ、5分に挑戦してみてください!

アイコンはこちら、建物アイコンです。

ページ下部で制作動画の紹介や、ベクトルデータのダウンロードも可能です。
会社概要の見出しなどに使ってみてくださいね。


速く作るポイントは2つ

  • パスの変形「歪みツール」を使う
  • フィルター効果「シャドウ(内側)」を2つ重ねて使う

たったこれだけです。

1.平面の形を作る

パースのあるアイコンですが、
まずは真正面から見た図(平面図)をつくります。

2.歪みツールで立体的にする

平面ができたら、1面全部を選択し「歪みツール」で立体的にします。

歪ませる時、中央をつかむと平行に動いてしまうので
角をつかんで動かしてください。

3.シャドウ内側で影と光をつける

歪ませたら、「シャドウ(内側)」を2つ重ねて影と光を作ります。

影の数値はこちら

光の数値はこちら

「シャドウ(内側)」を重ねた時、影と光の角度を対称にするのがポイントです。

番外.「属性をペースト」を活用する

窓ガラスが味気ないので、グラデーションを縦から斜めに変更します。

最初から斜めでつくれば良かったのに、完成間際で気づいた!
っという、うっかりミスをしてもFireworksなら大丈夫です。

まず、どれか1つのパスを斜めに変更し、クリックボードにコピーします。

そして、窓ガラス全部選択し、編集の「属性をペースト」を使うと
選択したパスが全部同じグラデーション(属性)に変わります。

この「属性をペースト」はフォントにも使えます。
これはとっても便利なのでぜひ使ってくださいね。

ショートカットキー:Shift+Ctrl+Alt+V

4.シャドウ内側で影と光をつける

右側の面は、影になっているので「色相・彩度」で暗くします。

5.仕上げ

最後に地面との隣接部分に影の部分つくり、色を調整して完成!

6.完成

完成したのが、こちらになります。
今回もベクトルデータをご覧いただけるようにしましたので、
実際にPNGデータを開いてみるとフィルター効果などを見ることができます。


画像ファイル(ベクトルデータ)のダウンロード(67KB)

詳しい手順については、制作過程の動画をご覧ください。

最後に・・・

今回は「シャドウ(内側)」を使っていますが「ベベル(内側)」でも同じような見た目にすることが可能です。
ただ、「ベベル(内側)」だと斜めのラインがキレイにでない。
Photoshopライブ効果の「ベベル(内側)」を使えば斜めのラインはキレイになりますが、ファイルの容量が重たくなる、操作が直感的じゃない。
と言う点から「シャドウ(内側)」を使っています。

窓ガラスがへこんでるイメージのため「シャドウ(内側)」を使いましたが、
盛り上がったような立体感を出す場合は「ドロップシャドウ」で同じようなイメージを作ることができます。

Fireworksのメリットといえば、
フィルター効果を簡単に、直感的に使える所!
ぜひ、Fireworksを上手に使って、色々なアイコンを作ってみてくださいね。


関連した記事:
投稿者
カテゴリー
人気のエントリー
最近のエントリー
アーカイブ
Copyright© ChatWork, All Rights Reserved. secured by ESET.