Making Templates & Features

zoll3

New Member
Reaction score
16
[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.

image001.jpg



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.

image003.jpg


5) Make sure that Layout Background layer is selected and add a Pattern Overlay effect with following settings.

image004.jpg


6) Your canvas will now look like following.


image006.jpg


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.

image008.jpg


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.

image010.jpg


9) Now go to Edit Stroke and add a Stroke of 1 Pixel Red color as shown in the following figure.

image011.jpg


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.

image013.jpg


12) Grab the Gradient tool and draw a gradient as shown in the following figure. Now your canvas will look like following figure.

image015.jpg


13) Set your Foreground color to #A69997 and draw a shape with the Polygonal Lasso Tool as shown in the following figure.


image016.jpg


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.

image018.jpg


15) Make sure the Layout Header Shape layer is selected and add following Bevel & Emboss settings.

image019.jpg


16) Now your canvas will look like as shown in the following figure.

image021.jpg


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.

image023.jpg


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.


image025.jpg


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

image027.jpg


21) Grab the gradient tool and draw a selection, as shown in the following figure.

image029.jpg


22) Now go ahead and create your links for the navigation bar. I have achieved something like this.

image031.jpg


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.


image033.jpg



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.

image035.jpg


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.


image037.jpg



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.

image039.jpg



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.

image041.jpg


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.


image043.jpg




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 !
 

mase

____ ___ ____ __
Reaction score
154
You could have used a better color scheme isntead of about 5 different colors ><
Also the logo could have been better.
 

zoll3

New Member
Reaction score
16
Yeah i know , but i said it was a basic one .. this was what i was doing for about 4 years ago .. and as i said i will come with alot more experienced tutorials about more experienced websites .. this was a basic one for beginners in html , and photoshop layout creating ^^
 

Oninuva

You can change this now in User CP.
Reaction score
221
Now, just the slicing is needed for people to actually "make" the templates. And where are the features?

__________________
Jonathan
Hosting Tutorial
I am not allowed to link to this. O well, your loss not mine.
Elite Footmen
 

Demi666

New Member
Reaction score
127
didnt work for me :O

didnt get the pattenr thingy it just stayed black :O may i ask why :O?=
 

zoll3

New Member
Reaction score
16
You mean you coudlnt make the path the same colour ?? .. hmm , plz explain more what u are up to ! ;) there was some faults in that , or im not a good reader .. what do i know .. deep ur question plz ?^^
 

Prometheus

Everything is mutable; nothing is sacred
Reaction score
591
How did you do the text?
I have no idea how to do the glowey white light.
Elaborate please
 

zoll3

New Member
Reaction score
16
You mean the Gamer Zone text with the recon over it ?? .. easy ,

Just make default background image to the recon and push it over the text ..
 

ReVolver

Mega Super Ultra Cool Member
Reaction score
608
>Requirements:
Photoshop Cs2
Little Knowledge
Eyes
Readable

Do you really need Photoshop Cs2? I have Photoshop 7 and it can do the same thing.
 

Demi666

New Member
Reaction score
127
You mean you coudlnt make the path the same colour ?? .. hmm , plz explain more what u are up to ! ;) there was some faults in that , or im not a good reader .. what do i know .. deep ur question plz ?^^

its prob me thats to dumb, but when i created the secound layer all went black :/ i tried many things, transperacy etc also to make it under then first layer but it didnt work :eek:
 

zoll3

New Member
Reaction score
16
sorry i have been very inactiv on this thread.. my internet broke down and havent been online .. well if any still got questions .. ask , i will be more online now.



EDIT:

By the way.. next week i will make a competive tutorial about uploading and hosting a complete CMS website , without all the wierd HTML coding .. and later on in the future i will make tutorials about making FLASH banners and making other homepage stuff....
 
General chit-chat
Help Users
  • No one is chatting at the moment.

      The Helper Discord

      Members online

      No members online now.

      Affiliates

      Hive Workshop NUON Dome World Editor Tutorials

      Network Sponsors

      Apex Steel Pipe - Buys and sells Steel Pipe.
      Top