In this web design tutorial, you’ll see a method for creating a professional web design mockup that’s perfect for a modern business or e-commerce website. This tutorial assumes that you know the basics of Photoshop.
This is a preview of how your template will look like when we finish it, so take a look at what we will be creating! Remember that you can click on the preview below to see the full-scale version.
Setting up the Photoshop document
1 We will start by creating a new document (Ctrl + N) with a width of 1024px and a height of 1200px.
Creating the Header
2 Once the new Photoshop document is set up, create a new layer (Shift + Ctrl + N) above the standard white Background layer and name it header.
3 After that, grab the Rectangular Marquee Tool (M) and draw a 75px high rectangle selection at the very top of the Photoshop canvas, as shown in the figure below:
4 Now right-click the rectangle, and select Fill, which will open up the Fill dialog box. Under the Use option, choose Color; this will open the Choose a color dialog; use a dark gray color (#191919) and press OK to set the fill.
5 Now go to Filter > Texture > Texturizer to give the header background a bit of texture. Input the settings below:
6 Now, the texture filter applied will seem a little bit harsh and pronounced, but keep reading because we’ll make more adjustments. The next step is to go to Image > Brightness/Contrast and apply the settings below:
7 It already looks better, right? Now we will adjust it with some layer styles. So right-click on the header layer in the Layers Panel and select Blending options. Select Gradient Overlay and than apply the following settings:
Here is what the header should look like now:
Creating the logo
8 Lets create a basic logo/site name; don’t panic, it’s not going to be complicated and if you want to use your own logo, go ahead. Create a new layer over the two existing ones (Background and header) and name it logo.
9 Then grab the Horizontal Type Tool (T) from the Tools Panel and create a text box by holding down Shift and dragging your mouse to the size you want your site name to be. Finally, apply these Character settings (if you don’t have the Character Panel open, go to Window > Character to switch it on):
10 I chose "INDEX" as the name, but you can choose any other name and may change the size and the alignment. I applied white color (#FFFFFF) to the text but to add a bit of style, changed the last letter, "X", to a color of #00C0FF.
Making the Navigation bar
11 Make a new layer (Shift + Ctrl + N) called Nav Line.
12 Press M to choose the Rectangular Marquee Tool and make a 10px high rectangle right below the header background. Fill it with #0C0C0C. This will be a nice divider between the header background and Navigation bar.
13 Now, create a new layer and call it Nav.
14 Now select again the Rectangular Marquee Tool (M) and create a 40px high rectangle right below the Nav Line. Fill it with #181818.
15 Right-click on the Nav layer and choose Blending Options. Add an Inner Shadow layer style to the layer with the following settings:
16 Select the Horizontal Type Tool (T) and write your navigation link items. You can use the following Character settings:
17 Now we create a new layer below the text layer we just created named Atab, which stands for Active tab. This will denote the link that the user is currently on – in this example, the Home link.
18 Select the Rounded Rectangle Tool (U). Set the Radius option in the Options bar to 6px and the Color option to a dark gray color (#0F0F0F). Then, draw the rounded rectangle shape right beneath the Home link.
19 Next, right-click the rounded rectangle shape layer and select Blending Options. Apply an Inner Shadow and a Stroke layer style with the following settings:
We finished the navigation! Now our template is starting to take shape.
Designing the Product Preview section
20 Now, we will set up a nice and modern looking preview of the product/service your company has to offer. We start by creating a new layer and then calling it Product Preview.
21 Grab the Rectangular Marquee Tool (M) and make a 325px high rectangle. Fill it with a light gray color, #E8E8E8.
22 Go ahead and create a new layer above Product Review and name it PO Line.
23 Get the Single Row Marquee Tool and make a line between the Nav layer and the Product Preview layer. Right-click on the marquee selection and fill with white, #FFFFFF.
Making the Content Area
24 Create a new layer and name it Content. Again, grab the Rectangular Marquee Tool (M) and select the area of the canvas below the header, navigation, and Product Review area; we’ll give this area a subtle gray color gradient in the next steps.
25 Fill the selection with whatever color you want; it’s not important what color you choose because we will style it with a gradient overlay.
26 Right-click the Content layer in the Layers Panel, select Blending Mode and apply a Gradient Overlay layer style with the following settings:
27 Make a new layer between the PO Line layer and the Content Layer and name it Content Shadow. This will be a nice divider between the Product Preview and Content sections.
28 Grab the Rectangular Marquee Tool (M), make a rectangle that’s roughly 20px in height, and fill it with #000000.
29 Now go to Filter > Blur > Gaussian Blur and set the Radius to 10px. Also, lower the opacity of the layer to 20%.
Creating the Footer section
30 Lets work on the footer section of the template. It will be something clean and simple, nothing too fancy. Start by making a new layer and naming it Footer.
31 Grab the Rectangular Marquee Tool (M) and make a rectangle selection at the bottom of the canvas at 150px height. Fill it with a color of #181818.
32 Create a new layer and name it Footer Line. It will be a separator line between content and footer. Use the Rectangular Marquee Tool (M) to create a 20px rectangle and fill it with #0F0F0F.
Adding in the content on the Product Preview section
33 Create a new layer called Preview Image. This will be an image used at the Product Review section. You can either choose a preview image of your own, or download the one I used in the template. If you choose to download the image, place it on the Preview Image layer we just created, then resize it until you like how it looks and align it properly.
34 Apply a Drop Shadow layer style onto Preview Image layer and use the following settings:
35 Next, we add the text content on the right of the layout. Start by creating a new layer. Grab the Horizontal Type Tool (T) and write a nice title for you product. The font settings used in this tutorial, which you can set in the Options bar is Myriad Pro, Semibold weight, 24pt size, and a dark gray color of #0F0F0F.
36 Then create another layer and write a short (a few phrases) description of the product using the settings of Myriad Pro, Regular weight, 16pt, and a color of #5A5A5A.
Creating buttons in the Product Preview section
37 Now, we have to create two nice buttons for our preview product area, a "Read More" button and an "Order Now" button. Let’s start with the first one! Create a new layer and name it Read More Btn. Grab the Rounded Rectangle Tool (U) and draw a good fitting sized rectangle (adjust the Radius option of the corners to something you like).
38 Now right-click the layer and select Blending Options applying these settings:
39 Use the Horizontal Type Tool (T) to type in the "READ MORE" Text using a white color.
40 Duplicate the Read More Btn layer and rename it Order Now Btn. Move it to the right of the Read More button using the Move Tool (V) and your right arrow key. Change the Gradient Overlay layer style of the button to make it blue; use #0084AF for the left color stop and a slightly lighter shade of blue (#00C0FF) for the right color stop.
Here is how the website should look now!
Adding the content in the Content area
41 Well friends, now we will work on the Content area. This area will contain some more information about the company, testimonials, and payment methods. This is not that hard but we have a little work to do! We’ll be using some free icons called Function Icon Set. Download that set, as we’ll be using some icons included with it in the following steps.
42 Grab the Horizontal Type Tool (T) and type "Our company" at the top left of the content area; the font size 18pt, font weight of Bold, and color of #8F8F8F.
43 OK. Now create a text layer with the Horizontal Type Tool (T) and write some text describing the company – place it right below the Our company heading. The font size used here is 15pt, font weight Regular, and color of #1B1B1B.
44 Let’s create the Read More link for it below. Type out Read More using the Horizontal Type Tool (T) with a font size of 15pt, italics, and the same color as the description. Open the Function Icon Set, look for the coffee cup icon (it’s called coffee_mug.png). Resize it down using the Free Transform Tool (Ctrl + T), making sure to hold down the Shift key while resizing to maintain the proportions. When you get the size you like, place it on the left of the Read More link.
45 Create the "Testimonials" section in a similar fashion as the "Our company" section. The icon used in the web template from the Function Icon Set is called coffee_48.png. This is what it looks like now:
Working on the Content area right column
46 Now, the right part of the Content area needs to be done. At the right of the first column that we just created, write "Why Us?" as the heading. The font size is 18pt, bolded and using a color of #8F8F8F. Position it so that it is vertically aligned with the first heading of the left column ("Our company").
47 Use the Rounded Rectangle Tool to create a rectangle below the "Why Us?" heading.
48 Add a Color Overlay layer style using the color #E1E1E1 and a Stroke layer style that’s 1px and set to the color of #DBDBDB.
49 Follow the previous steps for the "Payment Methods" section below the "Why Us?" section. Make the gray Rounded Rectangle significantly shorter, about 40px high and as wide as the "Why Us?" box.
50 Finally, go into the Function Icon Set and look for the credit card symbols, and then place them into our design: they’re called creditcard_paypal.png, creditcard_mastercard.png, and creditcard_visa.png.
We’ve finished the Content area now! This is how it looks thus far:
Putting in the content for the Footer
51 Finally, the footer! Yes, our template is almost finished, but the cherry on the top will be the footer! I think it’s a great idea to place a newsletter subscription form and a Twitter update status in site footers. Let’s start with the newsletter first. Grab the Horizontal Type Tool (T) and write in the heading, "Get our Newsletter" in the footer area. The setting is: 20pt size, bolded and a color of #0F0F0F.
52Place newspaper_48.png icon from the Function Icon set it on the right of the "Get our Newsletter" heading.
53 Write some explanatory text for the newsletter feature below the "Get our Newsletter" Heading; I used the same font we’ve been using, 16pt in size, in italics, and with a color of #B8B7B7 (Which is a light gray).
54 Create a new layer and name it Input Box. Get the Rounded Rectangle Tool (U) and create a medium in input box for the users to type in their email address to get the newsletter.
55 Create another rounded rectangle on the right of the input box. Use the Horizontal Type Tool (T) to write the word "Go!’ inside it (the font settings used in this tutorial is 18pt, bolded, and with a color of white – #FFFFFF).
Below is what the newsletter subscription section should look like:
56 Now, let’s work on the Twitter status. We’ll need the icon called twitter_48.png from the Function Icon Set. Place it into the Photoshop document and move it somewhere on the right side of the footer.
57 We need to turn flip it horizontally so that the icon is facing the other way, so press Ctrl + T, then right-click on the icon in the canvas, and then choose Flip Horizontal.
58 Create a new layer under the icon layer. Grab the Ellipse Tool and draw a circle that will act as a shadow of the Twitter bird, using a dark gray color of #0F0F0F.
59 Create a new layer and with the Rounded Rectangle Tool, draw a nice solid square that will act as a speech bubble; use the dark gray color we just used (#0F0F0F).
60 Now, with the Pen Tool (P), draw a triangle that points from the box to the icon using the same color as above (#0F0F0F).
61 And finally, type in some sample text to simulate a Twitter status update.
We just completed the tutorial on how to build a simple business template in Photoshop.
I hope you found my tutorial useful; practice and I have no doubt that you’ll do better than this!
Special thanks to We Function for the beautiful free icons used in the tutorial!
Share your work with us on Flickr!
If you’ve finished the tutorial, why don’t you share with us your work in the Flickr Six Revisions group? See you there!
If you would like to get the PSD file associated with this tutorial, you can download it below as a ZIP archive.
- simple-business-template.zip (ZIP, 0.26 MB)