サエない日々にさよならを。

Fireworksでクリスマスイラストをがっつり描いてみた。解答編。

先日4日に書いたエントリー『Fireworksでクリスマスイラストをがっつり描いてみた。』の制作内容の種明かしです。どうやって制作したかわかりましたでしょうか?それでは解説いきます。

※今回のエントリーは『Fireworks Lover Advent Calendar 2012』に参加しています。


ラフ


こんな感じで作ろうかとイメージがりがり描き込んで固めていきます。
イラストの場合、大抵描いている途中であれこれ変わることが多いので、思いついたイメージやらキーワードは全部書き込んでます。結構ぐちゃぐちゃです(逃)。


背景


まずは長方形ツールで500px正方形を描き、色#B20000、テクスチャ:穀粒を14%に。
その図形の上に複製して、テクスチャは解除、色#B30303で、テクスチャ:アーガイル柄を配置。

赤い枠の中の白ラインは2pxで引いてます。

※アーガイル柄は、『indigonote』さんで配布しているアーガイルのテクスチャ『Fireworksで使えるアーガイルチェックテクスチャ50』の『agch_35』を使用させていただきました。


それぞれのパーツ



ポインセチア、ひいらぎの飾り、星型の飾り、雪の結晶、サンタシルエット、帽子をパスで描きます。
(シルエット、雪の結晶はわかりやすいように色をつけています)

ポインセチアの影部分の制作



葉のベタ部分をもう一枚複製。その上に#000000でざっくり影部分を描く
パスパネル『パスの交差』で交わっているところの部分だけを切り抜き、乗算に。
→切り抜いた部分を透明度50%に調節。


女の子を描く



先にあたりのラインを描いた後、パスパネル『ストロークを塗りに変更』、髪の毛のヌキあたりをきれいに調整(図は判別しやすいように白で描いてます。)


その後、髪の毛やまつげなど、表情を左右する重要なところへパスで描き込み、位置調整を行った後、ベースになる色からライン下に配色していき、影の部分もきっちりと書き込みをしていきます。

特に髪の毛と目のあたりは念入りに。ここめっちゃ重要なんで時間かけれるのであれば存分にかけましょう

表情の仕上げに目元に薄くアイライン(#FF4D4D、透明度28%)、口にはルージュを描き、頬にはチーク(#FD725Eの小さい円をぼかし、透明度30%)を配置。


レース


円を描いて中身を切り抜き、複製しながら適当に配置して、片側だけを制作。
パスパネル『ポイントをなめらかにする』をして、コピー→左右反転、結合。その後、各所調整します。
最後に帽子とジャケットにバランス良く配置。


(レースの作り方は井上のきあ著『Photoshop+Illustrator Design Technique』内で紹介されているIllustratorでのレースの作り方を参考にしました)


ちなみに先程のパーツもそうですが、私はパスで最初から描いてます。『ベクトルパスツール』で鉛筆のように描く手もありますが、パスの点が自分の思うようにならないんで余程のことがない限り使いません。最初からパス使って描くほうがなめらかになるような気がするのは私だけでしょうか…?


配置



それぞれ作ったものを背景の上に複製して配置します。バランス見ながら調整を。
ここで星のかざりにドロップシャドウ(距離:8、不透明度:39、柔らかさ:6、角度:315)を、女の子の影として、女の子全体を複製→ビットマップ化(Ctrl+Shift+Alt+Z)→カラーの塗りを#000000(黒)で不透明度50%にして、女の子の後ろ側にずらして配置しています。


効果と最後の仕上げ

サンタまわりの効果


サンタシルエット自体に『光彩(光輪のオフセット:7、不透明度:24、柔らかさ:48)』をかける。

大きさが違う円を幾つか描いて複製→適当にバランスをみながら配置。『ぼかし(ガウス)』をぼかしの半径を2.3で入れる。それらすべてをもう一度複製→複製した分を『ぼかし(ガウス)』ぼかしの半径を0.4に。

白のラインは、パスを1pxにして帽子から出てきている感じで適当に描いた後、『光彩(光輪のオフセット:8、不透明度:65%、やわらかさ:9)』をしています。


十字の光


図形の『星』を白で描いて、辺数:4、角丸:2、半径:2に。
あとは縮小して、各所配置した後、『ぼかし(ガウス)』をぼかしの半径0.9で調整。


背景の光


いちいち書くのめんどかったんで図で一括でw



リボン



リボンを描いた後、『Merry Christmas』をEdwardin Script ITCで描く。
その後、リボンのうねりに合わせてパスを描いて、先程書いたテキストと一緒に選択して『テキスト』メニューの『パスの結合』(Ctrl+Shift+Y)。
あとは、リボンに合わせて配置&大きさ調整します。



…と、いうわけでお疲れ様でした。以上です。

ちなみに、制作期間は最終的な調整含めて約1日半です。
実際やっていると、アンバランスなところが出てくるので、その調整とかしてるとどうしても時間かかってしまうんですよね…。特に人物の表情はちょっとした配置で変わってくるので結構時間かけていじってしまいます(口元変えたのもそのせい)。

特に今回は女の子のラインが…。アウトラインがガタガタに崩れまくってまあどうしようかと。泣きそうになりました。そこんとこしっかりしてくれよFireworks!

パスパネルがどんどん充実してきている!


Fireworks CS4が出た当時、あの有名なカーニング問題がありつつも、それなりの改良がされている中で出てきた機能のひとつ『パスパネル』。

それまでいちいちIllustratorでないとできないことが多かったので、これで少しは作業工程が少なくなる!と喜んだものです。そこからさらにバージョンアップで改良されるとともに、パスパネルも充実。機能が増えるのがわかるたび、密かに喜んでましたw

今回は、アウトライン化、パスの切り抜き等の紹介になりましたが、ブレンド機能やパスの反転、押し出しなどその他おもしろい機能もありますので、ぜひ自分なりの操作を見つけて、制作に活かしていただければと思います。


アドベントカレンダーもあと残り10日。
その他の方々のFwエントリーは私も非常に参考になっています。ぜひ合わせてご覧ください。
以上、『Fireworks Lover Advent Calendar 2012』2回目エントリーでした。

※今回のエントリーは『Fireworks Lover Advent Calendar 2012』に参加しています。


More read

改めて見積りトラウマに向き合う。-『フリーランスのための"お見積"の考え方勉強会』に参加してきました。

さくらのレンタルサーバーのMySQLもVer.5.5→5.7に変更+a-blog cms設定メモ。

さくらのレンタルサーバのPHPバージョンとa-blog cmsのバージョンを同時に変更対応したメモ。

《さくらのレンタルサーバ》BlogのSSL証明書を有料SSLから無料SSLに設定変更を行ったメモ。

私が2017年に参加したセミナー・イベントまとめ。《7月〜12月編》

私が2017年に参加したセミナー・イベントまとめ。《1月〜6月編》

Profile Illust

brightflavor

フレーズライン ・ Webデザイナー・グラフィックレコーダー

愛媛県松山市でWebデザイン、UIデザインのお仕事を主に、イラストやアイコン制作、グラフィックレコーディングなども対応中。

制作使用アプリ…Adobe Photoshop、Illustrator、Adobe XD(元Adobe Fireworks Loverなので、今でもご要望があれば使用)。

また、ディレクションとプロジェクトマネジメント系の知識も進行上大事と考えて勉強しているおかげで、デザイナー視点からの提案依頼や進行管理のお仕事も徐々に増えつつあり。

ねことコーヒー、マイナーなマンガと心理学、真相追求系のお話、料理とダンナが好き。気になるセミナー・イベントがあれば、お金と時間と体力が許せば大抵行く。

Entry list

Caterogy list

Tag croud

RSS 2.0 Login