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

Extract

Dreamwever CC 2014.1に搭載PSDファイルから画像を抽出スライス無しに必要な画像を選択して使える

Brackets1.0にPreview版として搭載無料で利用可能

旧バージョンのBracketsであれば、拡張機能としてダウンロード、導入が可能

Extract

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

Extract for Bracketsの使い方

1. 「表示」→「Extract for Brackets(Preview）を表示」をクリック

2. 説明のダイヤログが表示されるので、「今すぐ試す」をクリック

Extract for Bracketsの使い方

3. サンプルのPSDファイルが開かれているので、これで試すことも可能です

4. ②のボックスをクリックした状態で、CSSに適当なクラスを作成し、baと入力すると、CSSコードが表示されるので、選択すればコードが入力されます

Extract for Bracketsの使い方

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

PSDファイルを開く

• 自分で所有しているPSDファイルを開く場合、AdobeIDを利用してログインする必要があります

• 「PSDを開く」ボタンをクリックすると、AdobeIDを入力するダイヤログが出てくるので、入力し、ログインします

• ログインすると、CreativeCloud上にアップしてあるアセットが表示されるので、開くPSDファイルを選択するか、アップロードします

PSD上のテキストをコピー

• PSD上に入力してあるテキスト（ラスタライズしていないもの）はクリックすると選択がされ、「テキストをコピー」というメニューが表示されます

• 「テキストをコピー」するとそのままBracketsのエディタ上に貼り付けができるので、打ち直す手間が省けます

• 今のところ日本語は化けます• そのままCSSを記述すれば、テキストのところのスタイルを入

力するのも容易に行えます

PSD上の画像を抽出

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

• 「アセットを抽出」で表示されている画像をクリックすると、手順が表示されるので、それに従います

PSD上の画像を抽出

• 画像を保存するパスを編集し、ファイル名も必要であれば変更します

• 拡張子はデフォルトでpngになるため、JPEG形式で書き出したい場合は、拡張子をpngからjpgに変更します

• 変更したらEnterで必要な画像が抽出されてきます

PSD上の画像を合成して抽出

• 単一の画像を抽出していくなら前の方法でOKです• 画像に上に文字が重なっていて、画像と文字を一緒に画像

として書き出したい場合は、Shiftキーを押しながら画像と文字を選択します

• その上で、<img src=を入力すると、「アセットの抽出」で3つの選択肢が出てきます

• この中から好みのものを選択すれば、その状態の画像が抽出されます

Extractの利便性

• PSDファイルさえ用意してあれば、コーディングしながらスライス無しで画像を取り出してくることが可能

• シームレスに動作しているため、Photoshopを立ち上げる必要も無い

• Bracketsがあれば、PSDファイルをPhotoshop無しでほぼ完全な形で見ることも可能

• テキストのコピーや必要な箇所のCSSスタイルの取得も容易に行えるため、CSS3の複雑なスタイルも楽に記述可能

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