11
12

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.

Apple Watchの画像素材はPSBで正しく手を抜きたい

Last updated at Posted at 2014-11-25

#はじめに
AppleWatchのアイコンのサイズの各アイコンの拡大縮小の比率が調整しにくいので、psbを使ったテンプレPSDをつくりました。

フリーで配布されているアイコン用PSDでベースを作って
公式のリソース用PSDをもっと使いやすくする

がゴールです。

#画像の規定

Create all of your image resources as @2x images. There is no need to include non @2x resources in your Watch app bundle.

For all images and icons, the PNG format is recommended. Avoid using interlaced PNGs.

The standard bit depth for icons and images is 24 bits—that is, 8 bits each for red, green, and blue. You can include an 8-bit alpha channel but doing so is not required. You can also use PNGs with indexed colors to save space in your image files.

  • 等倍の画像は要らない
  • 画像はPNG。インターレースはつけないように
  • アルファチャンネルをつけていいとあるので、透過はOK。
  • インデックスカラーで保存したPNGも使える

##参考URL
Inside png
http://www.slideshare.net/TomoyukiArai1/inside-png-12003173

#サイズ

https://developer.apple.com/library/prerelease/ios/documentation/UserExperience/Conceptual/WatchHumanInterfaceGuidelines/IconandImageSizes.html

公式で公開されているサイズはこんな感じです。

スクリーンショット-2014-11-25-7.35.50.png

#環境

  • PhotoShop CC 2014

#素材
##アイコンのデザイン用
ちょっと種類は違いますが

スクリーンショット 2014-11-25 9.05.16.png

App Icon Template [4.0]を使います。

##Appleからダウンロードするもの
https://developer.apple.com/watchkit/
スクリーンショット 2014-11-25 8.57.28.png

iDeveloperにログインできる開発者登録が必要

Apple Watch Design Resourcesを使います。

#手順
##アイコンのデザイン用のPSB作成
(1)App Icon Template [4.0]からアイコンのデザインに使用しているPSBを保存
(2)Apple Watch Design ResourcesからIconGridのレイヤーを(1)に複製
(3)(2)のGridを拡大して画面に合わせ、保存

##生成用のPSD
Apple Watch Design Resourcesを使います

スクリーンショット 2014-11-25 9.26.20.png

(1)フォルダを上記のように作成
(2)(1)のフォルダごとにファイル > リンクを配置で作成したPSBファイルを指定
(3)それぞれのアイコンサイズに合わせて拡大縮小

実際はApple Watch Design Resourcesですが
App Icon Template [4.0]を例にすると下記のような感じです。

それぞれのサイズに合わせたpixel数で設定します
スクリーンショット 2014-11-25 9.42.06.png

(4)ファイル > 生成 > 画像アセット でPSDと同じ階層のフォルダに各Iconのpngファイルが作成されます。

微妙に書いて良いのか分からないことが画像に含まれている気がしますが
@3xの画像についてはx3したサイズではなかったです。1pxほど大きかった。

#PSBファイルを使うメリット

  • 大まかな画像の荒れを防ぐことができる
  • アイコンのデザインの差し替えが楽

PSDから参照するPSBを一つにして、複数サイズのデザインを表示させるときに
たとえばデザイン変更があった場合など

コンテンツを置き換え...でPSBのリンク先を変更することができます。

スクリーンショット 2014-11-25 10.00.37.png

#ファイル名に@2xをつけない理由
XcodeではImageAssetsに設定するため、@2xの名前はファイルにつけません。

#PSBファイルの利用例
dribbbleで公開されている方がいます
スクリーンショット 2014-11-23 12.27.11.png

#参考にしたサイト
https://dribbble.com/shots/1723575-Uber-Watch-Freebie

#さいごに

公式サイトからダウンロードしたApple Watch Design Resourcesのグリッドラインがやや大きいようで、そのまま出力するとサイズが2px大きくなります。※そのまま使う人はいませんが
そのためPSBの方に入れるようにしました。

後ほど追記します。

11
12
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
11
12

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?