Photoshopのデザインパターンの作り方＆フリー素材61選

パターンとは！？

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

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

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

パターンの使い方

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

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

パターンの表示の仕組み

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

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

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

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

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

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

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

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

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

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

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

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

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

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

シェイプに適用する

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

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

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

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

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

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

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

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

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

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