継ぎ目のない背景画像を作成するPhotoshopのチュートリアル

Photoshop初心者でも簡単に作成できる、ウェブページの背景に利用する継ぎ目のないシームレスな画像を作成するチュートリアルをDesign Shackから紹介します。

Create Seamless Web Background Textures in Minutes

写真の「ぼけ」のようなエフェクトをオリジナルで描き、その画像を元に継ぎ目のないシームレスな画像にします。
下記は、各ポイントを意訳したものです。

Step 1: 新規作成

Photoshopを起動して[ファイル]-[新規]を選択し、ファイルを新規作成します。
設定は、幅：800px、高さ：800px、解像度：72pixel/inch、カラーモード：RGBカラーにします。

新規作成の設定画面

次に、カンバスを「#80ac4b」で塗ります。
[Ctrl]+[A]でカンバスのすべてを選択し、カラーピッカーに「#80ac4b」を指定し、[Alt]+[Delete]で指定色に塗られます。

カンバスを塗る

Step 2: カスタムブラシの作成

オリジナルの「ぼけ」を描くために、ブラシを作成します。

ファイルを新規作成し、サイズは幅：175px、高さ：175pxにします。選択ツール[M]で140pxの円を選択し、#000000で塗ります。次に、[フィルタ]-[ぼかし]-[ぼかし（ガウス）]を適用し、適当な「ぼけ」を作成します。

「ぼけ」ブラシの元となる画像

作成した「ぼけ」をブラシに登録します。
[編集]-[ブラシを定義]を選択し、適当な名前をつけて「OK」をクリックします。

ブラシに「ぼけ」のエフェクトを与えるために、ブラシのオプションを変更します。
[シェイプ]-[ジッターのサイズ]：18%
[散布]-[散布]：789%
[その他]-[不透明度のジッター]：100%

ブラシのオプション

Step 3: 「ぼけ」を描く

作成したブラシを使用し描画色は#ffffffで「ぼけ」を描きます。
「ぼけ」の密度は後ほど調整します。

「ぼけ」

Step 4: スクロール

作成した「ぼけ」をシームレスにします。
[フィルタ]-[その他]-[スクロール]を選択し、水平方向と垂直方向のサイズはカンバスのサイズの半分にし、「OK」ボタンをクリックします。

スクロールフィルタ

Step 5: クリーンアップ

作成したシームレスな画像を並べて、確認をします。必要があれば、次のステップで調整を行います。

画像を四枚並べて確認
密度にばらつきがあります。

Step 6: 調整

エフェクトを削除したり加えたりして、調整を行います。
新規レイヤーや不透明度を使用するとよいでしょう。

中心部が少なかったので、加えました
※四枚の境にラインを薄く引いています

Step 7: 実装

作成したシームレスな画像が期待通りに表示されるか、最終的にウェブページにしてブラウザで確認します。
CSSは下記のように記述し、画像を繰り返して表示するようにします。

CSS

ブラウザで確認

ブラウザで確認した際に期待通りでなかった場合は、再度画像の調整をおこなってください。

他のテクスチャの作成

上記の方法で、下記のような繊細なテクスチャも作成することができます。

元素材：Texture 1

シームレスにしたテクスチャ