Banner Workshop

Today we will take a look at the banner above (our course blog banner) and learn how it was created. You will have to create your own banner with your own visual identity for your blog, but if you go through the steps of creating this sample banner, you should be able to create pretty much any banner.


Step-by-step instructions for creating the banner


Find out what width and height your banner should be. To do so, log into your Wordpress site, go to "Appearance," then click on "Themes" and then "Header." It will say something like "images of exactly 940 × 178 pixels will be used as-is." Write down those dimensions. 


1. Open Photoshop on your computer


2. Go to "File" => "New" and create a new document with the dimensions you just wrote down. In my case that is: 940 Width; 178 Height. Be sure to set the pull-down menu to pixels (not inches). Use 72 dpi; name it "Banner"


3. Open the first image you would like to place into your banner. You can download all images for this workshop here.




4. Click the move tool (which looks like this ) & move the picture to where you want it.


5. To rotate the picture, use the free transform command described in step 3 and point your cursor slightly outside the picture until you see a curved arrow outside your picture which looks like this. Now you can move your cursor up and down and rotate your picture.


6. Repeat these steps until you have placed all the visuals onto your banner just the way you want them. 


7. To add text, click the Horizontal type tool (text.jpg& type in the title of your blog



8. To add a background color or gradient to your banner, go to the layers window on the right hand side of the window (if the layers aren't showing, go to "Window" => "Layers")


9. If you want a solid colored background, use the rectangle tool rectangle.jpg, select a color and draw a rectangle over your banner that is the exact size of your banner. 


10. Your banner is now complete. Save a copy as a .psd file (this keeps all the layers)


11. Then save a copy as a .jpg file (this merges the layers)


General Photoshop Resources:

Photoshop basics in 25 minutes (contains a handy description of the various tools in the toolbar)

Tutorial on using the new content aware fill 

The best of Photoshop tutorials

Mastering Photoshop

Photoshop tutorials

Advanced photoshop tutorials


Back to the Course Schedule