2014年4月19日、御茶ノ水ソラシティカンファレンスセンターで開催したCSS Nite LP34「Webデザインで使うPhotoshop」のフォローアップとして、庄崎 大祐さん（Stocker.jp）の『試してみた！便利なPhotoshop有料プラグイン』セッションのスライドなどをシェアします。
- スライド、デモデータ（17.9MB）」「自分でスクリプトを書いて効率アップ」同梱
- 音声
CSS Nite LP34 でお話しした『試してみた！便利なPhotoshop有料プラグイン 』の内容が公開されました。Ps CC 2014 では動かないプラグインも多いのでお気をつけください。 http://t.co/vhiq4uNIMh
— なつき (@Stocker_jp) 2014, 7月 19メッセージ、補足
Web制作向けのPhotoshopのプラグインは有料無料含めてたくさんありますが、有料のプラグインを購入できない場合でも無料のプラグインやスクリプト、Photoshop CCの新機能を使って同じようなことができる、ということをお話ししました。
快適なWebデザインカンプ制作のために、ぜひWebデザイン用のプラグインや新機能もご活用頂けると幸いです。
講演で紹介したプラグインです。
- Zeick: Photoshop SVG Export（$19.99）
http://www.zeick.com/ - Export your vector layers from PS to SVG（無料）
http://hackingui.com/design/export-photoshop-layer-to-svg/ - IcoMoon（SVGからWeb Fontsへの変換・無料）
http://icomoon.io/ - PNG Hat（$39.99）
http://pnghat.madebysource.com/ - pngquant（無料）
http://pngquant.org/ - CSS Hat（$35）
https://csshat.com/ - PNG HatとCSS Hat、他2つのプラグインのセット販売（$89.99）
http://plugin.subtlepatterns.com/#bundles - WebZap（$19）
http://webzap.uiparade.com/ - Velositey（無料）
http://dandkagency.com/velositey/
画像アセット機能でSVG書き出しする方法
画像アセット機能を使ってSVG書き出しするためには、Photoshop CCのバージョン14.2以降である必要があります。
ダウンロードデータのZIPファイルを解凍し、中に入っている「generator.json」をFinderでコピーします。
Finderのメニューから［移動＞ホーム］を選択し、先ほどの「generator.json」をペーストします。
Windowsの場合、ユーザーフォルダ（ユーザー名のフォルダ）に「generator.json」をペーストします。
Photoshop CCを起動し（既に起動していた場合は再起動し）、カスタムシェイプのレイヤー名の最後に.svgをつけます。
Photoshopのメニューから［ファイル＞保存］などでPSDを保存したあとで、［ファイル＞生成＞画像アセット］にチェックを入れます。PSDを保存したフォルダーと、同じフォルダーに「assets」というフォルダーができ、その中にSVGが保存されているはずです。
画像アセット機能の詳しい使い方は、以下の記事をご覧ください。
Web制作者必見！Photoshop CCにSlicyのような画像アセット（Generator）機能が追加 | Stocker.jp / diary
CSSをコピー機能の使い方
CSSをコピー機能を使うためには、Creative Cloud版のPhotoshop CS6またはPhotoshop CCである必要があります。
レイヤーパネルで、ドロップシャドウなどのレイヤースタイルがついたシェイプレイヤーなどを選択し、レイヤー名の上で右クリックして「CSSをコピー」を選択します。
Dreamweaverやテキストエディターなどでペーストすると、CSSがペーストされます。
iframe src="//player.vimeo.com/video/92403336" width="640" height="360" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen>
試してみた！便利なPhotoshop有料プラグイン／庄崎 大祐（Stocker.jp） from CSS Nite on Vimeo.
ベストセッション2019
2019年、CSS Niteでは49回の関連イベントを通して123セッションが行われました。その中からベスト・セッション＋αを選びました。
