What is Pixlr?
Pixlr is an online Image and photo editing tool. Image design, paint tools, Fast, simple and enough features to make this a great find for low- to moderate-level photo editing. You can create a new image, upload an image, or grab one directly from a URL location.
Pixlr’s Main Features
- Pixlr Editor: If you are already familiar with Photoshop, you will find the Pixlr Editor menu options familiar both in layout and in how they work.
- To use them, you need to have some basic understanding of how image edit tools (i.e., fill, crop, blur, smudge, etc.) work.
- Pixlr Express I love the Pixlr Express tool. It has a variety of one-click changes that are fun and fast and a great choice for beginning editors.
- Variety of filters and effects
- Custom Brushes
- Customizable user-friendly interface with movable and scalable windows
- History window for quick undo/redo
- Fee-hand crop, move, super-impose and interpolate images and rotate and remove entire canvases
- The interface is translated into 12 languages
- No need to register
Added Features and Perks
- Pixlr offers “Install Pixlr Grabber Firefox and Chrome addon! a free download that enables you to right click on any image in a web page and load it into Pixlr for editing. This Firefox add-on also lets you capture the whole or parts of the browser content (print screen).
- It’s free!
Ease of Use / Pixlr User Interface
The Pixlr Express tool is so simple anyone can master it in seconds. The Pixlr Editor has nice features but requires some knowledge of photo imaging software or you will get lost.
Pixlr’s user interface is very easy to navigate and user-friendly.
There are not enough Pixlr tutorials, however, what they do offer is presented in easy-to-understand layman’s terms.
One of my pet peeves about Photoshop is that it can be really intimidating for beginners. Pixlr’s tutorials show examples and clear steps to use their tools to get similar results you could get from Photoshop, only without the “fear factor” or intense learning curve.
To get a better feel for Pixlr and how you can get the most out of its features, read their blog before diving in.
No support or user groups. Short on tutorials, however, if you read Pixlr’s blog you will find more information about how to get the most out of Pixlr.
Their “Help” section really is not very helpful. For example, if you have trouble downloading Pixlr’s “Grabber” and click on “Help” you won’t find any answers.
Free, Online Pixlr Video Training
If you are new to image editing and do not like to play around in software, KT Forlaget / ICT Publish, Stavanger, Norway, has produced 30 video tutorials in English to help you quickly master all the important basic features and tools Pixlr offers. You can access all the videos online for free (you do not even have to sign up for an account.)
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