The Art Institute Photoshop Template

Tuesday, 02 June 2009 13:09

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.