Photoshop

Design Web Template

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

Create Web Template With Photoshop

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 Web Template With Photoshop
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.
Create Web Template With Photoshop
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.)
Create Web Template With Photoshop
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.
Create Web Template With Photoshop
Now in the Filters menu, go to Render > Lighting Effects…, change the Light type to Omni.
Create Web Template With Photoshop
Create Web Template With PhotoshopNow 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.)
Create Web Template With Photoshop
Make another selection about 417×400 to the right, with just 3 pixels space in between them, fill the selection with white.
Create Web Template With Photoshop
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.
Create Web Template With Photoshop
On a fresh layer underneath the white boxes layer, fill the selection with a dark brown, (#7d3300.)Create Web Template With Photoshop

About the author

NadeemSMB

Leave a Comment


*