PhotoShop Introductory Lesson

Objective: This introductory lessons covers some basic techniques that you can use to create a webpage banner. It has detailed steps and is suitable for an introductory tutorial.


  1. Start a new Photoshop fie and set size to 800px by 200px.
  2. Save as webbanner.psd.
  3. From the Layers Palette on the right of the screen, doubleclick "Background" to make it a layer.
    It is better to convert Backgrounds to Layers because it is more flexible.
  4. On the Tools Palette on the left, doubleclick the foreground swatch to change the color as you wish.
  5. Choose the Gradient tool. Then drag upwards on your image to create a gradient background.
    The resulting gradient will be the combined colors of your foreground and background swatch colors.
  6. You are now ready to make the semi circle that extends off the page.
    • Set your foreground swatch to a darker color.
    • Choose the Ellipse tool. You may have to hold down the Rectangle to get to it.
    • Set your options to Shape Layers. (This is located at the top in the Control Palette)
    • Starting off of the page, drag your mouse to create an oval.
      There is no way to go wrong. It's abstract art.

Temporarily, you will be working on your two rectangular pictures. Later, you'll copy them back to your webbanner.psd

  1. Search the web for an image that you wish to use. Choose Copy.
  2. Then go to Photoshop, click FILE/New. OK.
    The file size is identical to the image size.
  3. You will now crop the image to a uniform size.
    Click the Cropping tool. Set size options to 175px by 125px
  4. Drag the mouse around your picture to select the desired portion.
  5. Place a white border around your picture. EDIT/Stroke. (Size at 4 and choose Inside)
  6. Now you will place your image in your banner file.
    Although drag-n-drop is possible, I'll show you how to combine the images using the main menu.
    • Choose SELECT/ALL
    • Choose EDIT/Copy
    • Return to webbanner.psd.
    • Choose EDIT/Paste
  7. Repeat steps for second image.
  8. Use the mouse to line up two images.
  9. Type and format text boxes as desired.
  10. If time permits,
    • Click on the the bottom layer (the one with the gradient)
    • Choose LAYER/Layer Style/Pattern Overlay.
    • Pick a pattern and lower the opacity to about 20.