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_72px.jpg
        • 02_rollerskate_500x500_96px.jpg

Part Two

  • Open Photoshop CC
  • Create a new document
    • ctrl+n
  • In the dialog box, type the following:
    • Width 800 pixels
    • Height 600 pixels
    • Resolution 72 pixels/inch
  • 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.
    • Click the Move Tool, and check the Show Trasform Controls box.
    • 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, or make them very small so they don't interfere with your best images.
  • 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<Before Tag
    • Choose image_project_2 from the drop down menu that appears to the right of Before Tag
    • ID: image_project_3
    • Click New CSS Rule
    • Under Rule Definition, choose This document only from the drop-down menu
    • Click Okay
    • In the CSS Rule Definition dialog box, click Background
      • Select a Background color
    • Click Box
    • In the Box dialog box, enter the following:
      • Width: 840
      • Height: 700
      • Margin (remove check mark on Same for All)
        • Left<set drop-down menu to Auto
        • Right<set drop-down menu to Auto
      • Click OK
      • Click OK In the Insert Div dialog box
    • When you return to the Gallery page, you will see your new Div,along with the words "Content for id "image_project_3" Goes Here". This is placeholder text. Leave the text in place for the moment.
  • 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.