PIXLR Image Editor. 1) To begin, click Open image from computer (outlined in red above).

Transcription

1 PIXLR Image Editor Editor by pixlr.com is a great way for Web Editors to resize and save photos or other graphic images for use on school web sites. This Image Editor is available ONLINE. When you open Editor, you will see the screen below: Be sure that you have the image or images you need to Resize and Save for your web site easily accessible on your computer. You will work with one image at a time. 1) To begin, click Open image from computer (outlined in red above). 2) Navigate to your original image, highlight it and click the Select button to import it to the PIXLR Editor. 3) The image (or partial image, will display in the window. See screenshot below. Please note that because of the large size of the image (photo was taken by a digital camera and the original filesize is 3664 X 2748 pixels), only a portion of it will display in the window. If you look in the right hand column Navigator window, you will see a red square surrounding the portion of the image currently displayed on the screen. You can drag the red square around the image to view different sections, if desired.)

2 While there are many other editing tools available to you through the online PIXLR Editor, we will focus first on how to resize the graphic and reduce the file size for use on your web site. 4) To resize the whole image to a suitable web size (640 X 480), please select Image Size from the Image Menu (outlined in red on screenshot). 5) A dialog box will open with the current width and height entered in pixels and the Constrain proportions box checked. 6) For most digital camera images, no matter what the initial width and height are, if you enter either Width of 640 (for landscape view photos) or 480 (for portrait view photos) the Height size will automatically readjust to the corresponding number. See examples in screen shots. 7) Click the OK button to complete the resizing process and your resized image should now appear on the screen.

3 PLEASE NOTE: Images that are 640 X 480 or 480 X 640 are the LARGEST sizes you should use on your web site. Large images such as these will work well in Photo Galleries using the Joomla Simple Image Gallery Plug-in. If you need a smaller image for use as an individual photo embedded in a web page, you can resize to 320 X 240 or 160 X 120 instead. Cropping (see instructions a the end of this document) is also an option to create smaller photos. 8) Once your image is resized and appears acceptable without any additional editing, select Save from the File Menu (outlined in red in the screenshot). 9) The Save Image dialog box will open. Use the default JPEG format. 10) IMPORTANT: RENAME your image so that you do NOT overwrite your original. (New name outlined in red below.) 11) Reducing the quality of your image will make the filesize smaller. You will need to experiment with this and it may vary depending on the amount of details in your image, but we suggest you lower the quality to at least 50 as a start. (Reducing to is even better if it works with your image.)

4 12) Click the OK button to complete the Save Image process. You will be asked to navigate to the location where you want to download and save the image from 13) Suggestion: Create a folder to save your Resized Images. Also, be sure that you use proper naming procedures for your filename. The name should be short and descriptive and use only letters and numbers. Dashes and underscore characters are OK but NO spaces or other special characters should be used. The.jpg extension MUST be a part of your filename. 14) When you are ready, click the Save button to complete the process. 15) Repeat these steps for other images you need to resize for your web site. OTHER USEFUL PIXLR EDITOR EDITING FEATURES PIXLR Editor is an amazingly powerful web tool. You may want to explore the various tools, adjustments, filters and other features more including creating your own images! Although documenting all of PIXLR Editor s features is beyond the scope of this document, please explore the capabilities if you are interested. If you click on a tool icon in the Tools palette in the left column, a pop-up will tell you the name of the tool. We will describe the use of the Crop tool from the Tools palette below. If you click the Adjustment Menu in the toolbar at the top of the screen, you will find many potential adjustments. We will describe the use of Brightness & Contrast from the Adjustments Menu below. Adjusting Brightness and Contrast an Image: Sometimes you will have an image from a digital camera that is a great shot, but it is under or over-exposed. PIXLR Editor allows you to make some adjustments that may improve your image. With your resized image on the screen, select Brightness & Contrast (outlined in red) from the Adjustment Menu in the toolbar at the top of the screen.

5 A window will open with slider bar controls for Brightness and Contrast. You can either drag the sliders and see the changes on your screen or you can type positive or negative numbers into the boxes to make changes. Sliding to the left (negative numbers) will darken your photo with the Brightness control or decrease contrast using the Contrast control. Moving the slider to the right (positive numbers) will brighten your photo (Brightness control) or increase contrast (Contrast control). Click the OK button to apply your changes. Be sure to go through the appropriate steps (described above) to SAVE your image. Cropping an Image: Sometimes you will have an image from a digital camera that is a great shot, but you only want to use a part of the shot. For example, you may have a photo of your principal on stage at an assembly handing an award to a student. You want only the principal and student and none of the extraneous background. OR, you have a digital image of student artwork, but your photo also included part of the matting and/or wall behind the work. PIXLR Editor allows you to crop and capture only the portion of the image you want. Select the Crop tool from the left column Tools palette (outlined in red). Then click the crop tool onto the image where you want to start the crop and drag across the image to the end of the crop. A grid will appear on the image. (See fine gray lines in screenshot below.) You can adjust the crop area by dragging corners. When you are satisfied that you have the correct crop area selected, double click on the image and the crop will occur. NOTE: This powerful online image editor even includes an UNDO command in case you make a mistake! See Undo (Control-Z) on the Edit Menu.

6 Once your crop is completed, be sure to save your image as described above. Additional note for Simple Image Gallery Artwork Images: If you are cropping the borders of artwork that you want to use in a Simple Image Gallery, you will probably want to resize the image again after you crop so that the standard 640 X 480 or 480 X 640 sizes are maintained throughout your gallery. You may need to remove the Constrain Proportions checkmark to resize. For artwork, slight resizing will probably not change the display enough to matter. Additional note for Simple Image Gallery Photo Images: If you are cropping a photographic image that you want to use in a Simple Image Gallery, you may want to do the crop before you resize your image. If the image is too large to crop easily, resize it to an intermediate size so that you can crop approximately a 640 X 480 or 480 X 640 selection from the original image. Photo image are definitely impacted by resizing without Constraining Proportions. Since the goal is to maintain the standard 640 X 480 or 480 X 640 sizes throughout your gallery, cropping photo images for use in galleries is more difficult. END NOTES: Additonal instructions for the PIXLR Editor are available in the Pixlr Knowledge Base Wiki.