フリーランスWebデザイナー・ななふの
デザイン、コーディングの勉強記録やTIPSなど

イラレでバナートレース #15『イオンモール東久留米の初売り』5本線ブラシで福の字!

当ブログはアフィリエイト広告を利用しています。
Design
スポンサーリンク
【PR】おすすめの本

管理人が買って良かった一冊を紹介します!

Webデザイナーのお仕事が具体的に分かる!デザイン勉強中の人は読んで損なしの一冊。
¥2,497 (2024/10/08 17:12時点 | 楽天市場調べ)

illustratorでのバナトレ15回目です!

前回に引き続き、やってみたいお正月バナーに取り組みます。

見本は、ピンタレストで見つけたこちらのバナーです。

イオンモール東久留米の初売りセールのバナーです。

お正月風のあしらいが可愛いですね(^^♪

スポンサーリンク

オリジナルとトレース画像

最も苦労したのはご想像通り、

「福」の字です( ;∀;)

他は何とかなったんですが。

前回のトレースで、蝶結びを5本線ブラシで作ったので

できるかな?と思ったんですけどね~

ブラシの作り方でちょっとしくじってしまったのでした( ;∀;)

スポンサーリンク

制作の振り返り

デザインについて自分の勝手な考察(想像)

この項目は、私がデザイナーを目指すにあたって勝手に想像した事を書いています。

自分の為に残している部分なので、飛ばして頂いて全然OKです!!

どんな人に?

イオン東久留米を利用する人

何を伝えたい?

①お得な初売があること

なぜ伝えたい?

初売りへの来場者の促進

デザインのポイントメモ

①文字組・レイアウトについて

メインの「初売」を中央から外し、福の字と並べて配置。

福の字は装飾でお正月感をUPして、華やかさも追加。

②配色について

赤でお正月のイメージ。

「詳しくはこちらから」の枠もお正月イメージで相性の良い緑。

背景のお正月イラストから浮きすぎない感じで配色されている。

③装飾について

福の字を5本線で装飾することで、

おめでたいイメージが強調されている。

お正月のイラストや文字には、5本線を使うのはスタンダードな感じだけど、

実際自分が使うとなるとどこに使えば映えるのか考えたときに、

文字に適応させると思いつけるかどうか…

ものすごく参考になりました!!

苦労した点

「福」の字

福の字はペンツールや円ツールで字のパスを作り、

5本線ブラシを適応させて作っています!(^^)!

線が重なる部分で所々パスを分けています。

下の図は紐をぐるっと通す部分です。下になる線をマスクしているところです。

上に被さってくる線と下を潜る線を別にパスで描いて、

下になる線をマスクしています。

こんな感じで描きました!

そして、何となく似て描けたのはいいのですが…

見本とトレースの福の字を比べると、トレースの方が薄く見えてますよね(+o+)

初めに失敗した時にはもっと薄く見えてしまっていて、

イラレの画面ではそんなに薄く見えないのに、

書き出ししたら全然だめな仕上がりでした(+o+)

これは5本線ブラシの線が細すぎる為の様でした。

なので、ブラシ作り直しました!

1回目に作ったブラシ:1pxの直線を2本引いてのブレンドツールで5本線にしたもの(↓画像の上)

2回目に作ったブラシ:2pxの直線にして、2pxの間隔を空けて5本の線を並べたもの(↓画像の下)

本当は2pxの間隔の部分を赤の直線にするともっと見本に近い線になるのですが

福の字は途中で「初売」の白い梅のイラストにかかる部分があり、

そこには赤線があってはいけないので、赤線は無しで。

今回は完成後に書き出ししたら

全然見栄えが変わってしまうという点で苦労しました(;^_^A

終わりに

お正月のイラストは沢山バリエーションがあるので、

バナーで練習できたのはほんの一部ですが…

一つ一つ、出来上がると嬉しいですね(*´ω`)

バナトレで練習したイラストの作り方が、実際のコンペの制作でも

ものすごく役に立ってます!

これからも継続して、いろんな技を勉強していきたいです!


以上になります。ご訪問ありがとうございました!

コメント