• If you are citizen of an European Union member nation, you may not use this service unless you are at least 16 years old.

  • You already know Dokkio is an AI-powered assistant to organize & manage your digital files & messages. Very soon, Dokkio will support Outlook as well as One Drive. Check it out today!


Banner Workshop

Page history last edited by Corinne Weisgerber 9 years, 5 months ago

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.

  • If it is a lot bigger than the banner you are placing it into, go to "Image" => "image size" and change the size (be sure to check "constrain proportions" so you won't distort the picture while resizing it). If it is close to the size you will need, leave it as is.


  • If it doesn't have a transparent background, you will have to remove the background first. To delete the background on an image you can either use the magic wand tool (magicwand.jpg or the magic eraser tool . I prefer the magic wand. Select the background you want to delete with the magic wand and click delete (make sure you are on the right layer and that the layer isn't locked. If it is, follow the unlocking instructions described in step 8). If you find that the magic wand is selecting colors you don't want to remove, lower the "tolerance" number in the top toolbar. 



  • Go to Select => all
  • Go to Edit => cut 
  • Go to  your banner and click "Edit" => "paste"
  •  If after pasting it into your banner, you realize you need to resize it, click on the picture and simultaneously click the "command" (next to the space bar) and the "T" keys. Alternatively you can click on the picture, go to "edit" and click "free transform." Now resize it by dragging one of the corners up or down. Be sure to hold down the "shift" key as you resize your picture in order to avoid distorting it! Double click the picture to accept the changes.

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

  • Set the font, font size and font color using the text toolbar on the top of your window:


  • I like to pick font colors that are already present in one of the visual elements I am using in the banner. To pick the exact color of one of your visual elements, use the Eyedropper tool (). Hold it over the area that contains the color you want to "steal" and click on that area. Doing so will reset the color to that exact color.
  • Under Window => Character you can change additional things such as the kerning (spacing between characters) and leading (distance between lines of text).
  • Click the Move tool  & move the text to where you want it 


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")

  • In the layers window select the background layer. If the background shows a lock symbol, double-click the lock and click ok. This will unlock the layer and allow you to work with it.
  • Click the "gradient tool" as shown in the picture below and select the colors you want for your gradient:


  • Once you've selected the colors, click "ok." This will make the window disappear.
  • Now position your cursor in the middle of the banner and pull it down as though you were drawing a vertical line the height of your banner. This will create the gradient. If you're not happy with the outcome, go to "edit" and click "undo gradient" or "step backward." You can also keep applying the gradient until you reach the desired effect.

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


Comments (0)

You don't have permission to comment on this page.