Tutorial Making Templates & Features

Discussion in 'Webmaster Tutorials and Resources' started by zoll3, Jun 7, 2007.

  1. zoll3

    zoll3 New Member

    Ratings:
    +16 / 0 / -0
    [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.

    [​IMG]


    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.

    [​IMG]

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

    [​IMG]

    6) Your canvas will now look like following.


    [​IMG]

    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.

    [​IMG]

    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.

    [​IMG]

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

    [​IMG]

    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.

    [​IMG]

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

    [​IMG]

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


    [​IMG]

    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.

    [​IMG]

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

    [​IMG]

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

    [​IMG]

    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.

    [​IMG]

    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.


    [​IMG]

    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

    [​IMG]

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

    [​IMG]

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

    [​IMG]

    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.


    [​IMG]


    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.

    [​IMG]

    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.


    [​IMG]


    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.

    [​IMG]


    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.

    [​IMG]

    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.


    [​IMG]



    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 !
     
    • Like Like x 2
  2. mase

    mase ____ ___ ____ __

    Ratings:
    +155 / 0 / -0
    You could have used a better color scheme isntead of about 5 different colors ><
    Also the logo could have been better.
     
  3. zoll3

    zoll3 New Member

    Ratings:
    +16 / 0 / -0
    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 ^^
     
  4. Oninuva

    Oninuva You can change this now in User CP.

    Ratings:
    +224 / 0 / -0
    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
     
  5. DDRtists

    DDRtists ɹoʇɐɹǝpoɯ ɹǝdns Staff Member

    Ratings:
    +413 / 0 / -0
    The slicing tutorial would be nice... ;)
     
  6. Demi666

    Demi666 New Member

    Ratings:
    +127 / 0 / -0
    didnt work for me :O

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

    zoll3 New Member

    Ratings:
    +16 / 0 / -0
    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 ?^^
     
  8. Prometheus

    Prometheus Everything is mutable; nothing is sacred Staff Member

    Ratings:
    +592 / 0 / -0
    How did you do the text?
    I have no idea how to do the glowey white light.
    Elaborate please
     
  9. zoll3

    zoll3 New Member

    Ratings:
    +16 / 0 / -0
    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 ..
     
  10. master maste

    master maste New Member

    Ratings:
    +32 / 0 / -0
    Thanks zoll3 +rep :) (gotta spread it around again)
     
  11. ReVolver

    ReVolver Moderator Staff Member

    Ratings:
    +608 / 0 / -0
    >Requirements:
    Photoshop Cs2
    Little Knowledge
    Eyes
    Readable

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

    Demi666 New Member

    Ratings:
    +127 / 0 / -0
    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:
     
  13. Miz

    Miz Administrator

    Ratings:
    +430 / 0 / -0
    +rep :D

    Very good tutorial
     
  14. master maste

    master maste New Member

    Ratings:
    +32 / 0 / -0
    hard to use it now since I can't see the pictures anymore. :(
     
  15. MeRcChRiS

    MeRcChRiS .

    Ratings:
    +126 / 0 / -0
    Why does it seem like I've seen this somewhere. Rip off.. =O
     
  16. sqrage

    sqrage Moderator Staff Member

    Ratings:
    +508 / 0 / -0
    Make a cut and code one now. :]

    This is helpful.
     
  17. master maste

    master maste New Member

    Ratings:
    +32 / 0 / -0
    nvm I missed a step.
     
  18. zoll3

    zoll3 New Member

    Ratings:
    +16 / 0 / -0
    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....
     
  19. PurgeandFire

    PurgeandFire zxcvmkgdfg

    Ratings:
    +513 / 0 / -0
    Erm... Where did the pictures go? :p
     
  20. master maste

    master maste New Member

    Ratings:
    +32 / 0 / -0
    probably got deleted?
     

Share This Page