website promotion banner
eturnkeys
Your Ad Here
Photoshop  Home Photoshop Web Layout Business Header
rss

Business Header

Author: SlickTutorials More by this author


1. You will need a stock photo of some business people. Unfortunately, I could not find a decent free one, so I bought this image from iStockPhoto.com: Business people image. Here it is with a watermark. You can buy it for $1 if you want the watermark removed, or maybe you'll have better luck finding something free.

image 1

2. Save this image and open it in Photoshop. You will now cut out the background the quick and dirty way. Using the Magic Wand tool with the settings shown, hold Shift while clicking just above and around each person's head until everything around them is selected. Setting the Tolerance lower will make the selections smaller (only pixels that are very similar in color), and holding Shift will add to your existing selection instead of creating a new one each time you click.

image 2

image 3

Now hit the Backspace key to delete your selection, then Ctrl+D to remove the "marching ants." Use the Eraser tool to get rid of any remaining background fragments. Now double click the layer in the Layers Window and add a Inner Glow layer style with the opacity dropped to 50% and the color changed to white. This will get rid of jagged edges around the people.

image 4

image 5

3. Hit Ctrl+A to select all of your image, then go to 'Edit > Copy Merged' to copy what you have. Create a new document, 780x127 px, and paste your selection in to the new image (Ctrl+P). Move it over to the right as shown.

Click to enlarge
Click to enlarge

4. Double click the Background layer in the Layers Window, press ok when the message box pops up, then double click it again to bring up Layer Styles. Add a Gradient Overlay as shown:

image 7

For this result:

Click to enlarge
Click to enlarge

5. Create a new layer (which should automatically be above the background and below the people) and draw a Rectangle with the Rectangle tool. You will want to give it two Layer Styles. First, a Pattern overlay to make it look like a sheet of paper:

image 9

Then a Drop Shadow to give it some depth:

image 10

And it should look like this (bear in mind that I switched to the non-watermarked image in this step):

Click to enlarge
Click to enlarge

6. Create a new layer and drag it above all other layers (in Layers Window), then draw this shape with the Pen tool. Follow the red text if you need help:

Click to enlarge
Click to enlarge

Add a Gradient Overlay:

image 13

For this look:

Click to enlarge
Click to enlarge

7. Duplicate the Pen tool shape (select in Layers Window, then right click and select 'Duplicate Layer') and move it down about 10px. Drop the opacity of this layer to 10% (also in the Layers Window).

Click to enlarge
Click to enlarge

Duplicate the new Pen tool shape and move it down about 10px.

Click to enlarge
Click to enlarge

8. Now you will make an area for the logo. Draw a circle with the Ellipse Tool (hold Shift while drawing to make a circle). First give it a Drop Shadow Layer Style:

image 17

Then a Stroke Layer Style:

image 18

Yielding this result:

Click to enlarge
Click to enlarge

9. Now create some text. I used Futura Lt BT, 36pt. My fake company is called "Office Land." Let's give it a slight Drop Shadow Layer Style:

image 20

And the text should look like this:

Click to enlarge
Click to enlarge

Now select the Custom Shape tool, and choose the Paper Clip shape from the Objects group. See image for details:

image 22

Now click and drag (while holding Shift to keep the correct proportions) to draw a paper clip on the image:

Click to enlarge
Click to enlarge

10. Go to 'Edit > Transform > Rotate 90 degrees CW' and then move the paper clip up above the text, to make a simple logo:

Click to enlarge
Click to enlarge

11. Now you will add some buttons to complete the header. Take the Rounded Rectangle tool and draw the following shape:

Click to enlarge
Click to enlarge

12. Of course, we'll need some layer styles to complete the look. First, add a Gradient Overlay:

image 26

And our old buddy, Drop Shadow:

image 27

For a beautiful button like this one:

Click to enlarge
Click to enlarge

13. Add some text over the button. For this I used Futura Lt BT again, this time 18pt text.

Click to enlarge
Click to enlarge

14. Now simply duplicate your button and text layers (select both by Ctrl+Click ing each in the Layers Window, then right click and select 'Duplicate Layer' as you did earlier), make 6 copies and move them to the right, then change each text layer until you are happy. Use and abuse this header as you please.

Business Header Tutorial: Final Result (Click to enlarge)
Click to enlarge


About the Author:

SlickTutorials offers clear and detailed tutorials for Photoshop and Illustrator.



Rate this Material: Bad 1 2 3 4 5 Excellent
print this page tell a friend subscribe to newsletter subscribe to rss

Add comments to "Business Header"