パターンとは!?

パターンとは、下記の例のような、継ぎ目なく規則的に繰り返される模様のことをいいます。

今やデザイナーでなくともフォトショップなどのデザインソフトを使う時代です。

基本的なパターンの作り方を押さえていきましょう。

image13.jpg

パターンの使い方

パターンを使うには、
①最小単位のパターンを作る
②「パターンを定義」でパターンとして使える状態にする
③シェイプや、塗りつぶしでパターンを適用する
という3つのステップが必要です。

パターンを作ってみよう!

パターンの表示の仕組み

今回例として、下記のようなドットのパターンを作ってみようと思います。
image7.jpg

この場合のパターンの表示の仕組みですが、下記のように、繰り返しに必要な最小単位のパターンが、たくさん敷き詰められて表示されます。

image2.jpg

なので、後の「パターンを定義」で定義するパターンとして、まず最初にこの最小単位のパターンを作ります。

最小単位のパターンの作成

まず新規ドキュメントを作成します。
以下のサイズや色は例として決めているだけなので、実際は作りたいサイズや色を指定してください。
ここでは幅と高さが100pxのサイズで、Webでの使用と仮定して、解像度は72ピクセル/インチ、RGBカラーとします。アートボードの機能は特に使わないので、アートボードのチェックは外しておきます。

image4.jpg

これで[作成]をクリックすると、100px×100pxの真っ白なカンバスの状態になります。

image1.jpg
ここから、シェイプツールで直径30pxの円を描き、4スミと中央に配置します。

image12.jpg

4スミに配置するときは、[表示]メニュー→[表示・非表示]→[スマートガイド]にチェックを入れておくと、スムーズに配置できると思います。

image11.jpg

背景は透明にしておきたいので、背景レイヤーを消します。

image14.jpg
これで最小単位のパターンが作れました。

最小単位のパターンの作成

最小単位のパターンが作れたら、[編集]メニュー→[パターンを定義]を選択します。

image10.jpg

すると、下記のダイアログが出てきますので、

image5.jpg

任意のパターン名をつけて[OK]をクリックします。
これで、シェイプや塗りつぶしで、定義したパターンを使うことができるようになります。
パターンを定義した後は、この最小単位のパターンのPSDは不要になりますが、後でパターンを修正するときに、再度このPSDを修正して定義し直す必要があるので、保存しておいた方が良いと思います。

シェイプに適用する

属性パネルやオプションバーで色を指定するとき、斜線のボタンがパターンを指定するボタンです。

image3.jpg

このボタンをクリックすると、定義したパターンを選ぶことができます。

image9.jpg

定義したパターンを選択すると、シェイプがパターンの模様になります。

image15.jpg

また、パターンを選ぶとき、パターンを拡大・縮小もできるのですが、

image6.jpg

拡大・縮小をするとパターンがぼやける原因になるので、基本的には100%で使いましょう。

とはいっても、じっくりデザインをする時間はなかなか取れない、そんな時に活用したいのがフォトショップ用のパターン素材です。

特にビジネスにおいてはホームページ広告、SNSに至るまで自社でデザインをしているという企業も少なくありません。

パターン素材は、レイヤースタイルに適用するだけで簡単にテクチャーできる素材で、あっという間にデザインを変えることができます。
現在は、無料で公開されているものも多く、種類も様々なデザインがありますので大変便利です。

今回はフリーで使えるパターン素材から61個を厳選してご紹介します。

パターンを取り入れるだけでぐっとデザインセンスがアップしますので、是非使用してみてください。