Design Web Template in Photoshop

I’ll be showing you how to make a fun, creative web template in this tutorial, as shown below:

Create Web Template With Photoshop

1. The Background

First create a new document, for this tutorial I will be using 780×720. now fill the background with #f06502.

Create a new layer then with the Rectangular Marquee Tool, make a selection sized 20 pixels wide and the full height of the document, fill the selection with #fb9c03 and move it 20 pixels from the left side.

Move the selection 40 pixels to the right and fill it again, keep repeating this.
(Note: To move the selection 10 pixels at a time, hold SHIFT and press an arrow key.)

If you can’t seem to do all that, download this image, define it as a pattern then fill the background.
Merge the layers together and apply Filter > Noise > Add Noise, use a setting of 1.6.

Now in the Filters menu, go to Render > Lighting Effects…, change the Light type to Omni.

Now we’re done with the background.
2. Content & Navigation Area
Create a new layer, now make a selection about 180×400, fill it with white (#ffffff.)

Make another selection about 417×400 to the right, with just 3 pixels space in between them, fill the selection with white.

If both of these white boxes are on the same layer, you can center them by
1. Selecting Everything (Ctrl+A)
2. Copying Everything (Ctrl+C)
3. Pasting Everything (Ctrl+V)
Then deleting the old layer.
Now, Zoom in a bit to the corners of the white boxes, then make a square selection around both of the boxes only 2 pixels bigger in width and height.

On a fresh layer underneath the white boxes layer, fill the selection with a dark brown, (#7d3300.)
3. Underneath Details
In my ‘Under Bits’ group, I have the website title at the top left, the copyright down the bottom, and some circle shapes around the top middle.

So get the text tool and add in the text. I used the font Tahoma, 11pt & 12pt, #ffffff.
Now we’ll draw these nice circles..
I made my circles by brushing on the canvas, then making some circles with the Ellipse Tool, turn it into a vector mask and added layer styles.
If you know about the pen tool and paths etc, you can do that, but if not you can make them this way…
Create a new layer and with the Elliptical Marquee Tool make a few circle selections, fill them with #7d3300.

Now apply the following layer styles:
Inner Shadow
Inner Glow

Create another layer, make some rounded selections and fill with a lighter, more yellow color, I used #e99206, apply similar layer styles as the last layer.

4. Sidebar Text
Now let’s add in the text in the left sidebar.
With the text tool, make a selection pretty much the entire width and height of the side bar, write out your text.

For the word ‘Navigation’ and ‘Updates’ text I used Tahoma, 11pt, bold, #c8c8c8. For the links text I used the same except a darker color with an underline, #b9b9b9, and for the updates links, I used the same except non-bold and with an underline.
5. Content Area Details
You can add a small banner at the top if you want, but I can’t come up with anything good for it. All I added lastly was ‘updates’ text.

Create Web Template With Photoshop

Thanks for reading, you can also download the PSD file of this tutorial you can download from the link given below

-:- Download PSD -:-