こんにちは！笹岡です。(^^♪
今日は曇りですね。桜が咲いてきているので、雨で散らないで欲しいなと思います。
ここ二日ほどブログを書いていませんでした…すみません。
今日は二日間で作成したバナー制作のお話しをしたいと思います。
バナー制作
二日間のうち、一日半はインターンシップブログのバナー制作をしていました。
Illustratorで書き起こして出来た初代作品が、こちら。
ふむ…
べったりしてて何とも言えない。全体的にもっさりしていますね。
自分で振り返っても(;^ω^)ナンジャコレハ…
おそらく春だし、植物たちも活き活きしだして実習先もふたっぱさんだし、新しい気持ちで緑使っちゃえーって心意気だったと思います。
うーん、これは流行りのフラットデザインと言ってもちょっと通じないですねぇ。そもそもなんで、Illustratorで作ったし！ バナー作るんよな？webだよね？photpshopは使わないのか？何だあのフォントの黒は。緑の活き活きさを書き消してるではないか！
Illustratorに逃げてしまいました。photoshopが苦手である事が露呈されました。
画像配置してみた
画像配置してフォントの種類を変えてみたらどう？と実習先の担当者さんにこんなデザインにしたかったんじゃない？と提案されて見本で見せてもらったのがこの二つのデザイン。
カッコイイー|дﾟ)！！シンプルだけどオサレ！
こちらの意図が手に取るように分かるなんてすごいです。笹岡もこういうバナー作りたいデス！という訳で提案頂いた2作品より作ってみた2代目が、こちら。
ちょっとコツ掴めたかな？画像が背景に入ると印象が変わりますね！
この画像は光が溢れるような雰囲気で水玉が配置されています。なので奥行きと双葉マークが活き活きしてるように見えます。このバナーは個人的に好きです。が、
色に苦戦した。またお前か…
背景が白に青を持ってきても、暗いところだとまた見づらい。どうしたものか。
photoshopで使えるレイヤースタイルと言う効果。
文字に影を付けて浮かび上がらせたり、光彩を付けて暗い配置場所でも文字が分かるように差別化出来たりと何かと便利なレイヤースタイルも、授業を受けたとはいえ余り使えていなかったというか忘れていました。すみません、先生方。
改めて実習先で教えて頂いて、バナーサンプルを使ってコピーをして学習していると、webでの可読性は印刷物とは全く違う事だと理解しました。
これがコピーしたバナー見本です。
『つるつる♪』ってめっちゃ難しいー！！全然ノリノリじゃないし！このキラキラした円はどうしたら出せるんじゃいっ！
試行錯誤しながら、真似していくと、表現がとても多彩で、文字なんかも傾けさせたり、字下げしたり、大きさ変えて強調させているんですね。
いかに小さいスペースの中に重要な項目を一目で認識させるか、可読性を身をもって知りました。
ハートも手強かったし…。ぐぬぬ。
バナー完成版
学習出来たところで、もう一度再構築してみた完成版がこちら。
デザインの雰囲気は変わりましたが、ドロップシャドウなどの効果やフォントの種類を変えたり、色は画像の雰囲気から明度、彩度、色相がまとまるよう意識して作ってみました。
なかなかよいできかなと自負しております。(´ω｀*)
バナー制作は大変な作業でしたが、出来て良かったのと新しいことを学べたのと、ホントにたくさんの気付きがあったのでとても満足しています。
これを機にバナーに注目してコピペしてみようと思います。中々面白い作業でございました！
今見たら間違えてるところ発見してしまいました。皆さんは分かりましたか？
今日もありがとうございました！ではまた明日～