WEB業界で働く人や興味がある人に役立つ情報サイト“qam（カム）”

投稿者： くりりん
カテゴリー： デザイン >Photoshop

Photoshopで制作したオブジェクトのパーツを画像で使用するのでは無く、
コーディングして使用する際、CSSを記述するのが面倒だと感じることはありませんか？
そんなちょっとした面倒な作業を効率化できるのが、今回紹介する【CSS3Ps】です。
CSS3Psは、Photoshopで制作したオブジェクトのCSSを出力してくれるツールです。まずはダウンロードからインストールまでの手順を見てみましょう。

CSS3psのダウンロードからインストールまでの手順

1.公式サイト（http://www.css3ps.com/）にある右上の【Free Download】をクリックします。

2.ダウンロードページから、該当のバージョンをダウンロードしましょう。

3.ダウンロードしたファイルを【プログラムで開く】→Adobe Extension Managerで開きます。

4.下記の画面が出てきたら【承認する】をクリックし、インストールをします。

5.これでCSS3Psのインストールが完了しました！次にPhotoshopを開きます。

6.【ウィンドウ】→【エクステンション】→【CSS3Ps】を選択します。

選択後、このようなパネルが表示されます。

これでCSS3Psを使用する準備はできました。それでは早速CSS3Psを使ってみましょう。

ボタンを作ってCSSの生成してみましょう

グラデーションなどを使ったボタンをPhotoshopで作ってみました。
このボタンをCSSで書くのは面倒ですね…。
そんな時に、先ほど使えるようにしたCSS3Psの出番です。

オブジェクトを作ったら、CSS3Psのパネルをクリックします。

そうすると、webブラウザが立ち上がり、CSSでの記述が表示されます。
なんと、CSSハックも記述されているので、様々なブラウザでの見え方への配慮もできています。

CSSの他に、【SCCS】と【SASS】での記述方法も生成してくれるので、
自分で一から書かずに、パーツを作ることができますね！

CSS3Psを使用することでCSSのコード記述の時間短縮にも繋がります。
是非、試してみてください♪