Tech | Web Team

How to Edit Images in Pixlr

The images you select for your Web page are important. They occupy large sections with vibrant imagery and complement your content, so they must first be properly edited.

Getting started

Before uploading images into the Sitecore Media Library, be sure your images are of high quality and appropriately sized for your Web page. Sitecore does not contain image editing options, so you must use an external image editor. This tutorial will cover how to modify images in Pixlr, a browser-based image editing tool.

  1.  Navigate to http://www.pixlr.com/editor in your Web browser.
  2. The Pixlr interface will open a menu of startup options.
    • Create a new image
    • Choose an image from your computer
    • Open an image from another website
    • Open an image stored in an online library (like Facebook, Picasa or Flickr) Initial options in Pixlr
  3. For this tutorial, select an image from your computer. Multiple images may be selected by holding down the "Ctrl" key and clicking each image you would like to edit.
  4. Open the selected images so that they appear in Pixlr’s editor window. Edit the images in small batches so as not to overload (and possibly crash) your browser.

    Selecting images in Pixlr
  5. There are three types of images you can use on the McCombs website, each with specific dimensions. Do not deviate from these dimensions or your page submission will be rejected by the Web team.
    Rotating header: The image above the primary content. Dimensions are 980 x 300 pixels
    Flavor picker header: Dimensions are 600 x 300 pixels
    General use image: Used alongside content for added visual appeal. This image can be any size up to 330 x 330 pixels. (Note: there are occasional allowances for larger images if the image doesn’t affect usability.)
  6. To resize your images, make sure the Pixlr crop tool is selected. A crop toolbar should appear underneath your regular window options.
    • Find the constraint option. Click on the dropdown menu to the right.

    Select the Output Size option underneath the Constraint feature.

    • You will see three different options.
              o No restriction allows you to manually crop your image to any size you like.
              o Aspect ratio will maintain a specific proportion while cropping your image.
              o Output size will crop to a specific set of dimensions.
              o For this tutorial, we will use Output size.
  7. Try cropping an image for a rotating header.
    • Type “980” into the width field and “300” in the height field.
    • Next, click and drag over your image for your crop selection. When you let go of the cursor, a 3x3 grid should appear over your image as a preview. You can reposition or resize this grid to your liking. Note: the 3x3 grid is very helpful when employing the visual image guideline called the “Rule of Thirds.” We endorse this standard for all visual images posted to the site.

    Use the 3x3 grid to get the best aesthetic results.

    • When you are ready to crop your image, you can double-click on the image or press Enter. To undo an action, press "Ctrl + Z" or go to the Edit option in the top toolbar and click Undo. We have now successfully made a rotating header out of our image!

    A successfully cropped image.

Once your images are cropped, you may want to make other edits using other Pixlr options, but now you know the basics. Now it’s time to upload them to the Sitecore Media Library!

Page last updated: 4/8/2014