天使のたまご

アクセスカウンタ

zoom RSS Photoshop Elements でHP用画像を作ろう♪〜ヘッダーの画像を合成する(2)

<<   作成日時 : 2008/03/04 16:15   >>

なるほど(納得、参考になった、ヘー) ブログ気持玉 3 / トラックバック 0 / コメント 0

「Photoshop Elements でHP用画像を作ろう♪〜ヘッダーの画像を合成する(1)」では、合成に必要な三枚の画像を用意しました。今回はそれを新しいファイルに合成し、サイト名のテキストを載せて完成させます。

同じやり方で合成した、別パターンの背景画像↓

画像

サイズは800×279ピクセル。

画像

こちらは800×277ピクセル、HPに使うとこんな感じになります。
「旧市街古書店通り」フィクション館 / ふぁんたじー工房


合成する画像は高さ281ピクセル、幅が合計で800ピクセルとなるように準備しました。なのでまず、ツールバー→「新規ファイル」とクリックし、表示されるダイアログボックスに800×281ピクセルとサイズを入力して新しいファイルを作ります。三枚の画像を並べるためのキャンバスといった感じですね。
次にツールボックスから「移動ツール」を選び、左側に配置する画像から新しいファイルにドラッグして移動させます。この際、画像と画像の間にわずかでも隙間ができると、右端の画像が納まり切らなくなり、見た目もよくないので、マウスで微妙に調節しながらきっちり合わせるようにして下さい。小さなウィンドウで作業しているとわかりにくい場合がありますから、メニューバー→「ビュー」→「ズームイン」で拡大し、隙間ができていないか必ず確かめるようにしましょう。

三枚の画像をすべて新しいファイルに移動させ、きちんとはめ込んだら合成は終わり、実に簡単でしょ?続けてテキストを入力します。

詳細については「Photoshop Elements でイラストを描こう♪〜テキストの入力と照明効果」をご参照下さい。例に使った画像では、

フォント
Fantasy Factory →Lucida Calligraphy
旧市街古書店通り →富士ポップ
カラー →10%グレー
レイヤースタイル →シャープ(エンボス2)

と指定、レイヤーパレットの初期設定で「通常」となっている重ね方を「オーバーレイ」にしました。後は「不透明度」を、画像に馴染むよう適当にいじっています。ただし「Lucida Calligraphy」のような細い書体は、下手に不透明度を下げると見え辛くなるため、100%のままにしておきました。
テキストの大きさや位置は、後からメニューバー→「イメージ」→「変形」→「自由変形」で修正できます。表示されるバウンディングボックスをドラッグして、画像とのバランスを考えながら移動や拡大・縮小して下さい。
マウスポインタを中央に持っていっても移動の三角印に変わらないときは、「ビュー」→「ズームイン」で画像の倍率を上げると表示されます。

すべてOKとなったらメニューバー→「ファイル」→「別名で保存」で、合成した新しいファイルを、jpeg画像として「マイピクチャ」などに保存します。ただしファイル名は英数半角文字でつけること、また半角であってもスペースやカタカナは使わないようにしましょう。かな全角文字のファイルはサーバーにアップロードできないか、できたとしてもHP上で表示されない場合があります。

この二回でご紹介したテクニックを使い、以下のようなヘッダ用の背景画像を作る事もできます。

画像

これを合成するために用意するのは、

画像

「Photoshop Elements でイラストを描こう♪〜カスタマイズ用の背景を作る」で例に使用した背景用のイラスト画像を、切り抜きとサイズ変更で700×250ピクセルにし、ラインやダウンロードした素材を組み合わせて新たに作ったものと・・・

画像

こちらのフリーの素材サイトからダウンロードした、波の輝きもきれいな海の画像。サイズは600×400ピクセル。何か泳いでますね。。。(^^ゞ

最初にサイズの違う二枚の画像を合成するため、両方とも収まるように700×400ピクセルの新規ファイルを作ります。
それから「移動ツール」でまず素材を、次にイラストをキャンバスとなる新しいファイルに移動し、左端上の隅に合わせて重ねます。この場合、ただ上のレイヤー(イラスト)の不透明度を下げただけでは、せっかくきれいな下のレイヤーの画像が全然映えないので、重ね方を「乗算」にして合成。今度は鮮やかになり過ぎたため(笑)、下のレイヤーの不透明度を85%に調節、ちょうどいい具合になりました。
最後にメニューバー→「レイヤー」→「画像を統合」でファイルをjpeg画像にしてから、「切り抜きツール」を選び、オプションバーの数値をイラスト画像のサイズと解像度に合わせて入力、ドラッグして切り抜きます。
「別名で保存」すれば出来上がりです。

これをHPに使うと →「潮まかせ航海日誌
ページ全体の背景は、自分で撮影した空の写真です。

さてこれで、ヘッダ用の背景画像ができました。
次回はこの画像をどうやってHPに表示するか、スタイルシートの記述の一例をご紹介します。・・・その予定、いつになるかわからないけど。(^^ゞ
無精者でスミマセン。よろしければまた、次回もご覧下さいませ。m(__)m

関連記事
「Photoshop Elements でHP 用画像を作ろう♪〜ヘッダーの画像をHP に載せる」

テーマ

関連テーマ 一覧


月別リンク

ブログ気持玉

クリックして気持ちを伝えよう!
ログインしてクリックすれば、自分のブログへのリンクが付きます。
→ログインへ
気持玉数 : 3
なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー)
驚いた

コメント(0件)

内 容 ニックネーム/日時

コメントする help

ニックネーム
URL(任意)
本 文
Photoshop Elements でHP用画像を作ろう♪〜ヘッダーの画像を合成する(2) 天使のたまご/BIGLOBEウェブリブログ
文字サイズ:       閉じる