2015/02/03

無料で使えるPhotoshop用シームレスピクセルパターン1000+

無料で利用できるPhotoshop用のシームレスピクセルパターンを約1000パターンご紹介します。
ピクセル形式のシームレスパターンは、デザインのディテールを向上させたり、背景を上質なものに変えてくれるとっても便利で使えるパターンの1つです。
そんな便利なシームレスパターンを公開してくれているサイトから約1000パターンをお届けしています。
デザインや日々の業務のご参考になれば幸いです。
なお、ご利用の際には各ライセンスをご確認のうえ、ご利用ください。

Photoshop用パターンファイル（.pat）の使い方

こちらでご紹介したファイルはpat形式という、Photoshopのパターン専用ファイル形式になっています。
利用するには、「/Applications/Adobe Photoshop CS5.1/Presets/Patterns」というフォルダに入れる必要があります。
あとは、普通にレイヤースタイルや塗りつぶしで利用するだけです。
それではどうぞ。

32 Photoshop Patterns: Subtle Pixels

32 Photoshop Patterns: Subtle Pixels

34 Pixel Patterns

34 Pixel Patterns

12 Fun Photoshop Pixel Patterns

Fun Photoshop Pixel Patterns

28 Pixel Patterns V.7

28 Pixel Patterns V.7

60+ Tileable and Repeatable Pixel Perfect Photoshop Patterns (PAT)

60+ Tileable and Repeatable Pixel Perfect Photoshop Patterns (PAT)

24 Pixel Patterns

24 Pixel Patterns

75 Seamless Photoshop Pixel Patterns

75 Seamless Photoshop Pixel Patterns

54 Micro Patterns

Micro Patterns

20 Pixel Patterns

Pixel Patterns

20 Repeatable Pixel Patterns

20 Repeatable Pixel Patterns

12 Dark Pixel Extended

Dark Pixel Extended

30 Pixel Pattern Set

Pixel Pattern Set

18 Pixel Patterns

18 Pixel Patterns

30 Pixel Patterns for Photoshop (PAT)

30 Pixel Patterns for Photoshop (PAT)

10 Pixel Pattern

Pixel Pattern

26 Repeatable Pixel Patterns

26 Repeatable Pixel Patterns

100 Photoshop Pixel Patterns

Photoshop Pixel Patterns

15 Seamless Pixel Patterns

15 Seamless Pixel Patterns

5 Pixel Patterns

Pixel Patterns

15 ML Pixel Patterns

ML Pixel Patterns

83 TT-Pixel-Pattern Set 1

TT-Pixel-Pattern Set 1

16 Minimal Web Pixel Patterns

Minimal Web Pixel Patterns

8 Pixel Heart Patterns for PS

Pixel Heart Patterns for PS

8 Pixel Checker Patterns for PS

Pixel Checker Patterns for PS

10 SEAMLESS SUBTLE PATTERNS

SEAMLESS SUBTLE PATTERNS

5 Pixel patterns

Pixel patterns

15 PIXEL PATTERNS

15 PIXEL PATTERNS

60 Pixels Patterns

60 Pixels Patterns

23 Pixel patterns

Pixel patterns

20 Seamless Photoshop Grid Patterns

Seamless Photoshop Grid Patterns

115 pixel patterns for Photoshop

115 pixel patterns for Photoshop

12 Free Repeating Pixel Patterns

Free Repeating Pixel Patterns

5 Pixel Patterns

Pixel Patterns

10 Pixel Patterns

Pixel Patterns

シームレスパターンを現場で活用する方法

シームレスパターン素材をダウンロードしてからPhotoshopとCSSで活用する方法をご説明します。

Photoshop用のパターンファイル.patをPhotoshopで利用する方法

ダウンロードしたファイルがpat形式というファイルだったら、Photoshopのパターン専用ファイル形式を意味します。
利用するには、「/Applications/Adobe Photoshop/Presets/Patterns」というフォルダに入れる必要があります。
あとは、普通にレイヤースタイルや塗りつぶしで利用するだけです。

シームレスパターンをPhotoshopでつかう方法

.patファイルではなく、画像で作成されたパターンの使い方をご紹介します。
まずはダウンロードしたファイルのなかから、利用したい画像ファイルをPhotoshopで開きます。
たとえば以下のような画像だったとします。

続いて、選択範囲＞すべてを選択をクリックします。

編集＞パターンを定義をクリック。

好きな名前をつけてOKを押します。これで準備が整いました。

新規ファイルもしくはパターンを適用したいファイルを開きます。
編集＞塗りつぶしを選択します。
（もしくはレイヤー＞新規レイヤー＞パターンオーバーレイでも適用できます）

パターンを選択し、さらにカスタムパターンから、さきほど登録したパターンをクリックし、OKを押します。

これでパターンが適用されました。

CSSでパターンを適用する方法

説明不要かもしれませんが、念のため。
たとえば、bodyに対して適用したい場合は以下のようになります。
backgroundプロパティを利用し、ファイルの場所をして、repeatを設定するだけ。
簡単です。

Sponsored by

お役に立てましたら、以下どれでも結構のですので、ポチリと……。

Amazonアソシエイト・プログラム規約による記載
当サイトはamazon.co.jpを宣伝しリンクすることによってサイトが紹介料を獲得できる手段を提供することを目的に設定されたアフィリエイト宣伝プログラムである、Amazonアソシエイト・プログラムの参加者です。