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!
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.
In Stroke, use the color #FF0000 and set the size to 1.
For the ‘Police’ word, outer glow and set the foreground to #4083ff and spread to 3%, size to 8px.
In Stroke, use #2b73f7 and set the size to 1px.
For the tag line, I use futurist fixed width 11pt.
Grab Single Row Marquee Tool and create a line just like the image above. Fill it with #ffffff, and we are done!
For our navigation, select Rounded Rectangle Tool (U) set the radius to 5px and foreground to #FFFFFF. Text used are Arial Bold 13pt, #333333.
For the Rounded Rectangle Tool, Blending Options drop shadow foreground #BABABA, the rest are defaults.
Inner shadow’s foreground color is #FFFFFF and distance, size 1px.
For gradient settings copy the color’s above.
Here is the gradient overlay settings
Create a new layer (CTRL + SHIFT + N) and Marquee Tool (M) select the home navigation and fill it with #333 (doesn’t matter any).
Press CTRL + SHIFT + I and hit DEL to remove the excess layer.
Copy the gradient color settings.
Hit reverse on the gradient overlay settings and opacity 100%.
We now have this, as our current navigation was selected.
For the slideshow, create a new layer (CTRL + SHIFT + N) fill it with #ececec.
In Stroke, foreground is #838281 and size is 1px.
Create a new layer (again) and set the foreground color to #FFFFFF.
Download this image from istockphoto, drag inside our canvas.
Right click the image (from istockphoto) and select Create Clipping Mask, resize the image to fit the slider.
You should have the same as above.
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).
In Filter > Blur > Gaussian Blur and set to 4.8px.
This is what we have for the slider shadow.
Next is opt-in form beside the slider, create a new layer and grab Marquee Tool (M) fill it with #e4e3e3.
Create a new layer (CTRL + SHIFT + N) and Marquee Tool (M), fill it with #ba0b09.
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.
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.
You should have the same image as above.
We used League Gothic 26pt #FFFFFF all caps.
For our text drop shadow, foreground color #000000 size and distance 1px.
For our gradient color settings, copy the color guide above.
Here is the gradient overlay settings.
We added another text inside the optin form, we used League Gothic 26pt #333.
For our highlighted text, we just changed the color #ED7B1E.
Drop shadow foreground color is #000000, distance and size is 1px.
Copy the gradient color settings above.
For the input field, grab Marquee Tool (M) and draw a rectangle shape fill it with #FFFFFF.
Drop shadow for input field, set the foreground to #FFFFFF and distance, size to 1px.
For Stroke, foreground is #A0A0A0 and set the size to 1px.
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.
In Blending Options Inner Glow, foreground is #FFFFBE and the rest are defaults.
For the Gradient Color Settings, copy the color above.
On Gradient Overlay, hit reverse and Opacity to 100%.
For Stroke use the foreground color #ECAC4D and size to 1px.
We added a text on the button, we used League Gothic 20pt color is #A37024.
We will also add some drop shadow on the text, foreground is #FFFFFF and distance, size is 1px.
For the get quote button under the slider, grab Ellipse Tool set the radius to 50px and fill it with #EDEDED.
Create a new one, this time smaller than the first one. Fill with any colors, we will use gradient so it doesn’t matter.
Inner Glow, foreground color is #FFFFBE and the rest are defaults.
Copy the gradient color settings above.
We added a text, font is Georgia 26pt #FFFFFF.
We will add drop shadow for the text, foreground is #000000 distance and size is 1px.
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.
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.
To create a arrow on the twitter bubble, select your Pen Tool (P) and draw a triangle shape-like near the robot icon.
Here is the completed twitter bubble on our footer.
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.
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 🙂
[sociallocker id=”3494″]
Download Now![/sociallocker]
