3 Photoshop Tricks to Export Your Designs

PhotoshopAs Head of Product and the only designer at BrandYourself, I’m responsible for everything that needs to be designed: wireframes, clickable prototypes and final visual designs. While I love what I do, one part that sucks is having to export a million final design assets with the correct size/transparency/filetype/filename to be implemented on a website or app.

For example, I just finished designing over 150 social media icons. Each icon needed to be exported in several ways, including 16px, 25px, 25px grayscale, and 25px with small icon on top. When I finished, I had tons of icons in Photoshop and was faced with the task of exporting them for our dev team.

Here are a couple of tricks I used that made the process a breeze:

1. Export Layers To Files

In Photoshop, go to File > Scripts > Export Layers to Files. Specify your filetype (e.g. PNG) and Photoshop will automatically iterate through your layers and individually export them to your desired filetype.

2. Export Groups To Files

But what about when you need to export layer groups into individual files, not every single layer? Use this script to automatically export all your folders as separate PNG’s.

3. Export Layers and Groups Whose Names End With “.png”

If you want complete control over what gets exported as an individual file, you can also manually add the text “.png” to the end of all layer names and group names you want exported, then run this script to export them to files.

Hopefully these scripts can help you focus more on making useful and beautiful designs and less on the tedium of exporting your finished product. Let me know if you use any other tricks to make your workflow easier – I’d love to hear about them!


Written by

The author didnt add any Information to his profile yet