How to Create a Business Web Layout in Photoshop

On 6 Aug, 2012 By With 5 Comments

Creating a web mockup for a client has been my busy task lately, I think it’s a good thing because I can practice more on web design. And since SEO is all over the buzz when you have a website, I decided to create a web layout about SEO website. The name just pop into my head, (I did a couple of searches and it seems no one has a website named like this) and this is what I came up with.

We will do everything from scratch except the icons, which are coming from another site. Some of the technique used was already covered on past tutorials, so you might wanna check that out.

You can download the PSD at the bottom of this tutorial!

Before we start we will download everything that we needed, so here it is;

Below is what are final web design would look like, let’s dig in!

sanjaykhemlani.com seo police tutorial1 How to Create a Business Web Layout in PhotoshopLet’s begin and open your Photoshop!

1 canvas How to Create a Business Web Layout in Photoshop

Create new (CTRL + N) and set the width to 980px by 1200px

2 page layout How to Create a Business Web Layout in Photoshop

Grab the pattern here, and duplicate (CTR + J ) it to cover the header and footer.

3 logo text How to Create a Business Web Layout in Photoshop

On header top left part, we used the robot icon and type in the text logo using Jolana font 43.11pt.

4 logo inner glow How to Create a Business Web Layout in Photoshop

For ‘SEO’ word only. In Blending Options, select outer glow and set the foreground to #FC0D0D.

5 logo stroke How to Create a Business Web Layout in Photoshop

In Stroke, use the color #FF0000 and set the size to 1.

6 logo outer glow 2 How to Create a Business Web Layout in Photoshop

For the ‘Police’ word, outer glow and set the foreground to #4083ff and spread to 3%, size to 8px.

7 logo stroke 2 How to Create a Business Web Layout in Photoshop

In Stroke, use #2b73f7 and set the size to 1px.

8 logo complete How to Create a Business Web Layout in Photoshop

For the tag line, I use futurist fixed width 11pt.

9 logo line complete How to Create a Business Web Layout in Photoshop

Grab Single Row Marquee Tool and create a line just like the image above. Fill it with #ffffff, and we are done!

10 navi How to Create a Business Web Layout in Photoshop

For our navigation, select Rounded Rectangle Tool (U) set the radius to 5px and foreground to #FFFFFF. Text used are Arial Bold 13pt, #333333.

11 navi background dropshadow How to Create a Business Web Layout in Photoshop

For the Rounded Rectangle Tool, Blending Options drop shadow foreground #BABABA, the rest are defaults.

12 navi background inner shadow How to Create a Business Web Layout in Photoshop

Inner shadow’s foreground color is #FFFFFF and distance, size 1px.

13 navi background gradient settings How to Create a Business Web Layout in Photoshop

For gradient settings copy the color’s above.

14 navi background gradient How to Create a Business Web Layout in Photoshop

Here is the gradient overlay settings

15 navi background selected How to Create a Business Web Layout in Photoshop

Create a new layer (CTRL + SHIFT + N) and Marquee Tool (M) select the home navigation and fill it with #333 (doesn’t matter any).

16 navi background selected deleted How to Create a Business Web Layout in Photoshop

Press CTRL + SHIFT + I and hit DEL to remove the excess layer.

17 navi background gradient settings How to Create a Business Web Layout in Photoshop

Copy the gradient color settings.

18 navi background selected gradient How to Create a Business Web Layout in Photoshop

Hit reverse on the gradient overlay settings and opacity 100%.

19 navi complete How to Create a Business Web Layout in Photoshop

We now have this, as our current navigation was selected.

20 slider How to Create a Business Web Layout in Photoshop

For the slideshow, create a new layer (CTRL + SHIFT + N) fill it with #ececec.

21 slider stroke How to Create a Business Web Layout in Photoshop

In Stroke, foreground is #838281 and size is 1px.

22 slider inside How to Create a Business Web Layout in Photoshop

Create a new layer (again) and set the foreground color to #FFFFFF.

Download this image from istockphoto, drag inside our canvas.

23 slider image clipping How to Create a Business Web Layout in Photoshop

Right click the image (from istockphoto) and select Create Clipping Mask, resize the image to fit the slider.

24 slider image How to Create a Business Web Layout in Photoshop

You should have the same as above.

25 slider shadow How to Create a Business Web Layout in Photoshop

We will create a shadow for our slider, grab Elliptical Marquee Tool (M) and draw a circle-like shape and create a new layer (CTRL + SHIFT + N).

26 slider blur How to Create a Business Web Layout in Photoshop

In Filter > Blur > Gaussian Blur and set to 4.8px.

27 slider image shadow How to Create a Business Web Layout in Photoshop

This is what we have for the slider shadow.

28 optin How to Create a Business Web Layout in Photoshop

Next is opt-in form beside the slider, create a new layer and grab Marquee Tool (M) fill it with #e4e3e3.

30 optin header How to Create a Business Web Layout in Photoshop

Create a new layer (CTRL + SHIFT + N) and Marquee Tool (M), fill it with #ba0b09.

31 optin header highlight line How to Create a Business Web Layout in Photoshop

Use Single Marquee Tool (M) and click on the corner line of the header, use brush to color the line and use this #f73836 as foreground color.

32 optin header arrow How to Create a Business Web Layout in Photoshop

Zooming in, we will create an arrow just below the header. Grab your Pen Tool (P) and draw a rectangle shape in the middle of the optin header, right click and select Make selection and fill with #ba0b09.

33 optin header arrow complete How to Create a Business Web Layout in Photoshop

You should have the same image as above.

34 optin header text How to Create a Business Web Layout in Photoshop

We used League Gothic 26pt #FFFFFF all caps.

35 optin header text dropshadow How to Create a Business Web Layout in Photoshop

For our text drop shadow, foreground color #000000 size and distance 1px.

36 optin header gradient How to Create a Business Web Layout in Photoshop

For our gradient color settings, copy the color guide above.

37 optin header gradient How to Create a Business Web Layout in Photoshop

Here is the gradient overlay settings.

38 optin text How to Create a Business Web Layout in Photoshop

We added another text inside the optin form, we used League Gothic 26pt #333.

39 optin text highlight How to Create a Business Web Layout in Photoshop

For our highlighted text, we just changed the color #ED7B1E.

40 optin text highlight dropshadow1 How to Create a Business Web Layout in Photoshop

Drop shadow foreground color is #000000, distance and size is 1px.

41 optin text gradient How to Create a Business Web Layout in Photoshop

Copy the gradient color settings above.

42 optin input How to Create a Business Web Layout in Photoshop

For the input field, grab Marquee Tool (M) and draw a rectangle shape fill it with #FFFFFF.

43 input dropshadow How to Create a Business Web Layout in Photoshop

Drop shadow for input field, set the foreground to #FFFFFF and distance, size to 1px.

44 input stroke How to Create a Business Web Layout in Photoshop

For Stroke, foreground is #A0A0A0 and set the size to 1px.

45 optin button How to Create a Business Web Layout in Photoshop

Include some text inside the input field, we used League Gothic 26pt ##C8C8C8.

Next is the submit button, grab Rounded Rectangle Tool (U) radius 5px and fill it with #FADE2E.

46 optin button inner shadow How to Create a Business Web Layout in Photoshop

In Blending Options Inner Glow, foreground is #FFFFBE and the rest are defaults.

48 optin button gradient How to Create a Business Web Layout in Photoshop

For the Gradient Color Settings, copy the color above.

49 optin button gradient How to Create a Business Web Layout in Photoshop

On Gradient Overlay, hit reverse and Opacity to 100%.

50 optin button stroke How to Create a Business Web Layout in Photoshop

For Stroke use the foreground color #ECAC4D and size to 1px.

51 optin button text How to Create a Business Web Layout in Photoshop

We added a text on the button, we used League Gothic 20pt  color is #A37024.

52 optin button text dropshadow How to Create a Business Web Layout in Photoshop

We will also add some drop shadow on the text, foreground is #FFFFFF and distance, size is 1px.

53 get button How to Create a Business Web Layout in Photoshop

For the get quote button under the slider, grab Ellipse Tool set the radius to 50px and fill it with #EDEDED.

54 get qoute button How to Create a Business Web Layout in Photoshop

Create a new one, this time smaller than the first one. Fill with any colors, we will use gradient so it doesn’t matter.

55 get innershadow How to Create a Business Web Layout in Photoshop

Inner Glow, foreground color is #FFFFBE and the rest are defaults.

56 get graident How to Create a Business Web Layout in Photoshop

Copy the gradient color settings above.

58 get text How to Create a Business Web Layout in Photoshop

We added a text, font is Georgia 26pt #FFFFFF.

59 get text dropshadow How to Create a Business Web Layout in Photoshop

We will add drop shadow for the text, foreground is #000000 distance and size is 1px.

60 bottom content How to Create a Business Web Layout in Photoshop

For the bottom content, we created a three columns and added the icons. Pretty much self explanatory here, so won’t bother much. Fonts for titles used is Arial Bold all caps, #333333 14pt. Text content fonts, Arial regular #333333 12pt.

61 twitter ballon How to Create a Business Web Layout in Photoshop

In our footer, we will create a twitter widget box. Duplicate (CTRL + J) the robot icon from the logo, Grab Rounded Rectangle Tool (U) and set the radius to 5px, fill it with #FFFFFF.

62 twitter ballon arrow How to Create a Business Web Layout in Photoshop

To create a arrow on the twitter bubble, select your Pen Tool (P) and draw a triangle shape-like near the robot icon.

63 twitter complete How to Create a Business Web Layout in Photoshop

Here is the completed twitter bubble on our footer.

64 contact info How to Create a Business Web Layout in Photoshop

For the right side footer contact info, we just added a couple of text. Arial was used 12pt for the title bold, 12pt regular for the numbers, for the social media we used the icons from purtypixels.

sanjaykhemlani.com seo police tutorial1 How to Create a Business Web Layout in Photoshop

We are done! Finally, that was a long tutorial 🙂 Since we cover every step of the details involved, that’s why it took longer than expected. Hope you’ve learned something cool about this web layout tutorial, and watch out for the PSD conversion for this mock up.

If there’s something that you think this mock up could be improved, please let me know in the comments below. I am eager for your suggestions 🙂

5 Responses to “How to Create a Business Web Layout in Photoshop”