Monday, February 23, 2015

HippoBytes HB241: Intro to Image Editing

You can do this in under a minute with Pixlr.
Image editing programs are an under-appreciated tool. When I wanted to join the Hilton health club in Kuwait under the married couples' rate, I was able to use Adobe Photoshop to create a marriage certificate by altering Barack Obama's (available online) to have my name and my fake wife's instead, saving me hundreds of dollars. There are numerous classroom applications as well, from creating posters to propaganda to collages. In this session we learned the basic principles underlying all image-editing programs, and applied those programs using the free web app Pixlr Editor.

Basic Principles

First, understand that images are composed of pixels. More pixels = a bigger image or a higher level of detail (resolution). Your laptop screen (if you're on an older non-Retina Mac) is probably 1280 pixels wide by 720 tall. Therefore, an image that is 640 pixels high will take up half the height of your screen. A 1080p TV is 1920 pixels wide and 1080 tall. Also keep in mind that since images have two dimensions, a doubling of one dimension will quadruple the image size:

A 100x100 image is only 1/4 as
big as a 200x200 image.
This is why HD movies and TV episodes are so big relative to their SD counterparts.

When you work in an image editing program you'll want to know three things to be maximally productive. First, the toolbar is on the left side and has all the tools you need, like the rectangular marquee, lasso tool, eraser, paint brush, and paint bucket. Different programs will have different tools, but most share a common set. Second, the layers palette lets you create different, invisible layers that stack on top of each other. You can put different changes or elements onto different layers, making it easy to keep track of and manipulate your changes. Finally, masks allow you to hide or show parts of your image rather than erasing them - this makes it easy to make detailed changes and roll back mistakes.

Why Pixlr?

Because it's free, and it runs in any web browser (so you can use it with the school's Chromebooks). Adobe Photoshop is much more powerful but also infinitely more expensive; Pixelmator for Mac ($50) is a good option if you want more features than Pixlr.

What Can I Do?

Enough to write several volumes on, but in this session we tried three things:
  1. Using the lasso tool and masks to cut out subjects from a background.
  2. Using layers and masks to create black and white photos with color highlights (see the main picture)
  3. Using layers and masks to create text that "shows through" an image (see sample image below)
Image from courtesy of Photoshop Essentials

Useful Links

HB241 Session Notes; includes step-by-step instructions about how to achieve the effects we did


  1. Great post. I learned some useful information from your post. Thank you so much for sharing.

    Image editing services

  2. Thanks for useful links, especially for Pixelmator. It is a good PS alternative for image editing. here you can read about some Photoshop plugins which I often use for photo editing.

  3. Nice introduction about image editing. This is very useful for beginners.

    Promotional Bulk SMS Service in Ashok Nagar