早速まねしてみましょう。
![]() |
| 参考にしたバーナ |
![]() |
| 真似をして作ったバーナ |
並べてみると「今が買い時の方」を、もう少し大きく、マンションの背景にメリハリを付けて、斜めの斜線に★のアクセントを、入れたらもっと良かったなーと思いつつ。文字にグラデーションも入れるべきだった。。。
でもマネをすると、プロレベルに近づけた気がします。違いを的確に理解することが、第一歩です。お勧めの勉強方法です。製作はこのように行いましたよ。
拡大してマネしてみると、ピクセル単位でいろいろな工夫がされていることがわかります。
![]() |
| イラストレータで斜め線を作ってフォトショに貼り付けました。 |
![]() |
| グラデーションで白を上から掛けました。 |
![]() |
| 参考バナーに上下に1ピクセルの青いアクセントがあります。 |
![]() |
| 細いラインでも、入れると締まりますね。 |
![]() |
| 背景の線に沿って、青いタブを作りました。 |
![]() |
| 文字を入れました。参考バナーをよく見ると、微妙に白く光っています。 |
![]() |
| 光彩で、白い文字を光らせました。新着でピカ感がでました。 |
![]() |
| マンションの影を作りました。背景の線に合わせています。白いフチもとってます。 |
![]() |
| 下地ができました。 |
![]() |
| 細かい作りこみが、重要なんですね。 |
![]() |
| テキストを入れました。ポイントを大きく、色を変えるんですね。 |
![]() |
| 白い縁取りをしました。 |
![]() |
| さらに微妙にドロップシャドウをかけます。1ピクセルでも印象が大きく変わります。 |
![]() |
| 字がさらにはっきりしました。完成! |
・広告バーナがたくさんある参考サイト
http://aka-design.sub.jp/bd/
http://banner.keizine.net/
http://www.banner-design-gallery.com/














