この記事は2016年2月18日の記事を更新しています。

デザインをする際、背景などにパターン素材を使う方は多くいらっしゃいます。
しかし、せっかく作ったのに継ぎ目が見えてしまって残念な仕上がりになってしまったり、好きなパターン素材を見つけていざ使ってみると合わない、という経験が一度はあるのではないでしょうか。

実は、パターン素材は非常に簡単に作れますので、コツさえ掴めば継ぎ目のない綺麗なパターン素材を自作することも可能です。

今回は、Photoshopで継ぎ目のないシームレスなパターン素材を作る方法をご紹介します。
定番のドット柄からテクスチャまで一通り紹介しておりますので、今までパターン素材で悩んでいたという方はこれを機に自分で作ってみてはいかがでしょうか。

継ぎ目のないシームレスなパターン素材の作り方まとめ

1.ドットのパターン素材の作り方

まずは定番のドットパターンの作り方からご紹介します。
よく使うドットのパターンですがPhotoshopで簡単にパターン化することができますので、覚えておくと便利です。

pt1_1.png

はじめに、Photoshopを起動して新規ファイルを作成、新規レイヤーを準備しておきます。
モードをクイックマスクモードに変更します。
なお、クイックマスクモードとは一時的にマスクを作るモードのことを言います。

pt1_2.png

次に、塗りつぶしツールを使って新規レイヤーをグレースケールの色で塗りつぶします。
塗りつぶすと、画像のように画面全体が透明の赤色に変化します。

pt1_3.png

塗りつぶしが終わったらいよいよドット柄を作成していきます。
「フィルター」→「ピクセレート」→「カラーハーフトーン」と進めていきます。
最大半径に任意の数値を入力、ハーフトーンスクリーンの角度には全て45と入力しOKを選択します。

pt1_4.png

pt1_5.png

選択範囲にドット柄を適用することに成功しました。
クイックマスクモードから画像描画モードに戻し、選択範囲を反転させます。
レイヤー上で右クリックを押すと出てくるメニュー内から選択範囲を反転させることが可能です。

pt1_6.png

すると、ドット柄が選択されますので任意の色を選びそのまま塗りつぶしましょう。
塗りつぶしが完了すると、ドット柄模様だけに色がつきました。
これでドットパターンの完成です。

ちなみに、カラーハーフトーンの最大半径の値や塗りつぶしの色を変えれば色々なタイプのドット柄パターンを作ることができます。

2.チェック柄パターン素材の作り方

一見複雑そうなチェック柄も手軽にパターン化することができます。
作り方には様々な方法がありますが、今回は簡単な「ハーフトーンパターン」を使った方法をご紹介します。

pt2_1.png

まずは、Photoshopで新規レイヤーを2枚作成しておきます。
次に、チェック柄に使う色を決めて設定しておきましょう。
ハーフトーンパターンでは、描画色と背景色がそのまま色として選択されますので、あらかじめ任意の色を指定します。

今回は、描画色にオレンジ、背景色に黄色を選択しました。
色を選択したら、レイヤーを2枚とも塗りつぶしておきましょう。

続いて、チェック柄を作成するために「フィルタ」→「スケッチ」→「ハーフトーンパターン」と進めます。
2枚のレイヤー両方にハーフトーンパターンを適用します。

pt2_3.png

パターンタイプに「線」を選びます。
大きさとコントラストは好みに合わせて指定してください。
これでレイヤーがボーダー柄に変化しました。

pt2_4.png

チェック柄にするために、「イメージ」→「変形」→「回転」で1枚のレイヤーを90°回転させましょう。

pt2_5.png

描画モード「乗算」か「焼き込み(リニア)」に変更すれば、チェック柄になります。

3.モチーフ入りのパターン素材の作り方

モチーフが入った柄もシームレスなパターン素材にすることができます。
今回は、桜の花のイラストをシームレスなパターン素材にしていきます。

pt3_1.png

はじめに、Photoshopで新規ファイルを作成し、使用するイラストを用意します。

pt3_2.png

今回の例では、モチーフを上下に並べたパターンを作りますので、中央部に1個、少し上に2つのモチーフを配置します。
上に配置した2つは、高さを綺麗に揃えておきましょう。
「ファイル」→「整列」を使うと、自動で位置を調節してくれます。

次に、継ぎ目部分を調節していきましょう。

pt3_3.png

モチーフの左右の幅を把握するためにガイドを引きます。
ガイドは「表示」→「定規」から表示することが可能です。

pt3_4.png

モチーフの調整が終わったら、ガイドに沿って選択範囲を作成し、切り抜きます。
両方のモチーフそれぞれの中央のガイドで切り抜くことで、パターンを作成したときにちょうど綺麗に繋げることができます。

pt3_5.png

これでモチーフを使ったシームレスなパターンができ上がりました。

4.テクスチャパターン素材の作り方

先のドットなどと比べて少し難易度が上がりますが、テクスチャ素材もシームレスなパターンにすることができます。
今回は、くしゃっとしたナチュラルな紙テクスチャをパターン化していきます。

pt4_1.png

まずは、パターン化するテクスチャ素材をPhotoshopで開きましょう。

pt4_2.png

パターン化しやすそうな箇所を見つけて、100px×100pxの正方形サイズに切り抜きます。
サイズは必ずこのサイズでないといけないとは限りませんが、シームレスパターンにする場合100px〜200px程度が作りやすい傾向にあります。

pt4_3.png

続いて、新規ファイルを作成します。
カスタムサイズを先程切り抜いたテクスチャのサイズのちょうど2倍に設定します。

今回の場合は、100pxで切り抜いていますので、サイズは200pxに設定しておきます。

pt4_4.png

200pxの正方形に、切り抜いた100px四方の画像を配置します。
この時、継ぎ目が目立っている場合には調整しておきましょう。

pt4_5.png

正方形を埋めたら、ちょうど真ん中を初め切り抜いたものと同じサイズで切り抜きます。

今回は、200pxの正方形に対し100pxの正方形を配置しましたので、中央を100pxの正方形で切り抜きます。

pt4_6.png
これで、シームレスなパターンテクスチャができ上がりました。

パターンを作り終わったら「編集」→「パターンの定義」を選択します。
すると、パターン名を登録する画面が出てきますので、任意のパターン名を設定します。
名前は何でも構いませんが、あとで分かりやすいものを設定しておくと使う時に便利です。

以上の手順でパターンの登録が完了しました。
作ったパターンを使う方法はいくつかありますが、塗りつぶしツールを選択後にコンボボックスからパターンを選択するとオリジナルのパターンを適用することができます。

まとめ

以上、継ぎ目のないシームレスなパターン素材の作り方をご紹介しました。
いかがでしたでしょうか。

パターン素材を作らずとも、素材を綺麗に配置すれば全体をデザインすることも可能です。
しかし、広い面に同じ画像を何枚も複製して貼付けるのは非常に大変ですし、デザイン次第では継ぎ目がはっきりと見えてしまいますので、壁紙や背景にデザインを適用したい場合にはパターン素材を使用しましょう。

どうすれば継ぎ目がなく作れるかを理解しておけば、今後もオリジナルで作ることができますし、パターンファイルとして保存しておくだけでいつでも使用することができます。
思った素材が見つからない場合やシームレスなパターンが欲しい時には、ぜひオリジナルで作ってみてはいかがでしょうか。

このニュースを読んだあなたにおすすめ

全て無料!デザインの魅力をさらに引き立てる高品質PSDファイル60選

全て無料!デザインの魅力をさらに引き立てる高品質PSDファイル60選

様々な製品のプレゼンテーションにおいては当然製品を魅力的に見せたいものです。そんな時、ビジュアルの訴求力をぐっと上げてくれるのがPSDファイルです。 今回は、テンプレートとして使いやすいものをメインに無料のPSDファイルを60個紹介します。

コミカルなデザインで活用したいマンガ風フォントまとめ

コミカルなデザインで活用したいマンガ風フォントまとめ

趣味でもマンガを書かれている方が多くいらっしゃいますが、そんな方がよく悩んでしまうことの一つに吹き出し部分のフォントがあります。 今回はマンガで使用するのに最適なフォントを8個ご紹介します。 一般的には有料のイメージがありますが、最近では無料フォントも多数存在していますので是非ダウンロードして使ってみてください。