sfagga

Photoshopで簡単に継ぎ目のないパターン素材を作る方法


デザインをするにあたって、パターンを使用することがあると思います。
その際に、継ぎ目があって背景に使えないなど、がっかりしたことはありませんか?

今回ご紹介させて頂くのは、Photoshopで簡単に継ぎ目のないパターン素材を作る方法です。
パターンを作るのはとても簡単ですので、自分のお気に入りのパターンを作りましょう!

パターン素材を作る

ななめパターン素材の作り方

ななめパターン素材は、とても簡単にできます。
色や太さを変えて、様々な使いやすいストライプのパターン素材を作ってみましょう。

ストライプの色を決めて線を書く

まずは、新規ファイルを開き、作りたいストライプの色を決めて、線を書きます。
今回は、青系の色でストライプを作ります。
この時に、幅を統一させるか、ばらばらに作るかで雰囲気も変わりますので、お好きな幅に調整してみてください。

線を45度傾ける

次に線のレイヤーを全て選択して、45度傾けましょう。
レイヤーを選択し、端の方にカーソルを合わせると、自由変形をするための黒い矢印が出ますので、
その矢印が出た状態でクリックをすると、上部に自由変形パネルが表示されます。
パネルにある傾度を45度に設定すると、自動的に45度右に傾きます。

線を合わせる

傾けた線の対角線のラインが揃い、底辺の角が合う場所を探します。
場所が決まったら、分かりやすいように、ガイドを引きましょう。

レイヤーを複製する

あとは、レイヤーを複製して空いている部分を埋めていきます。
ななめ45度にした線を全て選択した状態で複製し、ストライプになるようにずらして、ガイドで引いた四角の
中を埋めます。

継ぎ目のないストライプパターンの完成

ガイドのラインで切り抜くと、繰り返しても境目のない継ぎ目のないパターンができあがりました。

花柄パターン素材の作り方

花のモチーフを、繰り返し継ぎ目のないシームレスなパターンにすることができます。

繰り返すための花を描いていく

まずは、新規ファイルを開き、繰り返すための花を描いていきましょう。
今回は、花が交互にずれて並ぶような、デザインを作っていきますので、上部の並んだ花は、高さを揃えるように
調整しておきます。

花の中心を通るガイドを引く

次に、繰り返す継ぎ目の部分を調整するために、花の左右の幅を表す線と、赤色で示している中心線のガイドを
引きます。
ここで、分かりやすいように、花の色を変更しておきます。

継ぎ目のない花柄パターンの完成

ガイドのラインで切り抜くと、繰り返しても境目のない継ぎ目のない花柄のパターンができあがりました。

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

質感を持たせるテクスチャも、コツを掴めば簡単に継ぎ目のないパターンにすることができます。

デニムのテクスチャを用意

まずは、パターンにしたいテクスチャを用意します。
今回は、デニム生地をパターン素材にしてみましょう。

パターンになりそうなところを切り抜く

パターン素材にしやすそうな箇所を、切り抜きます。
この時、分かりやすいように100px×100pxにサイズを合わせます。
通常は、大きさを気にすることはありませんが、繰り返し使用するような素材なので、200px程で作成すると使い勝手がいいと思います。

新規ファイルのサイズを2倍に設定

次に、新規ファイルを作成して、カスタムサイズを、切り抜いたデニムのサイズの2倍(200px)の正方形にします。

切り抜いた画像を敷き詰める

切り抜いた画像を敷き詰め、2倍のサイズの正方形を埋めます。
ここで、継ぎ目が目立ち、気になる場合は、調整しましょう。
中央を切り抜く

完全に埋めた後は、中央を最初に切り抜いた画像のサイズ(100px×100px)で、新たに切り抜きます。
画像を4つ並べた後に、中心を最初に切り抜いたサイズで切り抜くことが大事なポイントです。

継ぎ目のないテクスチャパターンの完成

赤い枠で切り抜くと、繰り返しても境目のない継ぎ目のないテクスチャパターンができあがりました。

パターン素材を登録する

パターンを作成したら、いつでも使用できるように、Photoshopに登録しましょう。

登録したいパターン

登録したいパターンを用意します。
※作成したら、登録するときはレイヤーを結合しておきましょう。

パターンの定義を選択

画面上部のメニュー「編集」をクリックし、パターンの定義を選択します。

パターン名を決める

パターン名は、自由に決めることができますので、分かりやすい名前にしておきましょう。
OKを押すと、パターン登録の完了です。

パターンが登録されているか確認

レイヤースタイルパネルを開き、パターンが登録されていることを確認します。
問題なく登録されていれば、パターン素材として自由に使用することが可能です。

まとめ

パターン素材を作る方法を3パターンご紹介しましたが、いかがだったでしょうか。
継ぎ目のないパターンは、ご紹介したちょっとしたコツに気をつけるだけで、簡単に作ることが出来ますので、
是非お気に入りのパターンを作ってみてください。

本サイトが運営するWebデザインのオンラインスクールが公開中!
以下のリンクからお申込みで、特別料金の70%OFF!

未経験からプロのWebデザイナーになる! 400レッスン以上の完全マスターコース
こちらのコースは全くの未経験の方が、プロのWebデザイナーとして働けるレベルになることを目的としたコースです。
・全422レッスン & 42時間! 通学スクール80万円相当の内容
・授業×チャレンジ課題で実践的なスキルが身につく!
・過去1100名以上のスクール卒業生を輩出した、 Webサービス運営企業・デザイナー輩出企業だからこそ作れるプログラム

Webやアプリの最新デザインツール Sketch3 |100レッスンの完全マスターコース
Sketch3未経験からプロレベルを目指す、充実したコースです。
Sketch3の単なる機能説明をするような、つまらないコースではなく、アイコン制作、ボタン作成、メインビジュアル制作、Webページの制作など、実際の制作をしながら実践力を身につけます。
1000名以上の卒業生がいる実績ある日本のWebデザインスクールが提供しています。


NESTonlineBlog編集部

NESTonlineBlog編集部です。ご寄稿頂いた記事などを公開していきます。

Next ArticleWebデザイナーなら知っておくべきPhotoshopの効率化テクニック