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
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.)
1 2
Recent Comments