Creating layers with different sizes from existing PNGS and imported into a PSD

Question

Working on a legacy .NET web application we have the following issue: graphical themes are made of hundred png files. When it comes to create a new theme (ie. same icons but new set of colors), we take each png file and change its HUE using paint.net. It a very long process with poor results (images are pixelated, transparency is hugly...).

Using Adobe Creative Cloud we are trying to create a master PSD file that will contains all graphical elements. With well-named layers we will export them to individual files. We'll work with shapes and not "pixellated png" so changing color would be easy and clean. Moreover we will be able to change all icons' color in a row.

Icons aren't the same size and most of them doesn't "fit" content: for instance, one icon file is 27x27 with graphical content sized 13x18 at bottom right corner. Photoshop fits the layer to the graphical content: how to force it to a size of 27x27 and keep transparent content around the 13x18 painted area? Size can be 27x27 or 20x20 or 50x10 or ...

Answer 1

Adobe just introduced an incredible feature called Adobe Generator that can do exactly what you are asking for (Adobe Photoshop CC only)

This includes:

• Real-time Image Asset Generation (save your PSDs and automatically update your folder of assets without manual saving)
• No slices necessary
• Use your named layers with customized variables for size, file-type, and transparency

It won't however:

• Adjust hues or add effects. I recommend chaining a Photoshop Action to generate your assets (e.g. have an adjustment layer be created on top of the layers and have the generator run after. then simply remove the adjustment layer)

Learn more here

Also, if you want a tool for older versions of Photoshop, there is a great Mac tool called Slicy that can do the same.

Answer 2

You'll have to copy all the elements into one PSD then make slices for exporting in Photoshop. I would use Texture Packer to combine everything into one image automatically, but you'll have to make the slices by hand, which is pretty tedious, but there isn't a way to automate that as far as i know. After you have a PSD with slices you just apply different adjustment layers for hue.

You could make your production workflow a lot simpler by using CSS sprites instead of individual images, but you mentioned this being legacy, so maybe thats not an option.