Lesson 2B: Images

While learning to use advanced image editing software like Photoshop is worthy of a class on its own, you will have to learn some basic image editing to do any serious web design.  Mostly that editing will consist of cropping and re-sizing images to specific pixel sizes.


Download the image below. We will edit it using Adobe Photoshop.


Pixlr.com/editor is an amazing, web-based image editing application that’s free to use. Most of what you’ll ever need to do, as far as image editing is concerned, is doable with Pixlr. Watch the video below to see how to crop and resize an image:

Pixlr.com Assignment

The picture to the right is actually quite large. If you right click on it and select “Open image in new tab,” you’ll see just how large it is. I’ve used inline CSS styles to make it appear smaller though. For our purposes this makes sense, because I want you to be able to download the original file size, but if I was only using this image for design purposes, I’d want to re-size it in an image editing program to enhance the page’s overall load time.

  • Right click on the image to the right and “Save image as…”
  • Save the image to a folder on your computer following this path H: Drive > wb_design_261 > image-size
  • Using Pixlr re-size the image to the following sizes and save them as separate files:
    • 800 x 537
    • 600 x 403
    • 300 x 202
  • Using Pixlr, crop just the shoes into a square and then re-size the image to 400 X 400. Then save the image.
  • Submit the image to Google Classroom.