I’ve been using the Pixlr.com online graphics editor ever since I lost a hard drive and had to be without Photoshop for several days while resurrecting my PC. Click here to see my post on Pixlr.com

I believe you can find the blessing in just about anything and this was certainly the case here. Despite the fact that I lost my hard drive, and considerable time reconstructing things, I found pixlr and now I’m able to share it with you.

So the purpose of this post is to show you how to edit the header image that ships with the Amazonia template that I built for Affiliate review sites for ClickBump Engine owners. Here’s a quick peek at the Amazonia template so that you can see what we are working towards. The header image is in the blue background area…

I’ve started including header.pxd files in most of my premium templates to allow the end user to customize their header images at no cost pixlr.com. The pxd file format is the pixlr.com native file format that supports layering as well as transparency. The pixlr online editor is the closest thing you can get to a copy of Photoshop and not be $650 in the hole for the trade – in other words its absolutely free. What that means is that you can open and save as many images as you desire and so it was the perfect file format to settle on for the custom header images in my themes.

The header image used with the Amazonia template consists of a two-layer image, one layer holds the avatar character on the left side, while the other holds the camera image on the right. I’ve spaced them on opposite sides of the image to allow for the site title and tagline of the page to rest in the middle of the two images once the page is viewed in the browser.

So here’s the step by step on how to customize the Amazonia header image at pixlr.com

Step 1 Go to pixlr.com/editor and select “Open image from computer”

Now select “header.pxd” from your Amazonia folder (you will need to unzip it first). You will see that the image opens with two layers in the pixlr editor as you can see from the screenshot below…

Step 2 > Select Layer 1 and Delete the camera image

The image in “Layer 1″ is the camera photo. And the image in Layer 2 is the avatar character. I could have named them something other than “Layer 1″ and “Layer 2″, but you get the idea. If you uncheck the checkbox on layer 1, it will hide layer 1 from view. Check it and it will toggle the layer back on. You see that layer 0 has a lock icon. If you want to edit that layer, just double click the lock icon to unlock the layer for editing.

To replace either of these with your custom image, just select the layer you want to work with by clicking on it, then choose “Edit > Select All” (or just click “CTRL + A” or the Mac equivalent) and click the delete key to remove the image from that layer.

Step 3 > Paste your own custom image into the layer that once contained the camera image

Now its time to paste in your own image. For example, since your site will probably not be about digital cameras, then you will want to either just remove that layer or paste a relevant image in that location.

To paste in your own image, you will first need to open it in the pixlr editor using the “Open image from computer” as you did in the beginning. Once you have your image open, just choose “Edit > Select All” then “Edit > Copy“. Finally, click on the header.pxd image and select “Edit > Paste” which will place your pasted image onto a new layer in the header graphic.

Step 4 > Resize your pasted image and Move it into place

To resize your image, first make sure that the layer your image is on is selected in the layer’s palette (its background in the layer’s palette will be blue) then select “Edit > Free Transform” to engage the resize mode for the layer. You will see a bounding box with control handles on each corner appear around your pasted image. While holding down the SHIFT key, drag a handle out or in to resize your pasted image (holding the SHIFT key forces the image to be resized in proportion and avoids distortion).

Once you’ve got it resized to your liking, click anywhere outside the image and you will be prompted with “Do you want to apply the changes?”. Click “Yes” to accept the changes. If, for any reason you made a mistake and want to back up a few steps, you can always step back in time using the history palette – “View > History“, then click on any step in the history palette to reset the image to that step.

Finally, to move the image into place you need to select the move tool (the black mouse pointer with the crosshair at the top right corner of the tools palette). Once you’ve got the move tool selected, just click on the image and drag it to its desired location within the layer.

Tip: Pixlr even has a nifty little plugin for Firefox and Chrome that allows you to right click on any image you find online and click “Edit in pixlr editor“. This opens a new tab with the selected image open for editing in the pixlr editor workspace. From there you can copy and paste it into your header.pxd file for example.

Step 5 > How I achieved the fade/feathering effect on the camera image

To achieve the feather effect on the left side of the camera, I used the eraser tool with a broad feather diameter. As you can see from the screenshot below, I settled on a brush size of 300 pixels which gave a nice smooth feather fade to the image…

Finally, to feather the image just place the brush circle over the left side of image and click until you are satisfied with the results. If you make a mistake, you can access the history palette from the “View > History” menu and back up a few steps if you need to.

Final Steps > Saving the image as header.png with transparency

Once you are done with the edits, just click “File > Save” and choose PNG as the file format and name the image “header” (the .png extension will be done automatically once the image is saved to your harddrive. Otherwise, you will end up with a file named header.png.png which will not work when the template stylesheet is expecting header.png)

Once the image is done, and you’ve uploaded the template to your site, just go to “ClickBump  Engine > General Settings > Upload a Custom Header” and select the header.png file you just saved. Once its uploaded, it will automatically replace the template’s existing header file.

That’s pretty much it. Happy Earnings!