CSS Nite LP34 フォローアップ(2)庄崎 大祐さん(Stocker.jp)『試してみた!便利なPhotoshop有料プラグイン 』

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

メッセージ、補足

Web制作向けのPhotoshopのプラグインは有料無料含めてたくさんありますが、有料のプラグインを購入できない場合でも無料のプラグインやスクリプト、Photoshop CCの新機能を使って同じようなことができる、ということをお話ししました。

快適なWebデザインカンプ制作のために、ぜひWebデザイン用のプラグインや新機能もご活用頂けると幸いです。

講演で紹介したプラグインです。

画像アセット機能で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.

2016年に開催されたCSS Nite関連の38イベントからベスト・セッションを選出しました。

CSS Nite in OSAKA, Vol.43「Reboot Dreamweaver」

3月に都内で好評のうちに終了したCSS Nite LP51「Reboot Dreamweaver」の大阪版を5月13日に開催します。