Download - pi Xlr Image Editor

7/23/2019 pi Xlr Image Editor

http://slidepdf.com/reader/full/pi-xlr-image-editor 1/6

PIXLR Image Editor

Editor by pixlr!com is a great way for Web Editors to resize and save photos orother graphic images for use on school web sites! This Image Editor is availableONLINE!

http: "" www!pixlr!com " editor "

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 yourweb site easily accessible on your computer! You will work with one image at atime!

$% To begin# click Open image from computer &outlined in red above%!

'% Navigate to your original image# highlight it and click the Select button toimport it to the PIXLR Editor!

(% The image &or partial image# will display in the window! See screenshotbelow! Please note that because of the large size of the image &photo wastaken by a digital camera and the original filesize is ())* X '+*, 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 surroundingthe portion of the image currently displayed on the screen! You can dragthe red square around the image to view different sections# if desired!%



While there are many other editing tools available to you through the onlinePIXLR Editor# we will focus first on how to resize the graphic and reduce the filesize for use on your web site!

*% To resize the whole image to a suitable web size &)*- X*,-%# please select Image Size from the Image Menu&outlined in red on screenshot%!

.% A dialog box will open with the current width and height

entered in pixels and the Constrain proportions boxchecked!

)% For most digital camera images# no matter what the initialwidth and height are# if you enter either Width of )*- &forlandscape view photos% or *,- &for portrait view photos% the Height sizewill automatically readjust to the corresponding number! See examples inscreen shots!

+% Click the OK button to complete the resizing process and your resizedimage should now appear on the screen!



PLEASE NOTE: Images that are )*- X *,- or *,- X )*- are the LARGEST sizesyou should use on your web site! Large images such as these will work well inPhoto Galleries using the Joomla Simple Image Gallery Plug/in!

If you need a smaller image for use as an individual photo embedded in a webpage# you can resize to ('- X '*- or $)- X $'- instead! Cropping &see

instructions a the end of this document% is also an option to create smallerphotos!

,% Once your image is resized and appears acceptable withoutany additional editing# select Save from the File Menu&outlined in red in the screenshot%!

0% The Save Image dialog box will open! Use the default JPEGformat!

$-% IMPORTANT: RENAME your image so that you do NOToverwrite your original! &New name outlined in red below!%

$$%

Reducing the quality of your image will make the filesize smaller! You willneed to experiment with this and it may vary depending on the amountof details in your image# but we suggest you lower the quality to at least.- as a start! &Reducing to (-/*- is even better if it works with yourimage!%



$'% Click the OK button to complete the Save Image process! You will beasked to navigate to the location where you want to download and savethe image from www!pixlr!com!

$(% Suggestion: Create a folder to save your Resized Images! Also# be surethat you use proper naming procedures for your filename! The name

should be short and descriptive and use only letters and numbers ! Dashesand underscore characters are OK but NO spaces or other specialcharacters should be used! The ! jpg extension MUST be a part of yourfilename!

$*% When you are ready# click the Save button to complete the process!

$.% 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 thevarious tools# adjustments# filters and other features more 1 including creatingyour own images! Although documenting all of PIXLR Editor2 s features isbeyond the scope of this document# please explore the capabilities if you areinterested!

If you click on a tool icon in the Tools palette in the left column # a pop/up willtell you the name of the tool! We will describe the use of the Crop tool from theTools palette below!

If you click the Adjustment Menu in the toolbar at the top of the screen# you willfind 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 greatshot# but it is under or over/exposed! PIXLR Editor allows you to makesome 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 topof the screen!



A window will open with slider bar controls for Brightness and Contrast! Youcan either drag the sliders and see the changes on your screen or you can typepositive or negative numbers into the boxes to make changes!

Sliding to the left &negative numbers% will darken your photo with theBrightness control or decrease contrast using the Contrast control! Moving the

slider to the right &positive numbers% will brighten your photo &Brightnesscontrol% or increase contrast &Contrast control%!

Click the OK button to apply your changes! Be sure to go through theappropriate 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 ofyour principal on stage at an assembly handing an award to a student! You wantonly the principal and student and none of the extraneous background! OR# youhave a digital image of student artwork# but your photo also included part of thematting and " or wall behind the work! PIXLR Editor allows you to crop andcapture only the portion of the image you want!

Select the Crop tool from the left column Tools palette &outlined in red%! Thenclick the crop tool onto the image where you want to start the crop and dragacross the image to the end of the crop! A grid will appear on the image! &Seefine gray lines in screenshot below!% You can adjust the crop area by draggingcorners! 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 UNDOcommand 1 in case you make a mistake! See Undo &Control/Z% onthe Edit Menu!



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 croppingthe borders of artwork that you want to use in a Simple Image Gallery# you willprobably want to resize the image again after you crop…so that the standard)*- X *,- or *,- X )*- sizes are maintained throughout your gallery! You mayneed to remove the 3Constrain Proportions4 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 aphotographic image that you want to use in a Simple Image Gallery# you maywant to do the crop before you resize your image! If the image is too large tocrop easily# resize it to an intermediate size so that you can crop approximately a)*- X *,- or *,- X )*- selection from the original image!

Photo image are definitely impacted by resizing without ConstrainingProportions! Since the goal is to maintain the standard )*- X *,- or *,- X )*- sizes throughout your gallery# cropping photo images for use in galleries is moredifficult!

END NOTES:

Additonal instructions for the PIXLR Editor are available in the Pixlr KnowledgeBase Wiki!

http: "" www!pixlr!com " wiki "