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.
3 months ago
Rad process Jeff! I'm a fan of Slicy as well : ) Did you know Ps CC has the same functionality now? http://blogs.adobe.com/photoshopdotcom/2013/09/introducing-adobe-generator-for-photoshop-cc.html
Thanks for posting this Jeff, I've been looking for a better solution to this. Going to try Slicy now!
Awesome work as usual.
This is beautiful. I have been using the same workflow with all my iOS/Android.
Are you using this for 9patch also?
I noticed you are naming "dpi"/"asset name".png. Are you renaming these before you drop into the drawable folders?
@Jed Bridges Yes, we have tried that, but it doesn't have the flexibility I need just yet. It's also nice to keep it out of Photoshop for the devs.
@Jeff Broderick never got into slicey but we've been using PNG express to do our exporting from Photoshop.
Lately however I've been replacing the assets myself in xcode and pushing those changes through to the developers. so I'm in total control of the exported assets and can change them when I need to and not rely on a dev to do some exporting etc. so far its been great. Especially with xcode 5.
Really interesting tool!!!
Usually I make PSD file with all unique elements and then slice it. It's quite helpful when you need to make assets for different DPIs - just make PSD twice larger (or smaller) and Save for Web again with another saving settings (to add @2x to all files name). This practice allows to save much of time, but of course it's not so convenient as Slicy.
Thank you for sharing!
@Jeff Broderick As someone constantly trying to be more efficient and thorough in this respect, thank you.
The trouble with Generator is the mess that it's going to make of layer names. "logo.png, 200% email@example.com" instead of "firstname.lastname@example.org" - and that's just a four-letter filename. Come on Adobe. It does automatically generate assets, which means devs wouldn't have to touch the .PSD but after some messing around with it I don't believe it's a better solution than Slicy or Cut&Slice.
It did however seem to scale my vector shapes before resizing them and I commend them for that if it's truly the case.
Very cool, thanks for sharing your process. I've noticed Photoshop's built in asset generation will not allow for empty padding (to have multiple differently shaped icons share a single icon size, as you've done here), does Slicy?
Edit: Nevermind! Found the help section and answered my own question. Awesome.
@Jeff Broderick I used to have a similar workflow. Slicy's since started crashing with larger PSDs. Especially when exporting icon comp sheets. It doesn't enjoy +200 128px icons. I've since been using an Applescript I made myself after seeing one in use during the summer — works wonders. What's the max file size you've put through Slicy?
Completely agree. Developers shouldn't have to slice through PSDs. Nice little read.
great info, thanks for sharing
I've been struggling with managing all my assets for devs and this is going to be a HUGE help. Thanks!
At the moment, I am doing all icon design & export from Adobe Illustrator:
1. Create a grid of Artboards in standard size
2. Give Artboards meaningful names (e.g. icnShoe)
3. Create icons in standard size
4. Duplicate all Artboards and scale by each one and it's contained icon by 200% for Retina versions
5. Export File > Export > Format: PNG, Use Artboards, Range: 1-10 > Put these in a new folder named iconStandard
6. Export again File > Export > Format: PNG, Use Artboards, Range: 11-20 > Put these in a new folder named iconRetina
7. Use Name Mangler to append @2x to retain icons.
Note: There are many other ways to quickly rename files, I like Name Mangler. OS X comes with a pre-built Automator script that will rename files, see here:
This is great and very similar to my workflow. However what I would really like to see in the future is the ability to link smart objects across PSD files - almost as if we had the ability to use sprints in our PSDs.
It would be so fantastic to be able to only update one icon and have all of my mocks updated in synchronicity.
Thanks for the share @Jeff Broderick!
Interesting to see your process. As a dev I'm happy if I get a PSD that uses layer comps. For me it doesn't have to be more fancy or time-consuming than that.
@Stephen Meszaros I can't believe no one has created this functionality yet. It's the main thing I'm waiting for.
Nice dude, always love seeing how other designers handle specs/implementation/assets.
Always blows my mind that months and months of work come down to these asset sheets with like 20 elements, lol.
@Jeff Broderick This is my technics:
I think Slicy just saved my life.
slicy all the way yo
Thks bro!! I will try slicy!
Thanks this is pretty helpful dude! Maybe you can make an "blog" post to have better readability :) @Jeff Broderick
keyboard shortcuts: ← previous shot → next shot L or F like
Show and tell for designers
What are you working on? Dribbble is a community of designers sharing screenshots of their work, process, and projects.
Copyright © 2009–2013 Dribbble LLC. All screenshots © their respective owners. Shipped from Salem, Mass. USA.
Follow Dribbble on Twitter