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.

What’s a Pixel?

Before we start editing images, we need a better understanding of pixels. Complete the worksheet below (available via Google Classroom) to get a better understanding of this fundamental component of designing for the web.


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:

legs-434918Pixlr.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.
  • Now in CodeAnywhere, create a new project folder called “image-size”
  • In that folder create an “images” folder
  • Upload your four re-sized and cropped images into your “images” folder and reproduce the following website: http://goo.gl/Cw68Ti