PhotoshopのレイヤースタイルをCSSで再現してリアルタイムに出力してくれるプラグインCSS Hat

2012/09/06追記：現在 Windows版も対応されています。
fontのプロパティ各種にも対応されています。
詳しくは最新の記事にて確認して下さい。

最近はCSS3によってリッチなUIを作成できるようになりましたが、
Photoshopで作成されたデザインを元に
CSSを作成するのはなかなか手間で、
PhotoshopでCSSを書き出せたら楽なのに…
と思う方も多いのではないかと思います。
それを実現してくれたPhotoshop プラグインがあったので紹介します。

CSS Hat

先日このページを見つけて、
サイト内に設置してあるフォームにメールを送って
そのまま何も無かったので忘れかけていたところ、
『CSS Hat is launching』
というメッセージが届いていて、
購入するためのリンクが届いていました。

30%オフの$19.90(通常は$29.99)で購入出来るとのことだったので
モノは試しという感じで購入してみました。

購入方法はGumroadです。
なのでクレジットカードが無いと決済ができません。
あと今のところAdobe Photoshop CS4以降のバージョン、
CS5からサポートされている(後々対応?)とのことなので、
注意してください。
Windowsにも今のところは対応していません。

インストール

インストール開始前はPhotoshopを終了させておきます。

決済完了後、dmgがダウンロード出来るページが送られてくるので、
ダウンロード完了後dmgをダブルクリック、
表示されたウィンドウの真ん中にあるアイコンをダブルクリック。
インストールが開始されます。

インストール完了後、再びPhotoshopを立ち上げると、
ウィンドウ→エクステンションの中にCSS Hatが追加されています。
CSS Hatを選択するとウィンドウが立ちあがります。
ここにCSSが反映されます。

実際にCSS3で作られたボタンを作ってみる

実際に使ってみました。
とりあえずどのように動作、利用するのかを説明していきます。

シェップツールを使ってボタンっぽいものを作っていきます。
角丸長方形ツールで横長の長方形を置いてみます。

CSS hatウィンドウに今の置いた長方形のCSSが反映されました。
丸みで指定した3pxがウィンドウに反映されていますね。
次にレイヤースタイルを設定してみます。

一気にプロパティが増えました。
出力はリアルタイムにcss hatのウィンドウに反映されます。
box-shadowやグラデーションのCSS調整は面倒なので
これは便利かもしれませんね。
ここで、CSS Hatのウィンドウに警告文が表示されたのなら
それは対応していない効果などがあるということです。

この記事の最後にも書きましたが、
ブレンドモードには一切対応していません。
レイヤースタイル内で使用していても同様で、
対応していないとの警告がでます。

なので、チームで利用することになった場合、
ブレンドモードを切って作成するというルールを作って
共有しておかないと、デザインとコーディング時で外見が変わって
問題になるかもしれないので注意が必要です。

その他のサポート機能

CSS hatウィンドウの下の方にいくつか選択できる項目があります。
これらを簡単に説明していきます。

①,クリップボードにコピー

そのままです。これを押すことでクリップボードにコピーされますので、そのまま貼りつけをすることで表示されているコードがコピーされます。

②,コメントの付加

何に対してのスタイル文なのかをコメントで表記してくれます。

border-radius: 3px; / from vector shape /
  background-clip: padding-box; / prevents bg color from leaking outside the border /
  background-color: #dedede; / layer fill content /
  box-shadow:
    2px 2px 6px rgba(177,177,177,.75) / drop shadow /,
    inset 1px 1px 9px rgba(48,48,48,.1) / inner shadow /,
    inset 0 0 0 rgba(250,250,250,.75) / inner glow /;
  border: 1px solid rgba(125,159,123,.65); / inner stroke /
  background-image: linear-gradient(90deg, #49a649 0%, #b5cb3d 60.01%, #ebf7c7 89.99%, #b9c685 100%); / gradient fill /

③,ベンダープレフィックスの付加

出力されているCSSに対してベンダープレフィックスを付加するかどうかを選択できます。
グラデーションオーバーレイを利用している場合、
これをチェックすることにより、データスキームで書かれた
SVGのグラデーションコードも追加されます。

-moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  border-radius: 3px;
  -moz-background-clip: padding;
  -webkit-background-clip: padding-box;
  background-clip: padding-box;
  background-color: #dedede;
  -moz-box-shadow:
    2px 2px 6px rgba(177,177,177,.75),
    inset 1px 1px 9px rgba(48,48,48,.1),
    inset 0 0 0 rgba(250,250,250,.75);
  -webkit-box-shadow:
    2px 2px 6px rgba(177,177,177,.75),
    inset 1px 1px 9px rgba(48,48,48,.1),
    inset 0 0 0 rgba(250,250,250,.75);
  box-shadow:
    2px 2px 6px rgba(177,177,177,.75),
    inset 1px 1px 9px rgba(48,48,48,.1),
    inset 0 0 0 rgba(250,250,250,.75);
  border: 1px solid rgba(125,159,123,.65);
  background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+PGxpbmVhckdyYWRpZW50IGlkPSJoYXQwIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjUwJSIgeTE9IjEwMCUiIHgyPSI1MCUiIHkyPSIwJSI+CjxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9IiM0OWE2NDkiIHN0b3Atb3BhY2l0eT0iMSIvPgo8c3RvcCBvZmZzZXQ9IjYwJSIgc3RvcC1jb2xvcj0iI2I1Y2IzZCIgc3RvcC1vcGFjaXR5PSIxIi8+CjxzdG9wIG9mZnNldD0iOTAlIiBzdG9wLWNvbG9yPSIjZWJmN2M3IiBzdG9wLW9wYWNpdHk9IjEiLz4KPHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjYjljNjg1IiBzdG9wLW9wYWNpdHk9IjEiLz4KICAgPC9saW5lYXJHcmFkaWVudD4KCjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxIiBoZWlnaHQ9IjEiIGZpbGw9InVybCgjaGF0MCkiIC8+Cjwvc3ZnPg==);
  background-image: -moz-linear-gradient(90deg, #49a649 0%, #b5cb3d 60.01%, #ebf7c7 89.99%, #b9c685 100%);
  background-image: -o-linear-gradient(90deg, #49a649 0%, #b5cb3d 60.01%, #ebf7c7 89.99%, #b9c685 100%);
  background-image: -webkit-linear-gradient(90deg, #49a649 0%, #b5cb3d 60.01%, #ebf7c7 89.99%, #b9c685 100%);
  background-image: linear-gradient(90deg, #49a649 0%, #b5cb3d 60.01%, #ebf7c7 89.99%, #b9c685 100%);

④,レイヤーの大きさをCSS中に記載する

これをチェックすると選択しているレイヤーの大きさを、
widthとheightとしてCSSを出力する際に含めることができます。

⑤,そのままCSSファイルに貼り付けられる形式にしてくれる

つまり中括弧(｛｝)と仮のクラス名を付記して出力してくれます。今までの機能を全部オンにして出力すると以下のような感じのコードが出力されます。

.layer {
    width: 330px;
    height: 88px;
    -moz-border-radius: 3px; / from vector shape /
    -webkit-border-radius: 3px; / from vector shape /
    border-radius: 3px; / from vector shape /
    -moz-background-clip: padding;
    -webkit-background-clip: padding-box;
    background-clip: padding-box; / prevents bg color from leaking outside the border /
    background-color: #dedede; / layer fill content /
    -moz-box-shadow:
        2px 2px 6px rgba(177,177,177,.75) / drop shadow /,
        inset 1px 1px 9px rgba(48,48,48,.1) / inner shadow /,
        inset 0 0 0 rgba(250,250,250,.75) / inner glow /;
    -webkit-box-shadow:
        2px 2px 6px rgba(177,177,177,.75) / drop shadow /,
        inset 1px 1px 9px rgba(48,48,48,.1) / inner shadow /,
        inset 0 0 0 rgba(250,250,250,.75) / inner glow /;
    box-shadow:
        2px 2px 6px rgba(177,177,177,.75) / drop shadow /,
        inset 1px 1px 9px rgba(48,48,48,.1) / inner shadow /,
        inset 0 0 0 rgba(250,250,250,.75) / inner glow /;
    border: 1px solid rgba(125,159,123,.65); / inner stroke /
    background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+PGxpbmVhckdyYWRpZW50IGlkPSJoYXQwIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjUwJSIgeTE9IjEwMCUiIHgyPSI1MCUiIHkyPSIwJSI+CjxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9IiM0OWE2NDkiIHN0b3Atb3BhY2l0eT0iMSIvPgo8c3RvcCBvZmZzZXQ9IjYwJSIgc3RvcC1jb2xvcj0iI2I1Y2IzZCIgc3RvcC1vcGFjaXR5PSIxIi8+CjxzdG9wIG9mZnNldD0iOTAlIiBzdG9wLWNvbG9yPSIjZWJmN2M3IiBzdG9wLW9wYWNpdHk9IjEiLz4KPHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjYjljNjg1IiBzdG9wLW9wYWNpdHk9IjEiLz4KICAgPC9saW5lYXJHcmFkaWVudD4KCjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxIiBoZWlnaHQ9IjEiIGZpbGw9InVybCgjaGF0MCkiIC8+Cjwvc3ZnPg==); / gradient fill /
    background-image: -moz-linear-gradient(90deg, #49a649 0%, #b5cb3d 60.01%, #ebf7c7 89.99%, #b9c685 100%); / gradient fill /
    background-image: -o-linear-gradient(90deg, #49a649 0%, #b5cb3d 60.01%, #ebf7c7 89.99%, #b9c685 100%); / gradient fill /
    background-image: -webkit-linear-gradient(90deg, #49a649 0%, #b5cb3d 60.01%, #ebf7c7 89.99%, #b9c685 100%); / gradient fill /
    background-image: linear-gradient(90deg, #49a649 0%, #b5cb3d 60.01%, #ebf7c7 89.99%, #b9c685 100%); / gradient fill /
  }

これでCSSとして書きだすのがだいぶ楽になりましたね。

実際にCSSを書きだして比較してみる

これまでに作成したCSSを実際に適応して再現度を比較してみましょう。
先ほどの画像だけでは少し物足りないので、テキストものせてみました。
まずPhotoshopでの表示。

テキストのプロパティは現時点ではまだ対応していないようです。
反映されたのはtext-shadowくらい。
下記がCSS Hatで書き出されたCSS版。

プレビュー

HTMLに表示用のdivの追加と、フォントサイズの調整
文字の位置調整まではおこなってくれないので、
それらは自分で行いましたが、
それ以外はそのままのコードです。

その他気づいたことなどまとめ

ボタンなどを『CSS3で作りたい!!』という前提がある時には便利
ブレンドモード(レイヤー、レイヤースタイル共に)に対応していない。
グラデーションオーバーレイは線形と円形のみ対応
IE向けのfilterを使ったグラデーションには対応していない
輪郭などは指定しても警告はでないが何も変化しないので非対応
境界線は外側と内側の位置に対応。
内側：borderで再現
外側：box-shadowで再現
中央を指定すると内側を指定したときと同じCSSが吐かれる。
ベベル・エンボスは非対応
サテン非対応
フォントプロパティは後々対応
フォントサイズ、フォントファミリー、
ストロークなどは反映されない。
text-shadowは反映された。
楕円ツールにも対応。border-radiusを使って再現されている。

まだまだ物足りない感はありますが、
スマホ案件などで、画像の代わりにCSSを利用するとなった際に、
チームでルールを作って使うことでデザイナーがデザインしたものが、
コーディングの段階で大きく変わってしまう
といったリスクを減らせたり、
CSSを書く時間の短縮につなげることができるツールの一つになりそうな気がします。

今回紹介したプラグイン提供元

CSS Hat