• ブログTOP
  • AI・ディープラーニング
  • AR
  • VR
  • WEBサイト
  • WEBマーケティング
  • SEO
  • SNS
  • その他
  • お問い合わせ

ALAKI株式会社

COZIKEEいつまでも使えるTech情報発信ブログ

リクルートサイトはこちら >

Creative Cloud Extractを使ってPSDからCSSを自動生成!コーディングを効率化する方法

2018年2月2日

  • このエントリーをはてなブックマークに追加

こんにちは!
デザイナーの伊東です。

去年の年末、Adobe Creative Cloudに関する記事を投稿しました。
Webデザイナー必見!Adobe Creative Cloudデスクトップアプリケーションを利用して、デザインデータをバージョン管理する方法

今回も、CCを利用したテクニックの一つをご紹介したいと思います。

Creative Cloud Extractという名前をご存知でしょうか?
2016年6月にサービスが終了したにも関わらず、一部の熱狂的なファンの声により翌月7月に復活したという、Adobeでは珍しい経緯をもつサービスです。

その特徴は、PSDファイルを開かずにブラウザ上で様々な操作ができてしまう点です。

Creative Cloud Extractがいかに世の中のコーダーにとって助けになるのか、その魅力をお伝えしようと思います。

この記事の目次

  • 1 利用方法
  • 2 CSSを自動生成
  • 3 マージンを計測
  • 4 カラーパレットからカラーコードを取得
  • 5 画像の書き出し

利用方法

まずはPSDのデザインデータをCreative Cloudにアップします。Creative CloudのWebサイトにアクセスしてログインすると、クラウド上にアップしているファイル一覧が表示されます。その状態で、左下の”ライブラリとモバイル作品”をクリックしましょう。

スクリーンショット 2018-02-01 22.50.56

画面が切り替わった後、任意のデザインデータを選択します。
タブの中の”Extract”をクリックすることで、Creative Cloud Extractの機能を使うことができます。

スクリーンショット 2018-02-01 23.18.09

CSSを自動生成

Creative Cloud Extractの最大の強みといってもいいのではないでしょうか。デザインデータ上のエレメントを選択するだけで、選択箇所のCSSが自動生成されます。

例えば下記の図のように、テキスト部分を選択することでフォントサイズやカラー、ウェイトや字間などのスタイルが簡単にコピーすることができます。

スクリーンショット 2018-02-01 23.50.38

サイズの単位は、pxはもちろんemやremにも対応しています。

マージンを計測

CSSを書いていて、画像とテキストの間を測ったりすることってたくさんありますよね。Creative Cloud ExtractならPSDデータを開かずに、ブラウザ上で簡単にマージンを測れます。

対象のエレメントをShiftキーを押しながら2つ選択します。
すると、2つのエレメントの距離を自動で計測してくれます。

スクリーンショット 2018-02-01 23.31.49

地味だけど重宝する機能です!

カラーパレットからカラーコードを取得

デザインデータに使用されている色も一目瞭然です。
右側のメニューの”スタイル”のタブには、カラーパレット常に表示されています。
グラデーションもカラーパレットに登録されているのが便利です。

スクリーンショット 2018-02-01 23.39.43

この機能があれば、スタイルガイドにカラーコードをまとめる手間が省けます。

画像の書き出し

ブラウザ上から画像を書き出すことも可能です。
方法はとっても簡単。
書き出したいパーツを選択し、ダウンロードのアイコンをクリックすると、書き出し設定の吹き出しが表示されます。

スクリーンショット 2018-02-01 23.59.43

画像名の編集、形式の選択はもちろん、レティーナディスプレイ用に2倍のサイズで画像を書き出すことも可能です。

また、レイヤー単位で画像を書き出すこともできます。
右側のメニューから”レイヤー”をクリックします。
レイヤーがツリー状になって確認できますので、任意のレイヤーを選択して下向き矢印のアイコンをクリックして書き出しの設定を行います。

スクリーンショット 2018-02-02 0.06.33

レイヤーの表示・非表示がブラウザからできるのも便利ですね!

 

 

いかがでしたでしょうか。
Adobe製品を使っていないデザイナーはほとんどいないと思いますが、Creative Cloud Extractを使用していない人は結構多いのではないでしょうか。
ぜひ一度試してみて、その便利さを実感していただきたいと思います。

  • ツイート
  • このエントリーをはてなブックマークに追加

You may also like...

  • スクリーンショット 2022-11-26 7.27.23

    アプリ開発の多言語対応〜第1回 Unity環境での多言語対応編(Localization)〜

    26 11月, 2022

  • 2b56af4cae58a76b18979a678f6a8a4b_m

    レスポンシブ対応時にクリックイベントが、うまく動作しない時の対処法

    23 2月, 2018

  • スクリーンショット 2022-10-30 7.21.39

    Unity Starter AssetsのThird Person Character Controllerで三人称視点を簡単に実装する

    30 10月, 2022

デザイナー募集
プログラマー募集
  • Next story 会員登録不要・永久無料のWebサイトチェックツール【QUWASY】のβ版を公開しました!
  • Previous story PHPを使って「404 Not Found」を見つけよう!

弊社サービス

MONJI+ MUGHEN ALAKI クラウド型受発注システム さよなら過去のAR。WebARがイベント集客に革命を起こします。

運営会社

ALAKI株式会社 ALAKI株式会社採用サイト

人気の記事

  • alaki1462_A_businessman_who_works_logically_1da80a2e-c297-4911-bdd6-feba0ebf1357

    仕事術

    【書籍要約】数学的な仕事術大全

    4 11月, 2024

  • fv-main-img-min

    空間コンピューティング

    世界初!「空間コンピューティング」を専用端末不要、スマホのWebブラウザのみで実現する『Web XR Site』を公開しました

    22 6月, 2023

  • Virtual reality players isometric vector illustration. VR UI and navigation. Futuristic digital technology. Virtual screen. Mixed reality 3d concept. Person in VR headset. Web banner idea

    AR

    Appleから新世代MRグラス「Vision Pro」の登場 – デジタルと現実世界が融合する新時代へ

    6 6月, 2023

  • AWE

    未分類

    ARアプリ『MUGHEN』が世界最大のAR/VRアワード「AWE」のファイナリストに選出されました!

    26 5月, 2023

  • python-logo-master-v3-TM

    pyhotn / 業務効率化

    「SwinIR」で高画質化した画像を pythonを使用して一括で元のサイズに戻す方法

    2 2月, 2023

カテゴリー

  • AI・ディープラーニング
  • AR
  • BtoB
  • CMS
  • Git
  • Google AdWords
  • gulp
  • Javascript
  • Laravel
  • Photoshop
  • Pug
  • pyhotn
  • Sass
  • SEO
  • SNS
  • Twitter広告
  • VR
  • Web3.0
  • WEBサイト
  • WEBマーケティング
  • YouTube
  • コーディング
  • システム開発
  • スマートフォンサイト
  • セキュリティ
  • セミナー
  • その他
  • ツール
  • デザイン
  • ベトナムレポート
  • 仕事術
  • 未分類
  • 業務効率化
  • 空間コンピューティング
  • 色

アーカイブ

  • 2024年11月
  • 2023年6月
  • 2023年5月
  • 2023年2月
  • 2023年1月
  • 2022年12月
  • 2022年11月
  • 2022年10月
  • 2022年9月
  • 2022年2月
  • 2021年12月
  • 2021年9月
  • 2021年7月
  • 2021年6月
  • 2020年10月
  • 2020年9月
  • 2020年8月
  • 2020年6月
  • 2019年6月
  • 2019年5月
  • 2019年4月
  • 2019年3月
  • 2019年2月
  • 2019年1月
  • 2018年12月
  • 2018年11月
  • 2018年9月
  • 2018年8月
  • 2018年7月
  • 2018年6月
  • 2018年5月
  • 2018年4月
  • 2018年3月
  • 2018年2月
  • 2018年1月
  • 2017年12月
  • 2017年11月
  • 2017年10月
  • 2017年9月
  • 2017年8月
  • 2017年7月
  • 2017年6月
  • 2017年4月
  • 2017年3月
  • 2017年2月
  • 2017年1月
  • 2016年12月
  • 2016年11月
  • 2016年10月
  • 2016年9月
  • 2016年8月
  • 2016年7月
  • 2016年6月
  • 2016年5月
  • 2016年4月
  • 2016年3月
  • 2016年2月
  • 2016年1月
  • 2015年12月
  • 2015年11月
  • 2015年10月
  • 2015年9月
  • 2015年7月
  • 2015年3月
  • 2015年2月
  • 2015年1月
  • 2014年12月
  • 2014年11月
  • 2014年10月
  • 2014年9月
  • 2014年8月
  • 2014年7月
  • 2014年6月
  • 2013年10月
  • 2013年9月

Facebook

お問い合わせ

お問い合わせ

人気の記事

  • 【書籍要約】数学的な仕事術大全
  • 世界初!「空間コンピューティング」を専用端末不要、スマホのWebブラウザのみで実現する『Web XR Site』を公開しました
  • Appleから新世代MRグラス「Vision Pro」の登場 – デジタルと現実世界が融合する新時代へ
  • ARアプリ『MUGHEN』が世界最大のAR/VRアワード「AWE」のファイナリストに選出されました!
  • 「SwinIR」で高画質化した画像を pythonを使用して一括で元のサイズに戻す方法

カテゴリー

  • AI・ディープラーニング
  • AR
  • BtoB
  • CMS
  • Git
  • Google AdWords
  • gulp
  • Javascript
  • Laravel
  • Photoshop
  • Pug
  • pyhotn
  • Sass
  • SEO
  • SNS
  • Twitter広告
  • VR
  • Web3.0
  • WEBサイト
  • WEBマーケティング
  • YouTube
  • コーディング
  • システム開発
  • スマートフォンサイト
  • セキュリティ
  • セミナー
  • その他
  • ツール
  • デザイン
  • ベトナムレポート
  • 仕事術
  • 未分類
  • 業務効率化
  • 空間コンピューティング
  • 色

検索

ALAKI株式会社 © 2025. All Rights Reserved.