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

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

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

エリ

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

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

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

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

photoshopのフィルターで作る

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

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

1.切り抜き

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

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

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

photoshop フィルター スクロール

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

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

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

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

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

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

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

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

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

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

マスクの原理
clubt

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

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

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

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

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

foolfool

「こんなイラストが欲しい・・・」ご希望のイラスト描きます


新規イラスト3000円(税別)〜
商用利用も可能!
ご要望に合わせたイラスト制作承ります。

  • オリジナルキャラ制作

    キャラクター・立ち絵アイコンサンプル

    TRPG・動画配信・IRIAM・ゲーム・小説、可愛い・かっこいいキャラクターなどご要望を詳しくお聞きし、あなただけのキャラを制作致します!

    オリキャラ制作相談

    キャラ制作を見る
  • ロゴ・線画イラスト作成

    ロゴ・マークのサンプルイラスト

    「イラスト主体のロゴに」
    「商品パッケージ用に」
    「グッズ販売に」商用利用可・著作権譲渡のイラスト描きます。

    イラストロゴ・線画制作の相談

    ロゴ制作の詳細を見る
  • フリーイラスト高画質化依頼

    チコデザフリーイラストのイラストナンバーの位置

    配布中のフリーイラストをpng・jpg・ai等ご希望の形式で1枚500円〜販売中。フリーイラストのillust.NOをお伝え下さい!※商用ライセンスも別途ご案内可能。

    1コインで高画質素材を依頼

    リクエストする

※ご依頼内容により価格・納期が異なります。
まずはご相談下さい!

この記事を書いた人

エリさんエリ


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

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