デザイナー自家製Photoshop用パターン素材大公開中!(商用無料&クレジット不要)

もりた


デザイナー自家製Photoshop用パターン素材大公開中!(商用無料&クレジット不要)
(編集部注*2013年7月23日に公開された記事を再編集したものです。)

カラオケ行きたい。もりたです。

私はいつもデザインするとき、パターンが必要になったらその都度適当に作ってしまって、結局パターンファイルの中が「パターン45」とかそんな名前で埋めつくされるタイプなんですけど、デザイナーの皆さんいかがでしょう。

自分の中の命名ルールが決まってないから名前つけても適当すぎて判別できないんだよね……。結果いちいちクリックして試すなんて非効率的なことに。

まあそんなわけで、一念発起してこの自作パターンを整理しようと思い立ったわけですが、せっかくなので、ウェブデザイン制作時にセットで持ってると便利そうなパターンをまとめて配布することにしました。


【こちらもおすすめ】

パターンファイルダウンロード

DOWNLOADファイル名:basicpat.zip(6KB)

使用に関して

すごく基本的なパターンなんで、特に書かなくてもいいんですが、念のため。

  • 個人・商用関係なく無料でお使いいただけます。
  • クレジット表記は必要ありません。
  • オリジナルファイルの再配布・販売は禁止します。
  • ファイルの加工後再配布(つまり自作のパターンを追加して再配布)する場合は、配布ページにオリジナルファイルの配布URL(http://liginc.co.jp/web/design/photoshop/38980)と下記クレジットを記載した上で、パターンファイルとこの「使用に関して」を記載したテキストファイルを同梱した圧縮ファイルを配布するようにしてください。
    またその際のライセンスはオリジナルファイルに準ずるものとします。
  • クレジットを記載する際は、こちらの表記を使用してください。
    株式会社LIG(http://liginc.co.jp/) デザイナー:もりた

収録パターン一覧

収録パターンはこんな感じ。

pat

パターン名の命名規則

命名規則は以下のようになっています。
[パターンの形状-色-サイズ]

一個づつ説明していきましょう。

パターンの形状

  • obli:右上から左下にかけた斜線。。大きくてもアンチエイリアスがかかってても同じ。
  • obliR:obliqueの逆で、左上から右下にかけての斜線。
  • dot:1px*1pxの点がいろんなバリエーションで敷かれるタイプ。
  • dash:border-style:dashed;とborder-style:dotted;のために作ったパターン。広範囲で繰り返すとただの縞模様。
  • polka:水玉。
  • その他:日本語でつけてるので、意味がわからない場合はググってください。

  • W:白
  • K:黒

白と黒があれば大概のことはいける。

サイズ

繰り返し範囲のサイズ。つまり透過されてる余白の部分も含みます。
表記は横×縦で、もちろん単位はpx。

用途

普通にパターンとして使ってもらえればそれで本望ですが、上でも書きましたように、デザイン上、点線を作りたいときによく活用しています。

幅1pxの点線を引きたいとき(背景が薄い色のとき)

1. シェイプでラインツールを選択し、点線を引きたい場所に配置します

スクリーンショット 2013-07-19 19.38.15

2. レイヤースタイルからパターンを選択。dash-K-2×1のパターンを敷きます

SS02

3. レイヤーの塗りを0%にします

SS03

4. カラーオーバーレイで、点線に付けたい色をパターンの上に載せ、描画モードをカラー比較(明)にします

SS04

5. 完成

SS05
背景が薄い色でなくても、背景色とラインの色が同系色ならある程度濃い色でも同じ方法でいけます。この辺HSB値の相関関係とかで説明できそうなんですが、考えるのは大変そうなので頭の良い人が教えてくれることを願ってます。

背景が暗いときは?

逆に、背景色が黒に近い場合はdash-W-2×1(つまり白いパターン)を使って、カラーオーバーレイの描画モードを「比較(暗)」にします。
この方法で大体の色の組み合わせはカバーできるんじゃないですかね!

デメリットと用法

パターンが白か黒であれば今回配布したものでなくても、点線でなくても、いろんなものにこの方法は使えます。

とはいえ一見便利そうに思えて、実はコーディングのために画像を透過で書きだそうとすると一面ただのベタになってしまうという、書き出しには不便な方法なんですね……。
なので、パターンを透過で書きだす必要のないときや、色を変えて調整したいときのプレビュー用、あるいはCSSで色を設定する要素(点線とか)にお使いください。

さいごに

私が普段デザインに使用しているごく基本的で使い勝手の良いパターンを入れてみたんですが、いかがでしたでしょうか。
自分に必要なあの基本パターンがないんだけど!気が利かないなあ!という場合はぜひ追加したうえで配布してもらえるといいなあ。ダウンロードしに参ります。

もりたでした。

もりた
この記事を書いた人
もりた

デザイナー

おすすめ記事

Recommended by