Blog

知らなかった!photoshopでcssを書き出してくれる無料のエクステンション「CSS3Ps」

こんなものがあるなんて今まで知りませんでした・・・

なぜ知らなかったのでしょう。勉強不足ですね。。。

 

今日紹介するのは、photoshopの「CSS3Ps」というエクステンションです。

 

シェイプレイヤーやテキストレイヤーのをcssで書き出しくれるという代物です。

もちろん名前の通りcss3対応です。

 

どんな風に書きだされるのかが気になる所かと思いますが、

順をおって説明していきます。

 

まずはダウンロード

 
まずは下記URLからダウンロードします。

http://css3ps.com/

右上の「free download」をクリックです!
 

ダウンロードしたファイルを開く

ダウンロードしたファイルを開くと勝手にphotoshopへインストールしてくれます。

以下のような画面が立ち上がると思います。
 
スクリーンショット 2013-11-12 13.47.09

 

photoshopを開いて、エクステンションを表示

 
もし今まで開いていたのであれば、
1回終了してからまた開いてください。

そうすると、ウィンドウ > エクステンションの所にcss3Psと表示されるのでクリックします。
 
スクリーンショット 2013-11-12 14.20.17(2)

 

シェイプ選んでクリック

シェイプレイヤーを選択状態にし、下の画面のCSS3Psの箇所をクリックします。
 
スクリーンショット 2013-11-12 14.00.57

 

cssの書きだしが完了!

新規ブラウザウィンドウが立ち上がり、数秒待つと、
cssが表示されます。
そちらをコピーして後は自由に使用すると言った感じですね。
 
スクリーンショット 2013-11-12 14.04.49

ページの画像

 

複数も可能

複数のレイヤーを選択して書き出すことも可能です。

以下のような形で書きだすと、
スクリーンショット 2013-11-12 14.05.10

 

以下の様に表示されます。
 
ページの画像2

レイヤー重ねていても、それぞれのレイヤーを個々に書き出してくれます。

どこまでcssで書き出しくれるかもサイトに載っておりますので、

ぜひ使ってみて下さい!

 
http://css3ps.com/
 

Author Profile

Y.A

アベと申します。
ディレクター兼デザイナー兼コーダーです。
まだまだ未熟者ですが、日々頑張っています。。。

» 投稿一覧
  • Launch Cart次世代ECサイト構築システム 初期月額無料
  • LaunchMovie ECに特化した動画制作サービス

Archive

ページTOPへ