Brackets Advent Calendar 2014の12月21日の記事です。 Extract for Bracketsの使い方について解説をしています。

1. Extract for Brackets
(Preview)
Brackets Advent Calendar 2014 12/22
Kazuma Sekiguchi
@KAZUMA87

2. Extract
Dreamwever CC 2014.1に搭載
PSDファイルから画像を抽出
スライス無しに必要な画像を選択して使える
Brackets1.0にPreview版として搭載
無料で利用可能
旧バージョンのBracketsであれば、拡張機能と
してダウンロード、導入が可能

3. Extract
レイヤー構造を理解
→必要なレイヤーからデータを取得可能
シェイプカラーやフォント情報も取得
Brackets上でPSDのCSSを利用
PSD上に記述してあるテキストをコピー

4. Extract for Bracketsの使い方
1. 「表示」→「Extract for
Brackets(Preview）を
表示」をクリック
2. 説明のダイヤログが表示
されるので、「今すぐ試
す」をクリック

5. Extract for Bracketsの使い方
3. サンプルのPSDファイル
が開かれているので、こ
れで試すことも可能です
4. ②のボックスをクリック
した状態で、CSSに適当
なクラスを作成し、baと
入力すると、CSSコード
が表示されるので、選択
すればコードが入力され
ます

6. Extract for Bracketsの使い方
• グラデーションなどの場合、ベンダープレフィックスを
補ってくれるコードも生成するため、楽です

7. PSDファイルを開く
• 自分で所有しているPSDファイルを開く場合、
AdobeIDを利用してログインする必要があります
• 「PSDを開く」ボタンをクリックすると、AdobeID
を入力するダイヤログが出てくるので、入力し、
ログインします
• ログインすると、CreativeCloud上に
アップしてあるアセットが表示されるので、
開くPSDファイルを選択するか、アップロードします

8. PSD上のテキストをコピー
• PSD上に入力してあるテキスト（ラスタライズしていないも
の）はクリックすると選択がされ、
「テキストをコピー」というメニューが表示されます
• 「テキストをコピー」するとそのままBracketsのエディタ上に
貼り付けができるので、打ち直す手間が省けます
• 今のところ日本語は化けます
• そのままCSSを記述すれば、テキストのところのスタイルを入
力するのも容易に行えます

9. PSD上の画像を抽出
• 使用したい画像をExtract内で選択し
た状態で、Bracketsのエディタ上で
<img srcまで入力すると、「アセッ
トを抽出」と表示され、選択している
画像が表示されます
• 「アセットを抽出」で表示されている
画像をクリックすると、手順が表示さ
れるので、それに従います

10. PSD上の画像を抽出
• 画像を保存するパスを編集し、ファイル名も必要であれば変更
します
• 拡張子はデフォルトでpngになるため、JPEG形式で書き出した
い場合は、拡張子をpngからjpgに変更します
• 変更したらEnterで必要な画像が抽出されてきます

11. PSD上の画像を合成して抽出
• 単一の画像を抽出していくなら前の方法でOKです
• 画像に上に文字が重なっていて、画像と文字を一緒に画像
として書き出したい場合は、Shiftキーを押しながら画像と
文字を選択します
• その上で、<img src=を入力すると、「アセットの抽出」
で3つの選択肢が出てきます
• この中から好みのものを選択すれば、
その状態の画像が抽出されます

12. Extractの利便性
• PSDファイルさえ用意してあれば、コーディングしながら
スライス無しで画像を取り出してくることが可能
• シームレスに動作しているため、Photoshopを立ち上げる
必要も無い
• Bracketsがあれば、PSDファイルをPhotoshop無しでほぼ完全
な形で見ることも可能
• テキストのコピーや必要な箇所のCSSスタイルの取得も
容易に行えるため、CSS3の複雑なスタイルも楽に記述可能

13. Extract for Bracketsで快適な
コーディング生活を！
DreamweaverのExtract連携の記事は、Adobe Pinch Inで