Photoshop Lesson 4

Creating a banner for a web page.


Create the logo. In a real life situation, if you are designing a logo, it is better to put it in a separate file so that you can have it to use in many documents.

  1. Start a new file. Size about 500 x 400 px; transparent background.
  2. Create a design with at least the complexity of the Moore Munches logo.
    • Type the name in two text boxes, for flexibilty.
    • From the Brush palette, choose a brush and play with it until you get the desired result.
    • Use the Text Warp tool to curve the text, as in "Munchies".
  3. Merge the three layers.
    • From the Layers palette, highlight each layer with the CTRL key
    • Choose LAYER/Merge Layers.
  4. From the Layer/Layer Style menu, apply a Drop Shadow
  5. Save and minimize your file for later.
  6. When you are ready to include the logo in the banner, you can simply drag it with the move tool. Or you can copy and paste. For now, give it a name and save ti.

Finish the job — banner file.

  1. Start another new file, about 800 x 300 px; white background.
    (NOTE: The large size is for you to have room to work. Howevr, you will crop it later.
    )
  2. Paste the logo from the other file. You can simply use the move tool and drag it onto your new file.
  3. Add a new layer, then create a rectangle at the bottom of it.
  4. Apply gradient color to it the rectangle.
  5. Locate a picture to put on the right side. Copy & paste the picture.
  6. Size (Ctrl-T) the picture as needed.
  7. Use the Lasso Tool to draw an irregular shape around the picture.
  8. Choose SELECT/Feather; about 15
  9. Choose SELECT/Inverse.
  10. Press DELETE.
  11. Type the menu, such as: Home | Our Story | etc. ....
  12. Continue to refine your file. Move items around if needed. Then crop the file down so that your height is between 150-200.
  13. If applicable, create an HTML Image Map for the menu items (Home| Our Story| etc...).