超簡単!フォトショで作るつなぎ目のないパータン作成法

つなぎ目が見えるパターンってなんかださい。良くwebサイトでもあるけど、シームレスパターンはつなぎ目がない繰り返しパターンなので奇麗に見えます。作成方法は沢山ありますが、一番簡単なphotoshopのフィルターのスクロールで作る方法を紹介します。

 40590 更新日
超簡単!フォトショで作るつなぎ目のないパータン作成法
エリさん

エリ

繋ぎ目を無くして合成する方法

photoshopのフィルターを利用した画像の繋ぎ目がない合成方法を解説。

繰り返してもつなぎ目が見えない繰り返しテクスチャの作り方

web素材で良くみかけるつなぎ目の見えない繰り返しパターンの作り方を紹介します。
良くある無料素材等もいっぱいありますが、覚えとくと応用がきくので普段は無料素材のみ使用している人は覚えてみては?

photoshopのフィルターで作る

アスファルトのテクスチャ

まずリピートさせるテクスチャを選びます。今回はアスファルトの写真を撮り、このアスファルトをシームレスパターンにしてみようと思います。

1.切り抜き

アスファルトのテクスチャを加工

今回は写真の繰り返しパターンという事で、撮影時に明暗ができてしまう場合があります。
明暗の差が激しいと画像を加工するのが面倒なので 明暗のない部分を500px×500pxで切り抜きます。

2.切り抜いたテクスチャをシームレスにする

photoshop フィルター スクロール

フィルター > その他 > スクロールでスクロール設定をよびだします。

スクロールの設定
photoshop スクロールの設定

スクロールの設定は以下の設定で実行します。今回は500×500なので+250×+250で ラップアラウンド(巻き戻す)を選択してOKを押します。

つなぎ目が残った状態
シームレスパターンのつなぎ目が残った状態

これで縦、横継ぎ目のないパターンが出来ました。しかし、真ん中が継ぎ目が目立った状態です。この継ぎ目を消しましょう。

3.真ん中の継ぎ目を消す【マスクで処理する方法】

レイヤーを複製する
photoshop レイヤー複製

この方法は細かく処理出来るので継ぎ目を完璧に消せる方法です。デメリットとしては時間がかかる事です。 まずはレイヤーを複製します。

ブラシで継ぎ目をなじませる
つなぎ目をなじませた写真

そのまま左に10px、下に10pxを方向キーを使って移動させます。そしてレイヤーマスクを追加してブラシツール塗り30%、流量20%程で継ぎ目に沿ったブラシの大きさでなじませます。

マスクの原理
clubt

背景をコピーしたレイヤーを上に重ねその端の境目をマスクで消して行くと境目が分からなくなります。 これは写真と写真を違和感なくつなぎ合わせたりできる便利な技です。

完成したイメージ
シームレス画像完成

繰り返して表示させてみましたがつなぎ目は消えました! この他にもつなぎ目をなげなわツールで選択範囲を作り、 コンテンツに応じた塗りつぶしで一瞬に消せる場合もあります。 コンテンツに応じた塗りつぶしの機能は 『1分で可能!コンテンツに応じるで写真修復』を参考にして下さい。 コンテンツに応じるでうまくいかない場合はスポット修正ブラシを使うのも便利です。

他にもあるシームレスパターンの作り方

今回作成したテクスチャは比較的簡単な感じですが、絵柄をシームレスにする方法もあります。
illustratorを使用した継ぎ目のないパターンの作り方もありますので別の機会に説明してみようと思います。

この記事を書いた人

エリさんエリ


つなぎ目のないパターンの作成方法は他にもたくさんあります。ご紹介の作成方法以外も更新予定です。

シームレスパターン作成法にいいね!