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

#はじめに
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](https://qiita-image-store.s3.amazonaws.com/0/12362/c0ca0cc9-b416-9f71-4208-79186c4cb985.png)

#環境
 * PhotoShop CC 2014

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

http://appicontemplate.com/ios8

![スクリーンショット 2014-11-25 9.05.16.png](https://qiita-image-store.s3.amazonaws.com/0/12362/f520588f-a38e-f45b-06ed-713c64024c8d.png)

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

##Appleからダウンロードするもの
https://developer.apple.com/watchkit/
![スクリーンショット 2014-11-25 8.57.28.png](https://qiita-image-store.s3.amazonaws.com/0/12362/797b2d72-0645-8a6c-b240-7cbba211e3b0.png)
> iDeveloperにログインできる開発者登録が必要

`Apple Watch Design Resources`を使います。

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

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

![スクリーンショット 2014-11-25 9.26.20.png](https://qiita-image-store.s3.amazonaws.com/0/12362/cbeea267-0c79-fd2b-44c2-89a26bf69d14.png)

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

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

それぞれのサイズに合わせたpixel数で設定します
![スクリーンショット 2014-11-25 9.42.06.png](https://qiita-image-store.s3.amazonaws.com/0/12362/cba6b89b-e17f-8f63-8a31-fb9e1cfdb1e8.png)

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

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


#PSBファイルを使うメリット
 * 大まかな画像の荒れを防ぐことができる
 * アイコンのデザインの差し替えが楽

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

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

![スクリーンショット 2014-11-25 10.00.37.png](https://qiita-image-store.s3.amazonaws.com/0/12362/28d1552f-a368-dcbd-9b57-ac27da141387.png)

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

#PSBファイルの利用例
dribbbleで公開されている方がいます
![スクリーンショット 2014-11-23 12.27.11.png](https://qiita-image-store.s3.amazonaws.com/0/12362/096c8380-0677-dde3-8110-e5d87e47dbaa.png)

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

https://dribbble.com/shots/1735649-Apple-Watch-GUI-PSD

http://line25.com/articles/25-mockup-templates-for-the-new-iphone-6-watch

https://365webresources.com/latest-best-free-apple-watch-mockup-templates/

http://applech2.com/archives/40781912.html

#さいごに

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

後ほど追記します。