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.

11月16日にCSS Nite LP65「ブランディングという切り口は、ビジネスとしてのウェブ制作において福音となりうるのか?」を開催します。

ブランディングを突き詰めたら店舗デザインまで任されるようになったアンティー・ファクトリー、非常に多くの支援実績を誇るブランディングウェブ戦略研究家の草間 淳哉さん。制作だけでなく、ブランディングを事業戦略の一環として提案しているILY,。3セッションで少し長めで構成します。

CSS Nite LP65「ブランディング」

12月21日にCSS Nite Shift13「ウェブデザイン行く時代来る時代」を開催します。毎年年末に開催している「Shift」シリーズの第13弾として、2019年のウェブ制作シーンを振り返ります。

Shift13:Webデザイン行く年来る年(CSS Nite LP59)

2018年、CSS Niteでは29回の関連イベントを通して125セッションが行われました。その中からベスト・セッション+αを選びました。

2010年から2018年のベスト・セッション