Help us understand the problem. What is going on with this article?

PhotoshopCCで劣化しない@3x対応

More than 5 years have passed since last update.

はじめに

スライスツールの使い方を探していたらPhotoshopの機能で同様のことができることが分かりました。

簡単なバナー制作で確認してみます。
素材の猫さんは元同僚と同居中の方です。

画像アセット

Photoshop CCから使える機能なようです。

拡大するか縮小するか

オリジナルの画像を大きく作り、縮小するのが鉄板です。

素材はかならず3倍の大きさで作った方が良いですが
作成するPSDファイルの大きさは、制作するには等倍の方が使いやすい。

制作

(1)レイヤーの設定
スクリーンショット 2014-09-15 21.28.06.png

一番上位のグループには下記のとおり入力します
default 300% ios-3x/@3x + 200% ios-2x/@2x + ios/

(2)画像アセットを有効化
ファイル > 生成 > 画像アセット
スクリーンショット 2014-09-15 21.31.40.png

(3)画像ファイルはPSBに変換
拡大しても劣化しないように画像の形式を変更して保存しておきます。

画像はこちらから

ファイル > 開く

スクリーンショット 2014-09-17 1.43.42.png

ファイル > 別名で保存
スクリーンショット 2014-09-15 22.18.58.png

[ファイル名].psbというファイルに保存されます。

(4)スマートオブジェクト:PSBを配置

  • リンクを配置
  • 埋め込みを配置

制作時は結果に大きく変わりませんが、運用方法で選択が異なります。
ファイルサイズは大きくなりますが、素材そのものは変更を加えないので「埋め込み」を選びます。

拡大・縮小、移動など行って編集します。

スクリーンショット 2014-09-17 1.38.50.png

(5)追加したスマートオブジェクトをマスクします。(Alt + クリック)

スクリーンショット 2014-09-17 1.39.12.png

(6)変更後すぐに画像が作成・更新されます。

スクリーンショット 2014-09-17 1.47.52.png

出来たバナー

.png
neko.png

@2x.png
neko@2x.png

@3x.png
neko@3x.png

参考URL

Photoshop ヘルプ / レイヤーからの画像アセットの生成
http://helpx.adobe.com/jp/photoshop/using/generate-assets-layers.html

Photoshop初心者は絶対に覚えてほしい!!画像を劣化させずに調整できるPSDデータの作り方
http://creativememomemo.com/photoshop_making_adjustable_data/

もっと劣化しないことを考える

Photoshopのシェイプでできること。:ボケないシェイプの描き方
http://lopan.jp/photoshop-shape/

Photoshopの「生成」機能を掘り下げ
http://c-note.chatwork.com/post/70251384696/photoshop-generator

iOSの@3x対応:Vector画像とImageAssets
http://kototec.i-studio.co.jp/427/

さいごに

@3x対応とはしていますが、Androidでも応用が利きます。
また、デザイナーさんには当たり前の内容なのかもしれませんが
Slicy
http://macrabbit.com/slicy/
を使うつもりで、偶然PhotoshopCC2014でまかなえることがわかったくらい、専門外なので、困るのはいつも素材の加工です。
psdとpsbについてなども知ることができました。

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
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  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
ユーザーは見つかりませんでした