In this tutorial I will show you some easy steps to create a sleek template.
Step 1
First open up a new white document. My size is 1404×1300.
Step 2
Next using the Rectangle Tool (U) and this color: #161f24 draw a shape as I did. Do not fill the entire screen with it. Leave a part of the upper part alone for now.
Step 3
Now again using the Rectangle Tool (U) and a different color: #161e23 draw a shape in the upper part that we left empty in Step 2.
The difference between the colors of the 2 shapes is not that big but it is visible.
Step 4
Again using the Rectangle Tool (U) and this color: #0f1619 draw another shape as I did in the bottom of the screen. Here is where the copyright text will go.
Step 5
We will work on the bottom part first.
I will zoom a little bit so you can see what is going on here. Make a selection of the lower part then create a new layer. You will need next to use the Gradient Tool (G) set to Black, Linear Gradient and Foreground to Transparent. In the new layer click and drag from up to down to make a nice shadow effect over the bottom shape.
Step 6
Next using the Line Tool (U) draw a 1 pixel white line along the edge of the bottom part and then set the Opacity value of the white line to 10%.
Step 7
Next I will use the Helvetica Neue (Light) font and add some text in. I also set the Opacity value of the font to 50%.
Step 8
Now let’s get to work on the upper part and buttons.
Create a new layer and then make a selection of the upper part. Then as you did in Step 5 using the Gradient Tool (G) and the same settings draw a shadow as I did.
Step 9
Make another selection as I did. Now again using the gradient tool you will need to draw again from up to down but this time use a white color. Then set the Opacity value to 30%.
Step 10
Using the Eraser Tool (E) erase the left and right sides of the gradient you created in Step 9.
Step 11
Use the Line Tool (U) set to #de0000 and 1 pixel and draw a straight line as I did. The line needs to be set exactly over the edge of the upper part. I made a selection of the upper part so you can see what I mean.
Step 12
Same as you did in Step 10 with the gradient you will need to do the same thing to this line but first you will need to Resterize the layer before you can edit it.
Step 13
Next I want to make some light rays on the red line.
Make a new layer, using the Elliptical Marquee Tool (M) make a selection as I did.
Step 14
Fill the layer with the same red you used for the line and then go to Filter - Blur - Gaussian Blur and use a value of 4.1.
Step 15
Now you need to pres Ctrl + T to transform the shape a little.
Step 16
Last thing you want to do is to set the Blending Options to Lighten and duplicate the light layer 3 more time. Change the Opacity of the images and also maybe make them smaller or larger to make them different.
Step 17
It is time to make the buttons now.
First make a new folder and name it buttons.
To make the button we will use the Rounded Rectangle Tool (U) and set the Radius to 5 px. Color #bb0101. Draw a shape as I did. Keep in mind that I have zoomed in so you can see well.
Step 18
Using the same tool you will need to extract some of the shape by holding the Alt button while drawing the shape.
Step 19
Next double click on the layer to enter the Blending Options panel and use my settings.
Step 20
Next I will add the text. I used Arial font.
Step 21
Now we need to give a more 2.0 look to the button.
Make a new layer over the Home text and make a selection of the button.
Step 22
Using a white Gradient Tool (G) you need to draw from up to down in the new layer using the selection you just made.
Step 23
Next continue keeping the selection and go to Filter - Blur - Gaussian Blur and use a Radius of 3.0.
Step 24
Now you need to transform the gloss a little and then lower the Opacity of the gloss to 40%.
Step 25
Use the Elliptical Marquee Tool (M) and make a selection as I did.
Step 26
Create a new layer and fill the selection with white.
Step 27
Ctrl + click on the button layer to make a selection of the button. Press Ctrl + Shift + I to inverse the selection and delete the excess circle by simply pressing Backspace.
Step 28
Last thing is to set the Opacity of the layer to 10%.
Step 29
Next you need to use the Line Tool (U) set to white and 2 pixels. Draw a straight line as I did.
Step 30
Next use the Eraser Tool (E) and erase the left and right sides a little. You will need to Resterize the shape in order to erase the sides. Do this by simply click-in once with the Eraser Tool (E) anywhere on the screen.
Step 31
Now go into the Blending Options of this layer and use my settings.
Step 32
Next thing I will do is to duplicate the button 5 more times. Also I have changed the colors of the other duplicated buttons: Text color - Black and Button color - #69747b.
Step 33
Now duplicate all the buttons. I will use them to make a reflection so you will need to transform and move them lower. Keep in mind that I duplicated only the buttons and not the lights we just created in Step 29.
Step 34
As you can see in the lower image I have removed the text and the color from the 5 gray buttons.
Step 35
Next you need to Erase or better Mask the buttons to give them a reflection effect I have also set the Opacity to 60%.
Step 36
Make a selection as I did using the Rectangular Marquee Tool (M) and create e new layer over the reflection layer you just finished, select the Gradient Tool set to Radial Gradient and using a the same red color you used for the Home button make a gradient in the selection and set the layer to Soft Light.
Step 37
Now simply duplicate the layer you created in Step 36 and move it up.
Step 38
Next you need to repeat Step 36 and Step 37 for each button but this time make the selection white.
Step 39
Now that you are done with the buttons we need start giving shape to the template.
Using the Rounded Rectangle Tool (U) make a shape as I did. The Radius is still set to 5 px. Also the color used is: #d40101.
Step 40
Ctrl + click on the red shape you created and using the Elliptical Marquee Tool deselect a part of selection as I did.
Step 41
Next using a black Gradient you will need to create a new layer and fill the layer with the gradient as I did. And finally you will need to erase some of the gradient and also set the layer Opacity to 33%.
Step 42
Repeat Step 41 but this time make this spot of shadow in a different place.
Step 43
Last shadow you will add to the shape. Make a selection of the shape and fill it with some black. Use the Gradient Tool (G) for this.
Step 44
Next I will add some text: font used Helvetica Neue and also I have used as a mascot the hat that I also wrote a tutorial a wile ago.
Step 45
Next use the Rounded Rectangle Tool (U) with this color: #161f24 (same color as the background) and make a shape over the big red shape.
Also add your text in.
Step 46
Next step is to add more content to the template. Also I have made a simple logo just by using a font called Harrington and also I have added 2 boxes for login members.
To help me keep everything organized and lined up I used the Grid Lines That you activate by pressing Ctrl + R and dragging a line from the rollers. You can also hide and show the grid lines by pressing Ctrl + H.
Conclusion
I hope you learned some simple techniques to make a simple and good looking website design.
Keep experimenting and use what you learned here with your own techniques.
