この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。
PhotoshopのデザインをCSS3に落とし込む際、Photoshopのレイヤースタイルの数値を細かくチェックしてCSSを組んでいくのは手間でこんなもんだろうっていう感覚でやってしまうことも多いと思います。
ちょっと前に話題になっていたフリーのプラグインなので今更ですが、「CSS3Ps」を試してみて、注意点などをまとめてみました。
インストール
上のリンクからCSS3Psのサイトに移動します。
まずは右上の「Free Download」を押して、プラグインファイルをダウンロードしましょう。
ダウンロードファイルは以下の2つに別れています。
- Download for Adobe Photoshop CS5 and CS6
- Download for Adobe Photoshop CS3 and CS4
Mac OS X Lionの場合はAdobeから提供されているパッチのインストールが必要です。
インストールの手順
インストールのプロセスはCSのバージョンごとに若干違うのでここちらのインストール方法を参考にしてください。
この記事ではCS6でプラグインを使っています。
サンプルファイル
今回はこのサンプルにCSS3Pｓを使ってみます。
サンプルファイルをgithub「css3ps_sample / design /」に上げてあるので良いサンプルがなければ使ってみてください。
試してみる
サンプルファイルを開いて、生成したいレイヤーグループを選択します。単体のオブジェクトでも可能です。
今回はボタンレイヤー全体のスタイルを生成したいのでボタンレイヤーのグループを選択します。
生成する
ボタンを押して実行してみます。
生成するとブラウザでCSSのソースコードとサンプルが表示されます。生成したサンプルはこちら。
選択できる生成タイプ
3つのタイプではき出されます。
SCSSではき出してくれるのはうれしいですね。画面の右下にこの3つのボタンがあるので任意の物を選択します。今回はこの中でSCSSを利用します。
- CSS
- SCSS
- SASS
生成されたSCSS
少し長いですがこんなSCSSをはき出してくれます。
注意点として、Displayやmargin、paddingなどは指定してくれないので、そこは手動で設定する必要があります。
label
{
font-family: "Museo Sans";
font-size: 20px;
color: #141418;
@include text-shadow(1px 1px rgba(255,255,255,.3));
}
btn_bg
{
width: 270px;
height: 50px;
@include border-radius(3px);
background-color: #fff;
@include box-shadow(0 1px 10px rgba(0,0,0,.5), inset 0 1px rgba(255,255,255,.3), inset 0 0 10px rgba(37,37,39,.2));
@include background-image(linear-gradient(bottom, #35c6f0, #56d9ff 12%, #0085ab));
}
label
{
font-family: "Museo Sans";
font-size: 20px;
color: #141418;
@include text-shadow(1px 1px rgba(255,255,255,.3));
}
btn_bg
{
width: 270px;
height: 50px;
@include border-radius(3px);
background-color: #fff;
@include box-shadow(0 1px 10px rgba(0,0,0,.5), inset 0 1px rgba(255,255,255,.3), inset 0 0 10px rgba(37,37,39,.2));
@include background-image(linear-gradient(top, #35c6f0, #56d9ff 12%, #0085ab));
}
wrapper
{
width: 290px;
height: 70px;
@include border-radius(3px);
background-color: rgba(255,255,255,0);
@include box-shadow(1px 1px rgba(255,255,255,.05), inset 0 0 10px rgba(0,0,0,.5));
}調整したCSS
実際のレイアウトに合うようにスタイルを調整します。
/* *****************************
*
* Navigation button styles
*
**************************** */
#joinButtonSection
{
//layout
margin: 20px auto 0 auto;
width: 290px;
}
#joinButtonWrapper
{
//layout
padding: 10px;
width: 270px;
height: 50px;
@include border-radius(3px);
background-color: rgba(255,255,255,0);
@include box-shadow(1px 1px rgba(255,255,255,.05), inset 0 0 10px rgba(0,0,0,.5));
}
#joinButton
{
//layoout
display: block;
width: 270px;
height: 50px;
//ornament
@include border-radius(3px);
//background
background-color: #fff;
@include box-shadow(0 1px 10px rgba(0,0,0,.5), inset 0 1px rgba(255,255,255,.3), inset 0 0 10px rgba(37,37,39,.2));
@include background-image(linear-gradient(top, #35c6f0, #56d9ff 12%, #0085ab));
//typo
font-family: "Museo Sans";
text-decoration: none;
text-align: center;
line-height: 50px;
font-size: 20px;
color: #141418;
@include text-shadow(1px 1px rgba(255,255,255,.3));
//hover style
&:hover
{
//background
background-color: #fff;
@include box-shadow(0 1px 10px rgba(0,0,0,.5), inset 0 1px rgba(255,255,255,.3), inset 0 0 10px rgba(37,37,39,.2));
@include background-image(linear-gradient(bottom, #35c6f0, #56d9ff 12%, #0085ab));
}
}結果
実際にHTML化したサンプルをGithub「CSS3Ps Sample」に公開しておきました。
↓これはiframeで表示しています。
注意点
ただ指定するだけではうまく利用できないことがあります。
試してみて以下の点に注意することで、修正の手間を減らして効率的にCSS3に変換し、コピペできそうです。
- 描画モードはうまく再現されない可能性があるので、できるだけ乗算やハイライトは利用せず通常で色を再現する必要があります。
- ベベルは反映されません。
- テキストのカラーオーバーレイは反映されないので文字色を正しく指定します。
まとめ
ちょっと試してみた結果ですがCSSを手動で設定する手間がかなり省けるなと感じました。
SCSSを使ったとしても、デザインから色を抜き出してCSSを書かなければけないですが、CSS3Psを利用することで、グラデーションやシャドウを設定する手間を大幅に削減できます。
Sublime Text 2、SCSS、Compass、Cut&Slice meと合わせてこのCSS3Psプラグインを使うことで効率的な作業環境が作れそうです。是非使ってみてください。