7
3

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

CeresクリエイティブAdvent Calendar 2016

Day 2

Photoshop CCで楽チン画像切り出し

Posted at

Photoshop CCの機能「画像アセット生成」を使った画像切り出しは
楽チンだよ!と簡単な部分から伝えたい記事です。

画像アセットとは

使い方

  1. Photoshopを起動します

  2. 何かしらファイルを開きます(新規ファイルでもOK)

  3. 「ファイル」→「生成」→「画像アセット」にチェックを入れる(すでに入っていたらそのままでOK)
    設定.png

  4. 切り出したい箇所のレイヤーorグループにWeb画像の拡張子(.pngや.jpg等)を命名する

  5. 保存(⌘+S)する

  6. psdと同階層にできるassetsフォルダ内に画像が生成されたことを確認する
    アセット03_フォルダ.png

画像アセットの便利な点

  • psdを保存(⌘+S)するだけで自動で画像を切り出せる
    アセット02.png

  • ドロップシャドウもきちんと切り出せる
    アセット03_切り出し後.png

  • 重なり合った要素も切り出せる
    スライス02.png

注意点

  • psdを保存する度に、assetsフォルダ内の画像は上書きされてしまう

    タイムスタンプ例.png
    • タイムスタンプによる差分管理をしている人はフォルダを別名にするなど一工夫を
  • Adobe Photoshop CCからの機能なのでCS6では使えない
    • ファイルを共有するときはバージョンの確認をするように
  • ベクトルマスクで切り出す範囲指定が可能だが、稀に指定されない場合がある
    • ベクトルマスクではなく、レイヤーマスクで指定すると書き出せる

さいごに

入門中の入門編でしたが、スライス派の皆さんも是非お試しください:)
この程度のボタンなら画像で切り出すまでもない!という部分はご容赦下さい。

7
3
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
7
3

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?