In this tutorial we’re going to learn how to design a modern and clean website in Adobe Photoshop. As we go through this tutorial, we’ll work with layer styles, patterns, and custom shapes and many other Photoshop design techniques that you can adapt to your web design workflow. So put your creative head on and open up Photoshop and stay inspired.
Final design
Resources used
Introduction
You often see them quite a bit these days, the clean looking website with the big slider in the head. It can become…well….somewhat generic. But it works! The message your trying to send out, the work that your trying to showcase gets seen straight off the bat! Head over to themeforest and you will see how popular these layouts are. So it goes without saying that this kind of layout we are going to create is not only proven but it’s also very easy to do.
Step 1 – Getting started
Open up Photoshop and create a new file (CTRL + N) and set the dimensions to 1200 x 1600 pixels. I prefer to set my background to transparent as i use a lot of PNG files when saving for the web, so having a transparent background from the off is handy.
Step 2 – Setting the background
In this step we are going to give our background a nice pattern. But first fill the background with an off white color #F6F6F6. Then go ahead and download the pattern.jpg file that is supplied in the resources section at the top of this page and open it up in Photoshop. Then go to EDIT > DEFINE PATTERN and then give your pattern a name. Now select the Paint Bucket tool and change it from foreground to pattern and then open up your pattern picker and locate your new pattern. Now select the Rectangle Marquee tool and drag out a selection across the top about 490 pixels high and then fill it with the Paint Bucket tool with our pattern.
Step 3 – The working area
We are going to make a decision here that we want our website to be viewable within a screen resolution of 1024 X 768px. To accomplish this we need a working area of 960px. Why?….well, 960px is all that will be left within the users monitor as the browser itself will take up the rest. So let’s create two guidelines either side of our document by going up to ‘VIEW’ >’NEW GUIDE’ and then setting the orientation to vertical. Then for the position, key in 120px. Repeat what you just did, except key in 1080px for the position. You should now have a 960px space in between these guidelines.
Step 4 – Creating the header
Create a new layer and call it ‘header bg’.Then select the rectangle Marquee tool and drag out a selection across the top that is no more than 70px high, then fill it with black./p>
TOP TIP – ‘Always remember to name your layers as it will save you so much time later on!’
Step 5 – Header strips
What we are going to do next is create the top and bottom white strips inside our header – subtle as they are, it’s still a nice effect. So, create a new layer and name it ‘header_strip’ and with the Marquee Tool selected drag out a selection with a height of about 15px and fill it with white. Now lets add a bit of noise by going up to ‘FILTER’ and down to ‘NOISE’ > ‘ADD NOISE’. It’s totally up to you how much noise you add, but normally you would look to set it at 2.45%.
Step 6 – Making another strip!
Firstly let’s turn down the opacity to around 10%. Then we can drag an exact copy of this white strip by first making sure the ‘header_strip’ layer is selected, then holding down the CTRL + ALT keys you will see the mouse cursor change to two little black and white arrows. Now drag down to the bottom of our header.
TOP TIP – ‘You can also click and drag the layer down into the new layer icon to create an exact copy?!’
Step 7 – The search field.
Create a new layer above our header and call it ‘search_bg’. Make sure the foreground color is set to black and select the Rounded Rectangle tool (CTRL + U) with a radius of 5px. Then drag out a shape about 200 x 30px inside our header to the right. Now we can open up our layer styles and add a light grey 1px stroke to finish off it’s appearance.
Step 8 – Search button.
On a new layer called ‘search_btn’, drag out another shape using the Rounded Rectangle tool and fill it with a green gradient of #6DA345 for the bottom and #49672D for the top.
Step 9 – Using Custom shapes.
With the search field and submit button now set out, we can finish it off by making good use of Photoshops custom shapes by putting a search shape inside the button. So select the Custom Shape Tool (CTRL + U) and open up the shape picker and locate the search shape. Then on a new layer, drag out the shape and fill it with the color – #333333. Now using the Type tool, we can type in the word ‘search…’ to get a proper feel of how it would look.
TOP TIP – ‘Never forget Photoshops custom shapes – very handy for logo’s, icons ect’
Step 10 – The Logo.
Creating our logo is going to be very easy. All we do is select the Type tool (CTRL + T) and type out our site’s name ‘view source’. The font I used here is ‘Lobster’ and can be found and freely downloaded from the Google fonts website www.google.com/webfonts. You then need to open up the Character Palette (Windows > Character) and adjust the tracking to 75 so it give some space in between each letter. Then we add the less than and great than signs’
Step 11 – Navigation
Select the Horizontal Type Tool and using Arial as our font, type out each navigation buttons underneath our header. What we need now is an overstate for the button. So create a new layer underneath the navigation buttons and select the Rounded Rectangle tool. Drag out a shape and fill it with any color. What we can do now is locate the search button layer and right click the FX symbol.
Step 12 – the tagline
Select the Horizontal Type tool and type out your tagline or mission statement. Here i used Adobe Garamond font at a size of 28px. Easy enough!
Step 13 – Image slider
Select the Rectangle Marquee tool and drag out a selection for our slider that is no bigger then 840px x 360px. Now create a new layer and call is ‘Slider bg’ and then fill our selection with the color #E5E5E5.
Step 14 – the shadow
Now grag out two guidelines and position them in exact alignment with either side of our rectangle and then another two 15px inside of them. Now drag out a guideline for the center and one for the bottom, which is positioned 25px from our rectangles bottom edge.
TOP TIP – "Using guides is always a handy way to make sure everything is aligned nicely!"
Then with the pen tool selected – make a point just underneath our rectangle starting from the left handside and then down diagonal and then across to our center guide. Repeat the process for the right handside and finally go straight across to finish up on our first point.
Now right click inside that shape to make it a selection and fill it with black. CTRL + D to deselect the selection.
Step 15 – blur filter
To finish off our shadow we need to give it some blur and bring down it’s opacity. So go up to FILTERS > BLUR > GAUSSIAN BLUR and chose about 8.0px
Then in the layers palette, bring down it’s opacity to around 60% – 50%.
Step 16 – adding our slider image
Using the image provided we can place that inside our rectangle. But firstly we need to make our slider rectangle a selection and the easiest way to do that would be to hold down the CTRL key, and then click on our ‘Slider_bg’ layer in our layers palette.
Now, we don’t really want our image to fill the whole rectangle so what we can do is contract our selection. So go up to SELECT > MODIFY > CONTRACT and contract the selection by 5px.
Now open up the slider_img(or your own image) in Photoshop and unlock its layer. Again make the image a selection by holding down the CTRL key and clicking on its layer and then go up to EDIT > COPY MERGED. Then we need to paste our copied image into our selection by going up to EDIT > PASTE SPECIAL > PASTE INTO. You will more then likely need to use the Free Transform tool (CTRL + T) to resize your image.
Step 17 – navigation arrows
Next up will be the slider navigation arrows. So create a new layer underneath our slider and call it ‘right arrow bg’. Then select the Elipse Tool (CTRL + U) and drag out an oval shape as shown. (I have made it into a selection so you can see it better).
Now we are going to use some blending modes to give it that button look. So double click on the ‘right arrow bg’ layer to open up your blending modes and give it a gradient of #CCCCCC – #FFFFFF.
Now add a 1px stroke with a color of #CCCCCC and an inner shadow./p>
lastly we can add some green arrows to our nav button. So create a new layer and with the custom shape tool selected (CTRL + U) open up your Custom shapes from the options bar at the top and pick an arrow. Holding down the shift key, drag out an arrow and add in some layer styles to finish it off. The color overlay being #669933.
Then it’s just a case of repeating the whole process for the left side nav button.
Step 18 – Slider dots
Create a new layer and call it ‘dots’. Then with the Elipse tool and with the foreground color set to #f5f4f4 – drag out a small circle underneath the slider. Double click on the ‘dots’ layer to bring up the layer styles and add a small drop shadow with a 1px stroke with a color set to #CCCCCC. Now making sure the ‘dots’ layer is still selected, chose the move tool and while holding down the CTRL + SHIFT keys – you will notice two arrows appear – one black and one white. Now you can drag out an exact copy over to the right, and then let go of your keys.
Go back to your first dot and CTRL click on that layer to make it a selection. Then go up to SELECT > MODIFY > CONTRACT, and contract it by 2 pixels. Then create new layer and then fill that selection with the same color green #669933 as the slider navigation arrows. Then it’s just a case of making sure the dots are centered to the slider by using either guidelines or your best eye?
Step 19 – Middle tagline
Now drag out two guidelines either side of the slider navigation buttons and create a new layer, call it ‘tagline bg’. Now set the foreground color to #eaeae8 and using the Rectangle Tool, drag out a rectangle within our guides.
Now we can add our text. Here i have used the Times New Roman font set to 18px and i gave it a 20px tracking to allow a bit of space in between the letters.
Step 20 – Services
To make thing easier for us, lets drag out some guidelines about 300 pixels apart for our services boxes. I always find it easier to drag out a selection using the Rectangle Marquee tool with the Info box open to be sure of the measurements.
Now we need to find some icons for our services and i happen to know a great website that allows anyone to download a huge selection of icons in many categories – www.iconfinder.com for free. And to make things easier for you, I have included the URL’s to each icon I used at the beginning of this tutorial. Once downloaded, open up the first icon and resize it using the Free Transform tool (CTRL + T) and place it top left of our first service area as shown.
Now we can add in the service title using the Horizontal Type tool and the font set to Candara. The size I have used here is 18 pixels and the color set to #666666. Then finish it off by adding in your text using an Arial font.
Then it’s just a case of adding in the other services icons and text using the same techniques as before.
Step 21 – Learn more buttons
Select the Rounded Rectangle tool – set the corner radius to 5px and create a new layer. Then drag out a button shape and give it a gradient of #CCCCCC for the bottom and #FFFFFF for the top. Then give it a 1px stroke with the color set to #CCCCCC.
You should have something that looks like this:
Step 22 – Finishing off the Learn more buttons
Now using the Horizontal Type tool, type out the words ‘learn more’ on our button in uppercase, using the ‘Arial’ font.
Now create a new layer and select the Elliptic Marquee tool and drag out a circle and fill it with this color – #CCCCCC.
Now let’s add some layer styles to our circle. So open up your layers styles and add an inner shadow with the settings shown.
Then lastly, on a new layer drag out an arrow using the same green as our slider navigation arrows and that should be it….one clean stylish looking learn more button.
Step23 – Grouping layers
This is a good time as any to talk about organizing your layers into groups. Why?, because we don’t really want to be merging layers to something that we would more than likely want to change later. Not only that but it helps to keep everything in order. So making sure all layers we want to group are selected and then press CTRL + G on your keyboard to group them.
Also by grouping layers like our learn more button, will allow us to easily make a duplicate by dragging down our group into the new layer icon – which we can now use for our other services.
Step24 – Footer
To finish things off we just need to create the footer. So create a new layer and call it ‘footer’ and then with the Rectangle Marquee tool selected, drag out a selection across the bottom of our document and about 450px high, and then fill it with black #000000.
Then let’s add some noise to our footer by going up to FILTER > NOISE and then give it around 1.6% with the distribution set to uniform.
Step25 – Footer bottom.
Now let’s grab hold of our ‘header_bg’ layer and drag it down into the new layer icon to create an exact copy and then name it ‘footer_bottombar’. Then position the ‘footer_bottombar’ on (you guessed it) the bottom of our main footer using the move tool.
Step26 – Footer Content – About us
Now using the Horizontal type tool we can type out our about us title and body text underneath inside our footer. Then using the Line tool and with the color #333333, drag out a 1px line underneath our title.
Then using the icon finder website – we can locate some social icons and place them underneath our about us text. Here is the link icons – icon finder
Step27 – Footer Content – Recent posts
Again using the same techniques as the step before, we can add in our recent posts content. Here I have made good use of some guidelines to help align things up nicely.
Step27 – Footer Content – Contact form
Here in our last step we can create our small contacts form. So using the Horizontal type tool, type out the title and put in our underline. Then create a new layer and call it ‘name’ and with the Rectangle tool selected, set the foreground to black #000000, and drag out a shape about 280 x 30 for our first input field. Then give it a 1px stroke with a color of #333333.
Now make sure your ‘name’ layer is selected and then by holding down the CTRL + ALT keys on your keyboard – drag down to make an exact copy of the ‘name’ layer. Call this copied layer ‘email’ and do the same for the comments, and then use the Free Transform tool to resize accordingly.
Next up is to add in our input field titles.
Step28 – Send button
To finish our web form, let’s add our send button. So, create a new layer and call it ‘send_bg’ and then with the Rounded Rectangle tool selected – drag out a shape underneath the comments box. Then give it a gradient using the layer styles.
Now for our very last job, by using the Horizontal type tool, type in the word ‘SEND’
Final thoughts
One thing I can’t stress more is the organization of your layers. It is so easy to create a layer without naming it and then carry on regardless. But you will certainly come unstuck when the time comes to make some revisions to your design – probably requested by the client? Naming your layers and grouping them will save you time and your workmates will thank you for it if it was them that had to pick up your work and make those changes!
So, I hope you have learned something from this tutorial and please feel free to make some comments, either for things you are not quite sure about or just a quick thank you? I will reply to comments if I need to asap!
