LoginSignup
30
32

More than 5 years have passed since last update.

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

Last updated at Posted at 2014-09-16

はじめに

スライスツールの使い方を探していたら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についてなども知ることができました。

30
32
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
30
32