Making a Banner for a Web Page

In today's lab, we are going to make a banner for our class web page.

You will need this file for the lab.
  1. Open up Adobe Photoshop by going to the Start menu --> programs --> Adobe Photoshop Elements


  2. Click on File-->new
    The following menu should show up, make sure the values on your screen are identical to the ones below:
    Your screen should look like this.
    We now have a a complete image to work with, much like an artist with a canvas.
  3. On your left you should see a toolbar like the one below.
    At the very bottom of this menu there are two boxes, in the above picture the top one is blue and the bottom is white. Double click on the top box, it should open up a menu like the one below:
    On the right you should see a vertical color palette, slide the bar until you get to purple, the color of our class web page. If you move your mouse over to the large rectangle on the left you can select many variatiosn of the color purple, from very light to very dark my moving the small circle around. Select the one you want to use as a background for you banner.
    After you select a color, click ok. The color you choose should now show up in the rectangle on the Photoshop toolbar.

  4. Now, that we have the right color selected, we are going to fill in our background. First, click on the paint can in the toolbar. It is on the left side, fourth icon from the top.
    paint can
    If you drag your mouse over to the window with the white and grey checkerboard design, you should see a little paint can. Click on the checkboard, and your banner should go from looking like this:
    Banner Before
    to looking like this:
    Banner After

  5. Open the file computer.psd, DO NOT close myBanner.psd.
    We need to modify this computer so that is fits the color scheme of our website. First we are going to change the color of the computer moniter.
    Click on the icon in the top right corner of the toolbar, that is the selection tool.
    Selection Tool
    Now select the entire screen on the computer moniter, like so:
    Monitor Selected
    Now select the paint can again, and click inside the dotted rectangle to change the moniter screen from green to purple.
    Monitor Colored In

  6. Now we to change the color of the mouspad. The mouspad is not a perfect rectangle like the computer moniter, so we are going to need the lasso tool.
    Lasso Tool
    Right click on the lasso icon, and select Magnetic Lasso.
    Using the lasso tool to outline the mousepad.
    Hint: Use the magnifying glass to zoom and make it easier to see the edges of the mousepad.
    Hint: While using the lasso left clicking will create fastening points.

    Once you have the whole mousepad selected, use the paint can tool to change the color of the mousepad.
    Your image should like something like this.
    Computer Finished

  7. Now that the computer is ready lets make our background more interesting by applying a filter.
    First click on the myBanner.psd image.
    Then go to Filter-->sketch-->notepad
    You should see the following menu:
    Note Paper
    The rectangle is a preview of the final image, you can adjust the settings until you find a background you like.
    Some examples:
    Note Paper Example 01
    Note Paper Example 02
    Note Paper Example 03
  8. Now we need to combine our background and our computer.
    Click on image, myBanner.psd
    In the top right corner of the Photoshop window, you should see a series of tabs. Click on the tab all the way to the right that says layers.
    Double Click on layer 1, rename the layer to background.
    Now go to layer --> new --> layer, a menu like this should pop up:
    Layer Menu
    Name the layer computer and click ok.
    Now click on the image Computer.psd
    We need to resize the image so it will fit on our banner.

    Go to image --> resize --> image size.
    Image  Menu
    Set the height to 90 pixels and click ok.
    Now, use the selction tool to select the entire computer image.
    Then go to Edit --> Copy
    Click on the image myBanner.psd again.
    Make sure the layer named computer is highlighted. Go the menu on top and select edit --> paste.
    Select the move tool (it is right behind the selection tool). Move Tool Now drag the computer either over to the left corner or over to the right corner.
    Computer Right
    Computer Left

  9. Now it is time to add text. Make a new layer, and call it text.
    Next select the text tool Text Tool
    A menu should appear near the top of your screen, there you can select your font type, size, and color.
    Type in the following message: "Welcome to URI's Computer Science 101 section 6 for Fall 2004."
    Hint: Hit enter to go to the next line while typing to avoid having the text cover up the computer.
    Banner Left
    Banner Right

  10. Finally, we are going to add a border to our banner.
    Add a new layer and call it border.
    Select the entire banner using the select tool.
    Click on edit --> stroke.
    You should see this menu
    Stroke Menu
    You can select a different color for your border by double clicking on the solid colored rectangle.
    In the box labeled width, you can specify the number of pixels to determine how wide your border. The more pixels you use, the wider it will be.
    Here is a border with pixel size 1.
    Banner Border 01
    Here is a border with pixel size 5
    Banner Border 05
    Here is a border with pixel size 10
    Banner Border 10

  11. Now it is time to save this file so it can be used on the CSC101 website.
    Go to File --> save for the web
    You should see this menu
    Save Menu
    Check to ensure you settings match the ones below
    Save Menu Detailed
    Now click ok and save the file as myBanner
    You now have a small banner for the CSC101 web page.