Photoshopによる壁紙テクスチャの作り方
本項では、壁紙（background-imageプロパティ）に使える連続したタイルパターンの作り方を説明します。Photoshopでタイルパターンを作るには、パターンメーカーフィルタを使用するのですが、これがアドビからプラグイン（追加版ソフト）という形で配布されているため、これを下記のサイトよりダウンロードする必要があります。
http://www.adobe.com/support/downloads/detail.jsp?ftpID=4744
グーグルから、「Adobe Photoshop CS5 プラグイン」で検索しても出てきます。
インストール方法については付属のpdfドキュメントを参照して下さい。
- まずは壁紙に使うテクスチャを用意します。グーグル検索で「フリー テクスチャ」等のキーワードで検索すると出てきます。例えばこのようなサイトやこのようなサイトから、フリーのテクスチャをダウンロードします。今回は大理石の写真テクスチャをダウンロードしてみました。まずは、この画像をそのまま壁紙として並べてみます。画像寸法は1024×768、ファイルサイズは580キロバイトです。このまま背景に使った場合、ファイルサイズが大き過ぎてページ読み込みに異常に時間の掛かるページになってしまいます。このまま背景画像として使用した場合のサンプルはこちら。
- Photoshopから1でダウンロードした写真の.jpgファイルを開きます。
- [フィルター]→[パターンメーカー]を開きます。
- 今回は、パターンの大きさを幅300px×高さ300pxに設定してみます。滑らかさの設定を「３」にして、画面上の比較的平坦な領域をドラッグして選択し、[生成]ボタンをクリックします。[再生成]をクリックする度に候補が表示されるので、気に入るまで繰り返します。
- 気に入った画面状態になったら、パターンを保存します。画面右下の「プリセットパターンとして保存」をクリックします。今回は仮に「大理石テスト」と名前を付けてみました。
- 次に、パターンの大きさと同じ、300px×300pxのカンバスを新規作成します。[ファイル]→[新規]で幅・高さを300px×300pxに設定します。
- 白紙の上に先程保存したパターンを被せたいのですが、背景レイヤーでは無理なので、まずはレイヤーパネル上の背景レイヤーをダブルクリックして通常レイヤーに変換します。レイヤー名はそのままでいいです。
- 出来上がった白紙の通常レイヤーを更にダブルクリックして、レイヤーマスクを設定します。パターンオーバーレイから「大理石テスト」を選択してみましょう。
- [ファイル]→[Webおよびデバイス用に保存]で、JPEGの「やや高画質」を選択して保存します。名前は今回は（stone_mod.jpg）としています。元画像を300px×300pxに切り抜いただけの画像を背景パターンとして並べた場合のサンプルはこちら。次にパターンメーカーでつなぎ目を滑らかにした画像を並べた場合にはこのようになります。以上で、300px×300px、19.5キロバイトの滑らかなタイルパターンが完成しました。この程度のファイルサイズなら回線速度の遅い端末から閲覧する人のパソコン上でも一瞬で表示されるでしょう。
wallpaper_suimen.html）
- ここでは、大理石のような素材感のあるタイルパターンの作り方をご紹介しましたが、例えばブロック塀のようなタイルパターンを作るにはどうすれば良いのでしょうか。方法は少々複雑になりますので、当サイトでは解説しませんが、参考になるサイトがありますので、興味のある方は調べてみられるといいと思います。
シームレステクスチャの作り方解説サイト
PageTop