DesignTips > 背景・パターン > シームレスなパターンの作り方(Photoshop)

シームレスなパターンの作り方(Photoshop)

シームレスなパターンの作り方(フォトショップCS5)
Photoshopでシームレスなパターンの作り方をご紹介します。

模様の配置によってパターンは変わってきますね。

Photoshop 花柄背景の作り方でも継ぎ目のないシームレスパターンを紹介しています。ただ、今回は既存のシェイプから左右非対称の模様を使い、継ぎ目のない(シームレス)パターンの作り方を紹介していきたいと思います。

Step01 フォトショップで新規ファイル作成

シームレスの新規ファイル作成

早速、シームレスなパターンを作成していきます。上図の設定で新規ファイルを作成します。

Step02 定規の表示

定規の表示

オブジェクトを配置する時に便利なので定規を表示させます。[表示→定規] これで上と左側に定規が表示されました。

Step03 ガイドを表示する

ガイドを表示する

中心を分かりやすくするためにガイドを表示させます。[表示→新規ガイド→数値設定]でガイドが表示され、ガイドが重なっている中央が中心になります。

Step04 シームレスパターンにする模様の選択

模様の選択

シームレスパターンにする模様を選びます。[カスタムシェイプツール:花3]を選び、上図くらいの大きさのお花を作ります。ガイドとお花の中心を合わせて配置して下さい。

Step05 お花のレイヤーをコピー

レイヤーをコピー

お花のレイヤーを新規ファイルのアイコンにドラッグして、レイヤーをコピーします。

参考記事:Photoshopのレイヤーの基本を説明

Step06 シームレスにするため花を分割し四隅に移動する

シームレスのパターンにするため花を分割し四隅に移動する

ここがシームレスなパターンを作成するポイントです。

一つのお花を四隅に分割します。コピーしたお花のレイヤーを[フィルター→その他→スクロール→シェイプをラスタライズ]で上図の数値を設定します。

スクロールした状態

スクロールした状態

真ん中にあったお花が四分割され四隅にスクロールされました。四隅に均一の距離で移動したことによりシームレス(継ぎ目のない)表現が可能になるんですね。

Step07 中央の花の色を変える

中央の花の色を変える

同じ色では面白くないので、真ん中のお花のみ色を変えたいと思います。

分割されていないお花のレイヤーの色を変えるため、サムネールをダブルクリックし色を設定します。

Step08 シェイプレイヤーを変換

ラスタライズする

このままだと、パターンを登録できないので、シェイプレイヤーをラスタライズします。

[右クリック→レイヤーをラスタライズ]でビットマップデータに変換。背景はパターンに登録しないので、背景の目のアイコンをクリックし背景を非表示にします。

Step09 パターンに登録

パターンに登録

[編集→パターンを定義→パターン名の入力]でパターンを登録します。これでシームレスなパターンが登録されました!

シームレスなパターン 完成!

シームレスなパターンの作り方(フォトショップCS5)

登録したパターンで背景を塗りつぶしてみました。

どうですか?模様が交互に配置されているのでシームレス(継ぎ目のない)背景になっていますね。無事、成功です。

この方法を使えばオリジナルのシームレスパターンが作れます。シームレスなデザインはwebサイトの背景に最適ですね。慣れれば簡単ですので、ぜひトライしてみて下さい!

関連記事:Photoshop パターンの作り方

関連記事:花柄背景の作り方を解説(Photoshop)

関連記事:クラシックなパターン素材の作り方(イラストレーター)

この投稿文は次の言語で読めます: 簡体中国語, 英語

Photoshop パターンの作り方(ドット)
1つのパターンからドットと斜線背景を作る方法(Photoshop)
黒板のイラストの作り方(Photoshop)
Photoshop 水面のテクスチャの作り方
ヴィンテージカメラファインダーの作り方 (Photoshop)
草木の素材を円形に変形してフレームを作る方法(Photoshop CS6)
ザラついた質感の背景の作り方(Photoshop)
水が噴き出してるような背景の作り方(Photoshop)
Photoshopで星雲と細かい星の作り方