---

What We’re Making

Before we get started, let’s take a look at the design we’ll be creating.

---

Step 1

First create a new document, 1300px width and 1400px height. Set background color to white. Name the layer to “BG”.

---

Step 2

In every webdesign project there is guides who helps you to keep everything lined up. First of all we want to see the rulers so go View > Rulers or press Command + R. If you Right+Click on the rulers, now you can select pixel as measurement. Create new guides View > New Guide, set the guides as shown below.

• Vertical 150px
• Vertical 160px
• Vertical 510px
• Vertical 560px
• Vertical 1140px
• Vertical 1150px
• Horizontal 50px
• Horizontal 200px
• Horizontal 300px
• Horizontal 420px
• Horizontal 600px
• Horizontal 1040px
• Horizontal 1200px

---

---

Step 3

Next create a new layer Layer > New > Layer. Select the Rectangular Marquee Tool (M) and make a selection from the top and down to the first horizontal guide line. Press Shift + Backstage, fill it with any color. Name the Layer “Menu BG”

---

Step 4

Apply these Blending Options to the layer. Right-Click > Blending Options. Gradients colors #161616 to #2e2e2e.

---

Step 5

We don´t really need to create the menu text in separate layers, we just want to show what type of font and size it is. Line the text layer next to the last guide line from left. Use the setup shown below. The green color, #a5e701.

---

Step 6

Create a new layer. Use the Line Tool (U) to create a 1px wide line in color #434343 and one in black. Place one between the first two words. Then Duplicate the layer Command + J, place one between every word.

---

Step 7

It is always easier to keep everything organized. So create a new group Layer > New > Group, name it “Menu”. Move all layers in to the group except the “BG” layer.

---

Step 8

Create a new group, name it “Header”. Then create a new layer in the group, name it “Header BG”. Select the Rectangular Marquee Tool (M) and mark from the horizontal guide line 50px to the 300px. Do as we did in steps 3-4 but this time use the colors #b5fe01 to #699001.

---

Step 9

Select the Rectangular Tool (U). Set white as foreground color. Create a shape as the image below.

---

Step 10

Copy in a image with the width of 980px and height 200px. Now the white shape will look like a nice border around the image.

---

Step 11

Next let´s create a header text. Line it up with the last left guide line. Use the size and font shown below. The font we used can be found here.

---

Step 12

Type some dummy text with the settings shown below.

---

Step 13

Remember to keep your self organized with named groups and layers.

---

Step 14

Make a heading with the settings shown below. Color #212121.

---

Step 15

Next we want to create a dashed line, with the settings shown below. Color #cccccc.

---

Step 16

Let´s make some more dummy text, used color #c5c5c5. Remember to line everything up.

---

Step 17

To make it look like it´s a video on the theme, I took a print screen over at screenr. Image width 648px, height 395px.

---

Step 18

Download the Function Icon Set. Bring the camera icon and place it like the image below.

---

Step 19

Now create a smaller heading next to the icon. Color #505050. Remember to line it up.

---

Step 20

Type in some more dummy text and line it up like the image below.

---

Step 21

Repeat these last steps 2 times more. Line it up like it is shown below. You might want to use different icons to make it look more worked on.

---

Step 22

Let´s work on the sidebar. Create another small heading place it like the image below.

---

Step 23

Select the Rectangular Tool (U), and make a shape as shown below. Add Stroke as Blending options, color #c5c5c5.

---

Step 24

Create another shape that will be a button. Then add some Gradient Overlay and a Stroke. Gradient colors #0d0d0d to #3a3a3a. Stroke color #212121.

---

Step 25

Now we want to add some text to the button. Select the Type Tool (T) and set the settings shown below. Used the color #ffffff/white.

---

Step 26

Type in some more dummy text, line it up with the shape. Color #c5c5c5.

---

Step 27

Create some more text next to the screenr image.

---

Step 28

Always create groups for your mind to work faster.

---

Step 29

Now let´s create the footer. Do as we did in step 3-4, but this time use the Gradient #161616 to #202020 to #131313. Set them as shown below.

---

Step 30

Create a heading in white.

---

Step 31

Type in some dummy text and use the color #c5c5c5.

---

Step 32

Repeat these last 2 steps to make some contact information.

---

Step 33

Last but not least we want to show who has made the design. Grey #6b6b6b, green #9ddb04.

---

Conclusion

We are done. That is the final result. This techniques are were simple but they can be used in every web-layout project you have!

---

Feedback Request

If the tutorial/article have helped, we would greatly appreciate a submission to your favorite social networking site. Diggs and retweets will help us out a lot. Subscribe to the Wordrom RSS Feed. Thanks again!