소개

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

내부 png
h tp // w w. s에서 멋지다. 네 t / 토모 유키 아라이 1 / 니시 데 - p ng-12003173

사이즈

htps : //로 ゔぇぺぺr. 아 ぇ. 코 m / ぃ b 등 ry / p 레레 아세 / 이오 s / 도쿠 멘 타치 온 / 우세 레 x 페리 엔세 / 콘 세 p t 1 l / 와 tc s/이코나나마게시즈 s. HTML

공식적으로 공개되고 있는 사이즈는 이런 느낌입니다.

환경

PhotoShop CC 2014

소재

아이콘 디자인용

조금 종류는 다르지만


App Icon Template [4.0] 를 사용합니다.

Apple에서 다운로드하는 것

htps : //에서 ゔぇぺぺr. 아 ぇ. 코 m / 와 tch t /


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 사용



(1) 폴더를 상기와 같이 작성
(2) (1)의 폴더마다 ファイル > リンクを配置로 작성한 PSB 파일을 지정
(3) 각각의 아이콘 사이즈에 맞추어 확대 축소

실제로는 Apple Watch Design Resources 입니다만App Icon Template [4.0] 를 예로 하면 아래와 같은 느낌입니다.

각 크기에 맞는 픽셀 수로 설정합니다.


(4) ファイル > 生成 > 画像アセット 에서 PSD와 같은 계층의 폴더에 각 Icon의 PNG 파일이 작성됩니다.

미묘하게 쓰는 것이 좋은지 모르는 것이 이미지에 포함되어 있다고 생각합니다.
@3x의 이미지에 대해서는 x3한 크기가 아니었습니다. 1px 정도 컸다.

PSB 파일을 사용하는 이점

거친 이미지의 거칠기를 방지 할 수 있습니다

아이콘 디자인 교체가 쉽습니다

PSD에서 참조하는 PSB를 하나로 하여 여러 사이즈의 디자인을 표시시킬 때
예를 들어 디자인 변경이 있었을 경우 등
コンテンツを置き換え... 에서 PSB 연결 대상을 변경할 수 있습니다.

파일 이름에 @2x를 붙이지 않는 이유

Xcode에서는 ImageAssets로 설정하기 때문에 @2x의 이름은 파일에 붙지 않습니다.

PSB 파일의 사용 예

dribbble에 공개 된 분이 있습니다.

참고로 한 사이트

사이고에게

공식 사이트에서 다운로드한 Apple Watch Design Resources 의 그리드 라인이 약간 큰 것 같고, 그대로 출력하면 사이즈가 2px 커집니다. ※그대로 사용하는 사람은 없습니다만
그 때문에 PSB 쪽에 넣도록 했습니다.

나중에 추가합니다.