PhotoshopからCSSを生成するエクステンション「CSS3Ps」

Photoshopで作られたWEBデザインがそのままコードになってくれたらな、と思う事があります。
そんな願いを少し叶えてくれるのが「CSS3Ps」です。

1.CSS3Psのダウンロード

Photoshopのエクステンションに「CSS3Ps」を追加します。
まずはダウンロードしましょう。

※2021/3/17時点では「for Adobe Photoshop CC 2019」が最新ですが、CC2020でも動作することを確認しました。

2.ZXPファイルのインストール

上記でCSS3Ps-(version).zxpというファイルをダウンロードしたら、
zxpファイルをインストールする為のアプリを入手して、Photoshopにインストールしましょう。

3.PhotoshopのデザインをCSS化！

3-1.CSS3Psの場所

インストールした「CSS3Ps」は、Photoshopのエクステンションの中に入っています。
・メニューバー＞ウィンドウ＞エクステンション＞CSS3Ps
クリックすると「CSS3Ps」のロゴが出現します！

3-2.デザインをCSS化！

CSS化したいパーツを選んで「CSS3Ps」ロゴをクリックすると、ブラウザにCSSが出力されます。
複雑なグラデーションがついているときなどに便利そうですね！

↓

4.注意点

少し試してみたところ、反映されるもの、されないものがあるので注意しましょう。

以上です！

参考：https://www.qam-web.com/?p=11679