I thought it might be fun to share some tips and insights about my workflow on here, so here is the first post about that.
I’ve been working with Photoshop for years and years, and I’ve picked up some cool tricks along the way. But Photoshop itself keeps changing too, so today’s tip is cutting-edge, using the latest features in CC 2015.1 to export images in multiple sizes with one click. This uses two great new features, namely Artboards and The Generator.
Artboards are old news for users of Illustrator, but in Photoshop they can really enhance your workflow too. I wasn’t a big fan at first, but using it in conjunction with the Generator makes a strong case in their favor.
The Generator is probably a feature not many people know about. Exporting multiple layers in the past was mostly the domain of Export > Layers To Files, or using Slices in Save For Web, but The Generator is the next evolution; all you have to do is turn on Image Assets under File > Generate, then append .png to the names of the layers you want to export, and when you save your PSD, it automatically crops and exports these layers.
I found this extremely useful for exporting character limbs for game development, but it has its uses in webdevelopment also. I’ll show you how I use it at my job to export different sizes of the same illustration:
The source file is very high resolution, obviously, and when it’s done, I have to export into two 1200×628 pngs – one with a text banner for Facebook, and one clean one for the blogpost itself – plus a cropped 700×628 version for Pinterest and Instagram.
Resizing and cropping manually is a small pain, but a pain nonetheless, especially when you have to go back and change something later.
So, what I do is make an artboard at the size of the original illustration and convert all the layers in it to a smart object. Then I make three extra artboards at the size I want the exported images to be, copy the smart object into them, and add .png to the artboard names. This way, whenever I make a change in the original illustration, the change is propagated to all the other art boards, and when I hit Ctrl+S it automatically saves them out to separate pngs, ready to go onto the site (well, after they go through ImageOptim).
Using this setup as a template whenever I start a new illustration saves me a bunch of time otherwise spent exporting images by hand. Hopefully this is useful to some of you too.