Making Website Template Tutorial SIMPLE
Decided to make a BETTER and more UNDERSTANDABLE Tutorial this time
Lol here we go
Its based on my other tutorial just explaining more :)
Bielby's 2nd tutorial [Making a cool Layout]
Ok you need photoshop im using Photoshop CS
Ok here we go
1: Make a new canvas 800x800px , White
2: Choose a colour you want as you're background it needs to be a darker shade of teh colours you are using im using ''07424F'' This is a nice dark'ish blue colour as you can see. Fill the canvas with that colour isong the paint bucket tool [g]
3: Make a new layer [Layer > New Layer] and find a nice colour that you want to make you're content boxes boxes out of i used ''6195A0''
4: Use the Rectangular marquee tool (m) and at the top to Fixed size in the drop down box, Set the dimensions
if you want it to go all the way accross with a little space either end use '' Width: 775 Height: 150'ish'' This will be for you're banner
http://www.animik.ca/images/tutorial...step_three.gif
5: Once you have you're marquee in place we are going to make the edge's rounded if you want square boxes do not use this step but this makes the boxes look better in my opinion , Just go to Select > Modify > Smooth > 5 Px Radius in the little pop up box
http://www.animik.ca/images/tutorial...p_four_one.gif
http://www.animik.ca/images/tutorial...p_four_two.gif
6: Get out you're paint bucket tool [G] and fill it with you're colour of the content boxes ''6195A0''
7: After you have done that go to Edit > Stroke > ''07424F'' As you're colour > 2px size > Outside
8: Do this for the rest of you're content boxes remeber you MUST Make a NEW Layer for every box
9: You should have soemthing that looks like this
http://img111.imageshack.us/img111/3...fortut11fq.png
10:Now its time to add you're insides for you're content box'es all you need to do is pick 2 colours i would use a very light grey dark'ish white i used ''E1ECF0'' For the light colour and ''275B67'' for the dark
11: Now make a new layer and pick the rectangular marquee tool [m] and zoom into about 800% then highlight the whole box NOT including the stroke this can take a while to get right but gets easier
12: When you have it highligted go to Select > Modify > Smooth > 5Px like before and fill it with ''E1ECF0''
13: Deselect it [Crtl + D] Then get you're marquee tool back out [m] and highlight the top of it like so
http://img108.imageshack.us/img108/4...ghlight5zu.gif
14:Hold V And press down 10 time's on teh arrow keys that will get a 10 px gap or as many as you want do this on all the sides
15: Do it to all of these, Looks good eh?
Should look like this
http://img148.imageshack.us/img148/8...ewipwip7ey.png
15: Now the easy part text and pictures
16: Use a nice text like Visitor -BRK- and set colour to''4F6973'' then only write on the layer witch is the white box for the section you are going
to write on
17: after you're text just add pictures making a new layer everytime put them where you want and set the opicity down a little
18: You're done please show you're results in my thread on habboxforum :)
thanks alot
Bielby
Hope i helped :)
