シームレス画像の作り方

※作業環境はMacintoshのフォトショップ5.5jですが
Winであっても手順と方法は同じです。

フォトショで新規の書類を用意します。
作るイメージ柄によってピクセルサイズは
大きい方が良かったり、小さい方が都合が
良かったりです。
今回は荒いガタガタの模様になると
カッコ悪いので500X500のサイズで
作り始めます。
ウェブに上げる画像解像度は72dpiと
決まっていますので72で構いません。
ファイル名の拡張子より前の部分は
半角英数字で8文字以内にしておいた方が
後々、UP時にも都合が良いです。

デスクトップの状態です。
正方形になっていれば大丈夫。

正方形の白紙にイメージした物を
作ってみましょう!

今回はステンドグラスのような模様の
シームレス画像を作りましょう。

まず、色はお好きな色でいいのですが
仮にカラーパレットを白と青にして
「フィルタ」の中の「描画」の中の
「雲模様1」を選びます。

雲模様が出来ました。

ステンドグラスをカラフルにするために
他の好きな色もブラシを使って
数色吹いてみました。

すると左のような絵になります。

次に「フィルタ」の中の「テクスチャ」
の中の「ステンドグラス」を選びます。

操作盤内の見本画像の拡大縮小で
全体像を見ながらセルの大きさや
境界線の太さを調整します。

今回は背景素材ゆえ、真ん中が
明るくなるとウェブページに使用した時
モロにタイリングした背景に見えて
しまうので今回は「光の強さ」はゼロに
設定しました。

とりあえず、このような画像に
なりました。

モザイクツールを使うと画像の
4辺のフチの部分にもモザイクの
ラインが出来てしまうので
「切り抜きツール」で正方形に
外側だけトリミングして下さい。
(サンドイッチを作る時、
パンの耳だけ落とすみたいに(笑)

ちょっと同じような色が
並んでいる所は「選択ツール」と
「塗りつぶし」などを使って色を
変えてみても良いと思います。

ここからがシームレス画像を
作る為の手順になります。

「フィルタ」の中の「その他」の中の
「スクロール」を選択しましょう。

今回の画像サイズが元500X500なので
(フチをトリミングした分、少し小さくなってますが)
スクロールした境目が真ん中にくるように
250づつ数字を入力し、下の3つの
ボタンは「ラップアラウンド」に
チェックをいれます。

「スクロール」とは画像の
左の辺と上の辺がそれぞれ入力した
数字のピクセル数だけ移動する
ツールですので左の画像のように
縦横250ピクセル移動した中央辺りに
境目の線ができていればOKです。

ここからが地道な細かい作業になります。
この、ハッキリと縦横に走った
十字の境目をツールパレットの中の
様々なツールを使い違和感の無いように
境目を無くすのです。

今回のような絵ですと境目で
違和感のあるセルを地道に手作業で
「選択ツール」と「ブラシツール」と
「スポイトツール」などを使って
セルの形を修正しました。

すると左のようなつなぎ目の無い
画像になるのです。
これを最後にもう一度
「スクロール」を使って元の位置に
戻し、違和感が無ければ
シームレス画像の完成です。

そしてこの段階ではフォトショップ画像(拡張子が.psd)ですので
ウェブに使えるようにGIF画像かJPG画像などに変換する必要があります。
その時に画像のサイズを「画像解像度」で縦横50ピクセルにしたり
100ピクセルに縮小したりして、JPG or GIF保存すれば細かい模様で
綺麗な背景画像になる訳です。

(縦横の線だけで構成されてる絵の場合、初めから作ろうと思ってるサイズで
作った方がアンチエイリアスが掛からないのでシャープに仕上がります。)



100X100に縮小してGIF画像(128色)にした完成品です。
クリックしてみて下さい。
(手をかければもっと少ない色数でファイル容量を軽くする事も可能です)

このような感じで作製した後、文字を書き込む背景でしたら「色調補正」の中の
「色相、彩度」などの調整で薄い色合いにしたりすれば文字の邪魔にならない
背景素材の出来上がりです(^ ^)


☆以上、シームレス画像のTipsでした☆
ホームから順に来た方はブラウザのボタンで閉じちゃって下さい