Adobe Fireworksで作る、枠線を入れるだけでカッコよくなるバナー制作テクニック(制作データダウンロード付き)

Adobe Fireworksで作る、枠線を入れるだけでカッコよくなるバナー制作テクニック(制作データダウンロード付き)
デザインって少し手を加えるだけでカッコよくなることもあります。

わたしがWeb制作会社に勤めいていた頃、先輩デザイナーさんに教えてもらったことが今でもよく使います。

今回は「枠線を入れるだけでカッコよくなるバナー」Adobe Fireworksで作るテクニックをまとめてみました。

photo credit: Malabooboo via photopin cc

バナー作成

グラデーションつきの矩形を作る

バナー作成

長方形ツールで矩形を作ります。そのときにグラデーションを付けます。

枠線をつける

枠線をつける

枠線をつけない場合とつけた場合の違いがわかります。

文字を入れてみる

文字を入れてみます。似いれる文字は何でもいいです。

文字を入れる

これだけでもいいのですが、ここでさらに内側に「枠線」を入れてみようと思います。

内側にもうひとつ枠線をいれてみる

枠線を入れる

比べてみる

バナー

左が、内側に枠線あり、右側が枠線無しです。

こだわってみる

内側の枠線を少し改良してみる

枠線を入れる

内側の枠線と同じサイズの矩形を作って「楕円」のグラデーションを作る。楕円の位置はデフォルトより左上に持っていってください。

内側の矩形にマスクをかける

グラデーションの矩形を内側の矩形にマスクをかけます。

内側の矩形にマスクをかける

わかりますかね? 左の上のみに内側の矩形を表示させて右下に行くほど内側の枠線を消している感じが。内側の枠線が自然に消えている表現を表現しています。

今回作ったバナーを比べる

バナー

枠線一つでバナーが変わってきます。
このテクニックはバナーのみじゃなくてグローバルメニューのボタンなどにも使えます。

今回も、作ったpngファイルをダウンロードできるようにしました。
よかったら、使ってみてください。

ダウンロード[banner_03.png](124KB)

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

*