この記事を読むのに必要な時間は約 4 分です。

皆様「グッとくるデザイン」してますか??
先週のでざいんぶでは、「【初】外でデザインを学ぼう!」ということで、
枚方市駅の目の前にあるT-SITEへ行きました。
最初の20分くらい小話をしてから、それぞれ読みたい見たい本を手に取って、
良い時間を過ごしました!
それから、最後に山ちゃんが良い提案をしてくれて、
銀行のWebサイトが、なかなかのデザインなので、勝手に添削しようという課題を出してくれました。
Slackに色々書いてますので、会員の皆様は覗いてください!

さて、本題に入りますね。
今回のは、アイキャッチというかただのバナーになっちゃいましたが、
作ってみました!

なぜこのアイキャッチを作成したのか?

ただ純粋にこの子供の画像が使いたかったw
だって、超絶可愛くないですか??
ちなみに元画像がこれです。

ね?かわいいでしょ?
この画像から想像出来るアイキャッチを考えようと思って、
今回は【画像から選んで、どんなアイキャッチが作れるか?】をやってみました。

制作手順

1,まずは上記に書いているように、画像から選びました。
2,何をテーマにしようかな?と考えたときにやはり実績にしたいってうのがあったので、ファッション系にしようと思いました。
それから、秋服だとポイントにならないなと思ったので、「デニム」にしました。
3,Pinterstから参考となるアイキャッチを探します。
検索のときに、ダイレクトに「子供 アイキャッチ」とかやっても出てこないので「子供服 バナー デニム」調べて出てきたもので使えそうなものをピックアップしました。
(どんなものをピックアップしたか知りたい方は、個別に聞いて下さいませ!)

Photoshopで作業
4,まずは、画像を編集する作業に入っていきます。
被写体を真ん中あたりで2分割します。
5,両側に配置して、それぞれを同じ大きさでクリッピングマスクします。
6,真ん中に四角を作ります。
カラーは、画像のデニム部分をカラーピッカーで取って、入れました。
ここがポイントなんですが、うっすら円のグラデを入れてます!
レイヤー効果からグラデを入れると直線にしか入れれないので、
四角の上に、レイヤーを作って、それにグラデーションを作成してます。
7,一番上のレイヤーになるように、白のラインを入れます。
8,後は最後に文字を入れて終わりです。

デザインの意味

・今回のターゲットとしては、セレブにしましたw
なので、文字はお高級な雰囲気の文字にして、セレブ感を出しました。

・全体的に暗めにして、重厚感を出しました。

・文字を少なめにして、あえて余計な装飾をなくして、ポップ感を無くしました。

・子供服ですが、買うのは大人のセレブなので、左が好きそうな感じにしました。

まとめ

今回画像がめっちゃ良いので、レタッチしなくて良かったんですが、
普段かなり苦手なので、ちょっとは練習しといたほうがいいなと思いました。
デザインって作るほどに、色々発見があって勉強になると感じました。
あと、Wizcoのサイトをリデザインしたい…したい…します…

The following two tabs change content below.
heiji

heiji

服屋など接客業を経て、現在はWEBデザイナー、コーダーをしています。ユーザーが見やすくて、迷わないWebサイトを心がけてます!楽しくてふざけた事が好きです!ゲーム、マンガ、旅行が大好きです!そして、万年ダイエッターw