Today we will take a look at the banner above (our course blog banner) and learn how it was created.

Step-by-step instructions for creating the banner

1. 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. 
2. Open Photoshop on your computer
3. 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"
4. Open the first image you would like to place into your banner. 
• 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.
• Go to Select => all
• Go to Edit => cut 
5. Go to Banner and Edit => paste
6. 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.
7. Click Move tool (which looks like this ) & move the picture to where you want it.
8. To rotate the picture, use the free transform command described in step 6 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.
   
9. Repeat these steps until you have placed all the visual onto your banner just the way you want them. 
10.  To add text, click the Horizontal type tool () & type in the title of your blog
• Set 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 
11. 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.
•  
12.  
13.  
• Click on the Magic Wand tool
• Select the A in INTERACTIVE, then hit the delete key
• Repeat with the 5 remaining letters
• Open chip.jpg
• Select => all
• Edit => cut
• Go to Banner and Edit => paste
• In the layers window move the new layer with the chip picture down one layer
• Click Move tool & move to where you want it
• Go to Image =>Adjustments => Hue/saturation: move up the lightness a bit
• Go to Rectangle tool & draw a rectangle in the bottom left hand corner
• In the layers window click the colored square and with the eyedropper tool pick the light blue color from the chip background. Click OK to make the rectangle that color
• Click Horizontal type tool & type PRODUCTION & DESIGN
• Set font to SynchroLet 36pt
• Under Window => Character: Set vertical scale to 100% and horizontal scale to 133%
• Click Move tool & move to where you want it
• Save a copy as a .psd file (keeps all the layers)
• Then save a copy as a .jpg file

General Photoshop Resources:

Photoshop basics in 25 minutes

Tutorial on using the new content aware fill 

The best of Photoshop tutorials

Mastering Photoshop

Photoshop tutorials

Advanced photoshop tutorials