81 繰り返し処理を考えたインパクトのある背景画像

81　繰り返し処理を考えたインパクトのある背景画像
制作・文＝沖塩慶悟（（有）ムーニーワークス）

To Use XHTML CSS JavaScript Photoshop Illustrator Fireworks 透過PNG

---

【1】メインの背景画像を作成する。単一色で一面を塗りつぶしたレイヤーにフィルタメニュー→“描画”→“雲模様”を使用して最背面の背景をつくる。色相彩度で好みの色にする。次にレイヤーメニュー→“ラスタライズ”→“シェイプ”を使用して地平線を作成し、グラデーションをかける



【2】「PS Brushes.net」（www.psbrushes.net/）や「Brusheezy」（www.brusheezy.com/）などのフリーのブラシを使い、よりグラフィカルな背景画像に仕上げる



【3】中心部にくるグラフィカルな画像ができたら、それを複製し一枚絵に結合する。メインコンテンツの幅が1,000ピクセルなら、そこに収まる領域の片側の端1ピクセル部分を縦長にコピー上のレイヤーへ貼り付け、横に引き伸ばす



【4】引き伸ばした画像が繰り返し部分の背景になるので、メイン部分の逆側の端（1,000ピクセルの内側）を広めにぼかし、繰り返し処理で伸びてくる背景とまぜる。これで繰り返し部分の背景が両端に伸びても背景が続いているように見えるようになる

▼使いどころ 繰り返し処理で表示する背景画像とグラフィカルな背景画像の境目をスムーズにすることで、解像度の高いモニターで表示した際に背景画像が切れてしまい不自然に見える部分を和らげたり、大きな背景画像を作成しなくてすむ効果をもつ。