Web事業部実績紹介
Web事業部実績紹介
2015.02.09

Adobe Creative Cloud アセットでPSD画像をスライスし、テキストのCSS情報を取得しよう

まろ

こんにちは。まろCです。
雪がふりました。積もりはしませんでしたが。
そうですね、何かに例えるなら、白雪姫でした。

コーディングするとき、一番と言っていいほど時間がかかる箇所があります。それはPSDデータとのにらめっこです。

Fireworks派だった僕はLIGに入社して初めてPhotohopを触っているのですが、画像を切り出したり、テキストのサイズや行間を見て要素間のマージンを測ったりと、作業がいちいち面倒で時間がかかっていました。

しかし、なんと体感で6000倍ぐらい効率化してくれるWebツールがAdobeにあったのです。それがCreative Cloud アセットです

Creative Cloud アセットとは

image

ひとことで言えば、クラウド上にPSDなどのデータを保管するところなのですが、Web上で保管したPhotoshopの画像やテキストのCSS情報を、ほとんど2クリックでコピーしたり書き出ししたりができるツールでもあるのです。
バージョン管理もできるので重宝しています。

※Creative Cloudのアカウントが必要です。

Web制作を効率化する3大機能

Creative Cloud アセットの下記3つの機能を使えば、普段のWeb制作をかなり効率化できます。

  • 画像スライス
  • テキスト、CSSコピー
  • マージン測定

効率化の準備

アプリをダウンロードしてローカルファイルを同期するようにしておけば、さらに+400倍の効率化を体感できます。
下の手順で、デスクトップのアプリケーションから同期をしましょう。

画像

まず、フォルダーを開きます。
 

画像

フォルダーにPSDを置くだけで、クラウド上にアップロードされて、どこにいてもそのファイルが同期されるようになります。
 

画像

ブラウザ上だとこう表示されます。同期されているので確認してみましょう。
 

image

フォルダ内のPSDを開きましょう。あとはクリックだけで、効率化が簡単にできてしまします。

※フリーのテンプレートPSDを使いました。

1. 画像のスライス

image

shiftキーを押しながら複数レイヤーを選択すると、青いポップアップが出てきます。そこで、ポップアップの右の方にあるダウンロードアイコンをクリックすると、画像として保存できます。
フォーマットはpng8、png32、jpg、svgから選択できます。

 

image

名前を変更して、保存ボタンを押すだけでデスクトップ上のフォルダーに同期されます。最高に簡単ですね。

ちなみに選択したレイヤーの幅、高さも青いポップアップ内に表示されます。

2. テキストのコピー、CSS情報取得

image

テキストをクリックするだけで、右カラムにテキストのCSS情報が表示されます。
そのままテキストをコピーすれば、一瞬でHTML上にペーストできます。
まさにワンクリックです。

 

image

色やフォントサイズ、line-heightなども一瞬で確認できて、コピーすればそのままCSSに貼り付けできます。

3. 余白の測定

image

各レイヤー間の余白も、shiftキーを押しながら2つクリックすれば距離が表示されます。これだけでマージンが確認できるので、すごく楽ですね。

まとめ

こんなに楽なことはない!と実感できたと思います。
切り出した画像はgulpタスクでspritesmithからスプライトにし、imageminでより軽くしてサイト自体の効率も上げていきましょう。

時間が短縮できたので飲みに行きたいと思います。それでは。

 

【PSDデータとのにらめっこは終わりだ!】

DreamweaverとPhotoshopを使い、神速でスライスする方法

photoshopで複数のスライスをリネームしながら保存する方法

スライス時に作られる「images」フォルダを変更する方法

意外と知らない!? Photoshopの隠れた便利機能ベスト3

【オリジナル制作】Photoshopでの作業を効率化できるいい感じのJSXスクリプト