View of Bell Tower coutyard from South quad.

Instructional Services

Creating a Custom Banner in Photoshop

banner example

The following tutorial covers how to create a custom banner similar to the one above for your Blackboard course using Adobe Photoshop.

Document Setup

  1. Create a new document by clicking File -> New... or ctrl+N ( cmd+N on a Mac )
  2. Name the document "banner"
  3. Set the width to 800 pixels and the height to 100 pixels 
    doument settings; width 800 pixels and height 100 pixels 
    1. If the measurement is not in pixels already, you can change it by clicking the dropdown arrow to the right

Creating the Background

  1. Using the Paint Bucket Tool,paint bucket tool icon fill the background with a color of your choice.  For this tutorial we are going to use a shade of red.
    1. To change the color, click the the color box at the bottom of the tool bar and select the desired color using the color-picker
  2. Select the Brush Toolbrush tool icon
  3. In the top toolbar, click the brush settings dropdownbrush tool dropdown
  4. Click the brush options button
    brush options button
  5. Click "Reset Brushes..." then click "Ok"
  6. Select the Scattered Maple Leaves brushmaple leaf brush
    1. By default the size of this brush is 74px. You can change this in the brush dropdown menu or by hitting the [ and ] keys on your keyboard
  7. Change the color to be slightly darker than your background color, a darker red in this case
  8. Paint some maple leaves on your banner by clicking and dragging across the canvas 

Adding a Glowing Streak Effect

Example of glowing streak effect

  1. Create a new layer by clicking Layer -> New -> New Layer (ctrl+Shift+N or cmd+Shift+N on Mac)
  2. Double click the name of the layer in the layers panel and rename it "glow"
    1. If you don't see a layers panel, click Window -> Layers (F7 on your keyboard)
  3. Select the Brush Tool and select a normal round brush
  4. From the brush settings dropdown, change the hardness to 100% and the size to 4px
  5. Change the color of the brush to white using the color box at the bottom of the tool boxcolor box
  6. Select the pen toolpen tool icon
  7. Click the paths icon on the top toolbarpaths icon
  8. Draw a curve using the pen tool by clicking and dragging at various points
    example of a curve drawn with the pen tool
  9. When you are done with your path, right click and select "Stroke path..."
  10. From the dropdown, select "Brush" and check "Simulate Pressure"
    1. If you are not satisfied with the results of your curve, click Edit -> Undo (ctrl+Z or cmd+Z on Mac) and delete the path. Then repeat the process until you get a result you are pleased with.  **Note: You can only undo one step at a time using undo but if you click Edit -> Step Backward (alt+ctrl+Z or cmd+opt+Z on Mac) you can go back further in your history of actions.
  11. Right click and select "Delete path"
  12. In the layers panel click your glow layer and then click the add layer style iconlayer style icon
  13. From the add layer style menu, click "Outer Glow"
  14. You should now have a glowing streak in the shape of the curve that you drew previously
  15. Repeat this step as many times as you see fit

Adding Course Title and Instructor Name

  1. Select the Type Tooltype tool icon
  2. Using a font of your choice, use the type tool to to type the course title. For this tutorial we are going to use a white font.
    1. **Note: In the top toolbar you will find various ways of changing your text such as fonts and color. You can also use the move tool to move your text around on the canvas after it is created.
  3. A new layer with your course title is automatically created
  4. Repeat steps 1 and 2 to type the instructor's name
    1. Tip: make the instructor name one or two sizes smaller than the course name to make the course name the dominant text

Making the Text Stand Out

 example of text standing out against background

In this example we used a white font and also had white glowing streaks. When the text is over these streaks, it can get somewhat lost by blending in to the background elements. Here we are going to fix this.

  1. Click the glow layer
  2. Select the Rectangle Toolrectangle tool icon
    1. This icon may not appear in your toolbox currently set to another similar tool.  These tools include: Rounded Rectangle Toolrounded rectangle tool icon, Ellipse Toolellipse tool icon, Polygon Toolpolygon tool icon, Line Toolline tool icon, and the Custom Shape Toolcustom shape tool icon. If you see any of these tools instead of the rectangle tool in the toolbox, click and hold the icon.  A sub-menu will open. From the sub menu, select the rectangle tool.
  3. Make sure that shape layers is selected on the top toolbarshape layers icon
  4. Draw a rectangle around the course name
    1. If the rectangle covers the course name after it is created, make sure that it is positioned underneath the course title layer in the layers panel
  5. In the layers panel, with the shape 1 layer selected, change the opacity to 75% using the Opacity slider in the layers panel.  This gives the rectangle some transparency so that the background elements are still visible but do not detract from the text
  6. Repeat this process for the instructor name

You now have a completed custom banner ready for use in your Blackboard course.

©