Website Design Tutorial how to design a web site

This is a Photoshop tutorial on building a website using Adobe Photoshop. This website tutorial using Photoshop will take you through a step by step process on how easy it is to design a website using Photoshop. This should provide you with a decent path to creating further websites in Photoshop. If you enjoyed this tutorial, please leave your comments and feedback below and I will take them into consideration when I create another tutorial on how to make a website using Photoshop.

Required Files:  World Map  Businessman

STEP 1: As with any project, you must first create a new document in Photoshop by either using the shortcut CTRL+N or by clicking File>>New. Create a name for you website ( I used D-SOLmedia.com) and set the width to 1024 pixels and the height to 1200 pixels.

STEP 3: Now for the fun part, let’s start building this website design in Photoshop. First select the Rectangle Tool or click SHIFT+U until you see this icon. Drag a long rectangular square at the top of the page about 70 pixels high and across the entire page. At this point, we will not be editing the background layer as this will allow us to edit above layers transparency.

Ensure that the rectangle you just created is black. This can be accomplished in photoshop easily be double clicking the "layer thumbnail" that will appear as the left thumbnail on the top layer as shown here and selecting black from the colour picker (#000000).

STEP 4: We will now repeat step 3 and create another rectangle shape below the one we just made. The size should be roughly the same, but here we will change the colour of the rectangle to light green (Colour: #b0d584).

STEP 5: Creating this next layer we will be utilizing the drop shadow effect in Adobe Photoshop. Create another rectangle the full width of the page and approximately 230 pixels in height just below the light green rectangle you just created. Colour this layer an army green (Colour: #556543). Once you have created and coloured this rectangle, lets add a drop shadow effect on it. There are many ways this can be done, but the two simplest ways will be to either double click the layer just to the right of the layer name, or you can click the button that is located at the bottom of your layers palette. This will bring up your "Layer Style" dialog box. Click on the Drop Shadow tab, set the "Distance" of the drop shadow to 10px and the "Size" to 6px as shown here.

STEP 6: Create a darker green rectangle (Colour: #11150c) which will act as the body colour of the background. In this step, there is no effects added. This height of the rectangle should be about 750px or so.

STEP 7: Finally, to complete the various layers, place another BLACK rectangle to cover up the white spot at the bottom. This is where we will be placing and copyright and design by information. The final design so far should look something like this.

STEP 8: Now that we are done designing the background of the website, lets start adding some character to it. No, I'm serious, go grab your Horizontal Type Tool and add your company name at the top of the page on the left hand side. I used the Arial bold font and 36px. Once you have typed out your company name, it's time to duplicate that layer so that you have two layers of your company name. This can be done by either going to Layer>>Duplicate Layer or by using the Adobe Photoshops short cut key CTRL+J. Once you have that duplicated later, select the top layer that has your logo text and go to Edit>>Transform>>Flip Verticle. Drag that layer so that the top of the layer you just flipped is touching the bottom of the logo layer below it. We are trying to create a mirrored look Once you have this mirrored look to your logo name, lets add a the fade to it. On the flipped logo layer, click on the "Add Layer Mask" button located again at the bottom of the layers panel. Then click the gradient tool and make sure that your gradient slide is set from black to white like this . To create this effect. start from the top of the right side up logo to the top of the mirrored logo, like this:

The final result after you have completed this should look like:

If your company name has two or more letters, play around with the font style, size and colour to give it a really nice apperance. Should you choose to also include your slogan as well, I would suggest a good Photoshop Website Design technique would be to use a different sized font with each section of your name and slogan having different level of brightness to keep the colour within the same hue. Take a look at what I came up with in the end.

STEP 9: For any business to be successful, there has to be a way to contact them. For this Photoshop website design, lets put some way for clients to reach the company on the top right hand corner of the webpage. We won't need to do anything fancy here, just plain white Arial text.

STEP 10: Now it time for you to add in some navigational text. Type in what you want your website navigational buttons to be or use the ones that I used.

STEP 11: Now since there is some empty space in the left hand left of the navigational bar, lets fill it with some graphic. Select the rectangle tool and draw a rectangle covering up that empty space to the left. Make sure that the rectangle is black. Now lets add a pattern to the black rectangle you just created. Double click on the layer to bring up the "Layer Style" menu and select "Pattern Overlay". In the patten overlay section choose a pattern that you like. This is a subjective option, so I am going to leave it up to you do determine what looks best.

STEP 12: Now lets create a tag line for our website. Here we will be placing it just below the pattern we just made and using that pattern to centre our tag line. Centreing text to the pattern can be done just by eyeballing it. I used a mixture of Photoshops Arial Italic font & Photoshops Arial Black Italic font with most of it being white and the word "Network" being gold (Colour: e1b327).

STEP 13: Lets add some photoshop phunk to this website by using this world map picture. This is a high res picture of the world so you will have to resize this image down (CTRL+T to resize) so that the top left corner of this world map picture is touching the bottom right corner of the pattern we just made earlier. The rest of the map should be covering the rest of the dark green bacground that is to the right of the tag line you just created. To make this map blend in with out website, make sure that you have it selected in the layers panel and change its blending mode to "Luminosity".

After you have changed the blending mode of that layer to luminosity, your result should be similar to this:

STEP 14: Creating some dividers to the content area of our photoshop website layout will be both pleasing to the eye and add the professional appeal. We can easily do this by selecting the line tool (SHIFT+U). When you select the line tool, prior to making any lines, ensure that you have the line weight at 1px, you are using shape layers AND NOT paths, and that the colour is black. Here is what your tool bar should look like.

Once you have your tool bar looking like this, draw your vertical line first approximately 670px from the left of the webpage. A neat little trick to make sure that the line goes straight down is to hold down SHIFT while dragging the cursor. This way the line is locked, when you reach the end of the line, let go of the mouse first and then release the SHIFT key. When you have the verticle line, we will apply a gradient to give it a fade effect. Double click on the verticle line layer to bring up its "Layer Style" dialogue box and goto the "Gradient Overlay" option. Keep all options within this section as default but double click the gradient bar to change the colours. Change the gradient colours to flow from 282c24 --> FFFFFF --> 282c24. Here is what both of the dialogue boxes should look like.

To create the horizontal line in photoshop to have the same apperance as the one you just created we must first draw the horizontal line approximately half way down the content or body of the webpage. We then simply apply the same gradient overlay that we just did on the verticle line, but with one important difference. The angle of the gradien must be set to 0 degrees. Make sure that your gradient effect panel looks like this.

STEP 15: Now that you have the diveders in place, lets place some content to make is look good. Feel free to redesign or place the content where ever you find it best, but here is a simple layout that I came up with that I think give this photoshop website layour the professional touch. Here, you'll place the picture of the businessman to give the content a little more photoshop phunk and to make the whole content of the site flow better. This is what you should have so far.

Once you have your photoshop webpage looking like this, let's get rid of the black background on the businessman picture. Simply select the picture on the layers panel and choose the "Lighten" option in the blending mode. This will rid the image of any darker areas than that of the layer is it on top of (the green background).

STEP 16: Once your satisfied with how the content section on the left looks, we'll get started with the content on the right. First we must create the two boxes to serve as the background for the text. Again, select the rectangle tool (U) and create a box at the top setion of the right panel. Colour the box with a dark army green colour (Colour: 667455) and make sure that you set the layers opacity to 20%. So far you should have:

Once you have the box looking like this, lets add the drop shadow effect to it. Double click the rectangle layer that you just created and select "drop shadow". This time, we will just use the default settings that the drop shadow has to create this effect, click "OK". Now we need to create the same box right below the one we just made. The easiest way to go about this will be to just duplicate the layer CTRL+J or Layer>>Duplicate Layer and once the layer is copied, move it down just below the other one. Again, a nifty tip to make sure that the boxes are aligned is to hold down SHIFT while moving the box below the top box as this will force the alignment. Your photoshop website layout should look something like this.

STEP 17: Once the boxes are aligned, we will proceed to adding the content. To keep with the professional look I would suggest keeping the headings the same font size as the headings that you have on the left, but change the colour slightly to add some variety. I have choosen Articles & Reviews and Popular Netowrks as my two sections, but don't feel like you have to as well. Come up with two that you think will work best for you. This is how the results should appear.

STEP 18: Now that we are farely well done, we still need to add some very important content at the very bottom of the screen where we have the black border showing. Here is where we will place a copyright notice, disclaimer and a privacy policy. If you feel the need to, you can add more information here like sitemaps, links, etc. In the end, this is what you should have:

STEP 19: Now that you have completed the entire website design, this is what you should have in the end. I really hope that you enjoyed this tutorial and please leave comments and feedback so that I can take them into consideration when I create another tutorial for you. I hope you enjoyed this. Have a GREAT day!!!