Adobe Fireworks使い方、いつも使っているバナー制作テクニック その2(制作データダウンロード付き)

Adobe Fireworks使い方、いつも使っているバナー制作テクニック その2(制作データダウンロード付き)
前回の「Fireworksで作る、いつも使っているバナー制作テクニック その1(制作データダウンロード付き)」の続きです。

photo credit: _mubblegum_ via photopin cc

画像をつかって作るバナー(サイズが足らない画像を使う場合)

横幅494pxのバナーを作るとします。

Fireworksで作る、いつも使っているバナー制作テクニック その2
この画像は横幅442pxで50pxほど足りない画像です。

足りない横幅は、背景に矩形を入れたり、文字など入れて足りない横幅をカバーします。

画像の一部を透過させる

Fireworksで作る、いつも使っているバナー制作テクニック その2

透過させるための矩形を作る

Fireworksで作る、いつも使っているバナー制作テクニック その2

画像と矩形を使ってマスクをします

Adobe Fireworks使い方、いつも使っているバナー制作テクニック その2

画像の上に、先ほど作った矩形を重ねます。

この矩形を「カット」(Ctrl + X)して、画像を選択して、「マスク」をクリックします。

Fireworksで作る、いつも使っているバナー制作テクニック その2

マスクはここにあります。

Fireworksで作る、いつも使っているバナー制作テクニック その2

クリックすると、赤枠で囲ったようになります。
ここに先ほど「カット」した矩形を「ペースト」(Ctrl + V)します。

Fireworksで作る、いつも使っているバナー制作テクニック その2

「画像の一部を透過させる」のですが、まだ透過になっていません。

Fireworksで作る、いつも使っているバナー制作テクニック その2

透過させるには、マスクした矩形を選択して「グレースケール表示」にチェックを入れます。

Fireworksで作る、いつも使っているバナー制作テクニック その2

こんな感じで透過ができました。

背景色と文字を入れる

Fireworksで作る、いつも使っているバナー制作テクニック その2

背景色と文字を入れます。

背景色

背景色には「#A8C04A」の緑色を使ってみます。(何でも色はかまいません)

Fireworksで作る、いつも使っているバナー制作テクニック その2

矩形を一番下において、矩形の上に画像を配置します。

文字を入れる

文字の色も何でもかまいませんが、背景色と相談になりますね。
今回背景色を緑色にしたので文字色は白で作ってみようと思います。

Fireworksで作る、いつも使っているバナー制作テクニック その2

これだけでもいいかなと思いますが、少し文字に変化をつけます。

Enjyoyに「ドロップシャドウ」を付けて、仕事も~の文字に「光彩」を付けます。

Fireworksで作る、いつも使っているバナー制作テクニック その2

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

ダウンロード[banner_02.png](370KB)

コメントを残す

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

*