Home
Photoshop
Web Layout
Business Site
Level: Experienced Software:
Photoshop
This tutorial uses layer styles, basic shapes, clipping paths, and masks.
1. Here is the header you will be starting with:
2. Create a new Photoshop document, 780x663px. Double click the background layer in the layers window to unlock it and fill it with the Paint Bucket tool. Use the color #2894c2 (see image for help). Paste in the header from step 1 (Ctrl+click to copy it from step 1, then Ctrl+P to paste into your Photoshop document) and line it up at the top of the image.
3. Draw a rectangle that lines up with the right and left sides of the tabs and fill it with the following layer style:
It should look like this now:
Draw a wide and short white rectangle under the tabs on the header as shown.
4. Draw a rectangle on the left side of the image. I used a height of 104px. Make the width about 1/2 the width of the image (not too important because you'll be covering it up later). Give it the following layer styles:
For this result:
Duplicate the rectangle twice (hit Ctrl+J to duplicate a layer) and move each layer down until you have 3 rectangles as shown. Hold shift while moving your duplicated layers to keep them lined up perfectly straight:
5. Draw a rounded rectangle with the layer styles shown. I used a radius of 20px.
Yielding this:
6. Now add a rectangle to cover the right side of the image. Use this layer style:
For the result below:
Add in a headline using the text tool. My font is Catflisch Script Pro at 30pt, color is #07366a. The idea is to give a handwritten, personal feel to the text.
7. Add some more text under the headline. To make your text fit into the area where you want it, select the text tool and drag a rectangle as shown. Then type in your text. I used Catflisch Script Pro again for the sub headlines (14pt text this time), and Tahoma 12pt for the rest. If you need some Lorem Ipsum text or have no idea what Lorem Ipsum is, try this site.
8. Draw a square (start drawing a rectangle, then hold Shift to make it a square) to fit into the top blue rectangle. Give it a 1px white outside stroke (just like step 4). The fill color is not important, as you will be adding an image on top of it. Duplicate this layer twice and line each square layer up as shown:
Copy this image of a notepad, pen, and pencil and paste it into your document. Position it on top of the first square you just made.
Hit Ctrl+T to Free Transform the image, then hold Shift, and drag a corner handle inwards to shrink it down to roughly this size. Hit Enter to confirm.
9. Now Alt-click between the top square layer and the pad & paper layer where indicated to make a clipping mask. This will "clip" the pad & paper layer so it fits into the square.
It should look like this. Now add the text shown. The font used is Future - the headline, price, and 'more info' link are 18pt. The smaller text is 12pt. Use whatever looks good to you.
Repeat the last two steps for the other 2 blue rectangles. Here are two more images to use:
10. After placing, adjusting, and clipping these images, then adding more text, you should have a result like this:
11. Ctrl+click the rounded rectangle layer as indicated to define a selection. The "marching ants" will show up to display your selection.
Now copy and paste in this image of an operator. The background of the operator image is transparent, so you don't have to worry about removing it.
Position the operator as shown:
Now select the operator layer by clicking it in the layers window, then click the 'Add Vector Mask' button to cut off the parts of the operator image to make her fit into the rounded rectangle. In case you're wondering why I used a vector mask this time instead of a clipping path, it's because the layer below the operator has a layer style. This layer style would cover up the operator layer if we used a clipping path. If that makes no sense, try using a clipping path and see what happens.
12. Add in some text for the Customer Service section. Again, it's Catflisch Script Pro at 30pt. The color for 'Customer Support' is #07366a, and the color for the phone number is #397faa.
13. Draw a curved footer shape using the pen tool. Use a fill of #2894c2 to match the background. Follow the numbered steps below if you need help with the pen tool.
14. Duplicate this layer and move it down 10px (to do this easily, after duplicating the layer, hold shift and press the down arrow key once). Change the color of the new layer to #157198. Duplicate the new layer, move it down 10px, and give it the following color: #085475. Now enjoy a simple and attractive web template.
More Photoshop: Most Popular Materials | Fresh Materials
| TutorialKit New Photoshop Tutorials