フォトショップの使い方。Adobe PhotoshopやElements(エレメンツ)で画像編集。写真の修整、加工、合成。mixiやブログ、名刺に使おう。
ブログのバナーを無料写真素材を使って作る
今日はブログをカスタマイズしたい人のためにフォトショップを使った『バナー』の作り方を紹介します。バナーにもいろいろありますが、今回ご紹介するのは画面のいちばん上にあり、タイトルなどが表示されている部分のバナーです。

※ライブドアブログ、seesaaブログ、ドブログ、FC2ブログ、ジュゲムなどレンタルブログはたくさんありますが、バナーの大きさを自由に変えることができなかったり、バナー自体まったく変更できないところも多いようです。MTをインストールしている人はカスタマイズがいろいろできますね。
素材を選びます。今回もいつも使っているyahoo!コンピュータの写真素材を使います。
http://computers.yahoo.co.jp/download/jcnland/photo/
![]()
yahoo!コンピュータの写真素材は無料で使えます。自然の景色や都会の風景、季節を感じさせるものなど、いろいろなテーマがありますが、この中から春らしく桜の花の写真を選んでみました。

作りたいバナーの大きさの新規書類を作成します。今回はヨコ800×タテ100pixelsに設定してあります。
![]()
先ほど選んだ写真をダウンロード→解凍してからフォトショップで開きます。かなり大きいです。※この写真をクリックすると大きくなりますが、その写真でも50%の大きさです。

桜の花の写真を新規書類にドラッグ(またはコピー&ペースト)します。写真が大きいために全て表示することができません。

【編集】メニューの【自由変形】で、桜の花を適当な大きさに縮小します。場合によっては回転しても構いません。

バナーの左部分が白いので写真の背景色を【スポイトツール】で吸い取って塗りつぶします。

全体にピンクの色調にするため、まず左側の暗い部分を【自動選択ツール】で選択し白く塗りつぶしました。

レイヤーをもう一枚作り、ピンクに塗りつぶした後、桜の花の部分だけを【消しゴムツール】(エアブラシモード)で消します。

青みがかった桜の花の色が全体の雰囲気にそぐわない気がしたので、桜の花のレイヤーを選んで【イメージ】メニューの【色調補正】-【色相・彩度】で【色彩の統一】にチェックを入れ、桜の花の色を【色相】スライダでピンクに変えます。

ピンクの桜の花のレイヤーを複製し、再度【色相・彩度】で花を赤く変更します。この時点で一番上のレイヤーは赤い桜の花。二番目のレイヤーがピンクの桜の花です。

一番上のレイヤーの桜の左端のあたり【消しゴムツール】(エアブラシモード)で消して赤い部分とピンクの部分をなじませます。こうすることで、ピンクの単一な色調に赤味が混じり、ちょっとした変化をつけることができます。
あとは【ファイル】メニューの【Web用に保存】でjpg形式を選び、スタイルシートで指定する名前をつけて保存し、サーバにアップします。
以上でバナーの作り方を終わります☆
« このページのいちばん上に戻る
« フォトショップ職人のトップページに戻る
Edit







