Pixlr Handout : Jayne Salisbury August 2010

1

Pixlr Photo Editing Handout

What is Pixlr? Pixlr is an online image editor, which allows you to upload images and edit them in a browser. It is similar to Photoshop (but without the expensive price tag.) Note: Flash plug-in is required to get it to work. Pixlr allows you to edit images on the Web, so if you have a camera full of photos that you want to upload to Schoolwires, but need to resize them first, Pixlr can help you do the job. Even better, if you need to do color correction, add filters, insert some text, or crop the photo, Pixlr can do that as well. Pixlr also allows you to upload images directly from your system or from a URL, so if the images you'd like to edit are already on the Web, you can grab them, work with them, and save them when you're done. The service allows you to save images as either JPG or PNG images. Unfortunately, you can't save images to the Web or publish them directly to other services, but you can download them when you're finished and upload them to your Schoolwires teacher page when you are finished.

Getting Started with Pixlr Open browser and type in www.pixlr.com in search engine.

Select Pixlr Editor. (Note: Pixlr Express is also available for beginners and quick fixes. For Pixlr Grabber, you can extend the Pixlr experience boy downloading the extension to either Mozilla Foxfire or Google Chrome.)

Getting to know the Pixlr Home Screen

(1) Toolbox (2) Tool Options (3) Navigator (4) Layers (5) History

Pixlr Handout : Jayne Salisbury August 2010

2

(1) The Toolbox The toolbox contains the common used tools that used on specific areas of the image. Select a tool by clicking the icon. If you hover over the button a few seconds, you get a tool-tip with the tool name.

Marquee tool (M)

Lasso tool (L)

Crop tool (C)

Clone Stamp tool (S)

Eraser tool (E)

Gradient tool

Color replacement tool

Blur tool (R)

Smudge tool (U)

Dodge tool (O)

Red eye reduction

Bloat tool (A)

Color picker tool (I)

Hand tool (H)

Set foreground color

Move tool (V)

Wand tool (W) Pencil tool Brush tool (B)

Paint bucket tool (G) Sharpen tool (Y) Sponge tool (P) Burn tool (N) Drawing tool Pinch tool (K) Type tool (T) Zoom tool (Z)

Set background color

Pixlr Handout : Jayne Salisbury August 2010

3

Tool Name: Definition: Bloat tool (A) The bloat tool lets you “grow” areas of the image such as an eyeball or lips.

Blur tool (R) Blurs an area of the image using any brush you select.

Brush tool (B) The Brush tool allows you to select a brush, choose its characteristics, including size, shape, spacing, roundness, hardness, angle, diameter, mode, opacity, and more, and then use the brush for various types of artwork.

Burn tool (N) The Burn tool is used to darken areas of an image or print.

Clone Stamp (S)

Lets you duplicate any area in an image and "paint" that area over any other part of the image.

Color picker The color picker tool lets you sample colors from the image and set it in the main or alternative color pad. By holding down <SHIFT> you set the alternative color.

Color replace Select a new color in the main color pad (bottom of the toolbox). Start drawing on the color you want to replace with the new color.

Crop (C) Lets you remove extraneous portions of an image by selecting a specific portion of the image and deleting the area outside of it.

Dodge tool (O) Used to darken areas of an image or print.

Drawing tool Used for drawing free-hand shapes.

Eraser tool (E) Erases to the background layer by dragging the mouse.

Gradient tool Fills a closed object with a range of colors that fade into each other.

Hand tool (H) Allows you to scroll through an image that doesn't fit completely in the viewing window. It's like using the scroll bards at the bottom and right side of the window, except you do the moving with the mouse by dragging. When the Hand tool is chosen, the cursor becomes a hand.

Lasso (L) Lets you draw around an object using curves and line segments.

Marquee (M) Allows you to select portions of an object, file, photo, or subject for editing.

Move (V) Allows you to move a selected part of an image, align layers, and distribute layers in an image. When the Move tool is selected, a box is placed around the selected part of the image. This box can be used to move the selection and edit its shape and size.

Paint Bucket (G)

The Paint Bucket tool fills a closed object with a solid color.

Pencil tool The Pencil tool allows you to select a brush, choose its characteristics including size, shape, spacing, roundness, hardness, angle, diameter, mode, opacity, and more and then use the brush for various types of artwork.

Pinch tool (K) The pinch tool lets you “shrink” areas of the image.

Red eye The red eye reduction tool lets you remove the red color that appears when you are taking photos and are using flash.

Set BG Color Allows you to set the background color

Set FG Color Allows you to set the foreground color

Sharpen (Y) Sharpens an area of the image using any brush that you choose.

Smudge (U) Smudges an area of the image using any brush that you choose.

Sponge (P) The sponge tool is used to saturate and desaturate parts of the image.

Type tool (T) Used to add words to an image. With a type tool selected, you can set options for font, size, color, alignment, and more.

Wand tool (W) The wand tool is one of the selection tools. This tool lets you select parts of the image that is in similar colors and isolate that part for editing.

Zoom tool (Z) Choose the Zoom tool and click on an area of the image to zoom in or out. Offers choices to resize the window to fit on the screen and other options.

Pixlr Handout : Jayne Salisbury August 2010

4

(2) Tool options

To control options of the tools available in the Toolbox there is a option-bar in the top of the application. When a tool is selected, the option-bar changes and shows the tool specific options.

(3) Navigator Panel

(4) Layers Panel

The layers panel contains all the functions you need for working with layers.

In the top of the panel are setting for blend-mode and layer opacity.

Then you have the list of layers in your document starting with the topmost and end with the background. In each layer, you find a thumbnail of the layer, a icon for layer styles (if you have any) and at the right a check box for visibility or a hinge for transparent lock.

At the bottom, there are five icons, two for moving layers up and down, one for layer styles; one for adding layer and the last one is a trash can for deleting layers.

To be able to work efficient with photo editing the concept of layers is a must know. Layers are used to work on individual parts of an image while not affecting other parts. You might say that layers are like transparent papers stacked on top of one another which can be repositioned and separately drawn on without disturbing each other.

The navigator panel contains a thumbnail of the image, coordinates of the mouse location, selection size, zoom and pan controls.

Pixlr Handout : Jayne Salisbury August 2010

5

Settings on the Pixlr Menu Bar

Note: A detailed explanation of how you can use these settings to create photographic art follows this section in "Advanced Pixlr.)

(5) History

Select history to see the list of steps taken to create the image that you are currently working on. The History palette helps you correct errors (by storing what you’ve done to a file previously) and allows you to “go back” to a point before a particular edit was made simply by clicking on the appropriate step.

File: Select File to start a new project, open a photo from your computer, or open from URL. Go to File to Save, Print, Close & Exit.

Pixlr Handout : Jayne Salisbury August 2010

6

Edit: Select Edit to Undo, Redo, Cut, Copy, Clear, Past, Free transform, Select all, Deselect all, Invert selection, and Define brush.

Image: Select Image to choose Image size, Canvas size, Rotate a canvas, Flip a canvas, and Crop.

Pixlr Handout : Jayne Salisbury August 2010

7

Layer: Layers are like transparencies, which are clear plastic sheets of material that can be printed on. The transparencies can be printed and stacked on top of one another to form a complex picture, and single transparencies can be removed from the stack for editing or removal. For example, you can place text on one layer, background image on another, and perhaps a selection pasted from another file on another. These layers can then be edited independently of each other, making the editing process more efficient and precise.

Adjustment: This tool is helpful if you want to change the brightness or contrast of a photo. Great for when you take a picture that is too dark and you want to lighten it up a bit.

Pixlr Handout : Jayne Salisbury August 2010

8

Filter: By using filters on your image, layer or selection, you can archive some cool looking effects. The filters can do everything from changing colors to moving pixels and adding stuff to the image. Examples: For additional examples, see the Advanced Pixlr section. Blur filter: The blur filter simply blurs the image, layer or selection. The filter can be applied several times to get the appropriate result.

Sharpen filter: The sharpen filter simply sharpens the image, layer or selection. The filter can be applied several times to get the appropriate result.

Noise Filter: Applying the noise filter to an image will add "statics" that can be used to give it an older worn down look.

View: Select View to turn on and off the Navigator, Layers, and History windows. This is also where you would zoom in and out of a photo, which is especially helpful when cutting out a portion of a photo.

Pixlr Handout : Jayne Salisbury August 2010

9

Languages: Just as this box states, you have the option of working with Pixlr in a variety of languages…very helpful if you are working with ELL students.

Help: The help section gives you immediate connection of FAQ and Blogs that relate to Pixlr.

Pixlr Handout : Jayne Salisbury August 2010

10

Transforming an Image in Pixlr

Pixlr editor presents a wide array of ways to transform your canvas, layer or selection. You can change the size of the image or canvas, crop to your needs, rotate or do a free transform in any aspect.

Image Size Resizing an image is easy, simply select Image>Image Size in the top menu. You can both make the image larger and smaller. If you make it larger, it may be at the cost of the image quality. Note: The Constrain Proportions option will resize the image and keep the original proportions.

Canvas Size

Resizing the canvas doesn't resize the image itself, but rather the available area on which to draw. The result of making the canvas larger will be white (or transparent) space around the image.

Pixlr Handout : Jayne Salisbury August 2010

11

Crop Image

To crop an image select the crop tool from the toolbox. Start by marking the area you roughly would like to crop. You will now see a dotted square as you select. Release the mouse button and the dotted square will transform into a marking with squared dots in the corners.

You can now move the marked area by dragging in the middle or resizing by dragging one of the four corners.

When you are satisfied with the selected area, you can either click outside the image window, click <return> on your keyboard or double-click on the marking to proceed with the cropping. If you want to cancel, you can click outside either the image or click <esc> on your keyboard.

Pixlr Handout : Jayne Salisbury August 2010

12

Pixlr Lessons and Sample Projects

Lesson 1: In this lesson, you will learn how to use a variety of tools in the Toolbox to edit a photograph you have downloaded to your computer. 1) Go to Google and type in Pixlr Photo Image Editor or go to:

http://www.pixlr.com/editor/ 2) Select Open image from computer.

3) Select the photo that you want to edit from your computer.

Pixlr Handout : Jayne Salisbury August 2010

13

4) Rotate Canvas

5) Red Eye Fix

6) Crop Image

If needed, select Rotate canvas (180°, 90° CW or 90°CCW from Image on the menu bar. Note: This is where you would also change the image size and/or canvas size which we will do later. Since I'm going to be working with the tools from the Toolbox, I want to keep my image full size for the moment.

Click on the Red Eye Reduction Tool from the Toolbox. Click the center of each eye to remove the redness. The pupil of the eye will automatically change from red to black. Repeat process with other eye.

Select the Crop tool from your Toolbox.

Click and drag over the image. Release click.

Pull on one of the boxes in the four corners of the grid to center the face in the photo.

Click outside of the photo. You will be asked if you want to apply the changes. Click on Yes to crop the photo.

Pixlr Handout : Jayne Salisbury August 2010

14

7) Resize Photo

8) Lasso Tool to (change hair color)

Select Image Size from Image in the menu bar. Select the size of the photo by adjusting the width in pixels. The height will automatically adjust proportionately. For purposes of the next steps in this lesson, I have chosen to increase the size of my photo to 2000 X 2507.

Save image.

From Layer, select New Layer. Notice that your original photo is left in place as a background in the Layers box on the right. Your new layer is labeled Layer 1.

Select the Lasso tool from the Toolbox.

Capture the image that you want to change (hence "Lasso"). In this case, I wanted to change the hair color of my subject, so I outlined all of the area around the hairline.

Click on Set foreground color and choose a color from the color wheel. As you can see, I chose a shade of purple. Click on OK.

Click on the paint bucket tool.

Move the paint bucket icon over

to the area you would like filled and click once. After a moment, the lassoed area will fill up with your chosen color.

Pixlr Handout : Jayne Salisbury August 2010

15

Play around with this tool by adding more layers and filling in smaller sections with different colors to get an interesting effect. You can also change the opacity levels for a more "blended look as seen in the photo on the right. Experiment with some of the other tools such as blur, smudge, and sharpen to blend colors to make your changes more realistic or subtle. 9) Adding Text to a photo

Select the Type tool

From there, type in text, change font and size as well as color. Click on OK when finished.

Pixlr Handout : Jayne Salisbury August 2010

16

Lesson 2: In this lesson, you will learn how to add backgrounds to your images from a preselected background image. 1) Go to Google Images and type in background images. Select an image for your

background. Right click on the image and choose Save Image As… 2) Open Pixlr Editor and choose Open Image from Computer. Change the size by

selecting a specific size in Image>Image Size. Drag and pull the lower right hand corner to make your image appear bigger on your screen as needed. Go to File>Open and select your picture. Change the size of the photo as needed. Notice that my background is slightly bigger than my photo.

3) Click on the background picture, go to Layer and select New Layer. 4) Click on the portrait photo (Araya). Choose the lasso tool from the Toolbox and

trace around the area you want pasted into your background. Select Edit >copy.

5) Click on the background photo and select Edit>Paste.

Pixlr Handout : Jayne Salisbury August 2010

17

6) To blend the background around the hairline, select the Smudge tool and drag your mouse around the border of the hairline. Crop and save your photo.

Lesson 3: In this lesson, you will learn how to make your own background by creating a gradient. 1) Open up Pixlr Editor in Google. Select Create New Image.

2) Click on the Gradient tool.

3) Click on Gradient under the menu bar. 4) Select one of the options in the choice box. You can add additional "markers" by clicking just under color bar. The markers will appear gray

in color. You can change the colors of the markers by clicking on Color and then using the color wheel to select your new color. You can also erase markers by clicking on the trash can.

Pixlr Handout : Jayne Salisbury August 2010

18

5) Once you have chosen your gradient color scheme, click on the gradient tool in your Toolbox. Click and drag the + sign. Release the button on the mouse.

The result will be similar to the image below. Play around with this tool until you get just the background you're looking for.

6) Repeat the process for adding additional photos to your background as you did above. You can even create a collage of photos with the same theme.

Hint: Use the Move tool to move your photos around the background area. Use the blur tool after inserting each of your photos.

Make Custom Frames for Your Webpage Pictures

Pixlr Handout : Jayne Salisbury August 2010

19

Step 1: Use Pixlr Tools and Filters to Add a Border to Your Picture

Open your desired image from your computer into Pixlr online image editor. Change the

image size if you need to, by using Image>Image size.

Adjust the display size of your image so that there is plenty of space around it by moving the Navigator slider to the left.

Now, you will be adding a border around your image.

Go to Image> Canvas size and add 10 pixels to each dimension. Click the center box to move the blue box to the center and click OK. You will now see a thin white border around your picture.

Use the Wand tool to select the white frame, and then the Flood Fill tool to fill it with black. Use Edit>Deselect All to remove the selection.

Step 2: Add a Second Border to Your Pixlr Image

Now, flood fill with a bright, dominant color from your picture by clicking the black square at the bottom of the tool bar, and using the dropper to pick up a color. Flood-fill the selection with this color.

With the colored border still selected, choose Filter -> Noise, and move the slider all the way to the right (400). Keep monochromatic checked.

Lesson 4:

You can make custom picture frames for your images with Pixlr online image editor. This can be a great way to display your photos online. To make a custom frame similar to this one, follow the steps below.

Now you will add another border to your picture. Repeat the Image>Canvas Size, adding 20 pixels to each dimension, and again, moving the blue box to the center square.

Use the wand tool to select the white border.

Pixlr Handout : Jayne Salisbury August 2010

20

Choose Filter -> Pixelate and change the cell size to 2. Deselect the border.

Step 3: Add a Final Border to your Pixlr Image

Advanced Pixlr Photo Editing:

Making color & tonal adjustments

The Pixlr Editor provides a range of tools for adjusting the colors and tonal range in your images. Use these additional tools to change the appearance of your photos in Pixlr.

Brightness & Contrast

The Brightness & Contrast adjusts the brightness and contrast levels for the active layer or selection. This adjustment is easy to use, but relatively unsophisticated. The tool is great for doing a “quick and dirty” adjustment in a few seconds, but if the image is important and you want it to look as good as possible, you will use one of the other tools.

Repeat the Image -> Canvas Size, this time adding 30 pixels to each dimension, and moving the blue square to the center. Use your Wand tool to select the white border. Again, pick a color from the picture. It works well if you pick the most dominant color.

Choose Filter -> Scanlines and leave on default (40). Click OK

Pixlr Handout : Jayne Salisbury August 2010

21

Hue & Saturation

The Hue-Saturation tool is used to adjust hue, saturation and lightness levels on a range of color weights for the selected area or active layer. The hue describes the pure color of a pixel and by changing the hue the colors “rotate”. The saturation is the amount of color that's present in a pixel, by adding and removing saturation you can choose to let the image become more grey or more colorful. The lightness is simply setting the amount of black and white in a color.

Curves

The curves tool is perhaps the most powerful and flexible color adjustment, yet it may also be one of the most intimidating. Since photographers effectively paint with light, curves is central to their practice because it affects light's two primary influences: tones and contrast. Tonal curves are also what give different film types their unique character, so understanding how they work allows one to mimic any film, without ever having to retake the photograph. Similar to levels, the curves tool can take input tones and selectively stretch or compress them. Unlike levels however, which only has black, white and midpoint control, a tonal curve is controlled using any number of anchor points. The result of a given curve can be visualized by following a test input tone up to the

Pixlr Handout : Jayne Salisbury August 2010

22

curve, then over to its resulting output tone. A diagonal line through the center will therefore leave tones unchanged.

Levels

The Levels adjustments can move and stretch the brightness levels of an image histogram. It has the power to adjust brightness, contrast, and tonal range by specifying the location of complete black, complete white, and midtones in a histogram. Since every photo's histogram is unique, there is no single way to adjust the levels for all your photos. A proper understanding of how to adjust the levels of an image histogram will help you better represent tones in the final image. The tool stretch brightness levels in a histogram using three main components: a black point, white point and midtone slider. The position of the black and white point sliders redefine the histogram's “Input Levels” so they are mapped to the “Output Levels” (default is black (0) or white (255), respectively), whereas the midtone slider redefines the location of middle gray (128).

Pixlr Handout : Jayne Salisbury August 2010

23

Auto levels adjustment

The auto levels adjustment re-maps the darkest and the lightest color in an image to black and white. In most images this gives it a bit better contrast.

Desaturate

Desaturation pushes the Red, Green, and Blue hues towards gray. The image is still in the RGB colorspace but the colors turn gray. While desaturation results in an image that appears to be grayscale, it's not.

Invert

The invert adjustment will invert the photo or image to look like a photo negative. This basically means the colors are opposite.

Pixlr Handout : Jayne Salisbury August 2010

24

Threshold

The Threshold adjustment converts a grayscale or color image to a high-contrast, black-and-white image. You can specify a certain level as a threshold. All pixels lighter than the threshold are converted to white; all pixels darker are converted to black. The Threshold command is useful for determining the lightest and darkest areas of an image.

Posterize

The Posterize command lets you specify the number of tonal levels (or brightness values) for each channel in an image and then maps pixels to the closest matching level. For example, choosing two tonal levels in an RGB image gives six colors, two for red, two for green, and two for blue.

Pixlr Handout : Jayne Salisbury August 2010

25

Using Filters

By using filters on your image, layer or selection you can archive some cool looking effects. The filters can do everything from changing colors to moving pixels and adding stuff to the image.

Blur filter

The blur filter simply blurs the image, layer or selection. The filter can be applied several times to get the appropriate result.

Sharpen filter

The sharpen filter simply sharpens the image, layer or selection. The filter can be applied several times to get the appropriate result.

Noise Filter

Applying the noise filter to an image will add statics, this can be used to give it a older worn down look.

The setting you can adjust are Amount 5-400 and if the noise should be Monochromatic

(Black&white) or in color.

Pixlr Handout : Jayne Salisbury August 2010

26

Diffuse Filter

Applying the diffuse filter to an image will move pixels around to give it a diffuse look.

The setting you can adjust is Amount 0-20 which is the maximum distance from it's origin the filter moves a pixel.

Scanlines Filter

Applying the scanlines filter to an image will simulate the effect that old TVs had. The setting you can adjust are Amount 0-100 and if the lines should be Horizontal or

vertical.

Pixlr Handout : Jayne Salisbury August 2010

27

Halftone Filter

The halftone filter calculates the darkness of an area and draws a point to the amount of dark colors. The settings you can adjust are the Size of the dots, the Multiplier and also if you want to invert the effect.

Pixelate Filter

Applying the pixelate filter to an image will create blocks of color of an area to remove image information. The setting you can adjust is Cell size, which sets the square size of

pixels to make into a single color.

Pixlr Handout : Jayne Salisbury August 2010

28

Pointinize Filter

The pointinize filter will create a cool looking effect by dividing the image into dots or circles.

The setting you can adjust is what type of Points you want to use.

Water swirl Filter

To give your image some swirly effects use this filter.

You can set how much swirl you like with the amount setting.

Pixlr Handout : Jayne Salisbury August 2010

29

Kaleidoscope Filter

Do you remember those toys you used when you were young that you looked into and with mirrors it gave you some amazing patterns. This filter simulates something like that.

The settings you can adjust are the Size and the Position of the effect.

Tilt-Shift Filter

Miniature faking is a post-processing technique, which involves selectively blurring a photo to simulate the narrow depth of field found in macro photography and some tilt-shift photography, making the image appear to be of a miniature model. (Wikipedia)

The settings you can adjust are the Size and Position of the focus area and also add

colors to heighten the effect.

Pixlr Handout : Jayne Salisbury August 2010

30

Vignette Filter

Applying the vignette filter to an image will add a sort of gradient on the corners of the image. This filter gives the image a deeper look and works well on most scenes.

The settings you can adjust are the Size of the gradient and the Color.

Pastels Filter

Applying the pastels filter to an image will give the image a effect of pastel painting. The settings you can adjust are the Size of the brush. Warning a larger brush will take longer time to apply.

Cross Process Filter

The cross process filter is one of my personal favorites and can make almost any image look more interesting.

Pixlr Handout : Jayne Salisbury August 2010

31

Old Photo Filter

Applying the old photo filter to an image will water out the colors and mimic a very old photo.

Art Poster Filter

The art poster filter is a pixlr original and mimics a painting that hangs on the wall of an bar in Stockholm … ;)

The settings you can adjust are the Amount, the Color and the possibility to Invert the

effect.

Pixlr Handout : Jayne Salisbury August 2010

32

Heat Map Filter

Applying the heat map filter to an image will mimic an heat seeking camera.

Color Lookup Filter

The color lookup filter takes matches the lightness in each pixel and match it with a value in a gradient. The result is endless and only you can decide the result.

Pixlr Handout : Jayne Salisbury August 2010

33

Tri-tone Filter

The tri tone filter uses three colors to match the shadows, mid-tones and highlights in a image.

Emboss Filter

Applying the emboss filter to an image will give it a type of chiseled effect.

Pixlr Handout : Jayne Salisbury August 2010

34

Engrave Filter

Applying the engrave filter to an image will add a chiseled effect.

Helpful YouTube Video Sites:

Pixlr Overview: http://www.youtube.com/watch?v=JpCk5lu2wIU

Cropping: http://www.youtube.com/watch?v=11PAOFcMwoY&feature=related Backgrounds: http://www.youtube.com/watch?v=11PAOFcMwoY&feature=related

Making a blend: http://www.youtube.com/watch?v=o6zd4mXbu9o&feature=related