Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationEventAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
3
Help us understand the problem. What are the problem?

More than 5 years have passed since last update.

Organization

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

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では使えない
    • ファイルを共有するときはバージョンの確認をするように
  • ベクトルマスクで切り出す範囲指定が可能だが、稀に指定されない場合がある
    • ベクトルマスクではなく、レイヤーマスクで指定すると書き出せる

さいごに

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

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
3
Help us understand the problem. What are the problem?