Photoshopで作成したオブジェクトからCSS3を出力するプラグイン『CSS3Ps』


Photoshopでオブジェクト作成→CSS3を出力するプラグイン『CSS3Ps』

これは使える!探せば便利なものがあるものです。
Photoshop CCでは標準でCSSに出力する機能があるのでCS6以下向け。
早速メモ

まずは「http://css3ps.com/」にアクセス

css3ps
右上「Free Download」をクリックしてダウンロードページへ。

css3ps
使っているPhotoshopのバージョンを確認したらDownloadのリンクをクリック。「CSS3Ps○○○○.zxp」というファイルがダウンロードされたら、ファイルをダブルクリックする。

すると自動的にインストールが始まる
css3ps
承諾→インストールと進む

css3ps
インストールされた画面

続いてPhotoshopを立ち上げ、メニュー[ウィンドウ]>[エクステンション]の中にCSS3Psが入ったことを確認。
css3ps

CSS3Psをクリック
css3ps

ここからオブジェクトの制作に入る
今回は角丸グラデーションを作ってみた。
css3ps
作成したら、オブジェクトのレイヤーを選択していることを確認して、CSS3Psのパネルをクリック

するとブラウザが開いてCSS3のコードが表示される。
css3ps

簡単に思い通りのものが作れます^^
btn1

HTML

CSS

CSSは出力されたものに少し手を加えて完了!


この投稿へのコメント

コメントはありません。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

この投稿へのトラックバック

トラックバックはありません。

トラックバック URL