Asset Creation Process

4 Attachments

38 Responses (page 1 of 2)

  1. Jeff Broderick Jeff Broderick

    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.

    likes

    7 months ago

  2. Jed Bridges Jed Bridges

    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

    likes

    7 months ago

  3. Mike Busby Mike Busby

    Thanks for posting this Jeff, I've been looking for a better solution to this. Going to try Slicy now!

    Awesome work as usual.

    7 months ago

  4. Joel Beukelman Joel Beukelman

    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?

    likes

    7 months ago

  5. Jeff Broderick Jeff Broderick

    @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.

    likes

    7 months ago

  6. Drew Matthews Drew Matthews

    @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.

    likes

    7 months ago

  7. Stanfy Stanfy

    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!

    7 months ago

  8. David Klawitter David Klawitter

    @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% logo@2x.png" instead of "logo@2x.png" - 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.

    7 months ago

  9. Evan Dinsmore Evan Dinsmore

    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.

    7 months ago

  10. Wil Nichols Wil Nichols

    @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?

    7 months ago

  11. Joe Turner Joe Turner

    Completely agree. Developers shouldn't have to slice through PSDs. Nice little read.

    7 months ago

  12. Mark Justin Harvey Mark Justin Harvey

    great info, thanks for sharing

    7 months ago

  13. Connie C. Connie C.

    I've been struggling with managing all my assets for devs and this is going to be a HUGE help. Thanks!

    7 months ago

  14. Jono Young Jono Young

    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:
    http://reviews.cnet.com/8301-13727_7-57411491-263/how-to-batch-rename-files-using-automator-in-os-x/

    likes

    7 months ago

  15. Stephen Meszaros Stephen Meszaros

    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!

    likes

    7 months ago

  16. Jani Muikku Jani Muikku

    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.

    7 months ago

  17. Ed Lea Ed Lea

    @Stephen Meszaros I can't believe no one has created this functionality yet. It's the main thing I'm waiting for.

    likes

    7 months ago

  18. Jordan Borth Jordan Borth

    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.

    7 months ago

  19. Evgeny Belyaev Evgeny Belyaev

    likes

    7 months ago

  20. Jay Robinson Jay Robinson

    Gorgeous!

    7 months ago

  21. Justin Baker Justin Baker

    I think Slicy just saved my life.

    7 months ago

  22. Josh Lee Josh Lee

    slicy all the way yo

    7 months ago

  23. Mario Rocchi Mario Rocchi

    Thks bro!! I will try slicy!

    7 months ago

  24. Luboš Volkov Luboš Volkov

    Thanks this is pretty helpful dude! Maybe you can make an "blog" post to have better readability :) @Jeff Broderick

    7 months ago

  25. harwen harwen

    Nice

    7 months ago

keyboard shortcuts: previous shot next shot L or F like