Pixlr, A Quick Guide for Online Photo Editing

What is this Pixlr?

Pixlr (https://www.pixlr.com/editor/) is an online photo editing application that offers many of the professional features found in Adobe’s PhotoShop for free in your internet browser. This guide is not meant to detail all the features of Pixlr, but act as a quick reference for performing basic functions dealing with adding photos to your CMS website without relying on a designer.

Open Your Image

To open your image for editing,click on the second option Open Image from Computer. Use the navigation window to browse to the image that you want to use on your website, and double click to open. For this tutorial I will be editing an image of our Addy Award Wall (modest, I know).

Crop Your Image

Cropping an image involves cutting an unwanted area away. To crop an image in Pixlr, click on the Crop Icon located in the upper left-hand corner of the toolbar. Click and drag to select an active area to “keep”. Pixlr draws a 3×3 grid with their crop tool in order to easily crop by the rules of thirds – a mathematical equation used to create dynamic compositions – basically subject matter should line up with the intersection points. Hit the Enter key to apply the crop, or the Escape key to cancel the crop.

Adjusting Levels

Levels adjust the tonal range of an image by manipulating the levels of dark, light and midtones. If you have a washed out or underexposed image, adjusting the levels can help equalize your image. Leave the color mode as RGB. The graph shows the different levels of Red, Green, and Blue in the image along with Black represented by their color.  Confused by the colors?  Then please read my Quick Color Guide Article. While this is a quick guide, the below settings should add contrast to most images. IMPORTANT – always use your eye and best judgment when adjusting levels – it’s  more of an art than a science.

1. Select Adjustment from the context menu at the top of your screen and the Levels from the drop down menu
2. Position the Black Slider (left) until it is underneath the highest arc for Black
3. Position the White Slider (right) until it is underneath an area of no color.
4. Posting the Grey Slider (center) until it is underneath an area where all colors are at the same point – or a plateau.
5. Click OK to apply the changes
6. Review the changes to your image by clicking between the New layer and Levels tabs in your History palette located at the bottom right of your work area – it’s Fun.

Change Your Image Size

Taken straight from a digital camera, our image is much too large for use on the internet. The image size, located at the bottom left of the work area shows 4,000 pixels wide by 2,667 pixels tall. Just for reference, most websites are a total of 960px wide, and most photos on websites are only 400px wide, or 1/10 the size. Thus we need to resize our image down to a much more usable size for our website.

1. Choose Image from the top context menu and Image Size from the sub-menu.
2. Make sure Constrain Proportions is checked and designate either a width or height for your image. Just as a reference, most images should be between 400 – 600px for websites.
3. Click OK to save changes

Save Your Image

Now that we have our image with proper levels and at an appropriate size, we need to save. To save your image simply choose File from the top context menu and Save from the dop-down selection.

1. Name – Give your image a descriptive name so that you can identify it later. I chose “addy-wall” for mine. A note on successful file names – they should be under 11 characters and contain no spaces, use a dash (-) instead with no special characters (.,&*%#@!{}[]:;’).
2. Format – Choose your image type. Since this is a photograph, JPG (Joint Photographers Expert Group) is the best choice. A PNG (Portable Network Graphic) would be used for drawn graphics or images that need transparency.
3. Quality – Choosing a quality is a balancing act between making sure your image looks good (no pixilation) and having the lowest file size. With photographs there is usually no perceivable difference between a JPG at 100% quality and one at 60% quality. Thus I would recommend saving your file somewhere between 60 – 70%. Ultimately you want to keep the file size below 70kb to make sure it loads fast on your website.
4. Click OK to save your web ready file!