R4

Webサービス レビュー * R4  

CSS3を出力するPhotoshopプラグイン「CSS3Ps」

2012年6月28日 Tag:webサイト制作 Text by 上瀧

このエントリーをはてなブックマークに追加

Photoshopで作成したオブジェクトをCSS3で出力してくれるプラグイン「CSS3Ps」のご紹介です。

PhotoshopのバージョンはCS3~CS6まで対応しています。
このレビューではCS6を使用しています。

サイトにアクセスし、右上のボタンからCSS3Psをダウンロードします。

ファイルを開くと、Adobe Extension Managerが起動し、インストールが完了となります。

次にPhotoshopを起動し、メニューバーの「ウィンドウ」>「エクステンション」>「CSS3Ps」を選択すると、パネルが表示されます。

オブジェクトを作成して、CSS3を出力したいレイヤーを選択状態にします。
その状態でCSS3Psのパネルをクリックします。
(複数のレイヤーを選択すれば、それぞれのオブジェクトのCSS3が吐き出されます。)

すると、ブラウザが立ち上がり、自動的に割り当てられたURLにアクセスします。
CSS3の出力まで、約30秒間ほどかかります。
(連続しての出力は、画面下に表示される待機時間がループされてしまうので注意してください。)

完了後、CSS3で描かれたオブジェクトと、CSS3が表示されます。
右上のメールアイコンからメールを送れたり、右下のボタンアイコンからクリッップボードにコピーできます。

Photoshop CS3~4の場合は、オブジェクト作成後、サイトからダウンロードしたJSXファイルを、メニューバーの「ファイル」>「スクリプト」>「参照」から開けば、CS5~6と同様にブラウザが立ち上がります。

β版のためか、出力処理に時間がかかるなど、不安定な部分が多いのが難点ですが、
Photoshopとエディタの間を行き来するよりは効率が良く作業出来るかと思います。
URLが割り当てられるので、共有可能なファイルであれば使い勝手はさらに広がりそうです。

Webサイト:CSS3Ps

Latest

Pickup

Category

koyomi

4db

Twitter