2022.04.07

写真やイラストを使ったシームレスパターンを作る

今回はphotoshopを使い、写真やイラストを利用したシームレスパターンの作成方法を学びます。
作成方法を知らずとも「シームレス パターン」などで検索をすると、ある程度パターン画像を見つけることができると思います。
しかし、ちょうどよく見つからない模様や、もう少しこうだったらな…と思う画像しか見つからない時は自分で作れるととっても便利です!
さて学んでいきましょう!

シームレスパターンとは

継ぎ目のない(シームレス)パターンのことです。
上下左右に継ぎ目がなく、繋げると綺麗にパターンがつながっていきます。
タイル状のパターンをどんどん敷き詰めていくイメージです。

WEBサイトに使用する場合、この小さなタイル一つを書き出して使用することで画像は軽くなり、表示は早くなります。
見た目は大きな一枚の画像に見えるのですが、実際は小さなパターンが繰り返し表示されています。

シームレスパターンの作り方

  1. 正方形のカンバスを用意する(今回は300×300px)
  2. パターンにしたい画像を画面いっぱいに配置する
  3. カンバスのサイズに合わせてカットし、同じ位置にペースト
  4. メニューバー > フィルタ > その他 > スクロール(数値はカンバスの半分の値)
  5. 必要であれば生成された画像の調整
  6. メニューバー > 編集 > パターン定義
  7. 背景を敷くレイヤーを用意
  8. メニューバー > 塗りつぶし > パターン(作成したパターンを選択)

 

木目編

カンバスを用意し、画像を配置する

300×300pxのカンバスを用意し、パターンにしたい画像を画面いっぱいに配置します。
木目編01

この時点では、カンバスの外の見えない部分にまで画像が広がっています。
※青い罫線部分まで画像が存在します

シームレスパターンにする画像はカンバスぴったりに作る必要があります。
次の作業をしましょう。

 

カンバスのサイズでしっかりトリミング

カンバスサイズの選択範囲を作り、カット(⌘+X)し、同じ位置にペースト(⌘+shift+V)します。

木目編02

青い罫線がカンバスのサイズとぴったりになったらOKです。

カット&ペーストでうまく切り取れない人は、スマートオブジェクトになっていないか確認してください。
スマートオブジェクトだった場合、レイヤーをラスタライズしてから上記のカット&ペーストをしましょう。

 

フィルタでパターンを生成する

メニューバー > フィルタ > その他 >スクロールを選択します。
木目編03

次にダイアログが出てきます。
木目編04

水平方向・垂直方向に用意したカンバスの半分の値を入力します。
今回は150pxですね。
未定義領域の一番下「ラップアラウンド(巻き戻す)」に必ずチェックを入れOKします。

これで四辺で継ぎ目ないパターンが生成されました。
この時違和感なく自然な画像になっていればパターンの完成です。

しかし、このパターンの場合、見てもらうとわかるように中心あたりに不自然なつなぎ目ができてしまっています。
自然な継ぎ目になるようにスタンプツール・パッチツール・修復ブラシツールなどを使い加工しましょう。

木目編05

作成したパターンを定義する

メニューバー > 編集 > パターン定義
木目編06
ダイアログが出るので、パターン名をつけてOKします。木目編07これで、オリジナルのシームレスパターンが定義され使えるようになりました。

シームレスパターンを使う

シームレスパターンを敷く為のレイヤーを用意しましょう。
木目編08
メニューバー > 塗りつぶし > パターンで先ほど定義したパターンを選択しOKします。
木目が繋がったパターンの完成です。
木目編09

レンガ編

今回使ったレンガの画像は、2段ごとの規則性があるのでパターンを作成する時、次にくる段を考えて切りだしましょう。
木目同様、スクロール適用だけでは自然な画像にはならないので、画像の中心部の不自然な部分を調整し完成です。
レンガ01
レンガ02

写真とイラスト編

今回は写真と図形を組み合わせたパターンにしました。
写真と図形01
写真と図形02

イラスト編

イラストをちりばめることもできます。
イラスト01
イラスト02

まとめ

今回は、Photoshopで作る、シームレスパターンの作り方を解説しました。
フリーのシームレスパターンを探して使っていた方も、自分で作ってみたかった方も、結構簡単に作れるので是非お試しください!
デザイン作りに活用してもらえたら嬉しいです。

dweb_お問い合わせはこちら