Mr. O'Connell's Technology Home Page

home web design business and personal finance biography links2

Image Project Three: Collage

Image Project Three: Vintage Collage (artist: Priscila Pedroza, Class of 2018)

vintage collage


The goal of this project is to create a collage using Photoshop Elements. Upon completion, the collage will be added to your Gallery page.

You are expected to carefully read and follow the directions below. For this part of the project, I want you to work independently. Do not ask for my help unless there is a technical problem with your computer. I want you to demonstrate your ability to read and follow the directions below in tutorial fashion.


Key Concepts:

  • For the purposes of this course, you have to rename images before you save them in your image folder.
  • Most images that you find on the Internet do not follow the four acceptable web file name conventions, and therefore will not always work in every situation.
  • Photoshop Elements allows multiple layers for each image.
  • Images can be moved and resized within each layer.
  • You can adjust the opacity of each layer.

Part One

  • Decide on a theme for your collage project.
  • Your theme must be high school appropriate as Mr. O'Connell would define it. Please use your common sense. Ask Mr. O'Connell or his substitute teacher if you're not sure.
  • Choose something different from your first two image projects. Do not reuse your images from either one.
  • There are no size or shape constraints to the images you will use for this project.
  • Each image must be directly related to your theme.
  • Use Google's Image Search to find your images
  • Open your personal website in Dreamweaver
  • Right click your images folder, and create a new folder called image_project_3.
  • Save at least 20 images to this folder.


  • Rename the images using short, logical names that relate to your theme.
    • As always, make sure you name your files appropriately- lowercase letters, numbers, underscores, and periods (or "dots") only.
    • Include the size of the image in the name.
    • Start the file name with numbers.
      • Examples:
        • 01_rollerskate_600x600.jpg
        • 02_rollerskate_500x500.jpg

Part Two

  • Open Photoshop Elements
  • Create a new document
    • ctrl+n
  • In the dialog box, type the following:dialog_box
  • Save this document in your image_project_3 folder.
    • File>save as>collage.psd
  • Open your 20 images
  • Drag one of your images into the collage
  • Resize the image using your move tool move_toolwhich can be found in the upper left hand corner. Hold the alt key while you drag from the lower right hand corner so the picture maintains it's proportion.
  • You can also rotate the image with your move tool.
  • Follow this procedure for the rest of the images. You don't need to rotate all of the images- but demonstrate that you know how to rotate on at least 7.
  • You don't have to use all of the images. Use most of the images, and make it look great. If you decide that leaving out a couple of the images works better from an aesthetic point of view, leave them out.
  • Experiment with dragging while you hold down the ctrl key. This will change the skew of the image. You don't need to skew all of the images- but demonstrate that you know how to skew on at least 5.
  • Change the opacity of at least half of your layers. This can add more of a sense of depth to your image.
  • On the layers palate, scroll to the bottom, and choose the bottom layer
  • Choose a color using the Set Foreground Color tool set_forground_color (the larger black box in this example) which can be found in the lower left hand corner.
  • Click your Paint Bucket tool, and click on the background.
  • Save the file (ctrl+s) before you continue
  • File>save as
  • In the Format drop down menu, choose .JPEG (see screen shot below)
  • Save your work as collage.jpg

format dialog box

Part Three

  • From your personal website, open gallery.html
  • Click below your navigation bar and title.
    • The goal is to have the Div for Image Project Three to be ABOVE the div for Image Project Two.
  • Create a new Div Tag for your project:
    • Insert<Div
    • Insert<at insertion point
    • ID: image_project_three
    • Click New CSS Rule
    • Under Rule Definition, choose This document only from the drop-down menu at the bottom of the dialog box.
    • Click Okay
    • In the CSS Rule Definition dialog box, click Background
    • Choose a contrasting background color for your Div.
    • In the CSS Rule Definition dialog box, click Box
    • In the Box dialog box, enter the following:
      • Width: 840
      • Height: 730 (you may need to adjust this later)
      • Margin (remove check mark on Same for All)
        • Left<set drop-down menu to Auto
        • Right<set drop-down menu to Auto
      • Click Okay
  • Insert a new table into the image_project_three div (ctrl+alt+t).
  • Configure the table as follows:
    • 2 rows
    • 1 columns
    • Table Width: 600 pixel
    • Border Thickness: 0
    • Cell Padding: 0
    • Cell Spacing: 0
  • In the top row, type Image Project Three: (Theme) Collage, substituting the theme you have chosen for (Theme). For example, Arctic Tundra Collage
  • Drag your collage.jpg into the second row
  • Format the text in the top row
  • Spell check the page
  • Preview your work in Google Chrome, Firefox, and Safari.
  • Adjust and edit as needed
  • Save your work


Image Project Three: Collage (artist: Tessa Dern)
Tessa Dern Collage














Q: I got a low grade on this project. How can I raise my grade?

A: You can resubmit your work for a higher grade as long as you do it in a timely fashion. You can ask me what "timely fashion" means in terms of how many days. You are welcome to come after school to work on your project. Start by making sure that your file names are correct, and that everything is in the right folder as outlined in the directions above. Then, finish your project, re-read the instructions to make sure you've corrected all mistakes, and then come and talk to me.