Request a meeting room reservation at Northside Learning Center
More Free Image Editing: pixlr.com
This document is at: www.nisd.net/technology/training/webbie/webbie18apr2012.html.

Introduction

The last Webbie Support session focused on two new Web 2.0 image editing tools: FotoFlexer.com and SumoPaint.com, so why should we cover another one?

pixlr  (http://pixlr.com) offers a few things that other online tools don't have.

  • A simplified editing program, which makes layers easier to learn than it was with SumoPaint.com
  • A set of great "retro" effects that are fun and extremely easy to use

pixlr  Photo Editor

Need to edit a picture with layers? Looking for a simple program to use? Try the pixlr  photo editor. It's easy-to-use, yet it's a powerful image editing program that uses layers.

pixlr button

Getting Started:

  1. At the initial screen, choose -> Open photo editor < -.
  2. Choose from:
    1. Create a new image - To make a brand new image, or to cut-and-paste an image from somewhere else.
    2. Open image from computer - Open a picture stored in your computer or on a flash drive.
    3. Open image from URL - Open a picture by putting in its unique Internet address.
    4. Open image from library - Open from an account at pixlr, Facebook, etc.
  3. When you have the image open in pixlr, you can adjust the size of the image window by dragging it in or out (see the red circle in the image below). You can control zoom in and out by holding down the [Ctrl] key and pressing either the [+] or [-] keys.

pixlr screenshot
The pixlr screen. Main menu is at top (green oval). - Click for larger image.

The Basics:
pixlr  is much like a simplified version of Photoshop. Tools are on the left, the work area is in the middle, and panels are parked on the right side of the screen.

The program offers full support for layers. Many of the tools -- such as the Clone Stamp Tool -- work very much like their counterparts in commercial software programs and are easier to use than with some other Web 2.0 image editors.

Hints:

  • pixlr  is a great general-purpose image editor. It is a fast and easy-to-use tool for a quick edit of a picture, and it doesn't requre the user to create a (free) account. On the other hand, pixlr  is powerful enough for larger tasks.
  • The Move Tool (Pixlr: Move Tool) is the best tool to select for much of your work in pixlr. Think of it as the "default" tool.
  • Whenever you choose a tool, its options are displayed just under the menu at the top of the pixlr window. Sometimes these settings dramatically affect the use of the tool.
  • Don't forget the -> Retro vintage effects <-. They are extremely simple to use and can add some very fun effects to images.
  • Undo the last action by pressing the [Ctrl] and [Z] keys simultaneously. Alternatively, select Edit from the top menu of the pixlr  window and choose Undo.

Cropping an Image

Cropping lets you "cut" unwanted parts from the sides, top, or bottom of a picture. With the Crop Tool, you can completely change the character of an image by removing distracting or unnecessary parts of it.

  1. Select the Crop Tool (Pixlr Crop Tool) from the Tools at the left.
  2. Click on the image and "drag" out a "box". This is the area that will remain after cropping.
  3. Adjust the cropping area:
    1. Click the blue boxes at the corners of the cropping area and drag them to resize the part of the image to crop.
    2. Place your cursor on the cropping area. It should change to a "plus sign" with four arrows, then click and drag the cropping area to where you want it.
  4. Press the [Enter] key to crop.

Pixlr: Ready to crop
Ready to crop. - Click for larger image.

Resizing an Image

Pixlr: Image size window
Resizing an image
It's easy to change the size of a picture! Let's take a look at the antelope photo that was cropped in the section above. After cropping, it measures 1,388 x 777 pixels (width is always listed first). This is too wide for most uses, and about 4-5 times too wide for a Web page.

  1. Select the Move Tool
    (Pixlr: Move Tool).
  2. From the menu at the top of the pixlr  window, select Image, then choose Image size...
  3. The Image size window should appear. Make sure the Constrain proportions box (circled in red) is checked, to keep the image from being distorted in the resize.
  4. Type in the width or height you want, and the other dimension will automatically be adjusted. Click [OK].

Rotating an Image

There are two ways to rotate an image in pixlr. For simple rotation (90 or 180 degrees), select Image from the menu and choose the appropriate amount of rotation.

For finer control of rotation, use Free Transform:

  1. Pixlr: Free Transform rotation
    Rotating with Free Transform
    Select the Move Tool (Pixlr: Move Tool) and click the image.
  2. From the menu, select Edit, then Free transform... The Free transform "frame" should appear around the image.
  3. To rotate, move your cursor around the outside edge of the image, until it changes into an arrow bent into a circle (Free Transform rotation cursor). Click and drag to rotate the image.
  4. Click any tool in the Tools to finish editing in Free transform. Choose [Yes] to apply the changes you've made.

Note: Free transform can also be used to resize an image, by dragging the "handles" at its sides or corners.

Saving Your Image

pixlr  offers a simplified -- but very easy to use -- Save feature, which even allows you to save an image to your Facebook account.

  1. Choose File, then select Save...
  2. In the Name box, type the filename for the image.
  3. Select the Format. You have several formats to choose from:
    • JPEG - Best final format for most photos (photos you don't plan to edit again in pixlr ). Adjust the Quality control to change the appearance and file size of the image.
    • PNG - Use the PNG format if the image has a transparent background. Otherwise, JPEG is usually a better choice.
    • BMP - Also known as a Bitmap file format. This is an uncompressed format, so the file size tends to be very large.
    • TIFF - Tagged Image File Format. Another file format with very large file sizes. JPEG is a better choice.
    • PXD - Layered pixlr  image. Use this format if you plan to open the file again in pixlr. This format maintains your layers, while all other formats will "flatten" the layers.
  4. Look in the lower-right corner to make sure that the file size is acceptable, then click [OK].

Working with Layers

pixlr , like Photoshop and many other professional-level programs, lets you work on images with layers. Layers greatly expand the ways that you can edit a picture:

Unlocking and Renaming the Background Layer

Some changes to an image can't even be made until you unlock the main layer of the picture. pixlr  calls this the Background layer.

  1. Unlocking the Background layer
    Unlock the Background layer
    Open an image in pixlr .
  2. The Layers panel should be visible to the right of the image. If not, select View, then choose Layers to make it visible.
  3. In the Layers panel, double-click the padlock icon (circled in red in the image to the right) in the Background layer. This will change the padlock to a check box and unlock the layer so that it can be edited.
  4. The name of the layer probably changed from Background to Layer 0. Double-click the name and type in something more descriptive.

Adding Text in a New Layer:

Typing your text in a new layer allows you to move the text around, edit it, or even delete it without disturbing the rest of the image.

  1. Select the Type tool (Type tool). Notice that your cursor changes.
  2. Click on the image where you want your text to appear. A text editing window will appear.
  3. Type the text. It will probably be black in color.

Moving Text

  1. Choose the Move tool (Pixlr: Move Tool).
  2. Check the Layers panel, to make sure that text layer is selected. If not, click the text layer to select it.
  3. Now move the text anywhere on the image.

Modifying Text

  1. Select the Type tool (Type tool).
  2. Choose the layer for the text in the Layers panel.
  3. Click the text. The text editing window should appear.
  4. You can edit the Text, change the Font, change the Size, or the Style.
  5. To change the Color, click the color picker (circled in red, below). Choose one of the tabs at the top of window for the color format and select a color. Click [OK] in both windows.

Modifying text
Modifying text

Layer Order

Think of layers as being on clear plastic. Several layers can be visible at one time, but the Layers panel controls how they overlap. The layer at the top in the Layers panel is the one that appears "closest" to the viewer. Change the order of layers by clicking a layer in the panel and "dragging" it up or down.

Hiding Layers

An image can have a large number of layers. By choosing which layers to hide, and which to keep visible, a host of different images can be saved from one "master" image.

  1. In the Layers panel, click the checkbox to remove the check mark and hide that layer.
  2. To make the layer visible again, click the checkbox.

Using Layers to Make a Composite Image

It's easy to put more than one image together with layers. In this exercise, we have a JPG photo for the background, but the popcorn image is a GIF with a "transparent" background. This means that when we insert it into another image, all we see is the popcorn: its rectangular background has been made invisible.

  1. Right-click both of the images below and save them to your computer. The Buzz Aldrin (astronaut photo) will save as a much larger image:

         Buzz Aldrin     Popcorn

  2. Open the photo of Buzz Aldrin in pixlr.
  3. Select the Move Tool (Pixlr: Move Tool).
  4. Choose Layer and select Open image as layer.
  5. Browse to and open the popcorn image. Notice that a new layer has been created.
  6. Double-click the name of the new layer and rename it Popcorn.
  7. Make sure the layer for the popcorn image is selected, then click and drag the popcorn to where you want it to appear.
  8. To resize/rotate the popcorn:
    1. Select the Popcorn layer in the Layers panel.
    2. Hold down the [Ctrl] key and press [T]. This will turn on the Free Transform mode for the layer.
    3. Move the cursor near the Free Transform box, and it should turn into an arrow bent into a circle (see image, below). Click and drag to rotate the contents of the Free Transform box.
    4. To resize, hold down the [Shift] key to prevent distortion, and click any of the corners of the Free Transform box. Click and drag inwards or outwards to resize.
    5. Select any tool in the Tools to finish editing in Free transform. Choose [Yes] to apply the changes you've made.

Rotating a lyaer with Free Transform
Rotating a Layer with Free Transform

Advanced Techniques

pixlr  gives you several options for adjusting the look of your image:

Quick Adjustment: Auto Levels

Auto levels is supposed to adjust color, brightness, contrast, etc. in one quick-and-easy step.

  1. Select Adjustment from the menu and choose Auto levels. Observe the changes (if any) in your picture.
  2. Use Edit > Undo to reverse the adjustment, if desired. You may wish to try some of the adjustments described below.

Using Gaussian Blur to Remove the Moiré Effect

Moire effect
The Moiré Effect is visible in the sky in this drawing at some resolutions.
Moiré is a pattern that is created in some photos by grids or series of lines. It is sometimes present in TV images, when the camera has trouble with certain patterns on clothing. it is often visible when a digital camera is used to take a photo of a TV screen. Here's a very complete description of the moiré effect:

Moiré Effect (Wikipedia.org)

Gaussian Blur is used to remove the moiré effect. Normally, any kind of blur is applied after image editing is complete, but using the gaussian blur to remove moiré patterns is an exception.

  1. Choose Filter from the menu and select Gaussian blur.
  2. Carefully adjust the amount of blur, to try to lessen the moiré effect without blurring the image in general.

Adjusting Hue & Saturation

  1. Choose Adjustment from the menu and select Hue & Saturation...
  2. Use the sliders for Hue, Saturation and Lightness to adjust your image.

Hue can be used to actually change the colors in an image.

Saturation changes the intensity of colors. In the extremes, you can change the colors in an image to pure, saturated colors, or you can wash the color completely out of a picture.

Lightness changes the colors along a lightness–darkness scale.

Blue Angel photo - unedited
Blue Angel photo - Hue adjusted
Blue Angel photo - desaturated
Blue Angel photo - saturated
Top to bottom: Original photo, Photo with Hue adjusted, Photo with colors desaturated,
Photo with fully-saturated colors.

Manually Adjusting the Levels

This is a wonderful feature to use with "murky" images that do not have a true black or a true white anywhere in the picture. Although the process looks a bit intimidating, it's really quite simple and easy.

The image shown below -- while well-composed and framed -- is somewhat "washed out." Colors could be brighter, and the photo contains only a small amount of "true black" color. We can use the levels to improve the photograph.

Chichen Itza
A slightly "washed-out" photo of El Castillo at Chichen Itza

  1. Select Adjustment and choose Levels...
  2. The Levels window shows a histogram, with three "sliders" at the bottom of it. The curve shows how color lightness values are distributed in the image.
  3. To achieve a true black in the image, move the leftmost slider (circled in red in image below) inwards, onto the bulk of the histogram.
  4. To adjust the image to have a true white, move the rightmost slider (circled in green in image below) inwards to meet the right edge of the bulk of the histogram This will also lighten colors in the photo.
  5. The middle slider can be used to adjust midtone values.
  6. If you wish, you can also click the Channel: selector and adjust the red, green and blue color channels individually. In our example, we'll just try the small adjustments shown below.

Adjust levels
Adjust Levels: Move the circled "sliders" inwards onto the histogram shape.

The image below shows a before-and-after view of a small adjustment of the levels:

Adjust levels
Image before editing levels (left half) and after (right half).

Using the Color Curves to Modify an Image

The Color Curves look challenging, but they offer one of the fastest and most powerful tools for image editing.

The "curves" each appear as a straight, diagonal line. You have several ways to modify the curves:

  • Use the Channel selector at the top of the window to adjust, Red, Green or Blue channels, or leave it set to RGB to adjust all three at once.
  • Move either endpoint of the line.
  • Click anywhere on the line and drag, to "bend" it into a curve.
  • Click and drag other points to create a complex shape.

Let's look at two easy changes you can make:

Correcting Tonality

Use this to make dark colors more distinct and "brighter." You can also improve the color balance of a picture.

  1. Choose Adjustment, then select Curves.
  2. Click the Histogram box to make its shape visible.
  3. Move the left endpoint horizontally toward the histogram.

Pixlr: correcting tonality using the Curves
Adjusting tonality: Move the left endpoint to the right, onto the histogram

Correcting tonality: Before (left) and After
Correcting tonality: Before (left) and After

Using the Curves to "Solarize" Images

When film was exposed to light during or after the developing process, this was known as solarization. This extra exposure could cause extreme brightness, or even color inversion in the photo. This is easy to do in pixlr, by selecting Adjustment and choosing Solarize. Using the Curves, however, gives you more control over the finished effect.

  1. Choose Adjustment, then select Curves.
  2. Click the Histogram box to make its shape visible.
  3. Move the RGB curve to roughly match the shape of the histogram.There are many possibilities. Here are a few:

Using Curves to Solarize a Photo
Using Curves to Solarize a Photo

Using Curves to Solarize a Photo
Another Example of Using Curves to Solarize a Photo

Removing a Background to Create a Transparent Image

Removing a background from an image in pixlr  is a bit different from the process in other image editors, but it isn't difficult. Some tutorials on YouTube include the copying of the main layer and the creation of another file, but neither step is necessary, if you unlock the background layer.

  1. Unlock the background layer
    Unlock the background layer
    Open the image.
  2. Choose the Move tool (Pixlr: Move Tool).
  3. In the Layers panel, double-click the padlock icon (circled in yellow in the image to the right)in the Background layer. This will change the padlock to a check box and unlock the layer so that it can be edited.
  4. Select the Wand Tool (Wand tool).
  5. Click the background of the image to select it. You should see a series of dotted lines "running" around the background.
  6. Press your keyboard's [Delete] key to remove the background. The background should be replaced with a checkerboard pattern, indicating that it is transparent.
  7. Removing background
    Removing the background. The "checkerboard" shows the background is transparent.

  8. Select File and choose Save. Change the Format: to PNG, and you should see the background in the preview image change to transparent (checkerboard). Click [OK].

Free, High-Quality Images!

Friends don't let friends use bad clip art in their Web pages, PowerPoints, or lesson plans.

Wikipedia (en.wikipedia.org)
Free or Fair Use images. Browse for any subject and click any image you see to find out if you can use that image. Many of the images are either Public Domain or are available for Fair Use for educators.

morgueFile (www.morguefile.com)
Free images. The morgueFile database of free pictures is quite extensive, and images are searchable by subject. Avoid the Dreamstime images, because those are not free.


Printer-friendly version of this exercise (PDF)