ガジェット通信

見たことのないものを見に行こう

便利なPhotoshop用オリジナル制作ベーシックパターン素材(ダウンロード可!)

DATE:
  • ガジェット通信を≫


(編集部注*2013年7月23日に公開された記事を再編集したものです。)

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

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

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

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

【こちらもおすすめ】

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

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

使用に関して

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

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

収録パターン一覧

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

パターン名の命名規則

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

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

パターンの形状

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

W:白
K:黒

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

サイズ

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

用途

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

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

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

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

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

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

5. 完成


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

背景が暗いときは?

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

デメリットと用法

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

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

さいごに

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

もりたでした。

カテゴリー : 生活・趣味 タグ :
LIGの記事一覧をみる ▶
  • 誤字を発見した方はこちらからご連絡ください。
  • ガジェット通信編集部への情報提供はこちらから
  • 記事内の筆者見解は明示のない限りガジェット通信を代表するものではありません。