Web Banner with Pixlr.com

web banner sample

Special Note: I don't mean to box you in creatively, but you must demonstrate all of the skills. It does not matter about the general layout or theme.

Objective: Use http://pixlr.com to create a banner with at least the complexity of the one shown above. Feel free to use any theme you prefer. It must include the following:


  1. Size the main banner at around 1000 x 300px.
  2. Then create the gradient background. Once you choose the Gradient Tool, you'll have many options on the Control Panel.
  3. Save and open each of your three images. (It's easier to work the pics separately; then add them to banner)
  4. Choose the Cropping tool and set to Constrain, Output size.
    (any size you wish, keeping the 1000x300 restriction in mind)
  5. Crop picture according to your Constrained setting.
  6. To get a border:
    -Click Image, Canvas Size. 
    -Increase by about 6 pixels from the center.
    -Use the Paint tool. Zoom in and click exactly on the border to fill the border with color.
  7. Select All, copy picture to your banner
  8. Repeat for each picture
  9. Add your text boxes.
  10. Add Layer Styles to at least one text box in order to enhance it.
  11. Feel free to embellish more than the minimum.

  12. When completed, save your file again with the PXD format.
  13. Then save finally as a .jpg format.
  14. For November 2015 exercise, upload it to OAKS to be graded.