Customize your Portfolio Banner

You might notice that last semester's students have their faces in their banners - you should too!

Be patient, and read carefully as you go through this exercise - it's like a recipe - follow it step by step for the best results!

  • NOTES:
  • TGJ2O, TGJ3M and TGJ4M students - the banner template is under the appropriate heading (ie "TGJ3M") of the Portfolio Gallery
  • TIJ1O students - The banner is at the VERY BOTTOM of the TIJ1O Portfolio Gallery
Here's the step by step:
1. Open up a copy of the "banner template" PSD file
  • You'll find it attached to our class PORTFOLIO GALLERY Look (or SEARCH) for the appropriate file, and click the blue DOWNLOAD button in the BOTTOM RIGHT side of the screen Download Button.png - save the file in a logical place on your P drive.
  • OPEN the file in Photoshop Elements - choose EDIT if asked
  • LAYERS PALLETTE: This is located in the bottom RIGHT of your photoshop screen, and has a tab with the work LAYERS on it.
  • Look for the LAYERS PALLETE and in it - Turn OFF the little eyeball beside it to hide it (see the illustration on the right). You can turn off or delete other layers that you know you won't need in your banner.
Mindwheel-Layers.jpg
Hide layers - you can click the little eyeball in a layer to "hide" it temporarily

2. Change the TEXT
  • Find the TEXT TOOL and add or edit a text layer so that it reads "Yourname's Porfolio"
    (No nicknames - this portfolio is worth marks, and should be clear and professional)
  • Use the MOVE TOOL to re-alignment the text elements of your banner. Try to align their left edges.
    Notice that TEXT LAYERS have little "T" icons beside them - these types of layers are editable, like a word processing document
Bannerfix-Text.jpg
Add your name to the banner first - we'll put your face there in the next step

3. Add your STUDENT PIC onto the banner
  • Look in our HANDOUTS folder for YOUR student photo - drag it into photoshop
    (NOTE - You have permission to Use ONLY YOUR PHOTO - do not mess with other's faces!)
  • You should now have TWO image windows open - make sure you are on a top layer in your banner layer palette before proceeding
  • Use the RECTANGULAR SELECT tool to draw a selection around just your face
  • Use the MOVE TOOL and drag your face onto the banner; The new layer is created on top of what ever layer you had selected. You can rename the layer in the layer palette next. Double click the old name and rename it "MyFace"
    • Is your face not showing up? Check the LAYERS PALETTE and drag the face layer to the top of the stack!
    • Is your face TOO BIG? Select the face layer and use CTRL-T to start a transform; then look at the top of the screen to change the 100% size to something smaller! Keep adjusting the size (and MOVE it) until it fits the banner!
    • You can also shrink the size of your face and move it to the left corner using that same MOVE tool. Try dragging the corner handles to resize
    • Don't make your face TOO small - It's your EYES that are most important
WebBanner02.png
You can drag layers from one file to the other through that little "browse" strip at the bottom

4. Erase Face Edges
  • Be sure you are on your MYFACE layer
  • Find the ERASER tool
  • Look for the "brush options" at the top of your screen and change it to a SOFT edged brush 100 points in size
  • Set the OPACITY to 40%
  • Gently erase parts of the photo that are obscuring the title. Multiple passes will make it more transparent
Bannerfix-Eraser.jpg
A big soft eraser helps blend one layer into another

5. SAVE YOUR FILE
  1. SAVE YOUR WORK
    1. Use FILE | SAVE to save a PSD of your work to your P:Drive so you can continue developing it later. A PSD STORES your work in layers, but can NOT be used on a webpage.
  2. SAVE A JPG
    1. Use FILE | SAVE FOR WEB and be sure the FORMAT is JPG. Click OK and name the file "YOURLASTNAME Banner" The resulting file CAN be loaded into your webpage!

6. INSTALL THE NEW BANNER
Log into your Portfolio, and follow these instructions:
  • Click the "GEAR" settings button at the top right
    • Choose "MANAGE SITE"
    • Select "THEMES, COLORS and FONTS" at the bottom left
    • Locate and click on "SITE HEADER" (see the image on the right)
      • Set the "Background - Image" to CUSTOM (As shown on the right) - Locate and click on your JPG File and upload your new banner jpg
      • Click the red SAVE button, and return to your portfolio using the link near the top left (under the works "Manage Site")
googlesites_Header_Backgrou.png
You can also watch a video of the installation
You should now see your banner at the top of the portfolio!
If it DIDN'T work - go back to PHOTOSHOP and try using the steps starting at SAVE FOR WEB again

What Next?
  • Try returning to the SITE HEADER upload, and check out the OPTIONS
  • Try modifying your banner further - look at some of the BETTER banners from previous semsters, and see if you can "borrow ideas" make yours look more stylish! Keep copies of your old work, so that you can post the evolution of your banner in it's own page on your portfolio!

[Invalid Include: Page not found: Rubric-Googlesite Banner]