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;
- Jolana font from dafont.com
- Futurist fixed width from dafont.com
- League Gothic from fontsquirrel
- Icons from iconarchive.com
- Social Media icon set from purtypixels.com
Below is what are final web design would look like, let’s dig in!
Let’s begin and open your Photoshop!
![1-canvas 1 canvas How to Create a Business Web Layout in Photoshop](http://sanjaykhemlani.com/wp-content/uploads/2012/08/1-canvas.gif)
Create new (CTRL + N) and set the width to 980px by 1200px
![2-page-layout 2 page layout How to Create a Business Web Layout in Photoshop](http://sanjaykhemlani.com/wp-content/uploads/2012/08/2-page-layout.gif)
Grab the pattern here, and duplicate (CTR + J ) it to cover the header and footer.
![3-logo-text 3 logo text How to Create a Business Web Layout in Photoshop](http://sanjaykhemlani.com/wp-content/uploads/2012/08/3-logo-text.gif)
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 4 logo inner glow How to Create a Business Web Layout in Photoshop](http://sanjaykhemlani.com/wp-content/uploads/2012/08/4-logo-inner-glow.gif)
For ‘SEO’ word only. In Blending Options, select outer glow and set the foreground to #FC0D0D.
![5-logo-stroke 5 logo stroke How to Create a Business Web Layout in Photoshop](http://sanjaykhemlani.com/wp-content/uploads/2012/08/5-logo-stroke.gif)
In Stroke, use the color #FF0000 and set the size to 1.
![6-logo-outer-glow-2 6 logo outer glow 2 How to Create a Business Web Layout in Photoshop](http://sanjaykhemlani.com/wp-content/uploads/2012/08/6-logo-outer-glow-2.gif)
For the ‘Police’ word, outer glow and set the foreground to #4083ff and spread to 3%, size to 8px.
![7-logo-stroke-2 7 logo stroke 2 How to Create a Business Web Layout in Photoshop](http://sanjaykhemlani.com/wp-content/uploads/2012/08/7-logo-stroke-2.gif)
In Stroke, use #2b73f7 and set the size to 1px.
![8-logo-complete 8 logo complete How to Create a Business Web Layout in Photoshop](http://sanjaykhemlani.com/wp-content/uploads/2012/08/8-logo-complete.gif)
For the tag line, I use futurist fixed width 11pt.
![9-logo-line-complete 9 logo line complete How to Create a Business Web Layout in Photoshop](http://sanjaykhemlani.com/wp-content/uploads/2012/08/9-logo-line-complete.gif)
Grab Single Row Marquee Tool and create a line just like the image above. Fill it with #ffffff, and we are done!
![10-navi 10 navi How to Create a Business Web Layout in Photoshop](http://sanjaykhemlani.com/wp-content/uploads/2012/08/10-navi.gif)
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 11 navi background dropshadow How to Create a Business Web Layout in Photoshop](http://sanjaykhemlani.com/wp-content/uploads/2012/08/11-navi-background-dropshadow.gif)
For the Rounded Rectangle Tool, Blending Options drop shadow foreground #BABABA, the rest are defaults.
![12-navi-background-inner-shadow 12 navi background inner shadow How to Create a Business Web Layout in Photoshop](http://sanjaykhemlani.com/wp-content/uploads/2012/08/12-navi-background-inner-shadow.gif)
Inner shadow’s foreground color is #FFFFFF and distance, size 1px.
![13-navi-background-gradient-settings 13 navi background gradient settings How to Create a Business Web Layout in Photoshop](http://sanjaykhemlani.com/wp-content/uploads/2012/08/13-navi-background-gradient-settings.gif)
For gradient settings copy the color’s above.
![14-navi-background-gradient 14 navi background gradient How to Create a Business Web Layout in Photoshop](http://sanjaykhemlani.com/wp-content/uploads/2012/08/14-navi-background-gradient.gif)
Here is the gradient overlay settings
![15-navi-background-selected 15 navi background selected How to Create a Business Web Layout in Photoshop](http://sanjaykhemlani.com/wp-content/uploads/2012/08/15-navi-background-selected.gif)
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 16 navi background selected deleted How to Create a Business Web Layout in Photoshop](http://sanjaykhemlani.com/wp-content/uploads/2012/08/16-navi-background-selected-deleted.gif)
Press CTRL + SHIFT + I and hit DEL to remove the excess layer.
![17-navi-background-gradient-settings 17 navi background gradient settings How to Create a Business Web Layout in Photoshop](http://sanjaykhemlani.com/wp-content/uploads/2012/08/17-navi-background-gradient-settings.gif)
Copy the gradient color settings.
![18-navi-background-selected-gradient 18 navi background selected gradient How to Create a Business Web Layout in Photoshop](http://sanjaykhemlani.com/wp-content/uploads/2012/08/18-navi-background-selected-gradient.gif)
Hit reverse on the gradient overlay settings and opacity 100%.
![19-navi-complete 19 navi complete How to Create a Business Web Layout in Photoshop](http://sanjaykhemlani.com/wp-content/uploads/2012/08/19-navi-complete.gif)
We now have this, as our current navigation was selected.
![20-slider 20 slider How to Create a Business Web Layout in Photoshop](http://sanjaykhemlani.com/wp-content/uploads/2012/08/20-slider.gif)
For the slideshow, create a new layer (CTRL + SHIFT + N) fill it with #ececec.
![21-slider-stroke 21 slider stroke How to Create a Business Web Layout in Photoshop](http://sanjaykhemlani.com/wp-content/uploads/2012/08/21-slider-stroke.gif)
In Stroke, foreground is #838281 and size is 1px.
![22-slider-inside 22 slider inside How to Create a Business Web Layout in Photoshop](http://sanjaykhemlani.com/wp-content/uploads/2012/08/22-slider-inside.gif)
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 23 slider image clipping How to Create a Business Web Layout in Photoshop](http://sanjaykhemlani.com/wp-content/uploads/2012/08/23-slider-image-clipping.gif)
Right click the image (from istockphoto) and select Create Clipping Mask, resize the image to fit the slider.
![24-slider-image 24 slider image How to Create a Business Web Layout in Photoshop](http://sanjaykhemlani.com/wp-content/uploads/2012/08/24-slider-image.gif)
You should have the same as above.
![25-slider-shadow 25 slider shadow How to Create a Business Web Layout in Photoshop](http://sanjaykhemlani.com/wp-content/uploads/2012/08/25-slider-shadow.gif)
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 26 slider blur How to Create a Business Web Layout in Photoshop](http://sanjaykhemlani.com/wp-content/uploads/2012/08/26-slider-blur.gif)
In Filter > Blur > Gaussian Blur and set to 4.8px.
![27-slider-image-shadow 27 slider image shadow How to Create a Business Web Layout in Photoshop](http://sanjaykhemlani.com/wp-content/uploads/2012/08/27-slider-image-shadow.gif)
This is what we have for the slider shadow.
![28-optin 28 optin How to Create a Business Web Layout in Photoshop](http://sanjaykhemlani.com/wp-content/uploads/2012/08/28-optin.gif)
Next is opt-in form beside the slider, create a new layer and grab Marquee Tool (M) fill it with #e4e3e3.
![30-optin-header 30 optin header How to Create a Business Web Layout in Photoshop](http://sanjaykhemlani.com/wp-content/uploads/2012/08/30-optin-header.gif)
Create a new layer (CTRL + SHIFT + N) and Marquee Tool (M), fill it with #ba0b09.
![31-optin-header-highlight-line 31 optin header highlight line How to Create a Business Web Layout in Photoshop](http://sanjaykhemlani.com/wp-content/uploads/2012/08/31-optin-header-highlight-line.gif)
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 32 optin header arrow How to Create a Business Web Layout in Photoshop](http://sanjaykhemlani.com/wp-content/uploads/2012/08/32-optin-header-arrow.gif)
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 33 optin header arrow complete How to Create a Business Web Layout in Photoshop](http://sanjaykhemlani.com/wp-content/uploads/2012/08/33-optin-header-arrow-complete.gif)
You should have the same image as above.
![34-optin-header-text 34 optin header text How to Create a Business Web Layout in Photoshop](http://sanjaykhemlani.com/wp-content/uploads/2012/08/34-optin-header-text.gif)
We used League Gothic 26pt #FFFFFF all caps.
![35-optin-header-text-dropshadow 35 optin header text dropshadow How to Create a Business Web Layout in Photoshop](http://sanjaykhemlani.com/wp-content/uploads/2012/08/35-optin-header-text-dropshadow.gif)
For our text drop shadow, foreground color #000000 size and distance 1px.
![36-optin-header-gradient 36 optin header gradient How to Create a Business Web Layout in Photoshop](http://sanjaykhemlani.com/wp-content/uploads/2012/08/36-optin-header-gradient.gif)
For our gradient color settings, copy the color guide above.
![37-optin-header-gradient 37 optin header gradient How to Create a Business Web Layout in Photoshop](http://sanjaykhemlani.com/wp-content/uploads/2012/08/37-optin-header-gradient.gif)
Here is the gradient overlay settings.
![38-optin-text 38 optin text How to Create a Business Web Layout in Photoshop](http://sanjaykhemlani.com/wp-content/uploads/2012/08/38-optin-text.gif)
We added another text inside the optin form, we used League Gothic 26pt #333.
![39-optin-text-highlight 39 optin text highlight How to Create a Business Web Layout in Photoshop](http://sanjaykhemlani.com/wp-content/uploads/2012/08/39-optin-text-highlight.gif)
For our highlighted text, we just changed the color #ED7B1E.
![40-optin-text-highlight-dropshadow 40 optin text highlight dropshadow1 How to Create a Business Web Layout in Photoshop](http://sanjaykhemlani.com/wp-content/uploads/2012/08/40-optin-text-highlight-dropshadow1.gif)
Drop shadow foreground color is #000000, distance and size is 1px.
![41-optin-text-gradient 41 optin text gradient How to Create a Business Web Layout in Photoshop](http://sanjaykhemlani.com/wp-content/uploads/2012/08/41-optin-text-gradient.gif)
Copy the gradient color settings above.
![42-optin-input 42 optin input How to Create a Business Web Layout in Photoshop](http://sanjaykhemlani.com/wp-content/uploads/2012/08/42-optin-input.gif)
For the input field, grab Marquee Tool (M) and draw a rectangle shape fill it with #FFFFFF.
![43-input-dropshadow 43 input dropshadow How to Create a Business Web Layout in Photoshop](http://sanjaykhemlani.com/wp-content/uploads/2012/08/43-input-dropshadow.gif)
Drop shadow for input field, set the foreground to #FFFFFF and distance, size to 1px.
![44-input-stroke 44 input stroke How to Create a Business Web Layout in Photoshop](http://sanjaykhemlani.com/wp-content/uploads/2012/08/44-input-stroke.gif)
For Stroke, foreground is #A0A0A0 and set the size to 1px.
![45-optin-button 45 optin button How to Create a Business Web Layout in Photoshop](http://sanjaykhemlani.com/wp-content/uploads/2012/08/45-optin-button.gif)
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 46 optin button inner shadow How to Create a Business Web Layout in Photoshop](http://sanjaykhemlani.com/wp-content/uploads/2012/08/46-optin-button-inner-shadow.gif)
In Blending Options Inner Glow, foreground is #FFFFBE and the rest are defaults.
![48-optin-button-gradient 48 optin button gradient How to Create a Business Web Layout in Photoshop](http://sanjaykhemlani.com/wp-content/uploads/2012/08/48-optin-button-gradient.gif)
For the Gradient Color Settings, copy the color above.
![49-optin-button-gradient 49 optin button gradient How to Create a Business Web Layout in Photoshop](http://sanjaykhemlani.com/wp-content/uploads/2012/08/49-optin-button-gradient.gif)
On Gradient Overlay, hit reverse and Opacity to 100%.
![50-optin-button-stroke 50 optin button stroke How to Create a Business Web Layout in Photoshop](http://sanjaykhemlani.com/wp-content/uploads/2012/08/50-optin-button-stroke.gif)
For Stroke use the foreground color #ECAC4D and size to 1px.
![51-optin-button-text 51 optin button text How to Create a Business Web Layout in Photoshop](http://sanjaykhemlani.com/wp-content/uploads/2012/08/51-optin-button-text.gif)
We added a text on the button, we used League Gothic 20pt color is #A37024.
![52-optin-button-text-dropshadow 52 optin button text dropshadow How to Create a Business Web Layout in Photoshop](http://sanjaykhemlani.com/wp-content/uploads/2012/08/52-optin-button-text-dropshadow.gif)
We will also add some drop shadow on the text, foreground is #FFFFFF and distance, size is 1px.
![53-get-button 53 get button How to Create a Business Web Layout in Photoshop](http://sanjaykhemlani.com/wp-content/uploads/2012/08/53-get-button.gif)
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 54 get qoute button How to Create a Business Web Layout in Photoshop](http://sanjaykhemlani.com/wp-content/uploads/2012/08/54-get-qoute-button.gif)
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 55 get innershadow How to Create a Business Web Layout in Photoshop](http://sanjaykhemlani.com/wp-content/uploads/2012/08/55-get-innershadow.gif)
Inner Glow, foreground color is #FFFFBE and the rest are defaults.
![56-get-graident 56 get graident How to Create a Business Web Layout in Photoshop](http://sanjaykhemlani.com/wp-content/uploads/2012/08/56-get-graident.gif)
Copy the gradient color settings above.
![58-get-text 58 get text How to Create a Business Web Layout in Photoshop](http://sanjaykhemlani.com/wp-content/uploads/2012/08/58-get-text.gif)
We added a text, font is Georgia 26pt #FFFFFF.
![59-get-text-dropshadow 59 get text dropshadow How to Create a Business Web Layout in Photoshop](http://sanjaykhemlani.com/wp-content/uploads/2012/08/59-get-text-dropshadow.gif)
We will add drop shadow for the text, foreground is #000000 distance and size is 1px.
![60-bottom-content 60 bottom content How to Create a Business Web Layout in Photoshop](http://sanjaykhemlani.com/wp-content/uploads/2012/08/60-bottom-content.gif)
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 61 twitter ballon How to Create a Business Web Layout in Photoshop](http://sanjaykhemlani.com/wp-content/uploads/2012/08/61-twitter-ballon.gif)
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 62 twitter ballon arrow How to Create a Business Web Layout in Photoshop](http://sanjaykhemlani.com/wp-content/uploads/2012/08/62-twitter-ballon-arrow.gif)
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 63 twitter complete How to Create a Business Web Layout in Photoshop](http://sanjaykhemlani.com/wp-content/uploads/2012/08/63-twitter-complete.gif)
Here is the completed twitter bubble on our footer.
![64-contact-info 64 contact info How to Create a Business Web Layout in Photoshop](http://sanjaykhemlani.com/wp-content/uploads/2012/08/64-contact-info.gif)
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 sanjaykhemlani.com seo police tutorial1 How to Create a Business Web Layout in Photoshop](http://sanjaykhemlani.com/wp-content/uploads/2012/08/sanjaykhemlani.com-seo-police-tutorial1.png)
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 🙂