Asset Creation Process

4 Attachments

This is a slightly different (and maybe boring) post than what I am used to. I wanted to quickly demonstrate how I have been setting up my PSDs to be able to hand over assets efficiently to our developers.

Although assets are not usually fun and very time-consuming, it's my opinion that the original designer should be the one exporting the assets, controlling as many aspects of the design as possible.

I have been using Slicy for a while now and it has been absolutely amazing for both myself and the developers. Not only does it force me to properly organize my PSDs, but it also quickly (and automatically) exports assets to separate folders (for Android) as well as export retina (and normal) resolution assets for iOS.

I have been breaking out my asset PSDs by element type making it really easy for the developers to go through and grab all the most up-to-date assets for specific elements, but also allows me to make sure every icon and every button is properly spaced/sized to match the rest of the edge-cases.

The bounds surrounding the assets are Slicy "bounds" which are not exported and really help with spacing and color.

Anytime I make any changes to any of these asset PSDs, all assets get re-sliced and exported. Making it really easy to maintain.

Pro-tip: When combined with a syncing system like LayerVault or Dropbox, Slicy is even more powerful. Have all your devs open the synced PSD on their machines, setting it to auto export assets into their projects resources folder. This time, next time you (the designer) make changes to the PSD, Slicy detects the new synced PSDs, and auto exports to your devs resources folders, allowing you to easily get asset tweaks into the project without bothering the devs. :)

Be sure to check out the attachments for more examples and Tweet me if you have any questions.

I'm also interested in what everyone else does! Please elaborate!

Edit: I'm sure plenty of people are going to mention the new Photoshop tool which does something similar. I think it's nice to have a 3rd party app which reads PSDs but doesn't require Photoshop so our devs can use it.

keyboard shortcuts: previous shot next shot L or F like Z toggle zoom