[ダウンロード]商用無料、108個のピクセルベースパターン素材作りました
この記事は約5分ぐらいで読めます
今回作ったのはPhotoshopのパターンファイル。拡張子は.patで、Photoshopのプリセットのpatternフォルダには初期設定のものが入っています。この辺は過去記事[Photoshop]ブラシ、テクスチャ、スタイル…自作のアイテムを作ろう！で一通り説明しています。使い方が分からない人はそちらを参照してくださいね。
グラフィックパターンの名前を調べましたけど
以前書いた[デザイン]グラフィックパターンや柄、テキスタイル等の名前まとめという記事で、色んなグラフィックパターンや柄の名前を調べてみました。服飾やインテリア壁紙、ファブリック等に使われるこれらのパターンですが、webサイトに応用することでクールだったり、かわいらしい親しみのある、またはポップな雰囲気が出せたりします。
直線、格子、円形モチーフのピクセルパターン
今回はちゃんと前フリをしたので(かなり経ってますがｗ)、ピクセルベースなパターン素材として作ったものを配布しようと思います。
ピクセルベースパターンの内容一覧
6個づつ並んでいるパターン選択
気をつけた点としては
- パターンの名称を意識してつける。具体的には名称を「パターンの分類の名称」「斜め(Oblique)、整列(Alignment)等のバリエーション名」に続き、数字は「黒字の幅」-「白地の幅」または「セルの横幅」-「セルの縦幅」や、「バリエーションの通し番号」等がつけられています。
- 各種6×6の36個ずつパターンを作った。Photoshopのパターンファイルは6つごとに表示されるので読み込んだ時見やすい(はず。CS4まではそう)。使いやすさを意識。
といったようなことです。
直線系のパターン
まずは直線系を36個。hairlineStripe1-1は拡大するとブロックストライプとなるんですが、一応別に作っています。わりと作るのがめんどくさいのが斜めのドットライン。でも一度用意するとかなり使い勝手がいいですよ★
直線系パターンのサムネイル
格子系のパターン
格子系のパターンもデジタルな雰囲気を出したりカワイクもなったりと汎用性が高いです。まあ、タータンチェックとかいつ使うんだって感じですけど、一応そういうコンセプトだったので…ｗ
格子模様はかなり多種多様
円・点系のパターン
円形のパターンはバリエーションが少なく、また分類の名称が大きさを基準にして付けられている為なんかちょっと分類としては微妙なんですが、ドット(こっちの『ドット』は『点』と言う意味です)の並び方や間隔で工夫してみました。
配列の仕方ではなくドットの大きさで名前が違う
ダウンロード
ダウンロードは以下から。パターンファイルが3つ入っています。当然商用可です★
WEBCRE8jpPixelPatternALL.zip
ダウンロードする
利用の範囲
- 制作での使用：用途に関わらず自由
- ファイル自体の再配布：著作権表記とリンクが必要
リニューアルと同時にこの辺の整備も行いたいのですが、取り急ぎ気になるであろう部分を書いておきました！
終わりに
いかがでしたでしょうか。件の記事で後半紹介した日本の伝統的な柄や迷彩などはまた別途作ろうかなーと思ってますけど、迷彩なんかは特にあんまりドットでやる意味もなさそうなのでベクターベースで作るかもしれません。
他にも幾何学模様や星などの定番シンボルを使ったピクセルベースパターンを作ろうかなーとは思ってますので(気長に)待ってもらえればなーと思いますｗ
追記
利用の範囲を追記しました。
追記2
初心者向けにピクセルベースの素材を上手く使う方法なんかを書いてみました。良ければこちらもどうぞ★
[Photoshop]ピクセルベースパターンの基礎的な使い方と注意点
追記3
Twitter等でも仲良くさせて頂いている(大先輩ですけど！ｗ)@sivacchiさんのブログ、WebデザインのタネでこのパターンファイルのFireworks版を作って頂きました！Fireworks使いの人はこちらもどーぞ★