吉本集の個人ブログ
Web制作の技術について書いています。たまに日記も書きます。

【Photoshop拡張機能】シェイプをCSSのコードに変換する

2013年5月13日 / category : jsx

Photoshopの拡張パネル「ShapeCSSPanel」を作成しました。
Photoshopで描画したシェイプ画像をCSSのコードに変換します。
ただ、Photoshopのレイヤー効果の再現ができるものが少ないです、下記の表にまとめています。

レイヤー効果とブラウザの対応表
IE8以下 IE9 IE10 chrome Firefox Safari
カラーオーバーレイ
境界線
グラデーション × ×
ドロップシャドウ ×
角丸 ×

※境界線は「内側」に設定されます。
※グラデーションのスタイルは「線形」に設定されます。
※グラデーションの「角度」と「色の分布」はPhotoshopと全く同じような表示にはなりません。

【使い方】
1.ShapeCSSPanelフォルダを下記のフォルダに追加する。
windowsの場合(CS6)
→ Program Files/Adobe/Adobe Photoshop CS6 (64 Bit)/Plug-ins/Panels
macの場合(CS6)
→ Applications/Adobe Photoshop CS6/Plug-ins/Panels

2.PhotoshopCS6を起動する。
3.「ウィンドウ」→「エクステンション」→「ShapeCSSPanel」を選択、ShapeCSSPanelパネルが開く

4.Photoshopの「長方形ツール」「角丸長方形ツール」でシェイプを作成する。

5.ShapeCSSPanelパネル内の「コードを取得する」ボタンをクリックし、書き出されたコードをコピーする。

6.コピーしたCSSコードを該当ファイルのスタイルシートにペーストする。

7.該当ファイルをブラウザで開いて確認する。

【Download】
http://tsudoi.org/photoshop/Plug-ins/Panels/ShapeCSSPanel.zip

【備考】
CS6での検証しかしておりません。。。検証しきれていない可能性が高いです。。。使用中に不具合などがあれば、ご連絡ください。
mail : tsudoi@aru-inc.co.jp