Asset Generation for Web & iOS: Updated 21/07/15

When generating assets, every designer/developer will have their own workflow and preferences on top of the standard ways of doing things. I wanted to share some tips on how I generate assets for applications and websites. Being a designer and developer, I may do it slightly different to someone who, say, needs to pass their assets over to a developer. However I still generate my assets in a way that if I was absent, another member of the team would know what these are for and how to use them.

both

Screen size

As I do when designing, starting with the smallest and biggest screen size first (if the application was for multiple devices) is the best way to go. If your design is literally just for one screen size on one specific device, then you are wrong – apps need to be responsive and adaptive to different devices, especially with how rapidly technology is changing.

Creating assets in a workspace (I usually use Adobe Illustrator) and exporting as the largest screen size can save a lot of time later. This can also solve resolution issues when needing this image at ‘x’ size later on, as the images (for web) will only be getting smaller if you start with your largest screen size. But what screen size do we use for desktop? The most common size is currently 1024×768 so this is a good starting point, but you need to ensure that the site looks good on extended sized (1600 x 1000) and smaller sized (800 x 600) browsers. On Chrome, a good extension to download is the window resizer, which allows you to resize your browser window to several sizes.

iOS

For iOS devices, each device has a set size and is either @1x, @2x or @3x. 1x is regular, 2x is retina and 3x is retina plus. Depending on the device you are providing assets for, you will probably need 1x and 2x assets (3x is only used for the iPhone 6+ currently). These types are used for the following devices:

Screen Shot 2015-05-01 at 11.40.24

This source comes from the brilliant site http://iosdesign.ivomynttinen.com/ – a must for iOS design. You can also use the iOS Human Interface Guidelines on the official Apple site, but this one gives you all the relevant parts straight away.

When exporting assets, I like to ensure that everything has an even number with no decimal places. No major reason, but it helps when you may need to create extra assets of different sizes later on, as it ensures that they are all of a nice rounded off number.

For app icons, the following icons are needed (for Xcode 6):

Google Chrome - wordpress.com -  - Screen Shot 21 July 2015 09:23

You may also want to include app icons for the Apple Watch if your app is to be available on this too. Apple will make the icons rounded for you, so there is no need to export as rounded icons. Then at least if the conventions change, you won’t have some dodgy looking icons that you will then have to change again. A good tool to use for exporting app icons is: http://appicontemplate.com/ios8 by Pixel Resort. This is a brilliant template – just open in Photoshop, place your icon within it and use the in-built actions to export all the sizes. It comes with a lovely preview screen, gridlines and masks, all to help you get the best out of your app icon. The only app icons that are exported with this template that I do not use are the ‘Icon-60’ and ‘iTunesArtwork@2x ‘ icons.

Adobe Photoshop CC 2015 -  - Screen Shot 21 July 2015 09:37

We have created multiple app icons for the same project and attached them to different schemas in Xcode, so that we can tell the difference between our develop, staging and production builds.

Naming

As for naming your assets, the general format that I use is ImageName_btn-736h@2x. Capital letters used for readability, an _btn if it is needed for defining an element, the -736h for the height (again only if needed to distinguish) and the @2x/@3x (for 1x there is no need to put an @1x at the end). Not only do I export assets, but I also export my UI screen designs to help the developers with their layout. The format for this is 01_HomeScreen, using a number extension at the beginning of the file name to clarify the screen order. However a user flow diagram with the screen names and small images is also good for this.

Naming for appicons, I use the Pixel Resort template as mentioned above, but this doesn’t name them appropriately for my needs. I have all the icons exported in a folder called AppIcon.appiconset (ready for putting into your Xcode project), but you may want to vary this name slightly if you are using different app icon sets (such as DevelopAppicon.iconset, for example). As for naming the icons themselves, I use the general format of AppIcon29x29 with the appropriate @2x/@3x extension where needed. See my icons below:

Finder - wordpress.com -  - Screen Shot 21 July 2015 09:31

Folder Organisation

The most important thing is to keep your folders organised when passing assets/designs over. Having an organised folder structure with designs > journey 1/journey 2 etc. and assets > screen 1/screen 2 etc. is crucial for developers being able to find what they need to implement your work. It’s very easy for things to get messy, especially when designs get changed frequently, but it’s worth being a tad OCD about this kind of thing.

Software

My main programs for exporting assets are Illustrator and Photoshop. In Illustrator, it is as simple as creating your asset, resizing appropriately (as it is vector based) and pressing ‘export’. But be careful, as Illustrator does not always export the files 100% to their size in AI – sometimes there are a few pixels added on. In Photoshop, there is a brilliant tool called asset generation. You can simply put your assets on separate layers, adding the extension ‘.png’ or whatever extension you want it and of course checking that your files are named correctly (ImageName@2x.jpg). From there, you press File > Generate > Image Assets and all of your layers will be exported in the specified file formats into a folder. You can even create the folder structure for this too. Excellent for real time updates, especially when you’re sharing your assets and need to make a lot of changes. It saves needing to press the export button over and over too.

Buttons

Another thing I find myself exporting a lot is buttons. If possible, check if these can be created by developers using code to save on loading time. Also, if you’re creating a button with text included, remove the text before exporting. This way, the text can be added on and styled with code, and can be changed so much easier than if the text was stored in the image.

Animation

One last thing to think about is if you are designing for animation. For example, if you were exporting a vector image of a person to put into Flash, you may want to export all of the joints and specific areas of the body that will be moving separate, to save problems later on. So ensure that all your different parts are grouped rather than joined together, as even if you don’t want to animate now, the need may appear later on.

That’s most of what I have to say for now. My main focus is currently iOS at the moment, hence the slight bias towards that in this post. This post will be added to as I do more stuff and find more tips and tricks along the way, but this is the way that I do things and the parts that I wanted to share. I will be starting to use Sketch soon, replacing AI and PS for a while to see how it goes, so will update at the end of my trial for this.

Advertisements