バナートレース。デザイナーさんからのお題１。

職業訓練も今月で終了。

最後の１ヶ月は、web制作会社さんに企業実習へ来ています。

接客→厨房→カフェ立ち上げ、店長→体を壊す→職業訓練(いまココ)を経て、働く２児のママである私の日常を書いています。

これから企業実習を選択される方、働くママさん、web業界を目指している方に何か参考になればと思います。



さて、通っているweb制作会社のデザイナーさんに、お題を３つ出していただきました。

１、バナーのトレース

２、バナーの画像選定･加工

３、素材からバナーをつくる





この中の１つめのバナーのトレースについて書きます。(フィードバックもご一緒に)

まずお題は

上が見本、下が私の、見比べながら作成したバナーです。

やっても、どうしてもにせれないところがあって難しかったです同じフォントも入って無いようなので、違うフォントを使って間隔を開けたり幅、高さなどいじって近づけました。


これを見たデザイナーさんよりフィードバック(すぐフィードバックいただけて有り難い！)


比較的よくできてる、と言われたものの製品に影がつきすぎていたり、その左の緑のカラーの入り具合が違ったり、背景のグラデーションも濃い...等ありました。



製品左の緑色は、ふでで描いたんですけど、デザイナーさんはそれにフィルターのぼかし(移動)すると近づくのではないかと教えてくれました。

中央背景のグラデーションも同じく、直線のグラデーションではなく、緑色の円にフィルターのぼかし(ガウス)を使うといいと。(あくまで似せることがgoalなので)

メインのキャッチコピーに私は光彩(外側)で白を入れたのですが、ぼやっとなるので今回は境界線を入れて、ぱきっとさせるといいとのこと。

右手の赤のクリックボタンはベベルとエンボスでボタンぽい効果をつけましたが、最近の流行りはフラットデザインなので、その効果は古い、と光彩内側、ドロップシャドウ、境界線、、、などで効果をつけるといいと聞きました。(ここがまだよく飲み込めていない)



それを聞いてブラッシュアップ(一時間)後

↑私

↑見本

似ましたか？


ヽ(´Д｀;)ノああ、近づいたけど一緒にはならない～一番左の色のチョイスだけやり直して90点(自己評価)にしたいと思います..
ボタンの効果の付け方はまだ解けず..。



ちなみに、現在フリーになっているphoto shop cs2で作成しました。


長くなるので、２、３と分けて書きますね、続きはパート２で




これは、一緒に通っている実習生の女の子が見つけて来てくれたサイト。参考に。

新米デザイナー必見！バナーデザインを効率的に美しくする10のステップ


マナミ