Pixlr is a browser-based image editor built in Flash. A lot of people see the word, “Flash” and thing “slow and clunky.” Pixlr is anything but. If you’re familiar with other browser-based image editors such as Picnik, you’ll be pleasantly surprised. Pixlr is not only fast, but offers a layout and toolset that will be very famliar to Photoshop users.
So what would you use a browser-based image editor for? The speed and convenience of Pixlr is perfect for doing quick edits of photos before you uploading them to Flickr or Facebook or emailing them to your mom.
As an example of the speed and power of Pixlr, I offer you this fast 4 point toning tutorial.
Quick steps to a Pixlr toned image:
- Adjust Brightness & Contrast to the point where only a small amount of the image is blown out or blocked up
- Adjust Hue and Saturation to achieve ideal skin tones
- Dodge image to highlight eyes, teeth and important features and Burn image to reduce emphasis on unimportant or distracting features.
- Duplicate the Background layer, set the Blend Mode of the new layer to Overlay and reduce the Opacity of the new layer

Before

After
Alright, so you want that more in-depth? Cool.
Quick steps to a Pixlr toned image, expanded and explained:
Step 1. “Jump in”
There is no login, just click the “Jump in” button or go directly to the URL http://pixlr.com/editor
In the time it takes you to inhale approximately 1.73 times (that’s right, there’s no exhaling here) the interface has loaded.

Step 2. Open your photo
From the File menu, select “Open” to load an image from your local system or if you already have an image uploaded to Flickr, Picasa or your image sharing site of choice, select “Open from URL”
The time it takes to open the photo will depend on your bandwidth, but any photo I’ve dealt with - up to 12 megapixels - has loaded in very reasonable time.
EDIT: Those at Pixlr let me know that if you are updated to Flash v.10, there is no need for an upload. Sure enough, it definitely speeds things up.
From the View menu, select “Show all” so that you’re looking at your entire image. You can also select Fullscreen mode from the view menu for total toning pleasure.
Step 3. Adjust exposure
From the Adjustment menu, select Brightness & Contrast. Since there is no histogram or similar feedback, you’ll have to rely on your own two eyes.
To quickly bring the image into the correct exposure range, do the following:
- Move the Brightness slider all the way to 100
- Slowly move the Brightness slider back to the left until you start to regain highlights
- Slowly move the Contrast slider to the right
- As you move the Contrast slider, your highlights will begin to blow out again so counter this by moving the Brightness slider further to the left
- Continue balancing the Brightness and contrast until only a small amount of the photo is blocked up and blown out.

Don’t worry if the image feels a bit flat, we’ll fix that in a moment
*Oh, and if you screw something up, there is a fully functional “Undo” feature.
Step 4. Adjust color
From the Adjustment menu, select Hue & Saturation.
Looking specifically at skin tones, nudge the Hue slider a few points in the appropriate direction. What is the “appropriate direction” you ask? Whatever looks good - yellow is to the right, red is to the left.
If you lightened the image in the previous step, chances are you lost some saturation. To fix that, just nudge the Saturation slider a few points to the right.

Step 5. Dodge and Burn
This step can take as little or as long as you like or be skipped entirely.
I recommend gently dodging eyes and teeth and burning down less consequential or distracting areas in the image
Step 6. The Ultimate Contrast!
Now for my favorite part…
From the Layer menu, select Duplicate layer. Looking at the layers palette, you’ll notice you now have a layer called Background copy. Change the blend mode of this layer to Overlay (you’ll have to scroll down the list.)

This will give you a super saturated, super contrasty image. It will probably be way too intense. To correct this, just reduce the opacity of the Background copy layer until the overall saturation/contrast balance is suitable.
A note on using Overlay: What you see is not necessarily what you’ll get when you save your finished image. I suggest setting Opacity 5 - 15 %.

You’re done!
Just remember to Save your image from the File menu.
As you become more familiar with using these techniques, you can tone images in seconds.
As of the posting of this tutorial, Pixlr is still in beta. It isn’t perfect in every regard, there’s no real color management for example, but it will get the job done quickly and effectively and I’m excited to see where they take it in the future.
Photography, Tutorials image editing, Photography, Photoshop, pixlr