天使のたまご

アクセスカウンタ

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

<<   作成日時 : 2008/02/15 00:02   >>

ブログ気持玉 0 / トラックバック 0 / コメント 2

このページで云えば、「天使のたまご」というブログタイトルの背景となっている写真、もしくはイラスト、CGなどですね。ページトップの一番目立つ位置にあって、謂わばHPやブログの顔となる大切な画像です。今回は初心者でも簡単なテクニックで作れるアイディアの一つをご紹介しましょう。

出来上がりはこんな感じ。↓

画像

サイズは800×281ピクセル。
3カラム用なので、ちょっと幅が広いです。
2カラム用でスクロールバーを出したくないときは、IEなどのブラウザが自動的に設けるマージンも考え、720ピクセル以下にするとよいでしょう。

さて、用意した三枚の元画像は・・・

画像

合成する画像のメインとなる、自分で撮影した写真。
サイズは1325×976ピクセル。フィルムカメラで撮ったものなので半端。

画像←左右に配置するこの二枚は、上のサイズが312×455ピクセルの縦長、下が455×312ピクセルの横長です。
いずれも素材の配布サイトからダウンロードした、著作権フリーの写真・・・とはいえ、本来なら配布先のサイトをリンクすべきなのですが、何せ6〜7年も前の事でアドレスのメモもなくご紹介できません。ごめんね。m(__)m

この三枚を合成するにあたって一番の問題は、どうやって高さを揃え、且つ幅を足して800ピクセルにするかだと思います。それさえ解決できれば、合成のテクニックそのものは簡単なので。。。

画像まずはメインの画像から、不要な部分を「切り抜き」ツールでカットします。一番見せたいのがこの写真なので、サイズを調整するときも、これをメインに考えるわけですね。
ツールボックスから「切り抜き」ツールボタンを選び、マウスでドラッグして切り抜く範囲を決めます。微調整(ポインタが三角印→範囲の移動、矢印→範囲の拡大・縮小)のうえ、これでよしとなったら、オプションバーの○ボタンをクリックしましょう。

次に左右の画像ですが、左は縦長なので、基本的に切り抜く事は考えません。また右の写真は高さが312ピクセル、トップの画像を300px以上の高さにしては圧迫感がある事と、画像の拡大は粗さが目立ち易い事から、画像の高さは当然312ピクセル以下という結論になります。
あんまり高さがなくても、三枚をつなげるとごちゃごちゃしそうだし、大体270〜300ピクセルの間で調整する事にしました。

こうして凡その見当をつけたら、サイズ変更の試算をします。
「メニューバー」→「イメージ」→「サイズの変更」→「画像解像度」とクリックし、単位がピクセルになっているか確認のうえ、試しに数字を打ち込んでみましょう。初期設定では「縦横比を保存する」にチェックが入っている筈なので、高さと幅、いずれかの数字を変えれば、もう一方は自動的に計算されます。

ここでもまず、メインの写真から。
高さを280ピクセルにしてみると、幅は413ピクセルと出ました。
切り抜きしない左の画像は192px、バランスを考えて左右の画像を同じサイズにしたいので、右も192という事になります。三枚を足すと797px・・・惜しい!あと3ピクセル足りない。(笑)
高さを281ピクセルに変えたら、今度はちょうど800pxになってくれました。(^_^)v
なのでメインの画像を414×281px、左の画像を193×281pxと入力し、「OK」ボタンをクリックしてサイズ変更します。(試算だけのときは数字を入力した後、「キャンセル」でダイアログボックスを閉じて下さい)

次に試算した数字に合わせ、右の横長の画像を切り抜きます。
ここで注意したいのは、ただマウスでドラッグするだけだと、正確に193×281pxの大きさに切り抜けないということ。そのためには「切り抜き」ツールボタンを選択した後、オプションバーで必要な幅と高さを入力します。ただし単位が「mm」になっているので、数字の後に「px」も忘れずに入力しましょう。また解像度は、「サイズ変更」の試算のとき、ダイアログボックスに表示される数字を入力すればいいかと思います。ちなみにこの三枚は、メインが300px、左右が72pxでした。
このように正確な数字を指定したら、範囲を示す点線が動かなくなる位置まで、改めてマウスをドラッグします。そこまでの範囲が切り抜きたい正確な大きさなので、位置を移動させて微調整し、オプションバーの○ボタンで確定しましょう。

これで高さの揃った、足して幅800ピクセルとなる画像が三枚準備できました。
次回はこれを合成した上にテキストを載せ、画像を完成させます。
その後スタイルシートで、どのように指定すればトップに置けるか一例をご紹介する予定。よろしければまたご覧下さいませ。m(__)m

ちなみにこちらは、2カラム用に作った幅720pxの画像。↓

画像

ただし高さがあり過ぎますね。もうちょっと低いほうが好印象かと思います。(^^ゞ

またこうした画像を、トップに使ったページの例。
「Secret Garden」・春の庭

まあ内容はともかく(まだ工事途中)、こんな感じになるとゆう事で。(^^ゞ

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

テーマ

関連テーマ 一覧


月別リンク

ブログ気持玉

クリックして気持ちを伝えよう!
ログインしてクリックすれば、自分のブログへのリンクが付きます。
→ログインへ

コメント(2件)

内 容 ニックネーム/日時
私は超初心者で、ヘッダーへ合成写真を貼り付けたくて色々遣って見ましたが上手くいかず、困って居りました。まもるさんのお蔭で、下手乍ら、へッダーへ合成写真を貼る事が出来ました。嬉しくて、本当に有難う御座いました。
おぼろ月
URL
2008/08/08 09:34
どういたしまして。
私も最初はとても苦労したので、お気持ちはよくわかります。ちょっとずつできていくようになるのって、ほんとに嬉しいものですよね♪
お役に立てて私も記事を書いた甲斐がありました。ブログ頑張ってくださいね。(^_^)v
まもる
2008/08/08 23:49

コメントする help

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