グラフィック作品

バナー・サムネイル実績01 デザインの解説。コツや作り方、WEB

WEBクリエイターのSOKOです!
ここ「ソコラボ開発室」では
制作したWEBやグラフィックデザインの解説などを紹介して行きます!

・お仕事をご依頼へ
 制作をご依頼の際の作例として参考にしていただけたらと思います。

・WEBデザイナーやグラフィックデザイナーを目指している方は
 デザイン力をアップするための制作のヒントになればと思います。

作ったバナー、サムネイル作品はこれ!

グリッジノイズのレクチャー記事を書いたときに作った広告バナー風のグラフィック

photoshopのグリッチノイズの作り方2つ、WEBデザイナー向け デザインブログ、SOKOLABOのソコラボのソコです! 今日はWEBやグラフィックデザインでお手軽にクールな雰囲気を演出できるグ...

グリッジエフェクトや画面揺れや色ずれの表現を使った視覚効果。
幅広いジャンルに対応できる便利技ですが、
特に「躍動感」「近未来感」を表現する時に一番効果的だと思ったので、。
そこを感じ取って持ってもらう事を目指して作っています。

てなわけでキーワードは「躍動感」「近未来感」です!

レイアウト

レクチャー時に作った段階

ここにまずは文字を入れるスペースを確保したいので被写体を左に移動
文字を入れるのに十分な空間が確保されます、

そして文字入れ、空間があるので十分視認性のある大きさの文字が配置できます。
被写体と文字を若干かぶせて要素の一体感を演出しています。

さらに右下に空きスペースがあるので影を配置、
余白のスカスカ感の解消するとともに画面に躍動感がでます。
やりかたは人物レイヤーを複製して、ベタ塗、ぼかして影っぽくしています。

メインコピーの装飾

・メインコピー
コピーにもグリッジ効果をつけてテーマの雰囲気の演出強化。
さらにメインコピーは目立たせたいので、他に使われていない色を使い目立たせる。
今回はサイバーな感じを出したかったので緑をチョイス。

この感じだ他と緑の文字を入れるだけでは文字が見えにくいんですが、
グリッジ効果で下部分が赤くなっているので、丁度補色の関係(※)で文字が成り立ち文字の視認性があがっています。

さらに文字の下に若干ぼかした緑のオブジェクトを入れました。

※補色:色相の反対色、色相が離れれば離れるほど色の差が生まれ、要素が目立ちやすくなります。

仕上げのあしらい

仕上げに近未来感を増すためにサブコピーを光らせ、文字下に一本の線を入れました。
一本線を入れることで画面にスピード感が足されています!

って事で完成です、それではまた!