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