繋ぎ目のない背景画像を手早く作るならPhotoShopの『スクロール』がオススメ

Medium 4731791091 photo credit: Patrick Hoesly via photopin cc

こんばんは、ボーノです。

背景画像ってそのサイトの印象を大きく左右します。家で言うとカーテンみたいなものかな。

ノイズを加えた無機質なものを使ったり、可愛い画像を使ったりテキスチャだったり、その人のセンスの見せ所でもある。

何を背景にするかにせよ、連続した画像を使う時に繋ぎ目があったら台無し。
ここでは、PhotoShopで繋ぎ目のない背景画像を作る方法を紹介。

スクロール

使用したい画像を開く

ここでは、紙素材を使ってやってみる。
紙素材は少し雰囲気を引き立たせるために、とても重宝する素材の一つ。

スクリーンショット 2013 11 28 23 45 41

画像の連続性を確認

ただ画像を見ただけでは、連続性があるかは分からない。
そこで、スクロール機能を使用する。

『フィルター』→『その他』→『スクロール』を開く。

Skitch

下記画面で、ずらす量を指定する。
基本的には、ここでは元の画像の1/2のサイズを指定すれば良い。

元画像が350px * 400pxだったので、175px, 200pxと指定。

スクリーンショット 2013 11 29 0 08 43

すると下記のように変換される。要はこれが画像の繋ぎ目。

スクリーンショット 2013 11 28 23 44 28

繋ぎ目を補正

これでは、画像の繋ぎ目が一目瞭然である。修正しよう。

ここから先は人それぞれでやり方があると思うけど、下記はひとつの例として紹介します。
まずは画像をスマートオブジェクトに変換します。

これでフィルタリングが可能になる。

Skitch

繋ぎ目を選択モードで選択して、下記のように『ノイズ』→『明るさの中間値』で修正。

Skitch

これを、水平方向と垂直方向の繋ぎ目でそれぞれ行う。

完成!

う〜ん、正直微妙な出来。。もっとスキルを磨こう。

まぁ、繋ぎ目をどう修正するにしても、流れは基本的に同じだと思うので覚えといて損はなし。
他にも、こんな方法があるよ!ていうのを教えてもらえると嬉しいです。

スクリーンショット 2013 11 29 0 21 05

ブラウザで表示するとこんな感じ。透明度を高くしてやると何となくそれっぽく見えて良いです。

スクリーンショット 2013 11 29 0 24 41