CSS Nite LP34 フォローアップ（2）庄崎 大祐さん（Stocker.jp）『試してみた！便利なPhotoshop有料プラグイン 』 | CSS Nite公式サイト

2014年4月19日、御茶ノ水ソラシティカンファレンスセンターで開催したCSS Nite LP34「Webデザインで使うPhotoshop」のフォローアップとして、庄崎 大祐さん（Stocker.jp）の『試してみた！便利なPhotoshop有料プラグイン』セッションのスライドなどをシェアします。

• スライド、デモデータ（17.9MB）」「自分でスクリプトを書いて効率アップ」同梱
• 音声

CSS Nite LP34 でお話しした『試してみた！便利なPhotoshop有料プラグイン 』の内容が公開されました。Ps CC 2014 では動かないプラグインも多いのでお気をつけください。 http://t.co/vhiq4uNIMh

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書き出しするためには、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をコピー機能を使うためには、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.