Tutorial Making Templates & Features

zoll3

New Member
[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 !
 

mase

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

zoll3

New Member
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.
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
 

zoll3

New Member
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
Staff member
How did you do the text?
I have no idea how to do the glowey white light.
Elaborate please
 

zoll3

New Member
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

Moderator
Staff member
>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
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
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.
  • Ghan Ghan:
    Test!
  • tom_mai78101 tom_mai78101:
    I must be in a test server.
  • tom_mai78101 tom_mai78101:
    Nice, Twitter tweets embedding now works
  • Wizard Wizard:
    Yup.
  • Ghan Ghan:
    Excellent.
  • Ghan Ghan:
    @tom_mai78101 Hello there.
  • Ghan Ghan:
    Tagging works in the chat too.
  • tom_mai78101 tom_mai78101:
    @Ghan Missed it.
  • Wizard Wizard:
    Still fixing things here and there. Added widgets to the portal, will make it match the ones here on the forum index tomorrow.
  • Ghan Ghan:
    The venerable World Editor Tutorials site has been converted to HTTPS at last.
  • jonas jonas:
    cool
  • jonas jonas:
    and I can even edit my messages, nice
  • seph ir oth seph ir oth:
    GENERAL CHIT CHAT, YOU ARE A BOLD ONE
  • Ghan Ghan:
    Hello there
  • The Helper The Helper:
    this new chatbox is great and the forum software update is great too
    +1
  • The Helper The Helper:
    upgrade has fixed forum registration spam problem
  • tom_mai78101 tom_mai78101:
    Something tells me we might be able to customize the chatbox a bit, considering that there's a gap under every message.
  • Wizard Wizard:
    Going to deploy a fix soon, just had to take some time for myself this weekend.
  • Varine Varine:
    Unbelievable. Time for yourself? How dare you!
  • Wizard Wizard:
    xD
  • tom_mai78101 tom_mai78101:
    Hm, it is now harder to type anything on an Android phone. Pressing Backspace or Enter keys will dismiss the Android keyboard for some reasons.
  • tom_mai78101 tom_mai78101:
    Just noticed there's a delay of at least 2 minutes before each post. Guess I can't post Headline News quickly as I used to.
  • tom_mai78101 tom_mai78101:
    As far as I can tell, there are definitely things I need to get accustomed to first.
  • Varine Varine:
    FCC is cracking down recently

    Members online

    No members online now.

    Affiliates

    Hive Workshop
    Top