読者です 読者をやめる 読者になる 読者になる

ここにタイトルが入ります

デザイン&プログラミングのことも書くし、それ以外のことも書く。

photoshopのデザインカンプから画像の切り出し→compass(-rails)でのcssスプライト画像作成の流れ

css Photoshop Rails

RailsアプリのUIデザイン〜コーディングするにあたり、
今回はじめてphotoshopとsass,compassを使用しました。


そのときにやってみた
Photoshopのデータから画像切り出し→compass(-rails)でcssスプライト用画像を作成する方法のまとめ。

photoshopの画像をスライス

photoshopから画像を切り出す際、CCから追加された
「画像アセット」
という機能を使うと便利です。

画像アセットとは?

レイヤーに決められた名前を付けるだけで、
勝手に画像として切り出してくれます。

〜参考にさせていただきました!〜
使い方・活用法 - スライスより便利!画像アセット機能でWeb用にパーツを保存する | Adobe Creative Station
Photoshop CCでスライスを10倍速くする新機能「画像アセット」


簡単に説明すると、
画像として切り出したいレイヤーに「file_name.png」のように
ファイル名+拡張子
の形式でレイヤー名をつけておき、
f:id:blog_711fumi:20140831234309g:plain

メニューから
「ファイル」→「生成」→「画像アセット」を選択してチェックを付けます。
f:id:blog_711fumi:20140831162847g:plain


すると、編集中のpsdファイルと同じ階層に、-assetsと付いたディレクトリが作成され、
その中に名前をつけたレイヤーが画像として保存されます。

名前だったりそのレイヤーを編集すると切りだされる画像も勝手に更新されるようです。

Retina対応

高解像度のディスプレイに対応するため(iphoneとか)、
画像サイズを二倍にして出力する必要がある場合も簡単です。

例えば2倍のサイズで切り出す場合、
レイヤーの名前に200%を付けるだけです。
200% img.png

こんな感じ
f:id:blog_711fumi:20140831234324g:plain

もし通常サイズと2倍サイズ両方書き出したいときは、
「img1.png,200% img2.png
とカンマ区切りにすることで複数パターンの画像を切り出してくれます。
f:id:blog_711fumi:20140831234348g:plain

他にもいろいろ指定できそう。


ここで切り出した画像を元にcssスプライト画像を作っていきます。


※CCじゃない方はお馴染みのこのプラグインを使うといいですね!
〜参考になりました!〜
「Slicy」Photoshopからのスライス作業が死ぬほど楽になるツールが便利だ! | OZPAの表4


compassでのcssスプライト画像作成

sass、compassの説明は割愛。
ググればたくさん出てきますね。

〜参考になりました!〜
CSS書くならCompass使った方がいいよ。SASS使ってる人なら特に。
http://blog.qaramell.com/archives/14211
#334 Compass & CSS Sprites - RailsCasts


※今回はRailsアプリ(compass-rails)で使う場合を想定しています。

先ほどpsdから切り出した画像をまとめてフォルダに入れておきます。
例えば今回は
app/assets/images/common/
の中に複数の画像を入れておくとします。

簡単に使うだけであれば、sassに

@import "compass/utilities/sprites"; //compassのスプライト機能の読み込み
@import "common/*.png";
@include all-common-sprites;

と記述するだけで、ロード時?に
common以下の画像が1つにまとめられたスプライト用画像が作成されます。

同時に特定の画像を使用するためのcss(mixin)も追記されるので、
特定のクラス(.title)の背景に画像(title.png)を使う場合は、

.title  {
  @include sprite-background-common("title");
}

とincludeするだけで使用することができます。

詳しい情報はやっぱり↓
Spriting with Compass | Compass Documentation

スプライト用画像をRetina対応させたい

Retinaディスプレイに対応するため、スマホサイトでは
2倍のサイズの画像を使うというのが常識になっていますが、
2倍の画像で普通にスプライト用画像を作ってしまうと
表示時も2倍になって困ったことに(´・ω・`)

campassで出力されるcssに修正を加えなければいけません。

〜参考にさせていただきました!〜
[決定版]Retina対応したスプライト画像のmixin | Cappee Design

↑を参考にし、自分で書いてみたのがこちら。

$common-r: sprite-map("common/*.png");
$common-r-img: sprite-url($common-r);

@mixin sprite-background-common($name) {
  width: image-width(sprite-file($common-r, $name)) / 2;
  height: image-height(sprite-file($common-r, $name)) / 2;
  $xpos: round(nth(sprite-position($common-r, $name), 1) / 2);
  $ypos: round(nth(sprite-position($common-r, $name), 2) / 2);
  background-image: $common-r-img;
  background-position: $xpos $ypos;
  background-repeat:no-repeat;
  $wbgz: image-width(sprite-path($common-r)) / 2;
  @include background-size($wbgz auto);
}
複数のsprite画像に分ける場合

この方法で実装した場合、例えば
app/assets/images/sprite/imgs1/
app/assets/images/sprite/imgs2/
app/assets/images/sprite/imgs3/
みたいな3つのディレクトリをそれぞれ別のスプライト画像としたい場合は
定義をそれぞれに行う必要があります。

※それについてちょっと考えてみた
【sass】インターポレーションがmixin名に使えたらいいのに… - 記すに足らず。


使い方は同じ。
特定のクラス(.title)の背景に画像(title.png)を使う場合は、

.title  {
  @include sprite-background-common("title");
}


これで自分でスプライト用画像を準備すること無く
実装することができます。
compass今後もどんどん進化しそう。


まとめ

以前だとデザイナーさんからもらったpsdファイルから画像ファイルを切り出して
もしくはスプライト画像に作りなおして(Rails)アプリに配置…なんて面倒な作業でしたが、
photoshopの新機能やsass,compassなどを使うことで
大分楽に画像を取り込めるようになってきているんですね。

今後もphotoshopのWebデザインに関する機能やsass,compassはどんどん便利になっていくと思うので
楽できるように注目しておかないと(゚∀゚)