Permalink
Switch branches/tags
Nothing to show
Find file Copy path
81dc16c Mar 26, 2017
0 contributors

Users who have contributed to this file

251 lines (157 sloc) 14.3 KB

Bjango App Icon Templates help


Adding your artwork

For most of the templates, a good way to work is to create an initial icon at one of the sizes. Photoshop is shown below, but the strategy works for all design tools.

Then duplicate it.

Then scale it, and move it into position. Do that for each icon size.

Once you’re done, you’ll have a complete set of icons added to the template, ready to be exported. Duplicating the icons for each size is important — it allows you to make size specific tweaks, and preview the icon at size before exporting (Smart Objects bitmap scale, so they should be avoided for final artwork).


Using the Photoshop templates

For most Photoshop templates, create your artwork in the Icon Artwork group, inside the icon size folders.

To export using the templates below, turn off the Labels, Icon Masks, Icon Areas, and Background layers and groups. Then choose FileExportSave For Web (Legacy). When the Save For Web window opens, make sure PNG-24 is the file format and click Save. In the Save window, choose All User Slices in the Slices popup menu, choose the desired destination and click Save.

  • App Icon - Apple iMessage.psd
  • App Icon - Apple iOS.psd
  • App Icon - Apple macOS.psd
  • App Icon - Apple watchOS.psd
  • App Icon - Google Android.psd
  • App Icon - Microsoft Windows Tiles.psd
  • App Icon - Microsoft Windows.psd
  • Favicon - Web.psd

To export using the template below, turn on Generator via FileGenerateImage Assets. If the option isn’t available, Enable Generator might need to be turned on in PreferencesPlug-Ins. Once Generator is turned on, a folder with the suffix -assets will be created at the same path as your Photoshop document. As you make changes, the assets will be re-exported.

  • App Icon - Google Android adaptive icon.psd
  • App Icon - Apple tvOS.psd

Photoshop’s canvas slice info can be cleaned up, to make it easier to see your artwork. With the Slice Select Tool chosen, click Hide Auto Slices in the options bar and disable the Show Slice Numbers check box under PreferencesGuides, Grid & Slices.

The Photoshop templates contain a Smart Objects (for preview only) group that contains a single Smart Object document for all icon sizes. Double-click the layer thumbnail and save to see changes replicated across all icon sizes. This is a great way to quickly preview your icon at all sizes, but is not recommended for final production artwork. For best quality results, each icon size should have its own size-specific artwork (Smart Objects bitmap scale).

If you’ve used the Smart Object document to preview, and are building each icon at size, the Show Smart Objects layer can be used to work out which sizes need to be finished.

To export a single image of all the icons, choose FileExportQuick Export as PNG.


Using the Photoshop (Generator) templates

To export using the templates below, turn on Generator via FileGenerateImage Assets. If the option isn’t available, Enable Generator might need to be turned on in PreferencesPlug-Ins. Once Generator is turned on, a folder with the suffix -assets will be created at the same path as your Photoshop document. As you make changes, the assets will be re-exported.

  • App Icon - Apple iMessage.psd
  • App Icon - Apple iOS.psd
  • App Icon - Apple macOS.psd
  • App Icon - Apple tvOS.psd
  • App Icon - Apple watchOS.psd
  • App Icon - Google Android.psd
  • App Icon - Google Android adaptive icon.psd
  • Favicon - Web.psd

To export a single image of all the icons, choose FileExportQuick Export as PNG.


Using the Illustrator templates

For most Illustrator templates, create your artwork on the Icon Artwork layer, inside the icon size folders.

To export using the templates below, turn off the Labels, Icon Masks, Icon Areas, and Background layers and groups. Then choose FileSave For Web. When the Save For Web window opens, choose your desired file format, ensure All User Slices is selected, then click Save. From there, choose a destination and click Save.

  • App Icon - Apple iMessage.ai
  • App Icon - Apple iOS.ai
  • App Icon - Apple macOS.ai
  • App Icon - Apple watchOS.ai
  • App Icon - Google Android.ai
  • App Icon - Microsoft Windows Tiles.ai
  • App Icon - Microsoft Windows.ai
  • Favicon - Web.ai

To export using the tvOS template, choose FileSave For Web to save the larger icon. To save each layer of a parallax icon, turn off all the layers except the one you’d like to export (Layer 1 etc), then choose FileSave For Web. Repeat the process for all the layers you’re using in your icon. I don’t think there’s a better way to automate the process while still keeping the artwork stacked (which makes the initial design process and alignment easier).

  • App Icon - Apple tvOS.ai

To export using the Google Android adaptive icon template, hide all the layers except the foreground layers, then choose FileSave For Web. Repeat the process for the background layers.

  • App Icon - Google Android adaptive icon.ai

Using the Sketch templates

Double-click Install Sketch templates to install the templates and make them available from the FileNew From Template menu within Sketch.

For most Sketch templates, create your artwork in the Icon Artwork group, inside the icon size folders.

To export using the templates below, click Export in the toolbar, then choose which icons to export (probably leave all of them set to export), then click the Export button, choose a destination, then click Export again.

  • App Icon - Apple iOS.sketch
  • App Icon - Apple macOS.sketch
  • App Icon - Apple tvOS.sketch
  • App Icon - Apple watchOS.sketch
  • App Icon - Google Android.sketch
  • App Icon - Google Android adaptive icon.sketch
  • App Icon - Microsoft Windows Tiles.sketch
  • App Icon - Microsoft Windows.sketch
  • Favicon - Web.sketch

You may wish to hide Slices while you’re working. This can be done in the bottom left side of the document window.

The All Icons slice exports a single image of all the icons.


Using the Sketch quick templates

Double-click Install Sketch quick templates to install the templates and make them available from the FileNew From Template menu within Sketch.

The templates listed below provides a quick way to export all the various sizes from a single piece of artwork. This isn’t my preferred way to work, but it may be a good template to use as a starting point when exploring ideas. To export, click Export in the toolbar.

  • App Icon - Apple iMessage (Quick).sketch
  • App Icon - Apple iOS (Quick).sketch
  • App Icon - Apple macOS (Quick).sketch
  • App Icon - Apple watchOS (Quick).sketch
  • App Icon - Google Android (Quick).sketch
  • App Icon - Google Android adaptive icon.sketch
  • Favicon - Web (Quick).sketch


Using the Affinity Designer templates

For most Affinity Designer templates, create your artwork in the Icon Artwork group, inside the icon size folders.

To export using the templates below, turn off the Labels, Icon Masks, Icon Areas, and Background layers and groups. Then switch to the Export Persona and click the Export Selected button in the Slices panel. From there, choose a destination and click Export.

  • App Icon - Apple iMessage.afdesign
  • App Icon - Apple iOS.afdesign
  • App Icon - Apple macOS.afdesign
  • App Icon - Apple watchOS.afdesign
  • App Icon - Google Android.afdesign
  • App Icon - Microsoft Windows Tiles.afdesign
  • App Icon - Microsoft Windows.afdesign
  • Favicon - Web.afdesign

To export using the tvOS template, choose FileExport to save the larger icon as a PNG. To save each layer of a parallax icon, turn off all the layers except the one you’d like to export (Layer 1 etc), then choose FileExport. Repeat the process for all the layers you’re using in your icon. I don’t think there’s a better way to automate the process while still keeping the artwork stacked (which makes the initial design process and alignment easier).

  • App Icon - Apple tvOS.afdesign

To export using the Google Android adaptive icon template, hide all the layers except the foreground layers, then choose FileExport. Repeat the process for the background layers.

  • App Icon - Google Android adaptive icon.ai

To export a single image of all the icons, choose FileExport.


Using other design tools

If you’re not using Photoshop, Illustrator, Sketch or Affinity Designer, the PNG images should still contain everything you need to build icons for those platforms. They indicate all the required icon sizes, icon regions, pixel densities and other information. To use them, import a template image into your design tool of choice, and build your icon artwork on top.


iOS, tvOS and other icon masks

Some platforms, like iOS and tvOS require unmasked icons, so the OS itself can apply a uniform mask to all app icons. In those cases, icons should be square-finished, with colour information extending all the way to the image edge.

If you pre-mask your icon, the OS will mask it again and there will likely be ugly artefacts in the mask antialiasing areas.


Hashes in export names

Some templates export images with hashes (“#”) in their file names. This is to denote folder structure, so Hazel can be used to automatically rename and sort exported files. A Hazel rule to do this is part of Bjango Actions. The Android icons demonstrate this, converting drawable-hdpi#icon into drawable-hdpi/icon.png.


Compressing images

Where practical, it makes sense to save smaller files by using indexed colours (PNG8). This will reduce the number of colours possible, but if your icon doesn’t need them, it can save a lot of disk space. It can also be good to use a tool like ImageOptim to compress PNGs further, but be aware that in some circumstances the savings will be undone at build time. Building for iOS typically recompresses PNGs and building for macOS may end up with an ICNS or TIFF file, undoing PNG optimisation.


Platform icon sizes

A full list of icon sizes, pixel densities, likely uses and official source links can be found in the Platform icon sizes document.


Platform versions

The Bjango App Icon Templates comply with iOS 9, watchOS 2, Android 6, and Windows 10 UWP. Update dates can be found in the version history. If you’d like to read the official documentation, links can be found on the Platform icon sizes page.


Style guide

All templates have been created to match the Bjango App Icon Templates style guide.


Tips

If you’re after some more generalised app icon design tips, I’ve written a few articles you may be interested in:


Feedback and future plans

These documents are maintained by @marcedwards. If you find errors or have suggestions, I’d love to hear about them. Currently, the Windows Tiles templates are missing some elements. The Sketch quick templates are a bit of an experiment (feedback welcome!).