Swift App Icon Image Assets: Difference between revisions
Jump to navigation
Jump to search
(Created page with "<source lang="yaml"> # regular images regular_images: - user_icon_24x24.png #24x24 - home_icon_24x24.png #24x24 # for ios images: regular: #with suffix @1x.png -...") |
No edit summary |
||
| (11 intermediate revisions by the same user not shown) | |||
| Line 1: | Line 1: | ||
{| | |||
| valign="top" | | |||
<source lang="yaml"> | <source lang="yaml"> | ||
# regular images | # regular images | ||
regular_images: | regular_images: | ||
- user_icon_24x24.png #24x24 | - user_icon_24x24.png # 24x24 | ||
- home_icon_24x24.png #24x24 | - home_icon_24x24.png # 24x24 | ||
# | # ios example | ||
images: | images: | ||
regular: #with suffix @1x.png | regular: # with suffix @1x.png | ||
- [email protected] #24x24 | - [email protected] # 24x24 | ||
- [email protected] #24x24 | - [email protected] # 24x24 | ||
medium: #with suffix @2x.png | medium: # with suffix @2x.png | ||
- [email protected] #48x48 | - [email protected] # 48x48 | ||
- [email protected] #48x48 | - [email protected] # 48x48 | ||
bigger: #with suffix @3x.png | bigger: # with suffix @3x.png | ||
- [email protected] #72x72 | - [email protected] # 72x72 | ||
- [email protected] #72x72 | - [email protected] # 72x72 | ||
</source> | |||
| valign="top" | | |||
<source lang="yaml"> | |||
iphone: | iphone: | ||
images: | images: | ||
notification: | notification: | ||
- [email protected] #40x40 | - [email protected] # 40x40 | ||
- [email protected] #60x60 | - [email protected] # 60x60 | ||
settings: | settings: | ||
- [email protected] #58x58 | - [email protected] # 58x58 | ||
- [email protected] #87x87 | - [email protected] # 87x87 | ||
spotlight: | spotlight: | ||
- [email protected] #80x80 | - [email protected] # 80x80 | ||
- [email protected] #120x120 | - [email protected] # 120x120 | ||
app_icon: | app_icon: | ||
- [email protected] #120x120 | - [email protected] # 120x120 | ||
- [email protected] #180x180 | - [email protected] # 180x180 | ||
app_store: | |||
- [email protected] # 1024x1024 | |||
</source> | </source> | ||
| valign="top" | | |||
<source lang="yaml"> | <source lang="yaml"> | ||
ipad: | |||
- | images: | ||
- | notification: | ||
- [email protected] # 20x20 | |||
- [email protected] # 40x40 | |||
settings: | |||
- [email protected] # 29x29 | |||
- [email protected] # 58x58 | |||
spotlight: | |||
- [email protected] # 40x40 | |||
- [email protected] # 80x80 | |||
app_icon: | |||
- [email protected] # 76x76 , ipad <= 11.0" | |||
- [email protected] # 152x152 , ipad <= 11.0" | |||
- [email protected] # 167x167 , ipad == 12.9" | |||
- [email protected] # 1024x1024 , app_store | |||
</source> | </source> | ||
|} | |||
==Example== | |||
For each images we need 3 sizes of images as following convention: | |||
1. <snake_case_image_name>_<image_regular_width>@1x.png | |||
2. <snake_case_image_name>_<image_regular_width>@2x.png | |||
3. <snake_case_image_name>_<image_regular_width>@3x.png | |||
Example: lets say we have an Academia Logo.png with regular size of 100x30, then we have to create 3 images as following: | |||
1. [email protected] (100x30) | |||
2. [email protected] (200x60) | |||
3. [email protected] (300x90) | |||
==References== | |||
* [https://developer.apple.com/design/human-interface-guidelines/ios/icons-and-images/launch-screen/ iOS development guide line for Launch Screen] | |||
* [https://developer.apple.com/design/human-interface-guidelines/ios/icons-and-images/app-icon/ iOS development guide line for App Icon] | |||
Latest revision as of 08:36, 7 February 2020
# regular images
regular_images:
- user_icon_24x24.png # 24x24
- home_icon_24x24.png # 24x24
# ios example
images:
regular: # with suffix @1x.png
- [email protected] # 24x24
- [email protected] # 24x24
medium: # with suffix @2x.png
- [email protected] # 48x48
- [email protected] # 48x48
bigger: # with suffix @3x.png
- [email protected] # 72x72
- [email protected] # 72x72
|
iphone:
images:
notification:
- [email protected] # 40x40
- [email protected] # 60x60
settings:
- [email protected] # 58x58
- [email protected] # 87x87
spotlight:
- [email protected] # 80x80
- [email protected] # 120x120
app_icon:
- [email protected] # 120x120
- [email protected] # 180x180
app_store:
- [email protected] # 1024x1024
|
ipad:
images:
notification:
- [email protected] # 20x20
- [email protected] # 40x40
settings:
- [email protected] # 29x29
- [email protected] # 58x58
spotlight:
- [email protected] # 40x40
- [email protected] # 80x80
app_icon:
- [email protected] # 76x76 , ipad <= 11.0"
- [email protected] # 152x152 , ipad <= 11.0"
- [email protected] # 167x167 , ipad == 12.9"
- [email protected] # 1024x1024 , app_store
|
Example
For each images we need 3 sizes of images as following convention: 1. <snake_case_image_name>_<image_regular_width>@1x.png 2. <snake_case_image_name>_<image_regular_width>@2x.png 3. <snake_case_image_name>_<image_regular_width>@3x.png
Example: lets say we have an Academia Logo.png with regular size of 100x30, then we have to create 3 images as following: 1. [email protected] (100x30) 2. [email protected] (200x60) 3. [email protected] (300x90)