Akrosブログ

BLOG

PhotoShopCC 画像アセットで書き出しスライスが何倍も早く[大宮校]

photoShopCCからの新機能 画像アセットが追加されました。
デザインファイルからコーディングする際にスライスで書き出していた作業が何倍も早く書き出せる新機能です。

画像アセット(スライス)について、取り上げてみようと思います!

画像アセット使い方

デザインファイル(PSD)を開いた状態で
ファイル→ 生成→ 画像アセット を選択します。(画像アセットにチェックがはいればOKです。)

1

書き出したいレイヤーまたは、フォルダーに任意の名前+書き出したい拡張子をつけ名前を変更します。

2

名前+拡張子をつけると瞬時にデザインPSDファイルが格納されている場所に
【PSD名-assetsフォルダ】が生成されて、画像が書き出されてます。

56

RetinaDisplay用の大きい画像を書き出したい時
○○%や○○ピクセル+半角スペース+ファイ名+拡張子 をプラスすると指定のサイズで瞬時に書き出してくれます。

05

対応しているファイル形式、書き出し設定の変更方法

PNG、GIF、JPEG、SVGの4つ。また、デフォルトの書き出し設定は表の通りです。

ファイル形式設定
.PNG32bitbtn.png
.GIF透過GIFbtn.gif
.JPEG80%btn.jpg
.SVGbtn.svg

書き出し設定は以下のよう指定できます。

レイヤー名、フォルダ名の設定書き出しオプション
PNGbtn.png半透明のアルファチャンネルを持つPNG-24
btn.png8PNG-8
btn.png24PNG-24
JPEG.jpg
.jpg8
画質80%
.jpg1画質10%
.jpg10画質100%
btn.jpg50%画質50%
btn.jpg100%画質100%

複数画像の書き出しやサイズ変更にも対応しています。

レイヤー名、フォルダ名の設定生成される画像ファイル
複数のファイルbtn.png, btn.gifbtn.png
btn.gif
大きさ指定(ピクセル)250×150 btn.pngbtn.png(幅250ピクセル、高さ150ピクセル)
大きさ指定(%)200% btn-retina.pngbtn-retina.png(200%の大きさ)
組み合わせ200% btn@2x.png, btn.pngbtn@2x.png(200%の大きさ)
btn.png

GIF、PNGは背景が透過で書き出せれてしいますので、ケースバイケースで使いこなしてください。

作業効率アップ間違いなしです。


CONTACT

お問合せ

体験お申込み・資料請求・ご質問・
ご相談はこちらから

受付専用フリーダイヤル

フリーダイヤル 0120-941-071

受付時間:10:00〜18:00 (土日祝定休)