[Tutorial] Making Templates & Features
Hey whats up? , im here now to make some few tutorials about making templates , headers , and logos ...
We will begin with a basic gaming template..
Follow through the guide , to obtain the acknowledge . Remember this tutorial is in Adobe Photoshop @ Cs2 .
Requirements:
Photoshop Cs2
Little Knowledge
Eaye
Readable
Making a Basic gaming template.
1)Lets get started. Start with a new file. RGB color mode, 1024 x 768 as shown in the following figure.
2) Hit D from you keyboard to set your foreground and background color to default colors i.e. Black and White.
3) Click on create New Layer button at the bottom of the layers palette to create a New layer, rename this layer as Layout Background.
4) Now hit Alt+Backspace from the keyboard to fill this layer with Black color. Your canvas will look like following figure.
5) Make sure that Layout Background layer is selected and add a Pattern Overlay effect with following settings.
6) Your canvas will now look like following.
7) We are going to create a layout design, which will fit in the center of the canvas. Now go ahead and grab the Rectangular Marquee Tool, and make a selection as shown in the following figure.
8) Now click on Create New Layer Button to create a new layer and rename this layer as Body and fill in the White color in it, you will have something as shown in the following figure.
9) Now go to Edit Stroke and add a Stroke of 1 Pixel Red color as shown in the following figure.
10) Now we are going to create the header for the website. Make sure your foreground color is set to #6A5B31 and background color is set to #3B331B.
11) Now grab the Rectangular Marquee tool and make the section as shown in the following figure. This will be the header Portion of the layout design.
12) Grab the Gradient tool and draw a gradient as shown in the following figure. Now your canvas will look like following figure.
13) Set your Foreground color to #A69997 and draw a shape with the Polygonal Lasso Tool as shown in the following figure.
14) Click on create new layer to create a new layer and rename this layer as Layout Header Shape. Hit Alt+Backspace to fill in the foreground color in the selection. Your canvas will look like following figure.
15) Make sure the Layout Header Shape layer is selected and add following Bevel & Emboss settings.
16) Now your canvas will look like as shown in the following figure.
17) Now keep ALT key press and drag the Layout Header Shape layer to make a copy of it.
18) Hit Control +T to Transform the layer and click on Flip Vertical. Place this layer on the top of your canvas. Your canvas will look like following figure.
19) Now go ahead and add the text (logo like), and some Gaming Related images to give more Realistic look to our header. I have achieved something like this.
Note: - Feel free to play with different pictures and placements.
20) Now we are going to create the Navigation Bar. Select the Rectangular Marquee tool and make the selection as shown in the following figure.
Click on Create New Layer Button to create a new layer and rename this layer as Navigation. Make sure your foreground color is set to #462507 and background color is set to #483410
21) Grab the gradient tool and draw a selection, as shown in the following figure.
22) Now go ahead and create your links for the navigation bar. I have achieved something like this.
23) Now we are going to create the left side navigation. Click on Rectangular Marquee tool and draw a selection as shown in the following figure.
24) Click on create new layer and rename this layer as Left Navigation. Make sure your foreground color is set to #233947 and background color to
#5E7F94 and draw a gradient as shown in the following figure.
25)Now go ahead and add some contents to your left side navigation.
I have achieved something as following. Again feel free to tweak settings, and feel free to user images as you want them to.
26) Now lets move on to the footer Portion of the layout. Go ahead and grab the Rectangular Marquee tool and make a selection as shown in the following figure. Create a new layer and rename this layer as Footer.
27) Set the foreground color to #E6E5E2 and background color to #9A9D84. Draw a gradient and complete the footer as shown in the
following figure.
28) Now the last things are we are going to create the body for the layout. I have used following sections for my body layout design
i. Welcome Text
ii. About company text
iii. Image
iv. Sub-Navigation to other games available
Note: I have also added a simple banner on the right hand side.
This was the gaming template tutorial , there will be more of that another day .. Im a little tired now so i wont post the logo , and header tutorial now .. i do that later or tomorrow , hope you enjoyed looking , and it might helped you .. then i would be very happy.
However , try look again here some other day , and i might have posted some more tutorials ^^
Good luck with making websites !
PS: Comments , Feedbacks , and more are totally appriciated !