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-tutorialLet’s begin and open your Photoshop!

1-canvas - How to Create a SEO Web Layout in Photoshop

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

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

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

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

5-logo-stroke - How to Create a SEO 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 SEO 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 SEO Web Layout in Photoshop

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

8-logo-complete - How to Create a SEO Web Layout in Photoshop

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

9-logo-line-complete - How to Create a SEO 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 SEO 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 SEO 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 SEO Web Layout in Photoshop

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

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

For gradient settings copy the color’s above.

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

Here is the gradient overlay settings

15-navi-background-selected - How to Create a SEO 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 SEO 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 SEO Web Layout in Photoshop

Copy the gradient color settings.

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

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

19-navi-complete - How to Create a SEO Web Layout in Photoshop

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

20-slider - How to Create a SEO 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 SEO Web Layout in Photoshop

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

22-slider-inside - How to Create a SEO 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 SEO 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 SEO Web Layout in Photoshop

You should have the same as above.

25-slider-shadow - How to Create a SEO 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 SEO Web Layout in Photoshop

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

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

This is what we have for the slider shadow.

28-optin - How to Create a SEO 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 SEO 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 SEO 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 SEO 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 SEO Web Layout in Photoshop

You should have the same image as above.

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

We used League Gothic 26pt #FFFFFF all caps.

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

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

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

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

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

Here is the gradient overlay settings.

38-optin-text - How to Create a SEO 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 SEO Web Layout in Photoshop

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

40-optin-text-highlight-dropshadow - How to Create a SEO Web Layout in Photoshop

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

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

Copy the gradient color settings above.

42-optin-input - How to Create a SEO 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 SEO 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 SEO Web Layout in Photoshop

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

45-optin-button - How to Create a SEO 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 SEO 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 SEO Web Layout in Photoshop

For the Gradient Color Settings, copy the color above.

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

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

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

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

51-optin-button-text - How to Create a SEO 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 SEO 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 SEO 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 SEO 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 SEO Web Layout in Photoshop

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

56-get-graident - How to Create a SEO Web Layout in Photoshop

Copy the gradient color settings above.

58-get-text -- How to Create a SEO Web Layout in Photoshop

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

59-get-text-dropshadow - How to Create a SEO 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 SEO 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 SEO 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 SEO 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 SEO Web Layout in Photoshop

Here is the completed twitter bubble on our footer.

64-contact-info - How to Create a SEO 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-tutorial

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 :)

Tags: , , ,

Show some love and share!

I design / build Custom Wordpress Themes for different kinds of Clients, big or small, solo-prenuers or marketer. I've also worked with different design agencies as their 'web guy' for their Clients. I also enjoy writing tutorials and helping newbies so I can contribute to the community. Got a project in mind? Let's talk! | More about me?

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