前回の「Fireworksで作る、いつも使っているバナー制作テクニック その1(制作データダウンロード付き)」の続きです。
photo credit: _mubblegum_ via photopin cc
ページコンテンツ
画像をつかって作るバナー(サイズが足らない画像を使う場合)
横幅494pxのバナーを作るとします。
この画像は横幅442pxで50pxほど足りない画像です。
足りない横幅は、背景に矩形を入れたり、文字など入れて足りない横幅をカバーします。
画像の一部を透過させる
透過させるための矩形を作る
画像と矩形を使ってマスクをします
画像の上に、先ほど作った矩形を重ねます。
この矩形を「カット」(Ctrl + X)して、画像を選択して、「マスク」をクリックします。
マスクはここにあります。
クリックすると、赤枠で囲ったようになります。
ここに先ほど「カット」した矩形を「ペースト」(Ctrl + V)します。
「画像の一部を透過させる」のですが、まだ透過になっていません。
透過させるには、マスクした矩形を選択して「グレースケール表示」にチェックを入れます。
こんな感じで透過ができました。
背景色と文字を入れる
背景色と文字を入れます。
背景色には「#A8C04A」の緑色を使ってみます。(何でも色はかまいません)
矩形を一番下において、矩形の上に画像を配置します。
文字を入れる
文字の色も何でもかまいませんが、背景色と相談になりますね。
今回背景色を緑色にしたので文字色は白で作ってみようと思います。
これだけでもいいかなと思いますが、少し文字に変化をつけます。
Enjyoyに「ドロップシャドウ」を付けて、仕事も~の文字に「光彩」を付けます。
今回も、作ったpngファイルをダウンロードできるようにしました。
よかったら、使ってみてください。