え!?まだPhotoshopで一つ一つ画像を切り出してるの!?Adobe Creative Cloudアセットが便利!

こんにちは。今日も喫茶店で仕事をしている@tomicciです。

コーヒー1杯で仕事をしていていい時間ってどのくらいなんだろう。お店が混んでなければ2時間くらいは許容範囲なのかな・・・。

さて、今日はHTMLコーディングのお話。
デザイナーからPhotoshopでデザインカンプを受け取り、HTMLコーディングする時、一つ一つ画像を切り出したりしていないかい!?

うわー、前時代的だわー。

それはまるで、先月までの自分のよう。

周りの社員からあれこれ教えてもらえた会社員時代と違い、フリーランスになると、自発的に勉強しないとどんどん取り残されていっちゃうんすよね。

今日はPSDデータから画像を切り出す際に超絶に便利なAdobe Creative Cloudアセットを紹介しよう。

Photoshopで画像を切り出す方法

HTMLコーディングの際に超絶に面倒で、楽しくない作業が画像の切り出しだよね。

スライスツールを使ったり、範囲指定して切り抜きしたり、新規ウィンドウにコピペして書き出したり・・・。

書き出す画像が少なければまだしも、数十個もやるとなると、時間もかかるし、なんとかならないのか、この作業って思っちゃうよね。

そんな中、Photoshop CCが2014年に画像アセット機能をリリースしてこりゃ便利だーとなったよね。

Photoshop CCの画像アセット

Photoshop CCの画像アセットはかなり便利で、画像切り出しの画期的なツールだ。

Adobe Creative Station

ベテランほど知らずに損してるPhotoshopの新常識(4)まだスライスで消耗してるの?「画像アセットの生成」でスライス不要のサクサク切り出し

だけども、必ずしもデザイナーがPSDファイルを綺麗にレイヤー分けして、画像アセット設定をしてくれているとは限らない・・・。

スタートアップや、ベンチャー企業なんかでは、デザイナーも限られた時間の中、沢山のデザインを作らなければならず、レイヤーなんかごちゃごちゃで全然整頓されていないようなPSDファイルも多いよね。

そうすると、せっかく便利な画像アセット機能があるのに、全然活用できない。

ああ、今日も画像切り出し地獄か・・・と思っちゃうわけ。

そんな中、恥ずかしながらつい最近、Creative Cloud Extractという機能がAdobeから提供されているという情報をキャッチし、使うようになった。

これがかなり便利な機能が満載なのだ!

Creative Cloud Extract

Creative Cloud Extractとは、ブラウザにPSDファイルをアップロードして、そこから画像を切り出したり、HTMLコーディングに必要なCSSの設定などを自動的に出力してくれて、そこからコピペして使えたり、テキスト部分をコピーできたりと素晴らしいサービス。

要するに、もうPhotoShopは開かなくていいかも!

まずは、下記リンクよりCreative Cloudにアクセス。Adobeアカウントが必要になるので、ログインしよう。

驚くべきなのは、Creative Cloudの有償契約なしで利用することが可能な点。

無料でアカウントさえ登録すれば利用できるので、画像アセット機能に対応していない、Photoshop CC以前のバージョンを使用している場合でも利用できる。

左メニューの「ファイル」をクリックして、画像を切り出したいPSDファイルをアップロードする。

Creative Cloudのアプリをダウンロードしておき、ローカルファイルを同期しておけば、PSDファイルをいちいちアップロードしなくてもいい。

僕はPSDファイルを同期させたくないので、必要なものだけアップしている。

PSDファイルをアップロードしたら、「Extract」をクリック。

画像を切り出したいレイヤーや、CSSをコピーしたいレイヤーを選択する。

画像の切り出しが一瞬!

PNG、JPG、SVGで書き出せ、JPGは圧縮率を変更することができる。また、それぞれ2xなど、拡大縮小した画像を出力可能。

さらに、Shiftキーを押しながら、レイヤーを2つ選択すると、レイヤー間の距計測してくれる。

他にも、

  • カラーピッカー機能
  • レイヤー情報の表示
  • 特定のレイヤーの表示/非表示の切り替え
  • 共有機能
  • グラデーションの設定値をCSSでコピー

といった機能が利用できる。

詳しい説明は下記公式ページを確認してほしい。

素晴らしきExtract機能・・・!

まとめ

PhotoShop CCの画像アセット機能が最強なんだけど、使えない場合には、是非ともAdobe Creative Cloudを活用してほしい!

楽できる作業はどんどん楽しよう。

【追記】Adobe Creative Cloudアセットは使えなくなったよ

-- 2016年7月に追記 --

残念ながら、WebサービスのAdobe Creative Cloudアセットは、 6月28日に停止となった。

下記サービスが無効になると、事前から告知されていたようだ。

・CC Assets Web サービスの「Extract」タブ
・Brackets 拡張機能の Extract

その代わりに、PhotoShopとDreamweaverのExtract機能の開発に注力するということだ。

PhotoShopで、オブジェクト間の距離を測ったり(altキーを使用)、レイヤーを右クリックするとCSSがコピーできたり、またCCから使用できるようになった画像アセット機能が強化されている。

無料でExtractを利用することができなくなってしまった形だが、PhotoShopの画像アセットを使い倒すこととしよう。

今後当ブログでも効率的な画像の切り出し方を紹介していきたい。

Facebookアカウントでコメント

※本コメント機能はFacebookによって提供されており、この機能によって生じた損害に対してザ サイベースは一切の責任を負いません。

ABOUTこの記事を書いた人

とみっち

埼玉でザ サイベースを主催しています。Webクリエイター。フリーランス歴7年。飄々と生きています。これでも育児頑張ってます。長野市出身。 @tomicci 詳しいプロフィール【興味】ギター/DTM/Web/車/田舎/旅/酒/育児 自然の音からデスメタルまで聴きます。【運営サイト】 ザ サイベース おと風景