skinyourscreen.com

Recolorizing your themes

After days of intensive graphic effort you’ve generated all the graphics for your next blockbuster theme. After putting up a couple of preview pics to get feedback from friends, someone writes back and says “I LOVE the stylings, but really wish I could have it in red instead of blue to match my desktop.” It’s not too late! Mod those colors en masse quickly and easily using Photoshop!

We’ll be employing several techniques in order to accomplish this:

Creating an Adjustment Layer to tweak colors globally in an image.
Creating a Photoshop Action to apply these changes to other images.
Use Batch Processing to apply our action to a bunch of files at once.

By way of example

This tutorial assumes you are recolorizing images for an existing theme. If you’re creating color versions of your own skins from scratch, however, this method can also save you some time. For this example I’ll be recoloring my Synovium skin for Sysmetrix. Opening the theme’s folder, here’s what the guts of the theme look like:

It’s just a pile of bitmap images, right? Although we could individually recolor every single one of ‘em, I prefer to take the lazy (but smart) way out.

I recommend you make a backup of any theme you’re gonna muck around in, just to play it safe.

Creating a Photoshop Action

Open one of the theme images. We’ll make our recolorization settings using this file and then apply these changes to the rest of the files in the theme.

Here’s the image I’ll be using:

I included the Layers Palette and the Actions Palette so you can see what else I’m doing.

Now, create a new action by clicking the “New Action” button in the Actions Palette.

Here’s the dialog box for naming your new action and setting other parameters. Since the original Synovium skin is green and I want to recolor to red, I’ll call this action “Green to Red”

Recolorizing

Before proceeding I’ll mention that there are at least two methods of quick colorization. One could use an Adjustment Layer within a theme’s Photoshop file during construction for quick non-destructive recolorization. The alternative is destructive editing using IMAGE > ADJUST > HUE/SATURATION from the Photoshop menu. For this tutorial I’m going to go with the simpler, but less versatile method of using the global image HUE/SATURATION option, which will simplify the Batch Processing at the end. (Adjustment Layers could also be used but would require an additional step to flatten the image before automatically saving the file).

We’ll need to generate our recolorization settings for our action on a test file. In this case I’m using a mockup of part of the Synovium skin..

Navigate through the menus to SELECT > ALL to select all the viewable image of the file. (This is for some versions of Photoshop which might not apply the recolorization to the file image without explicitly being told where to apply it).

Now navigate to IMAGE > ADJUST > HUE SATURATION in the menu. You’ll see the following dialog:

Usually I just tweak the top-most slider for hue. In this case I’ve set it to “-135” which will turn the rich green to a robust crimson.
NOTE: This adjustment merely SHIFTs colors. This adjustment will NOT turn blue to red, yellow to red, or orange to red. If we had started with a blue image instead of green that this adjustment layer will change it to a different color.

Now, press the “Stop” button on the Actions Palette to quit recording the action.

We’ve just created a brief action to select the entire viewable image in an opened file and recolorize any greens to reds.

Adjusting multiple files via Batch Processing

Now open all the graphic files that need to be recolored for the theme in Photoshop. These should be files that don’t contain layers (BMPs, JPGs, PNGs, GIFs, and the like). If you have to do this to files that contain multiple layers Photoshop will just recolor whatever the currently selected layer is. You can resolve this by making a more complicated Action, but that’s beyond the scope of this tutorial.

Now navigate to FILE > AUTOMATE > BATCH…

In the Batch dialog, select the action you created earlier. Set the Source as Opened Files to apply your action directly on the files you opened above. For the Destination select Save and Close. Together these settings will apply the recolorization action you made to each file opened in Photoshop and then Save each and close them.