Banner｜繊月の星景写真ブログ

アーカイブ : banner タグ

星景写真ブログ用バナーの作成方法

さて、先日作成した星景写真ブログ用のバナーですが
少々問い合わせがありましたので、作り方を書きたいと思います。

ちなみに私、Photoshopしか使えないので説明は全部Photoshopで説明します。PhotoshopElementで出来るかどうかは分かりません(^^;

今回の写真は１月２日に撮った↓こいつを使ってみましょう。

まずはPhotoshopを開いてファイルメニューから[新規]を選択。
作成したいサイズを書きます。
今回も141×50pxにしてみました。

次に作成したものの上に先ほどの月の写真をドラッグして、141×50の中にうまく収まるように調整します。
そしたら文字ツールを使って「星景写真」の文字を書き込みます。

文字のフォントは好きなもので良いとして、そのままだと文字間隔が広すぎる場合が多いので、下の写真の「AV」と言う箇所で文字間隔を狭くしたほうが締まりが出ると思います。

そして次に、シェイプを使って丸みを出します。
慣れないと面倒かもしれませんけど、慣れるとすぐ出来ますし、他の図形‥例えば楕円や真円、様々な形の切り抜きなんかに応用できるので覚えておくと良いかもです。

左の長方形ツールから「角丸長方形ツール」を選択。
次に上の「丸み」を好みで調整。今回は「16px」に設定しました。

そしたらカーソルを画像の対角線をなぞるようにぐぐ～～っと広げて、シェイプの形を作ります。
丁度したの画像みたいな感じで、縁取りの線が出てればOK!。
今作ったシェイプレイヤーは画像の下のレイヤーにもってきておいて下さい。

そして画像のレイヤーを選択し、そこでマウスの右クリックメニューから「クリッピングマスクを作成」を選択。

すると画像がシェイプの形に切り取られます。
背景を削除すれば透明になるので、角丸長方形の画像が出来上がりました！

これで完成でも良いのですが、せっかくなので周囲の縁取りもしてみましょう。
シェイプレイヤーを選択して、右クリックから「レイヤーの効果」を選択。

レイヤースタイルのポップアップが出るので
「境界線」を選択して、サイズを１～２pxに、位置を内側に、カラーはお好みで。
今回、カラーは写真や文字の色と合わせて灰色にしました。

これでバナーは完成！
あとは保存するだけです。メニューから「別名で保存」を選んでも良いのだけど、「Webおよびデバイス用に保存」のほうが楽かも。私はいつもこっちです。

するとまたポップアップが出てくるので、GIF形式を選びます。
重要なのが下の画像の「マット」と言う部分で、ここにブログの背景色を指定します。
うちのブログは黒基調なので黒を指定。背景が白の方は白を指定して下さい。

え？違う色を指定したらどうなるかって？
それは‥やってみれば分かりますｗ
透明にした縁の部分がギザギザっぽくなって滑らかになりません(^^;
そんなこんなで、出来たのがコレ↓

今回は説明のためとブログの記事もいっしょに書いたので１時間近くかかってしまいましたけど、バナーの作成だけなら慣れれば５分もかからないでしょう～