ウェブデザインの主役！ Photoshopと親密にお付き合いする方法
- 2014年04月20日
CSS Nite というセミナーイベントを皆さんは御存知ですか？
ウェブデザイン界隈の「早く、美しく、上手い」猛者たちが集い、その知識がいかんなく共有されるセミナーイベント、それがCSS Niteです。CSS Niteという名前ですが、CSSだけじゃなく、ウェブデザインにまつわるネタならなんでもテーマとして取り上げていて、今回のテーマは「Webデザインで使うPhotoshop」。
4月19日の土曜、御茶ノ水はソラシティで、4名の登壇者の5セッションが行われ、私も参加してきましたー！
ということで、セミナーレポートをまとめましたので、どうぞ御覧ください！
なにも足さない。なにも引かない。デフォルトでも生かせるPhotoshopの小技
最初のセッションは、黒葛原 道（つづらはら・とおる）さんの、
「レイヤースタイルを使いたおす！ よく目にする、あの表現を作ってみよう」です。
プリセットのレイヤースタイルや機能だけでいろいろ作るという内容でして、Photoshopに、
“なにも足さない。なにも引かない。”
状態で、こんなことができるんだよ、という実演でした。
いくつか技を披露していただいた中で、「おおっ」と思った点を私なりにまとめてみました。
ちなみに、本記事は基本的にPhotoshop CCでの話となりますので、ほかのバージョンで動かない機能などが出てきた場合はご容赦ください！
CS5以前の方へのCC導入のための判断材料として、以下のAdobe公式の紹介記事がすてきですので、上司さんなどにプレゼンしてみましょう……！
旧バージョンと新バージョンでこんなにも違うワークフロー Photoshop編 第3回：Web制作に嬉しい機能強化アレコレ | Adobe Design Magazine
集中線はグラデーションで作れちゃう！
マンガの表現でよくある集中線、これが実はグラデーションだけでできてしまうのです！
こういうやつ。
ちなみにこれ、黒葛原さんの教えにしたがい、ものの10分で作ったものです。
ポイントは、レイヤースタイルでグラデーションオーバーレイを追加し、グラデーションのバー部分をクリックしたあとの設定を、以下のようにする点です。
- 真ん中あたりのグラデーションタイプを、「ノイズ」にする
- 粗さを「100％」に
- カラーモデルをHSBにし、彩度をゼロに
- オプション部分の「開始位置を乱数的に変化させる」ボタンを何度か押して、いい感じの分布になるまで試す
この手軽さはステキですね。覚えておくとポップな案件が飛び込んできたときに使える！
ついでに、私がちゃっかり作ってみたPSDファイルを置いておきます。
グラデ集中線のPSD
プリセットのブラシ、パターンなどは埋蔵されている！
Photoshopをインストールした直後の状態で立ち上げたときに使えるパターン、ブラシ、グラデーションなどって、なんていうか貧弱ですよね。
なにもかも足りない！ みたいな感じです。
でも、今回はじめて知ったのですが、じつは初期出荷時から、ブラシ、パターンなどはPhotoshopの中に含まれていて、それを取り出すことで増やせるんです。
勝手ながら、これらのパターン、ブラシを私は、「埋蔵パターン」「埋蔵ブラシ」などと呼ばせてもらいます。
この埋蔵パターンの呼び出し方ですが、やりかたは簡単、パターンを選ぶときのウィンドウ右上に、歯車アイコンがあります。
それをクリックして出てくる設定の画面の、下の部分にパターンのセット名（下部画像の「アーティスト」など）がありまして、そちらをクリックすると、「読み込みますか？」ダイアログが出てくるので、追加、を押すだけです。
まあ、実際のところ、追加した「埋蔵パターン」とかは、そんなに「わー、すっごい使える！」ってほどのパターンじゃなかったりするので（Adobeさんすんません！）、
自分でパターンを作ったり、ほかのデザイナーさんが作ったステキなパターンを見つけて使わせてもらったりと、結局は自分に合ったパターン集として、整理して使うのがベストだなと、あらためて感じました。
ご存知の方も多いでしょうが、
- 「Photoshop パターン 素材」
- 「Photoshop ブラシ」
などで検索すれば、たくさん素材は出てきますので、ぜひぜひ自分に合ったものを見繕ってみましょう。
あ、もちろんライセンスチェックは忘れずに！
黒葛原さんのセッションでは、ほかに
- 描画モードを使いこなそう
- シェイプツールは最近のバージョンでは強化されている
といった部分が勉強になりました。
ちなみに余談ですが、描画モードについてはこちらのブログ記事が参考になりましたので、あわせて紹介してきます。
Photoshopの描画モード(ブレンドモード)を理解するための、画像合成は計算だという話 | 俺CG屋
プラグインを入れて、フォトショを存分にカスタマイズ！
つづいては、庄崎 大祐（しょうざき・だいすけ）さんのセッション、
「試してみた！便利なPhotoshop有料プラグイン」です。
先ほどとはうってかわって、拡張の機能をフォトショにぶち込んでいこう、というお話。
無料のプラグインや拡張機能、JSの機能などを入れる記事はそれなりにあるのですが、
このセッションでは有料のプラグインを庄崎さんが実際にご購入された上での紹介と、似た機能を提供している無料プラグインとの対比をしてくれました。
その前に、もし「フォトショにプラグインなんか入れたことない！」という方は以下のブログ記事が参考になるんじゃないかなと。
「Photoshopをより便利に利用できる無料プラグインいろいろ」
この記事では、セッション内で紹介されたプラグインの中から、無料・有料にかかわらず、私が使ってみてもいいかも？ と思ったものを紹介していきます。
ちなみに、このセッション以降、CCで追加された「アセット機能」や、有名なプラグインのSlicyについての話は知っている前提のような感じだったのですが、「なにそれ！」という方はぜひ以下のブログ記事を参照ください。
Web制作者必見！Photoshop CCにSlicyのような画像アセット（Generator）機能が追加 | Stocker.jp / diary
本セッションの庄崎さんのブログ記事だったりします。
SVGをPSで書き出せるZeick
はじめて知ったのですが、CCからのアセット機能では、SVGの拡張子では書き出せないそうなんです。
そこで、Photoshopで.svg形式にて書き出してくれるプラグインがあるそうでして、それがZeickです。
Zeickは20ドルだそうで、もし.svgを日常的に書きだすのでしたら、けっこう良さそうですね。
ほかにも無料のプラグインで.svgに対応しているものも紹介があったのですが、そちらはイラレを立ち上げてそちらで書き出しているそうでした。
ただ、こういった「ちょっとだけ痒いところに手が届かない」機能は、そのうち公式のバージョンで実現する場合もありますので、「そのうち使うかも」というのであれば、有料に手を出す必要もないでしょうかね。
ワイヤーフレーム風のパーツを作れるプラグイン。
ワイヤーフレームを作るときに、Sketchやイラストレーターなどのアプリケーションで作成される方は多いでしょうが、Photoshopで作るっていう方は少ないんじゃないかなと。
そんなPhotoshopで、ワイヤーっぽいパーツを手軽に作れるプラグインが、Velositeyです。
といっても、どんな機能なのか、文字だとさっぱり伝わらない気がするんで、ぜひデモの映像を見てみるのをおすすめします。
プラグインを追加する手順
以下、Velositeyを追加する方法を書いておきますね。
基本的にはほかのプラグインも一緒です。また、Macでの方法です。Windowsではプラグインを入れるフォルダ名が違いますが、それ以外は一緒のはずです。
- Velositeyを解凍する
- Adobe Photoshop CC/Plug-ins/Panels のフォルダの中に、’Velositey’のフォルダを移動させる。Velositey_CC_v1.1のフォルダの一つ下のフォルダです。
- Photoshopを立ち上げる。すでに起動している場合はアプリを再起動
- ウィンドウ → エクステンション → Velositeyを選ぶと、パネルがひとつ追加されます
これで準備はOKで、Velositeyを使えるようになります。
せっかくなので、ちょっとだけVelositey使ってみたところ、ワイヤーっぽいパーツを作ってくれるだけでなく、作ったシェイプにガイドを自動で引いてくれたり、均等配置の機能があったりと、ちょっとした機能が便利そうな感じですね。
ほかの拡張機能やプラグインで、均等配置やレイヤーにそってガイドをひく機能はあったりするので、
「こういったプラグインを入れるのははじめて」という場合は、けっこう良いと思います！
ちなみに、Photoshopで拡張してなにか機能を追加する場合、
- プラグインを入れる
- JSXを入れる
- 拡張機能として入れる
の3種類があって、それぞれ導入方法が違いますのでご注意。今回はそのうちのプラグインの導入方法でした。
こちらのVelositeyプラグインは、ツイッターかフェイスブックでシェアすると無料なので、追加してみるのはいいかもですね。
追加の際は自己責任で！
ところで、このセッションを担当された庄崎さん、3番目のセッション担当のイシジマさんも執筆陣に名を連ねている本、『神速Photoshop』のWebデザイン編が最近発売されたので、よかったらぜひ。
手元にあるんですが、まだ読んでないんですよね……。時間見つけて読まなきゃ。
書評はこちらの記事がまとまっていましたんで、判断材料にどうぞー。
Photoshopで30分かかっていた作業がわずか1分でできるようになる「神速Photoshop [Webデザイン編]」 – GIGAZINE
写真やイラストがないときにどうにかする！
3つ目のセッションは、石嶋 未来（いしじま・みき）さんの、
「Webだからこそできる、写真やイラストがないときの低コストでデキるデザイン発想方法」
でした。
こちらは、まず「ひどい画質のしか支給されない！」というときに、まあ何とか見せられる画像にする方法の紹介でした。
簡単に箇条書きで方法を紹介します。
- 幅が足りないなら、コンテンツに応じるで幅を伸ばしましょう
- 手早く対応する方法A：レイヤーを複製し、ぼかしを強めにかける→ブレンドモードをオーバーレイでかける
- 手早く対応する方法B：Aに加えて、フィルターでノイズを加えて、ノイズちっくな表現にしちゃう
- しっかり対応する方法：人物だけを切り抜いて、人物レイヤーを2つに複製。上のレイヤーに、ダストアンドスクラッチ。そして、細かい表現が必要な部分や輪郭を、ブラシで不透明度を変えて消していく。
箇条書きですんで、うまく手順がトレースできなかったらすみません！
ほかにも「何も素材がないときはマジカルバナナ形式で発想するといい」との考え方を紹介してもらいまして、それは覚えておきたいですね。
え？ マジカルバナナをご存じない？
20代後半以上のお兄さま、お姉さまに、「マジカル頭脳パワー！！ について知りたいです」と聞いてみてくださいませ。
運動会のカルメンのやつ、とか答えが来るかもしれないですけど（笑）
効率化のいち手段に、スクリプトも検討してみよう
「自分でスクリプトを書いて効率アップ」
ふたたび、庄崎 大祐（しょうざき・だいすけ）さんのセッションです。
プラグインみたいだけどちょっと違う、スクリプト。
個人的な意見ですが、「ひとまとまりの機能」がプラグインだとしたら、「一つの追加機能」がPhotoshopのスクリプトです。
Photoshop中級者以上の方でしたら、アクション機能は使ったことがあるでしょうが、あれのうちの一つを配布できるようにスクリプト化したもの、といった説明になるでしょうかね。
現状、MacとWinの両方に適用させられるのは、JSで書く必要があるそうです。
あたらしい言語を覚えなくていいのはありがたいところ。
このセッションでは、「案外難しくないので、自作してみよう！」といった内容でした。
JSの基礎の「変数」「関数」などがわかるのであれば、Photoshopのスクリプトはできそうだな、というのがこのセッションで実感できました。
まず、ScriptingListenerというAdobe公式のプラグインを使う必要がありますので、AdobeのページからDLし、該当のフォルダにまずは入れて、ScriptingListenerを使える状態にしましょう。
上記ページは公式のプラグインがいろいろとまとまっているページなので、下の方の「ScriptingListener プラグイン」の項目からどうぞ。
こちらのプラグインは、自分のPhotoshop上での作業をJSとしてlogに書き出せるものなんですが、
それを使って作業をJSとして吐き出しただけでもスクリプトになりますし、そこから変数を利用するなどのカスタマイズを少しすれば、立派なスクリプトです。
上記のような、作業を記録するだけならアクションでもよいのですが、その都度、文字などを変更したい場合なんかはスクリプトのほうがいいでしょうね。
というのも、ダイアログを出してユーザに入力させることもできるからです。それを変数として保存して、該当箇所に入れちゃえばいいわけです。
というわけで、「いける！」と感じられましたでしょうか？
まあ、JSまではカバーされていない方も多いと思うので、たとえば週末プログラマを目指すかたわらに、ちょっと試してみるのもいいんじゃないかなと！
お嫁に出してもはずかしくない！ レイヤー構成がきれいなデータづくり
最後は、「実案件で活用できるPhotoshopデータ作成ルール」のセッションで、
牧下 浩之（まきした・ひろゆき）さんです。
マークアップの方が作りやすいデータ、納品のあとに修正に強いデータを作りたい、という思いはデザイナーにとって永遠のテーマですが、
そのテーマをまさにトップレベルで実践されているのが、牧下さんのデザインデータなのではないでしょうか。
そんな牧下さんに紹介していただいたデータ作成ルールでだいじなポイントについて、順に追っていきましょう。
カラースキームを管理する
カラーを、スウォッチで管理するとよいのだそう。
プリセットマネージャーでプロジェクトごとのスウォッチを作り、読み込むんですね。
また、スウォッチだけじゃなく、カラーオーバーレイでスウォッチと同じ色をスタイルとして登録しておくのも、一手間かかるけど便利なんだとか。
カラーオーバーレイでのスタイルまでは必要ないかもですが、スウォッチでの管理は真似したいです。
シェイプレイヤーを活用
CCからは、シェイプツールで作成した角丸がライブシェイプ扱いになるので、角丸の数値をあとから調整可能できます。
たとえば、左側のふたつだけを直角にしたりできますし、サイズをおもむろに変更してもRが変わらないのはありがたいですよね。うまく活用したいです。
それだけでなく、シェイプツールで線も設定できるので、イラレっぽい使い方ができるようになりました。
ただし、線はCS6からの機能なので、CS5以前で開いちゃうとうまくいかないところだけ注意です。
変更に強いテキストエレメント
DTP屋さんにはお馴染みなんですが、ウェブデザインでも「段落スタイル」を活用すると便利なのです。
補足ですが、段落スタイルとは、フォントの種類、サイズ、行間などを記憶して使いまわせる機能のことですね。
私は、イラレやインデザならともかく、フォトショでは使ってなかったので、今後使っていきたいです。
「これは真似しよう」と思ったのが、文字スタイルをフォントの種類で設定し、段落スタイルで行間と文字サイズを設定する方法です。使い分けることで、段落スタイルの数をむやみに増やさずに運用できるってことでしょうね。
また、現状段落スタイルはプリセットマネージャーでは管理できないのですが、
別ファイルの段落スタイルを読み込むことで、持ってくることができます。
それから、シェイプレイヤー上でテキストボックスを作れるようになったので、活用しようというお話と、
背景の上に文字を乗せる場合、背景幅いっぱいにテキストボックスを作りそちらに対して左右のインデント指定を段落から設定することで、CSSでのパディングやマージンがあたった状態を作る方法を紹介されていました。
特にインデント指定ですきまをあける方法は、個人的に「おおっ！」ってなった内容だったので、すぐに真似したいですね。
レイヤーを整理しよう
同じレイヤーには同じ名前をつけることや、テキストレイヤー以外には名前をつけることなど、レイヤー名に対してしっかりルールを決めておくと便利なのだそう。
複製したときに「コピー」とレイヤー名に追加させない設定などもだいじですね。
なぜなら、CS6からレイヤー内の検索機能を使えるので、同じ名前にしておくと、たとえば_hoverなどの名前で統一しておくことで、マウスオーバーのレイヤーのみを検索できるわけです。
これは、私もそこまでは考えていなかったので真似しなきゃ！ と思いました。
テンプレートを意識しよう
ウェブデザインでは、ヘッダーとフッター、サイドナビなど、多くのページで共通となるパーツってありますよね。
それらをまとめておいて、「テンプレート」としてのファイルを一枚つくっておく方法で、特に便利な設定方法を伝授していただきました。
それは、テンプレートとなるファイルから、ヘッダーなどのパーツなる部分全体をアセット機能を使いつつPNGとして書き出しし、書きだしたPNGを「リンクを配置」でテンプレート以外のページに配置する、という方法です。
アセット機能を使ったことある方ならわかるのですが、あの機能は保存するだけで書き出されるので、変更して保存するだけでPNGがはきだされます。
そのうえで、はきだされたPNGを「リンク」しておくことで、テンプレート以外のファイルのパーツが自動的に更新されるわけです。
もう、鮮やか、の一言。
もっとも、そこまで大規模なサイト制作でない場合や、CCじゃないバージョンのPSとやりとりするなら使えないのですが、環境さえ許せば導入したい方法ですね。
まとめ：真似してみよう！ やってみることがだいじ
以上、5セッションのレポートでした。
聞いただけでは身にならないので、とにかく明日から真似してみます。
セミナーイベントのあとの懇親会にも参加したのですが、そちらでは各セッションの感想や登壇者の皆さまのお話など、貴重な意見を聞けたので、本当にありがたかったですね。
まあ真面目な話だけじゃなくて、全然関係ないダイミダラーのウェブサイトで盛り上がったりしました（笑）
というわけで、このブログを見た方も、なにかしら参考になる部分がありましたら、ぜひ真似してみることをおすすめします！
- 2014年04月20日