So here we are again, another web layout. Let’s get stuck right into it, shall we? Make a new document in photoshop, 1000px wide, 1200px high, and click OK.

When I make a website usually what I do is I get the basic layout sorted out. As in, where I want to put everything, and usually the basic color scheme. Now for this tutorial, I decided to use a nice blue color for the background. So the first thing I want you to do is fill the background layer with a nice subtle #369abc. So far so good, so now, make a selection as I have done below, (at the very top of the document) and using the fill tool, fill it with #1d1f1b on a new layer. Rename this layer to “menu”. You can now deselect this selection by pressing Ctrl+D or Command on a mac.

Next I made another selection. I didn’t want this design to seem monochromatic, so I decided to go for a nice purple color. So go on, and make a selection like below, and fill it with #7e103c on a brand new layer. Rename this layer to “Information” afterwards. Deselect this selection.

Now lets make another selection, right beside the previous one (same height), and fill it with #2e3335 on a new layer. Rename this layer to “Selections”. I know these colors seem to clash but we’ll fix that later. Now deselect this selection

Next I decided to add a nice rounded rectangle below that, for putting the main content into. Grab your rounded rectangle tool, and change your foreground to #fff. Quickly now, we don’t have all day. Now look at the top toolbar. That’s right, the toolbar at the top of photoshop. This’ll change everytime you pick a different tool. It’s full of all sorts of whacky gizmos that let you change what happens when you use the tool. You’ll notice an option called Radius. Turn this down to 4px. Then draw a rounded rectangle as I have done below. The radius is just how big the corners of the rounded rectangle will be, really. You can call this layer “Content”.

Now we’re almost done with this step, all you have to do now is add a final rounded rectangle to the bottom of the document, in #1d1e19. Call this layer “footer”, and lets move on.

Okay so lets start refining some of the parts of the design. I think a good place to start would be on the purple bit, and then the part beside that. So first of all, what you want to do is select the “Information” layer, and go to Filter » Noise » Add Noise, and give it these settings:

Now go to Filter » Render » Lighting Effects, and give it these settings:

Next what you want to do is create a new layer, and call it line. Make a selection as shown below, and fill it with #0c0c0d. Deselect this selection.

Drop opacity on this layer down to around 40%. Next I added some text to this section of the web design to sort of finish it off. I’m using two serif fonts: the font on top is called “Contra”, while the one underneath is called “Liberation Serif”. We also have an interesting article on 20 great (free) serif fonts, which you can find here. Lets keep moving, however. The top font, Contra, (as shown in the picture below), is in size 61pt. “A fantastic” and “way” are in #f2c2d5, whereas “new” is in #3b0c1f. Anti Aliasing is set to Sharp. The text below that, as mentioned before is in Liberation Serif, only in size 26pt. It’s also in #210611.

Right click on this text layer, and select “Blending Options”. Go to Drop Shadow, and give it these settings:

Now lets move onto the bit beside the purple part. Hold ctrl (command on a mac) and click on the thumbnail of the “Selections” layer in the layer palette. A selection of this layer should be made. Make a new layer, and grab the gradient tool. Set your foreground to #131415, and draw a gradient like below (using the foreground to transparent gradient). Remember, if you hold shift, the gradient line will snap to the nearest straight line, making a straight gradient. Try it.

Deselect the selection, and make another new layer. Make another selection, as shown below. Fill this new selection with #585f65. Rename this layer to “Selected”.

Don’t deselect this selection just yet. Grab the gradient tool and make a new layer. Set your gradient to foreground to transparent, and set your foreground to #8a939b. Then draw a gradient, as shown below:

Make a new layer and call it arrow. Grab the pencil tool, and set its diameter to 1px. Sample around the middle of the “Selected” layer using the sample tool, and using the pencil tool, draw a shape as shown below.

I then added some text to this section. I’m using the font, Georgia, bold, in Size 18pt and #ffffff. I’ve also set Anti-aliasing to none.

Finally, to finish off this tiny section, make a selection as I have done below, and then on a new layer fill it with #101012. Then deselect it. Set opacity on this layer to 10%.

To start this step we’re going to make a tiny 2px high selection just at the top of the purple section, as shown below. Remember, it’s the little things that count. Make a new layer and fill this selection with #9ecfdf.

Grab the gradient tool and set your foreground to #9bd3e7. On a new layer (put this new layer below the menu layer in the layers palette), draw a gradient as shown below using the foreground to transparent gradient (no selection needed)

Lower opacity on this layer to about 50%. Make another selection as shown below, (its about 4 or 5px high). Then on a new layer, fill this selection with #0b0b0a, and lower opacity to 25%

Next, add some text to the menu. The text I added was in Arial, Size 16pt, in bold, with anti aliasing set to none (in #ffffff). Also notice how the text is in line with the rest of the layout (see the blue line?)

I then added a little arrow, using the pencil tool again, and the same technique as we used before. Simply zoom in, use the sample tool to sample the Line below the menu, and draw the arrow. Here’s a screenshot:

I then added a little logo. To do this, grab the rounded rectangle tool and draw a small rectangular shape (I had radius set to 5px for this one), as shown below. It’s in #1b5e77, by the way. Then, using the Contra font, I wrote “Webtint” in size 50pt, in white (#ffffff). Find the “A fantastic new way” text layer, and right click on it. Select “Copy Layer Style”. Then go back to the “Webtint” text layer you just made, right click on it, and select “Paste Layer Style”. You should have something like this:

Rename the rounded rectangle you drew for the logo to “logo base”. Grab the type tool again and write “W” in the contra font again, in Size 84pt this time. Put it on top of the “logo base” layer. Now go to Windows » Characters. A box should pop up. Find the icon which is sort of like a stretched out “T” with an arrow pointing both ways below it. Hovering over it should display “Horizontally Scale”. Set this to 87%. This is what you should have at this point:

Now right click on the “logo base” layer and select “Rasterize layer”. Hold ctrl (command on a mac) and click on the thumbnail of the “W” text layer you just made. Then with the “logo base” layer selected, press delete. You can go ahead and delete the “W” text layer now. You should have this:

Make a selection of the logo base layer by holding ctrl and clicking on its thumbnail. Now grab the gradient tool, and set your foreground to #0a3646. Change the gradient to the “foreground to transparent” gradient, and draw a gradient on a new layer, as shown below:

Dont deselect just yet. Go to Select » Modify » Contract and set the amount to 2px. Set your foreground to #0a2f3c, and using the foreground to transparent gradient again, draw the following gradient on a new layer:

You should have something like this:

Now that that’s done, lets move onto adding some of the main content to this design.

Next thing I did was added a nice little warning box, just at the start of the Content section. To do this I made a selection as shown below, and fill it with #fff9cc on a new layer. Dont deselect just yet.

Now grab the gradient tool, set your foreground to #ebe19e, and draw a gradient, as shown below on a new layer, using the foreground to transparent gradient.

Okay, now you can deselect. Grab the pencil tool and draw a 1px line along the bottom of this warning box, as shown below, in #c7be84, on a new layer, of course.

I then added some content to this warning box. The icon im using below is out of the free function icon set which you can find here. The text is in Georgia, size 16pt, in #5d5520, with anti aliasing set to none.

Next I added some text and two more icons, again, from the free wefunction set i linked to before. The text is in georgia, no anti-aliasing. The top line in both cases is size 23pt, in #2c3135, whereas the bottom line is size #777d83, in #777d83.

Underneath the “Download” bit, I added some text in Tahoma, size 14pt, with no anti-aliasing, in #555b60.

Underneath the Floppy disk bit, however, I added a form. First I added the text..

Then I added a rounded rectangle with a radius of 5px, to act as an input in the form:

Right click on this rounded rectangle layer, and select blending options. Give it these settings:

Continue adding these rounded rectangles, as shown below. You can simply copy the layer styles and paste them by right clicking on the rounded rectangles as we did earlier, instead of re-doing all the settings. I added a green one at the end, which will be a submit button. This uses the same blending options (minus the stroke) as the other rounded rectangles, only the color is #7a8b1b, instead of #ffffff.

Another touch I added was a search bar to the menu at the top. It uses the same blending settings as used in the previous rounded rectangles, only I added some text to it saying “Search for Something here”. This text is in Arial Italic, size 15pt, in #858585 with no anti-aliasing. Again, notice how it is in line with the rest of the design (blue line.)

Finish up by adding some text to the footer, as I’ve done in the final image, as shown here. The text is just in #ffffff, with no anti-aliasing in size 14pt. I added a few more final touches to the web design, such as text in the form. These are completely optional. Don’t be afraid to add your own touch. Here’s the final image: