PSDから爆速コーディングする！Creative Cloud Extractの使い方

Photoshopのデザインデータからコーディングする際、素材の切り出しにはスライス領域を指定する必要があります。切り出し方によっては、仕上がりに個人差が出てしまうことも……。

そこで今回は、キレイにズレなくデザインデータから素材を高速で切り抜けるツール『Creative Cloud Extract』の使い方をご紹介します。

PSDデータからサイトをコーディングする方法

デザインデータからのコーディングは、一般的に以下の工程に沿って進められます。

1. デザイナーから受け取ったPSDデザインデータの素材を切り出し、画像データとして保存
2. 画像をコーディングするファイルの入ったフォルダにまとめる
3. HTMLまたはPHPでサイトの骨格を作る
4. 画像をHTMLやPHPで読み込み、渡されたデザインデータに沿って配置・コーディングする

中でもコーディングをする上で必要な素材を切り出す作業は、一つひとつパーツを切り出して分解する必要があるため多くの時間がかかります。

とはいえ、納期の短い案件の場合、素材の切り出し作業にあまり時間をかけることはできないでしょう。そこで便利なのが、画像素材の切り出し作業を大幅に効率化してくれる『Creative Cloud Extract』なのです。

コーディング作業を効率化する『Creative Cloud Extract』

『Creative Cloud Extract』は、マウスクリックひとつで素材を選択・切り取ってくれます。Photoshopのスライス作業だと切り取りづらい素材も複雑な操作を一切必要とせず、誰でも簡単に扱えます。

さらにデザインデータに程近いイメージをコーディングで描きおこせるよう、簡単なCSSコードも自動で出力してくれます。新たなコードと巡り合う機会にも恵まれ、コーディングの知見をより深めることにも繋がるでしょう。

実務を効率化しつつ、自らのコーディングの引き出しも増やしたい方にはとても便利なサービスです。

『Creative Cloud Extract』の使い方

『Creative Cloud Extract』のおおまかな使い方は以下のとおり。

1. Adobe社公式サイトにある『Creative Cloud Assets』のページへアクセス
2. デザイナーから受け取ったPhotoshopデータをアップロード
3. 『Creative Cloud Extract』へアクセスし、切り出したい箇所を選択
4. ファイルをPCへダウンロード

基本的にオンライン上にデザインデータをアップロードし、素材を切り出すという流れになります。

では、さっそく使っていきましょう。

『Creative Cloud Assets』ページへアクセスして、あらかじめPhotoshopで作っておいたデザインデータをアップロードします。

ファイルをアップロードできたら、ファイルを開き、画面右下にあるアイコンをクリック。表示されたメニューの中から「Extractに移動」しましょう。

『Creative Cloud Extract』へアクセスすると、アップロードしたデザインデータ素材が選択できるようになります。切り出したい箇所をクリックしましょう。

（※このとき、CSSのコードもメニューに表示されるので、コーディングの際はぜひ合わせてチェックしてみてください）

選択された素材と位置関係を確認して、そのまま「アセット抽出」します。

ファイル名と保存形式を付けて「保存」をクリック。これで素材の切り出しが完了しました。

最後に切り出した素材を「アセット」メニューの欄からPCへダウンロードすれば完了です。

実際に切り出してみるとこの通り。縁までキレイに切り取れていますね。

おわりに

今回は、PSDデータからのコーディングを効率化する『Creative Cloud Extract』の使い方について解説しました。

仕組みとしては、同社が提供しているAdobeXDとほぼ同じです。初めてツールを使う方はもちろん、AdobeXDでサイトのデザインデータを作ったことがある方なら簡単に使いこなせるでしょう。

素材の切り出しを素早く行いたい方や、実務で使う制作環境がPhotoshopソフトのみという方は、ぜひ『Creative Cloud Extract』を活用してコーディングまでの流れを効率化しましょう。