티스토리 뷰

hacking

앱 출시를 위해 준비해야 할 이미지들

iolo 2014. 1. 23. 21:26

요약

최소한 세 가지 정도의 이미지를 준비해야 함.

  1. 높은 해상도의 정사각형 아이콘 이미지(1024x1024 권장) -> 다양한 아이콘 크기로 resize.
  2. 높은 해상도의 세로형 스플래시 이미지(2536x2560 권장) -> 다양한 크기로 종횡비 유지 resize & center crop.(가로 전용이라면 필요없음)
  3. 높은 해상도의 가로형 스플래시 이미지(2560x1536 권장) -> 다양한 크기로 종횡비 유지 resize & center crop.(세로 전용이라면 필요없음)

특이한 크기 또는 자주 쓰이지만 자동 resize 품질이 나쁜 이미지들은 별도로 준비(예: 16x16 아이콘). 그 외에 멋진 스크린샷과 홍보 동영상도 필요.

안드로이드

아이콘

스플래시

  • 참고: http://developer.android.com/guide/practices/screens_support.html
  • ldpi: 200x320 drawable-ldpi/splash.png
  • mdpi: 320x480 drawable-mdpi/splash.png
  • hdp: 480x800 drawable-hdpi/splash.png
  • xhdpi: 720x1280 drawable-xhdpi/splash.png
  • ldpi landscape: 200x320 drawable-land-ldpi/splash.png
  • mdpi landscape: 320x480 drawable-land-mdpi/splash.png
  • hdp landscape: 480x800 drawable-land-hdpi/splash.png
  • xhdpi landscape: 720x1280 drawable-land-xhdpi/splash.png
  • default: ?x? drawable/splash.png

플레이스토어

T스토어

올레마켓

  • TBD

U+스토어

  • TBD

iOS

아이콘

  • 참고: https://developer.apple.com/library/ios/documentation/userexperience/conceptual/mobilehig/AppIcons.html
  • iphone: 57x57 Icon.png
  • iphone retina: 114x114 Icon@2x.png
  • ipad: 72x72 Icon-72.png
  • ipad retina: 144x144 Icon-72@2xpng
  • iphone spotlight: 29x29 Icon-small.png
  • iphone retina spotlight: 58x58 Icon-small@2x.png
  • ipad spotlight: 50x50 Icon-small-50.png
  • ipad retina spotlight: 100x100 Icon-small-50@2x.png
  • iphone ios7: 60x60 Icon-60.png
  • iphone retina ios7: 120x120 Icon-60@2x.png
  • ipad ios7: 76x76 Icon-60.png
  • ipad retina ios7: 152x152 Icon-60@2x.png
  • ios7 spotlight: 40x40 Icon-40.png
  • ios7 retina spotlight: 80x80 Icon-40@2x.png

스플래시

앱스토어

  • icon 512x512 iTunesArtwork.png
  • icon retina: 1024x1024 iTunesArtwork@2x.png
  • screenshots
  • TBD

웹

  • favicon: 윈도 ico 포맷(16x16…)
  • TBD

페이스북

  • 참고: https://developers.facebook.com/docs/guides/appcenter/
  • 프로필 아이콘: 16x16, 64x64, 96x96, 128x128 jpg/png
  • 프로필 커버(배경): 800x150 jpg/png
  • 앱 로고: 1024x1024
  • 앱 아이콘: 16x16
  • 웹 배너: 155x100, 180x115(Small Editor’s Pick), 394x150(Web Editor’s Pick) jpg/png
  • 모바일 배너: 136x88, 204x132, 272x176 jpg/png
  • 스크린샷 for 웹사이트 페이스북 로그인: 최대5개
  • 스크린샷 for 모바일웹: 최대5개
  • 동영상
  • TBD

트위터

구글+

  • TBD

그냥 끝나면 재미없으니… 발로 짠 쉘 스크립트 두개 투척~

  • 고해상도의 정사각형 이미지를 graphicsmagick을 사용하여 다양한 크기로 변환:
#!/bin/bash

# 원본 이미지는 1024x1024 권장
# 제일 큰 iTunesArtwork 레티나 기준.
ICON_SRC=icon.png

IOS_SPLASH_OUT=Xcode프로젝트경로/모듈이름/Resources/splash

gm convert -scale 57 ${ICON_SRC} ${IOS_ICON_OUT}/Icon.png
gm convert -scale 114 ${ICON_SRC} ${IOS_ICON_OUT}/Icon@2x.png
gm convert -scale 72 ${ICON_SRC} ${IOS_ICON_OUT}/Icon-72.png
gm convert -scale 144 ${ICON_SRC} ${IOS_ICON_OUT}/Icon-72@2x.png
gm convert -scale 60 ${ICON_SRC} ${IOS_ICON_OUT}/Icon-60.png
gm convert -scale 120 ${ICON_SRC} ${IOS_ICON_OUT}/Icon-60@2x.png
gm convert -scale 76 ${ICON_SRC} ${IOS_ICON_OUT}/Icon-76.png
gm convert -scale 152 ${ICON_SRC} ${IOS_ICON_OUT}/Icon-76@2x.png
gm convert -scale 29 ${ICON_SRC}  ${IOS_ICON_OUT}/Icon-small.png
gm convert -scale 58 ${ICON_SRC}  ${IOS_ICON_OUT}/Icon-small@2x.png
gm convert -scale 40 ${ICON_SRC} ${IOS_ICON_OUT}/Icon-40.png
gm convert -scale 80 ${ICON_SRC} ${IOS_ICON_OUT}/Icon-40@2x.png
gm convert -scale 50 ${ICON_SRC}  ${IOS_ICON_OUT}/Icon-50.png
gm convert -scale 100 ${ICON_SRC}  ${IOS_ICON_OUT}/Icon-50@2x.png
gm convert -scale 512 ${ICON_SRC} ${IOS_ICON_OUT}/iTunesArtwork.png
gm convert -scale 1024 ${ICON_SRC} ${IOS_ICON_OUT}/iTunesArtwork@2x.png

ANDROID_ICON_OUT=PathToAndroidProject/res

gm convert -scale 96 ${ICON_SRC} ${ANDROID_ICON_OUT}/drawable/icon.png
gm convert -scale 96 ${ICON_SRC} ${ANDROID_ICON_OUT}/drawable-xhdpi/icon.png
gm convert -scale 72 ${ICON_SRC} ${ANDROID_ICON_OUT}/drawable-hdpi/icon.png
gm convert -scale 48 ${ICON_SRC} ${ANDROID_ICON_OUT}/drawable-mdpi/icon.png
gm convert -scale 36 ${ICON_SRC} ${ANDROID_ICON_OUT}/drawable-ldpi/icon.png
  • 다음으로 고해상도의 가로 스플래시 이미지를 다양한 크기로 변환(종횡비를 유지하면서 중앙을 기준으로 잘라냄):
#!/bin/bash

# 원본 이미지는 상하 좌우에 여백의 미가 살아있는(?) 1536x2560 권장
# 제일 큰 ipad retina 1536x2048와 제일 큰 안드로이드 720x1280 모두 윈윈~
SPLASH_SRC=splash.png

IOS_SPLASH_OUT=Xcode프로젝트경로/모듈이름/Resources/splash

gm convert -resize "320x480^" -gravity center -crop '320x480+0+0' ${SPLASH_SRC} ${IOS_SPLASH_OUT}/Default~iphone.png
gm convert -resize "640x960^" -gravity center -crop '640x960+0+0' ${SPLASH_SRC} ${IOS_SPLASH_OUT}/Default@2x~iphone.png
gm convert -resize "640x1136^" -gravity center -crop '640x1136+0+0' ${SPLASH_SRC} ${IOS_SPLASH_OUT}/Default-568h@2x~iphone.png
gm convert -resize "768x1024^" -gravity center -crop '768x1024+0+0' ${SPLASH_SRC} ${IOS_SPLASH_OUT}/Default-Portrait~ipad.png
gm convert -resize "1536x2048^" -gravity center -crop '1536x2048+0+0' ${SPLASH_SRC} ${IOS_SPLASH_OUT}/Default-Portrait@2x~ipad.png
# 가로용... 이렇게 해선 품질이 나쁘니까... 원본 이미지도 가로용... 일단 생략...
#gm convert -resize "1024x768^" -gravity center -crop '1024x768+0+0' ${SPLASH_SRC} ${IOS_SPLASH_OUT}/Default-Landscape~ipad.png
#gm convert -resize "2048x1536^" -gravity center -crop '2048x1536+0+0' ${SPLASH_SRC} ${IOS_SPLASH_OUT}/Default-Landscape@2x~ipad.png

ANDROID_SPLASH_OUT=안드로이드프로젝트/res

gm convert -resize "720x1280^" -gravity center -crop '720x1280+0+0' ${SPLASH_SRC} ${ANDROID_SPLASH_OUT}/drawable/splash.png
gm convert -resize "720x1280^" -gravity center -crop '720x1280+0+0' ${SPLASH_SRC} ${ANDROID_SPLASH_OUT}/drawable-xhdpi/splash.png
gm convert -resize "480x800^" -gravity center -crop '480x800+0+0' ${SPLASH_SRC} ${ANDROID_SPLASH_OUT}/drawable-hdpi/splash.png
gm convert -resize "320x480^" -gravity center -crop '320x480+0+0' ${SPLASH_SRC} ${ANDROID_SPLASH_OUT}/drawable-mdpi/splash.png
gm convert -resize "200x320^" -gravity center -crop '200x320+0+0' ${SPLASH_SRC} ${ANDROID_SPLASH_OUT}/drawable-ldpi/splash.png
# 가로용... 이렇게 해선 품질이 나쁘니까... 원본 이미지도 가로용... 일단 생략...
#gm convert -resize "1280x720^" -gravity center -crop '1280x720+0+0' ${SPLASH_SRC} ${ANDROID_SPLASH_OUT}/drawable-land/splash.png
#gm convert -resize "1280x720^" -gravity center -crop '1280x720+0+0' ${SPLASH_SRC} ${ANDROID_SPLASH_OUT}/drawable-land-xhdpi/splash.png
#gm convert -resize "800x480^" -gravity center -crop '800x480+0+0' ${SPLASH_SRC} ${ANDROID_SPLASH_OUT}/drawable-land-hdpi/splash.png
#gm convert -resize "480x320^" -gravity center -crop '480x320+0+0' ${SPLASH_SRC} ${ANDROID_SPLASH_OUT}/drawable-land-mdpi/splash.png
#gm convert -resize "320x200^" -gravity center -crop '320x200+0+0' ${SPLASH_SRC} ${ANDROID_SPLASH_OUT}/drawable-land-ldpi/splash.png

이렇게까지 정리했지만… 언제까지 이 목록이 유효할지는 나도 모른다는게 함은정 -_-;

저작자표시 동일조건

'hacking' 카테고리의 다른 글

도커 클라이언트(macosx)에서 도커 컨테이너(maybe ubuntu?)에 터미널로 접속하기  (0) 2014.07.25
mac osx + docker + vmware + coreos  (0) 2014.07.18
brew로 패키지의 특정 버전 설치하기  (0) 2014.01.20
내가 기억하는 컴퓨터 속의 한글 이야기(2) - LX-800과 LQ-1550  (0) 2011.06.25
내가 기억하는 컴퓨터 속의 한글 이야기(1) - CALL-3327  (7) 2010.12.06
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
링크
TAG more
«   2025/01   »
일 월 화 수 목 금 토
1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30 31
글 보관함