WEBCRE8.jpウェブクリ8.jp

webデザイナーによる、デザインとwebを楽しむ情報ブログ

考える。

WEBCRE8.jpによるweb制作やデザインについての考察を
書き綴っていくカテゴリです。

[Photoshop]ブラシ、テクスチャ、スタイル…自作のアイテムを作ろう!

この記事は約13分ぐらいで読めます

とっつきやすいPhotoshopのアイテム達
Photoshopに備わるパターンやブラシ、スタイル等のアイテム。ネットでのダウンロード、プリセットもいいですけどせっかくだから自作してみませんか☆ Photoshop初心者向けです。

Photoshopでの操作には人や仕事の種類によってよく使うモノがあり、ほとんどの機能には「これを作るときはこのくらい」といった使いがちな設定や数値を保存しておく機能があります。いくつかの制作物に同じ効果をかけて統一感を出したり、作業をショートカットする為に使うわけですね。

その設定の調達手段として、

  • プリセット
  • 配布ファイル
  • 自作

といったものが挙げられます。

プリセットとは

Photoshopにはブラシやパターン、アクションなどにデフォルトで用意されたプリセットというものがあります。

何が用意されているかはバージョンによっても違うと思いますけど、場所は

コンピュータ:C→Program Files→Adobe→Adobe Photoshop*.*とかCS*→プリセット(Presets)

の中にあるはずです。

プリセットのフォルダ

プリセットのフォルダ

ちなみにwebcre8はCS4を使っています。Web PremiumなのでFireworksとか色々入ってましたけどなかなか他のが覚えられずほぼPhotoshopのみでなんでもやりますw

しかしバージョンが進むに連れて増強されてはいるものの…どうもプリセットでは物足りない、と感じると思うんですよね。そもそも使ってない人がほとんどかもしれません。特にスタイルとかは使うのが全然なくて、逆にシェイプは使いやすそうなのが結構あります。

とは言え最初はプリセットを掘り下げてみたりするのもいいかも知れませんね。ぶっちゃけプリセットフォルダから見てみると何に使うかわかんないのも多いですが、Photoshopで使う機能のほとんどはこことかプラグイン(Plug-ins)に入ってます。例えばフィルタはプラグインフォルダにありますね。

配布されているアイテム

ブラシやパターン、アクションなんかは結構素材配布コンテンツのサイトで無料で配布されたりしていますね。でも結構商用利用不可のものも多いです。勿論そういうのはやはり結構クオリティ高いのが多いですねw 一応以下のようなサイトで見つけることが出来ます。

deviantART: where ART meets application!

brushesとかpatternで検索すれば色々出てくるかと。ただ個人利用に限るものが多い印象です。

Photoshop VIP

主に海外で公開されている素材なんかを紹介してくれます。商用利用が可能かどうかもページによってははっきり書いてあるので使いやすいです。

ダウンロードファイルは対応したプリセットのフォルダに入れれば再起動後、メニュー下部に表示されます。

プリセットのフォルダの内容はメニューに表示される

プリセットのフォルダの内容はメニューに表示される

自作のアイテム

プリセットはイマイチ、でもダウンロードファイルが商用利用不可能だとお仕事で使いたい場合はちょっとどうにもなりません…。そんなときはもう自分で作っちゃいましょう!☆

自作したファイルも、普通のダウンロードファイルやプリセットと同様に読み込んだり置き換えたりできます。Photoshopを普通に使っている人にとっては簡単に自作出来るファイルがありますので、これは利用するべきですよね。

自作のアイテムを作ろう!

とっつきやすいPhotoshopのアイテム達

とっつきやすいPhotoshopのアイテム達

簡単に自作が出来るアイテムとその例や方法を挙げていきます。一度作ったものは配布するもよし、とっておいて後で使うもよしです。この蓄積によって短時間でもパッと締まったデザインが出来るようになるわけです。

ブラシファイルの作り方

ブラシファイル
拡張子:.abr

現在のブラシを選択している時、上部のボタンから展開したウィンドウでブラシを選びますよね。この時「マスター直径」と「硬さ」を使いやすいように変更した場合、「新規ブラシプリセット」を選択するとその設定値で新しいブラシとして保存できます。

新規ブラシプリセットで現在の状態をブラシパレットに登録

新規ブラシプリセットで現在の状態をブラシパレットに登録

ちなみにこのPhotoshop、買った時からこのブラシスライダの硬さがいじれないんですけどこれなんなんでしょうかw数値ならいじれるんだけどスライダが消えてる…

もう一つの作り方としては、レイヤ上にあるエレメントを選択範囲で囲んでいる場合

編集→ブラシの定義

で囲んだものをブラシに出来ます。不透明度も保持しますが、色情報は失います(モノクロにした感じ)。やろうと思えばフォントでも写真一枚でもブラシに出来ます。

文字をブラシにしているところ

文字をブラシにしているところ

単品のブラシは全てパレットの中に一時保存された状態になります。以下説明するアイテムは大体そうです

「ブラシを保存」を選ぶと現在のブラシパレットにあるブラシを丸ごと一つのabrファイルとして保存します。これをクラウドやUSBに保存しておけばどこでも同じセットのブラシを使えますね!人が同じ物をダウンロードして使うことも出来ます。

ブラシの詳細なカスタマイズ

ちなみにCS4のプリセットに入ってるカエデのブラシはバーっと書くとランダムに散らしてくれます。これはどうやって作るんでしょう?

どこにもそんな設定ないのに何このカエデの自由さ

どこにもそんな設定ないのに何このカエデの自由さ

それはブラシウィンドウに入ってます。

思いの外設定が多いwややこしいです…

思いの外設定が多いwややこしいです…

これを見る限りこのばら撒くカエデは「シェイプ」「散布」「カラー」「その他」「滑らかさ」5つの項目を駆使してます。…これを全部説明してるとホント果てしないので(疲れました)別途記事書きますね。慣れるとここをいじるの超楽しいです!

パターンファイルの作り方

パターンファイル
拡張子:.pat

選択範囲で切り出すと、その範囲を

編集→パターンの定義

でそのままパターンに出来ます。パターンは塗りつぶしの時使ったりレイヤースタイルでパターンオーバーレイやテクスチャに使ったりできます。敷き詰めて使うので基本的にはいつもシームレスに作っておくのが原則ですね。この前書いた[Photoshop]シームレスなテクスチャをワンクリックで作るアクションを作ったが役に立つと思うので作ってみてください☆

あとはパターンと一口に言っても、今挙げたテクスチャのような、どちらかと言うと大きな画像を切り出したタイプと、幾何学模様とか、図形の最小単位を繰り返すタイプのパターンとがあります。webデザインではそういうミニマルなパターンもよく使うので作っておくといいですよ。

よく使いそうなパターンは予め作っておくとラク☆

よく使いそうなパターンは予め作っておくとラク☆

ブラシと同様作り貯めたパターンはひとつのファイルにまとめて保存しましょう。プリセットで言うと「岩」とかは使い勝手としてはまあまあですかね。webcre8もたまに使います。

カスタムシェイプファイルの作り方

カスタムシェイプファイル
拡張子:.csh

大体同じ流れのアイテムはサラっと流して行きます。シェイプは選択しているシェイプからカスタムシェイプを作ります。

編集→カスタムシェイプを定義

です。

シェイプもよく使うのは取っておきましょ

シェイプもよく使うのは取っておきましょ

作ったパレットはツールのカスタムシェイプツールで確認できます。cshとして保存するのも同じですね。

スウォッチファイルの作り方

カラースウォッチファイル
拡張子:.aco
色見本のセットを作るファイルです。スウォッチには通常一揃いの色が揃っていますが、PANTONEなどのプリセットパレットに置き換えたり、使っていい色が決まってる場合は何色かに限定したカラースウォッチファイルを利用したりできますね。

スウォッチの余白をクリックすると現在使用中の描画色を登録できます。ファイルの保存も他のものと同じです。

予め色を限定したり追加したり

予め色を限定したり追加したり

スタイルファイルの作り方

スタイルファイル
拡張子:.asl
スタイルに関しては[Photoshop]レイヤースタイルの重なり方を研究するで触れていますが、これはPhotoshopの中でもwebcre8の特に好きな機能です。エレメントにドロップシャドウやベベルとエンボス等の同じ効果をつけることができます。

良いスタイルが出来たらちゃんとパレットにとっておいて、種類別に保存しておいたりすると便利だと思います。パターンと併用してもより面白いものが作れますね。スタイルのウィンドウを開いているときに「新規スタイル」でパレットに保存できます。プリセットにはあまりカッコいいのが無いので作りまくって保存しましょう!

ただ配布に関しては地味なせいか、webcre8はあまりモチベーションが湧きませんw いいのがひと通り出回ってるからかな…。簡単に作れるので慣れてない人は色々作ってみてはいかがでしょうか。

グラデーションファイルの作り方

グラデーションファイル
拡張子:.grd

グラデーション。使う局面は塗りつぶし、グラデーションオーバーレイ、レイヤーマスクと何かと出番の多い機能ですが、これもいい具合のグラデーションが出来たら保存しておくことをオススメします。グラデーションなんかタダのグラデーションじゃんって気もしますし配布もあんまり見かけないけど金属光沢とかわりと毎回作るの面倒ですよね。

グラデーションエディタの「新規グラデーション」ボタンで現在のグラデーションがパレットに追加されます。例によってパレットの中のものは保存すると一括でgrdファイルとして保存されます。

アクションファイルの作り方

アクションファイル
拡張子:.atn

独学でフォトショップを学んでいる人は難しそうだから避けている人もいると思いますが、アクションを使いこなすと作業効率がとんでもなく上がります!

アクションはPhotoshop上での操作一つ一つを保存して、再生することで現在のファイルにそれと同様の工程を行なってくれる機能です

初期設定やプリセットには額縁のような枠を付けてくれるもの、木材のようなテクスチャを作ってくれるものがありますが、これも真骨頂は自作のアクションを保存しておけるところにあります。webcre8は写真のコントラストを上げたりするアクションや、画像のサイズを統一する自作のアクションをよく使ってますが、配布されているファイルでは写真加工のアクションをよく見かけますね。

例えば[Photoshop]シームレスなテクスチャをワンクリックで作るアクションを作ったで公開した.atnファイルは下図の様になってます。

選択範囲を切って、違うレイヤーを選んで…というような操作を全て覚えさせることが出来るというわけです。

シームレステクスチャのアクションとアクションパネルのボタン

シームレステクスチャのアクションとアクションパネルのボタン

下部のボタンはそれぞれ

  1. 記録を停止
  2. 記録の開始
  3. 記録を再生
  4. 新規ファイル
  5. 新規アクション
  6. 選択を削除

となっています。

今から行う操作を記録したい場合は2を押し、止める所で1。実行したい場合は3を押すわけです。保存はフォルダごとに行われます。使用する局面ごとにフォルダを分けておくといいですね。

こんな感じで保存してます

こんな感じで保存してます

PSDファイルの作り方

PSDファイル
拡張子:.psd

一応配布ファイルとして出まわっているのでここに連ねましたが、まあ説明の必要は無いですよねw Photoshopで制作したものは普段jpgなどに変換して利用しますが、レイヤーに分かれているファイルをもらうことが出来ればクリエイタさんが、自分で加工を加えたりクオリティの高い素材を利用して違ったものを作ることができますよね。

配布されているものはブラウザやデバイスのモックアップ(iPhoneの実機のクオリティの高い画像に制作中のサイトのスクリーンショットをはめ込んでプレゼンに使ったり)や、クオリティの高い制作物のレイヤー構造等を教材的に使う事などですね。

まあ…作り方もなにもないものですがw 普通に保存して、他のファイルも同様ですが、圧縮ツールで圧縮してアップロードすれば誰でもダウンロードして使えます。

終わりに

いかがだったでしょうか。Photoshopは独学で使っている人も多いので、意外な機能を見落としてたりしますよね(webcre8もその一人ですw)。ほとんどあらゆる操作を保存してファイルにできるので、モノによっては人に言われて初めて便利さに気づいたり。

記事としてはちょっと浅いですけど…今後掘り下げる記事を書くための前フリと思ってくださいw

今回挙げたものは今後WEBCRE8.jpで制作ファイルの配布を検討しているアイテムで、残りのアイテムはあまりwebcre8自身が大して掘り下げて使ったことのないものです。この記事をお読みのPhotoshopマスターの方の中には「この機能は使わないと損だよ!」というものを知ってるんじゃないかなーと思います。こっそりでもいいので教えてもらえると嬉しいですw