Making a Banner for a Web Page

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

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.
   
   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:
   
   to looking like this:
   
   


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.
   
   Now select the entire screen on the computer moniter, like so:
   
   Now select the paint can again, and click inside the dotted rectangle to change the moniter screen from green to purple.
   


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.
   
   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.
   


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:
   
   The rectangle is a preview of the final image, you can adjust the settings until you find a background you like.
   Some examples:
   
   
   
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:
   
   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.
   
   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). Now drag the computer either over to the left corner or over to the right corner.
   
   


9. Now it is time to add text. Make a new layer, and call it text.
   Next select the 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.
   
   


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
    
    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.
    
    Here is a border with pixel size 5
    
    Here is a border with pixel size 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
    
    Check to ensure you settings match the ones below
    
    Now click ok and save the file as myBanner
    You now have a small banner for the CSC101 web page.