私はドット絵が好きです。それでデザインにドットっぽい表現を取り入れたりもよくするんですが、以前その流れでピクセルベースパターン素材を配布してます。

[ダウンロード]商用無料、108個のピクセルベースパターン素材作りました – WEBCRE8.jp

このときは直線、チェック、(水玉と言う意味の)ドットを使った素材を配布しました。良ければそっちもチェックしてみてくださいね！

変則的なパターンも作ってみました

WEBCRE8.jp Geometric pixel pattern

ドット絵と幾何学模様が好きなので、パターン作りなんかは正直超楽しいです★

そこで今回は基本的には矩形をモチーフに、36個のパターンを作ってみました。記事の最後にダウンロードボタンがあるので試してみてください！

ピクセルパターンの応用

WEBCRE8jpPixelGeometricPattern.patの内容

普通に使うとすると、背景やモチーフに不透明度を下げてうっすらと入れることで、単純な塗りつぶしやグラデーションよりも表情を作ることが出来ます。

使い方や注意点に関しては以前以下の記事で書いていますね。

[Photoshop]ピクセルベースパターンの基礎的な使い方と注意点 – WEBCRE8.jp

他にも地味に便利な使い方があったりするので紹介してみます！

透明レイヤーの表現

Photoshopをお使いの皆さんにはおなじみの透明レイヤーを示す市松模様。これはチェック模様を用意すれば作成できます。

まずWEBCRE8.jpで配布しているピクセルベースパターンのチェックをダウンロードし、2×2ピクセルのセルから構成されるパターンで塗りつぶします。

透明レイヤーは不透明度20％のブラックのチェック

それを画像補間方式をニアレストネイバーにした状態で400％拡大し、不透明度を20％にします。そうすればグレー部分は透明レイヤーと同じ濃さのグレーになります。

破線や様々な罫線

破線を作るのってちょっとPhotoshopだと面倒だったりしますが、これは線を書いたあと、パターンを被せることで近い表現が出来ます。

パターンを被せて作れる罫線

罫線にパターンを被せる方法はレイヤースタイルのパターンオーバーレイを使う事になると思いますが、持っているパターンと違うサイズにしたい場合はレイヤーマスクでパターン画像を重ねることで対応できます。パターンさえダウンロードしておけばサッと出来ますので試してみてください！

パターンとは関係ないけど更に手抜き

とはいえ、これらはPhotoshop上の表示をスクリーンショット撮って切り抜くことでも出来ますんで、それでもいいかもしれませんｗ

ダウンロード

ダウンロードは以下から。

WEBCRE8jpPixelGeometricPattern.zip
ダウンロードする

利用の範囲

• 制作での使用：用途に関わらず自由
• ファイル自体の再配布：著作権表記とリンクが必要

終わりに

ドットパターンは今後も思いついたりストックが溜まってきたら公開するので、役に立ててやってもらえると嬉しいですね！★