Swift App Icon Image Assets: Difference between revisions

From Chorke Wiki
Jump to navigation Jump to search
← Older edit
VisualWikitext
No edit summary
No edit summary
 
(10 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
 
 
# for ios
# ios example
images:
images:
   regular: # with suffix @1x.png
   regular: # with suffix @1x.png
     - user_icon_24@1x.png #24x24
     - user_icon_24@1x.png   # 24x24
     - home_icon_24@1x.png #24x24
     - home_icon_24@1x.png   # 24x24
   medium:  # with suffix @2x.png
   medium:  # with suffix @2x.png
     - user_icon_24@2x.png #48x48
     - user_icon_24@2x.png   # 48x48
     - home_icon_24@2x.png #48x48
     - home_icon_24@2x.png   # 48x48
  bigger:  # with suffix @3x.png
  bigger:  # with suffix @3x.png
   - user_icon_24@3x.png #72x72
   - user_icon_24@3x.png     # 72x72
   - home_icon_24@3x.png #72x72
   - home_icon_24@3x.png     # 72x72
</source>


# for iphone
| valign="top" |
<source lang="yaml">
iphone:
iphone:
   images:
   images:
     notification:
     notification:
       - app_icon_20@2x.png #40x40
       - app_icon_20@2x.png   # 40x40
       - app_icon_20@3x.png #60x60
       - app_icon_20@3x.png   # 60x60
     settings:
     settings:
       - app_icon_29@2x.png #58x58
       - app_icon_29@2x.png   # 58x58
       - app_icon_29@3x.png #87x87
       - app_icon_29@3x.png   # 87x87
     spotlight:
     spotlight:
       - app_icon_40@2x.png #80x80
       - app_icon_40@2x.png   # 80x80
       - app_icon_40@3x.png #120x120
       - app_icon_40@3x.png   # 120x120
     app_icon:
     app_icon:
       - app_icon_60@2x.png #120x120
       - app_icon_60@2x.png   # 120x120
       - app_icon_60@3x.png #180x180
       - app_icon_60@3x.png   # 180x180
    app_store:
      - app_icon_1024@1x.png # 1024x1024
</source>
</source>


| valign="top" |
<source lang="yaml">
<source lang="yaml">
key:
ipad:
   - string1
   images:
   - string2     
    notification:
      - app_icon_20@1x.png  # 20x20
      - app_icon_20@2x.png  # 40x40
    settings:
      - app_icon_29@1x.png  # 29x29
      - app_icon_29@2x.png   # 58x58
    spotlight:
      - app_icon_40@1x.png  # 40x40
      - app_icon_40@2x.png  # 80x80
    app_icon:
      - app_icon_76@1x.png  # 76x76    , ipad <= 11.0"
      - app_icon_76@2x.png  # 152x152  , ipad <= 11.0"
      - app_icon_83.5@2x.png # 167x167  , ipad == 12.9"
      - app_icon_1024@1x.png # 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. academia_logo_100@1x.png (100x30)
2. academia_logo_100@2x.png (200x60)
3. academia_logo_100@3x.png (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 14: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
    - user_icon_24@1x.png    # 24x24
    - home_icon_24@1x.png    # 24x24
  medium:  # with suffix @2x.png
    - user_icon_24@2x.png    # 48x48
    - home_icon_24@2x.png    # 48x48
 bigger:   # with suffix @3x.png
   - user_icon_24@3x.png     # 72x72
   - home_icon_24@3x.png     # 72x72

iphone:
  images:
    notification:
      - app_icon_20@2x.png   # 40x40
      - app_icon_20@3x.png   # 60x60
    settings:
      - app_icon_29@2x.png   # 58x58
      - app_icon_29@3x.png   # 87x87
    spotlight:
      - app_icon_40@2x.png   # 80x80
      - app_icon_40@3x.png   # 120x120
    app_icon:
      - app_icon_60@2x.png   # 120x120
      - app_icon_60@3x.png   # 180x180
    app_store:
      - app_icon_1024@1x.png # 1024x1024

ipad:
  images:
    notification:
      - app_icon_20@1x.png   # 20x20
      - app_icon_20@2x.png   # 40x40
    settings:
      - app_icon_29@1x.png   # 29x29
      - app_icon_29@2x.png   # 58x58
    spotlight:
      - app_icon_40@1x.png   # 40x40
      - app_icon_40@2x.png   # 80x80
    app_icon:
      - app_icon_76@1x.png   # 76x76     , ipad <= 11.0"
      - app_icon_76@2x.png   # 152x152   , ipad <= 11.0"
      - app_icon_83.5@2x.png # 167x167   , ipad == 12.9"
      - app_icon_1024@1x.png # 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. academia_logo_100@1x.png (100x30)
2. academia_logo_100@2x.png (200x60)
3. academia_logo_100@3x.png (300x90)

References

Retrieved from "https://wiki.chorke.org/index.php?title=Swift_App_Icon_Image_Assets&oldid=2470"