Welcome to the first of 2, or maybe 3 posts, dedicated to showing the full process of creating a (relatively simple)website. This post will be covering the PSD design and showing a couple of techniques i use regularly on my sites. You will learn how to use simple photoshop tools, layer styles and filters etc.
PSD Design final product:
OK, so lets get started with the design of the website.
Create the PSD document.
Open photoshop and browse to ‘File > New’. Use the settings shown in the below image.
The website will be 1000px wide, our document is 1400px.. lets set up some markers so that we can position, and size the site correctly.
Browse to ‘View’ and make sure ‘Rulers’ is enabled, or ticked. Now, click on the ruler on the right hand side of your screen and without releasing your mouse drag out to the left.
Position the line with the ‘200’ mark on the top ruler, repeat this process and position the second line on the ‘1200’ mark. This leaves us with 1000px worth of space between the lines.
Thats the blank photoshop web template created, lets start with the design.
Create a textured background.
First of all simply fill the layer with colour #555f6e. Once complete browse to ‘Filter > Noise > Add Noise’. Use the below settings.
That should give a nice textured background.
Create a new layer, and select the brush tool (‘B’). Select a brush with soft edges, change the color to white and change the diameter to around 1200px. Somewhere in the top right hand side of your document, left-click. You should have something similar to the below image.
In the layers window, normally found at the bottom right, change the opacity to 25% – 35% and the layer style to overlay. You should now have a nice lighting effect on your textured background.
Create the content area
Create a new layer and press ‘U’ to select the shape tool. At the top of your screen in the Toolbar select the rounded rectangle tool and change the radius to 6px. Position your mouse cursor above the left-hand side line and drag out all the way to the right to draw a rectangle similar to the one seen below.
Notice there is empty space at the top and bottom of the design, this will be used for our header and footer.
Let’s add some simple layer styles to this layer. To access the layer styles panel you can simply double click the layer in the layers window, or browse to ‘Layer > Layer styles’.
Add the following effects.
The content area is now set out and we can add the navigation on top of that.
With the ‘content area’ layer still selected, hold ‘CTRL’ and click the layer thumbnail (found in the layers window at bottom right). Alternatively you can right click the layer thumbnail and use the ‘Select pixels’ option.
You should now have the ‘content area’ pixels selected (highlighted by the moving dashed lines, as shown below), its time to create a new layer.
With the new layer selected, press ‘M’ to select the Marquee tool. Browse to the bottom of your image, hold down the ‘Alt’ key and drag up until there is only a small selection left. This is shown in the image below.
Change the foreground color to #d3dbdf. At this stage, make sure you have the newly created, empty, layer selected. Press ‘G’ to select the fill tool, if this selects the gradient tool simply press ‘Shift & G’ to switch between them. Fill the selection, then press ‘CTRL & D’ to deselect it.
Create the navigation menu
Visit the following site and download the shapes set, install it ready for use in photoshop.
Press ‘U’ to select the custom shape tool. In the top tool bar click on the shapes icon, and the the drop-down icon on the right of it. The image below should make this a bit easier to follow…
Browse to an image and click it and create a new layer. Then, while holding shift(keeps it in proportion), left-click and drag out to draw the shape. Repeat this a few times to get the following effect, make sure to leave plenty of space for some text. In fact, its probably best to create a new layer for each shape so that you can move them around easily.
As you can see i have drawn out a couple of extra guide lines, this just helps to keep the shapes around the same size. Lets add our text and a couple of lines to separate each item!
I decided to use ‘Tenor sans’ as the font for this navigation, if you would like to do the same use the following page to download the font. Open it in google fonts to get to the download section.
Change the foreground color to #97a3ac and press ‘T’ to select the text tool. Write out your list of pages. When you are done you will need to duplicate this text layer. To do this right click the layer and browse to ‘Duplicate layer’.
When you have done this you should have two identical text layers. Select the original layer, then select the move tool by pressing ‘V’. Tap your down key once and your right key once to move the layer 1px in each direction. When this is done change the color of this text to #e3eef6. This should leave you with a nice embossed text effect as seen below.
Now to add some lines to separate each item. Select the shape tool by pressing ‘U’, then, in the top tool bar select the line tool. You can find it next to the shapes icon shown in an earlier image.
Create a new layer and draw a line as shown below.
Now duplicate this image, and using the move tool (‘V’), move the duplicate image 1px to the right. Add the following layer style to the duplicate image.
Merge these two layers. To do this hold down ‘CTRL’ and click the first layer, with ‘CTRL’ still held down click the second layer. Right-click and select merge layers.
You can now duplicate this layer for the rest of the navigation lines until you have something similar to the below image.
Not sure if you can see it properly (if not click image for full size) but i also added a line to the bottom of the navigation menu, to do this simply use the line tool.
Create the site header / logo.
Download the ‘Yanone Kaffeesatz’ font from the link below:
Press ‘T’ to select the font, or text, tool and change to a resonable font size.Change the foreground color to #f4cd15 and type out the first word of your sitename, as seen below then add the layer styles seen below that.
Using the same font and font size create a new text layer and type out the second part of your sitename. Change the foreground color to #d3dbdf this time. Once complete, copy the layer style from the initial text layer and paste it onto this one.
Finally add a slogan or tagline, whatever you want to call it, below that. Example seen below.
Create the website content section.
Add some guidelines to the page as seen in the image below. These will be used to help us place and position our content area and sidebar.
The main content area will consist of a number of articles, well small previews of them anyway. Below is how they will look,
I wont go into too much detail on this as it is pretty straight forward. To get the same effect as us you will need the following information:
Font: Brawler – http://www.google.com/webfonts/specimen/Brawler
Title color: #303233
Content color: #8f8f8f
Continue reading color: #83a1b5
To create the background simply change the foreground color to #eaebed, select the shape tool (‘U’), then in the top tool bar select the rectangle tool. Left click on top of the guide line and drag out to the other side. Add a border by using the ‘Stroke’ layer style (1px, #5d6e80).
Finally import an image of your choice, add a border(using the stroke effect once again). The social media icons are taken from the following link via screenshot, as a quick note, this is the widget we will be using to add the icons when we code the site.
Once you have replicated the above image, select all the layers related to the article ( click each while holding down ‘CTRL’). With the layers now selected press ‘CTRL & H’ to add them to a folder. Duplicate this folder by right-clicking it and selecting ‘Duplicate Group’.
Once duplicated position the article below, and repeat the process until you have something similar to the below image.
Leave a decent amount of space at the bottom, we will be adding some more stuff here later.
Create the sidebar section
Create a new layer and add some more guidelines as seen in the image below, they will be used to position our sidebar contents correctly. Select the shape tool (‘U’) and draw a rectangle within the guidelines. This is also shown in the below image.
Add a 2px stroke to the layer, using the color ‘#dcddde’.
Select the pixels in this layer by holding ‘CTRL’ and left-clicking the layer thumbnail, once done select the marquee tool by pressing ‘M’. While holding ‘ALT’ drag out over your selection(this removes from selection), until you are left with the below:
Create a new layer, and fill this selection with ‘#f6f7fb’. With the layer still selected, press ‘Ctrl + D’ to deselect then browse to ‘Filter > Noise > Add Noise’. Use ‘Uniform’ distribution and somewhere between 1-3% for the amount. This should leave a nice, subtle textured effect.
Now you will need to download an icon pack for the search icon, you can download one by using the following link.
These are Photoshop shapes by the way, if you dont know how to install custom shapes you can find out at http://www.obsidiandawn.com/installing-using-photoshop-custom-shapes
Create a new layer and add an icon in a suitable place, an example is shown in the below image.
You might of noticed we have added a bit of text in also, the font-family is tahoma and the color is #c4c4c4.
Below the search bar we are going to draw out the following:
Now, this is pretty simple stuff and has already been covered in the tutorial at an earlier stage so i wont go over it in too much detail. Simply use the shape tool to draw out a rectangle and add a 1px stroke with the color #d6dfe0.
Add a bit of text, then using the same technique as in our navigation menu draw out some lines to separate each item.
Oh, i also added a inner glow to the box. Image below shows the settings (click to enlarge):
Ok, check the image to see the end result of the following steps.
First of all, draw out a rectangle at the top of the list as seen above. Use color #d1dcdd and add a 1px stroke, color #bccbc9. Once done add the following drop shadow:
When the rectangle is styled as described above, select the pixels in the layer by clicking the layer thumbnail whilst holding ‘CTRL’. With the pixels selected create a new layer.
This new layer will be used to add some texture to the rectangle, first of all though download a grunge brushset. You can get a decent one from http://env1ro.deviantart.com/art/grunged-1-87934492.
At this stage some trial and error comes in to play, have a bit of a mess around and see if you can create a nice result. First of all though, change the opacity of the layer to around 25% and the blending mode to overlay. I suggest using two colors to get a nice effect, i used #295058 and #edf2f3. This produced the following result:
Try using a few different brushes and vary the brush size too, if this fails get the eraser involved (‘E’).
The end result is pretty nice, but we can improve on it. Look at the below image to find out how.
How to achieve this:
Create a new layer behind both rectangles we just created.
Select the shapes tool(‘U’), in the top bar click on the shape drop-down button. Browse down to ‘Shapes’ in the drop-down list. Select the diamond shape.
Change the foreground color to #a9b7ba. Draw out a diamond as seen below and move it into place.
Repeat the process for the other size of the rectangle.
The rest of the sidebar is actually quite simple as you can see from the image below. You basically just need to duplicate the ‘Categories’ box and move it down a little.
I’ll go over the ‘Join newsletter’ section very quickly, as you will need to know how to draw a dashed line. First off all, write ‘Join Newsletter’ in a decent sized font – i used cambria.
Select the brush tool by pressing ‘B’ and change to a square brush. Once done press ‘F5′ to bring up the brushes window. Use the settings shown in the image below.
When you are finished with the brush settings, create a new layer. Now, hold down ‘SHIFT’ and drag out with your left mouse button pressed to draw a straight line. Use the guidelines to position the line correctly.
Once the line is drawn duplicate the layer. Move the duplicate layer beneath the original, move it one pixel to the right, one pixel down and then add a white color overlay to it. This creates an embossed effect (same technique used earlier in the tutorial). Merge these two layers together.
Duplicate the layer and move the new layer beneath the text.
Finally, design the page footer.
I wont be going over this section in much detail at all as the techniques you will need to use have already been covered throughout the tutorial, have a go and see if you can produce a similar result.
Title / Post Font: Georgia
Post color: #979797
Post link Color: #ebb764
If your wondering how i achieved the ‘double border’ effect on the images its quite simple. The outer border is a stroke, the inner(white) border is an inner glow(TIP: Change ‘Choke’ to 100% for square inner glow).
Well, i think that is that. If you feel anything is missing or needs explaining further give me a shout and i will expand on it. It’s entirely possible i missed something out as this thing took me forever to write!