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 Pixlr and Photoshop. 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. I want you to demonstrate your ability to read and follow the directions below in tutorial fashion.

F.A.Q.

Key Concepts:

  • For the purposes of this course, you are required 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.
  • Pixlr allows you to remove the background of an image quickly and easily.
  • Pixlr allows you to use .webp images.
  • Photoshop 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.
  • Right click your new image_project_3 folder, and create a new folder called raw_images.
  • Right click your new image_project_3 folder again, and create a new folder called edited_images.
  • Save at least 20 images to the raw_images folder.
  • At least one of those images needs to be 800x600 or larger so that it can serve as a background image for the entire collage.

IMPORTANT: YOU MUST RENAME EVERY IMAGE FILE YOU DOWNLOAD FROM THE INTERNET. IT WILL COST YOU MAJOR POINTS IF YOU IGNORE THIS REQUIREMENT.

  • 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

  • Before you start your collage, remove the background from at least 5 of your images using Pixlr's Remove Background app. Save the images in your edited_images folder.
  • Open Photoshop
  • 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 Transform 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 5.
  • 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>Export>Export As
  • In the Format drop down menu, choose .JPG (see screen shot below)
  • Save your work as collage.jpg

Part Three

  • Your goal in Part Three is to create a new DIV for your Collage project. You will create a table to hold your collage using the same method you used for Image Project Two. Finally, you will add text to your new table.

    NOTE: The Div for Image Project Three must be placed above the DIV for Image Project Two. That way, your most recent work will be seen first.

    • Open Dreamweaver
    • Open your personal website
    • Open gallery.html
    • Create a new DIV for your Image Project Three:
      • Open gallery.html
      • Select your .css file
      • Select and copy your #image_project_one DIV  
      • Click at the end of your #main DIV, and hit Enter twice
      • Ctrl+V to Paste 
      • Rename the DIV to #image_project_three
      • Change the height to 700px  
        • (Later, you can change the height and background-color to suit your project.)
      • Ctrl+S to Save
    • Insert the new DIV into your Gallery page:
      • Select Source Code 
      • Click at the end of your #main DIV, and hit Enter  twice
      • Enter the following:
        • <div id="image_project_three">

        • </div>

      • Ctrl+S to Save
    • Click inside the image_project_three div.
    • Shift+Enter to add one line
    • Insert a new table into the image_project_three div (Ctrl+alt+t).
    • Configure the table as follows:
      • 2 rows
      • 1 columns
      • Table Width: 800 pixel
      • Border Thickness: 0
      • Cell Padding: 0
      • Cell Spacing: 0
    • Center the table
      • Right click anywhere inside your table, and chose Table>Select Table
      • Properties>Align>Center
    • 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
    • Save and Preview your work in Google Chrome (F12)
    • Adjust and edit as needed
    • Save your work

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

 

 

 

 

 

 

 

 

 

 

 

 

F.A.Q.

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.