 |
角が切れている画像はこう使おう |
|
せっかくいい素材を見つけたのに、角が切れているために真ん中に持ってくることができない画像というのがありませんか。そういう場合は、思い切って左右のどちらかに寄せて使ってしまえばいいのです。ちょうどブラウザの左上端に角が来るように画像を処理して、HTML上で
<BODY LEFTMARGIN="0" TOPMARGIN="0" MARGINWIDTH="0" MARGINHEIGHT="0">
のように、上下左右のマージンがでないようにレイアウトしてしまえばよいわけです。
 サンプルとしてこんな画像を使ってみましょう。このまま使うのもいいのですが、聖人がちょうど左に来ており、右側に雲が続くというベストな絵柄ですので、これを左端に使うことを想定して加工していきました。
 ちょうど前のページでボーダーを使ったテクニックを紹介しましたので、それを応用してみたものです。レイヤーを重ねて背景色で画像の一部を残して塗りつぶし、塗りつぶした境界線が目立たないようにぼかしフィルタを何回かかけてぼかしました。さらに別のレイヤーにボーダーを重ね、レイヤーの描画モードを変更して薄めにします。適当に文字を入れてできあがり。このサンプルのPSD画像を用意しましたので、よろしければダウンロードして、仕組みを見てください。
 PSDファイルのダウンロード（ZIP形式／StuffIt形式）……約340KB
画像出展：「Internetホームページ用素材集 Photoコレクション」（インプレス刊）
Back<< | トップページへ |
>>Next
|
