継ぎ目のない背景画像を作成するPhotoshopのチュートリアル
Post on:2010年5月24日
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
1 2 3 |
<textarea name="code" class="css" cols="60" rows="5"> body { background-image: url(yourFilenameHere.jpg); background-repeat: repeat; } </textarea> |
ブラウザで確認
ブラウザで確認した際に期待通りでなかった場合は、再度画像の調整をおこなってください。
他のテクスチャの作成
上記の方法で、下記のような繊細なテクスチャも作成することができます。
元素材:Texture 1
シームレスにしたテクスチャ
sponsors