Creative CloudアセットのCreative Cloud Extractを使用することでコーディングに必要だったスライスが不要、またCSSを自動生成してくれたり計測してくれます。
実際に使ってみました。
始める前に
① 今回、下記URLの練習用サンプルPSDをダウンロードして使用しました。
https://helpx.adobe.com/dreamweaver/how-to/copy-css-from-psd.html?sdid=KRVOP
② 注意すること
・レイヤーはある程度まとめてあったほうがやりやすいです。
・画像は大きいサイズのままスマートオブジェクトにしておいた方が、書き出す時に写真を倍にできるので便利です。
・グラデーションなどの描画モードが、「乗算」などになっていないことを確認しておいた方がいいです。
アセットにPSDを入れよう
① Adobe CCにログインしたうえで、下記URLにアクセスしてください。
https://assets.adobe.com/
下の画像のようなサイトに入りますので、こちらでPSDデータをドラッグ&ドロップするとアセット内にPSDデータがアップロードできます。
② 入れたPSDを選択すると下の画像のようなページに遷移します。
「詳細」「アクティビティ」「Extract」と並んでる中の一番右の「Extract」をクリックしてください。
※レンダリングに時間がかかることがあります。
あまりにも時間がかかるようでしたら一回ブラウザを閉じてもう一度立ち上げたり、ブラウザを更新するとうまくいく場合があります。
Creative Cloud Extract 画面の説明
左で選択したエレメントが右にCSSで生成されます。
右側に使用しているフォント、カラーが出てきます。
スタイルガイドいらずですね！
タブ切り替えでレイヤーを見ることもできます。
レイヤーを表示/非表示切り替えすることもできます。
Creative Cloud Extractで出来ること
画像を書き出せます
①をクリックしたら「画像として保存」というプルダウンが出てきます。
②画像の名前を変えられます。
③PNG/JPG/SVGの中から書き出し形式を選べます。
④解像度を拡大/縮小して保存することができます。
※画像を大きいサイズで保存したい場合は、大きい画像をスマートオブジェクトにしておかないと画像が荒くなります。
※保存したファイルはアセット内に保存されます。
レイヤーごとに画像を書き出すこともできます。
※保存したファイルはアセット内に保存されます。
もちろん、テキストをコピーできます。
グラデーションもCSSを生成してくれるのでジェネレーターいらずです！
※この時、書き出した色がおかしい場合は元のPSDデータの描画モードが「乗算」などになっている可能性があります。
サイズを「px」と「%」で切り替えることができます。
エレメントを2つ選択すると、2つのエレメントの距離を測定することができます。
※こちらも上記の設定でpxでも%でも表示することができます。
最後に
もちろん、線のスタイルや円なども簡単にCSS生成ができました！
ただし、2017年6月19日現在では三角形は生成されなかったです…。
ちなみにBracketsでは「Extract for Brackets」という似たような便利な機能があったのですが、残念ながら2016年6月28日に終了しました…。
DreamweaverでもExtractが入っていますが、使い慣れたエディターでやりたい！という方はCreative Cloud Extractがおすすめです♪