Website Layout Tutorial

Dont be harsh this is my first tutorial because you all said you wanted one :)

Here we go

Bielby's First 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: Make a background colour for mine im using ''07424F''

3: Make a new layer and find a nice colour that you want to make you're boxes out of i used ''6195A0''

4: use the Rectangular marquee tool (m) and at the top set 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''
http://www.animik.ca/images/tutorial...step_three.gif

5: Once you got it in place , let go of the mouse button and go to ''Select > Modify > Smooth''
http://www.animik.ca/images/tutorial...p_four_one.gif
A box should pop up asking the Radius use 5px
http://www.animik.ca/images/tutorial...p_four_two.gif
6: Them fill it with your colour ''6195A0''

7: go to Edit > stroke > 2px > ''07424F''

8: do this for the rest of you're 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 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 all you need to do is the same as you did for the bix boxes just put them inside the big boxes like get the Rectangular
Marquee tool and use fixes size and draw inside the box remeber you need to make a NEW LAYER EVERYTIME you do another box
them edit > stroke and use ''275B67'' as you're 2px stroke

12: Just keep messing with it untill you are 10px space from the outside of the box zoom into 1600 and set fixed size of
H: 10 W: 1 and check if you are there and vice versa

13: ok you've done all the boxes and it looks good eh? all you need to do is go round check if there is a 10px space and inbetween
the big blue boxes are 10px spaces this may take a while but its well worth it and make sure all the boxes are alinged

14: ok now you should have something 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 :)

good tut dude , very helpfull 10/10:D

Thanks man :)

Hmm not bad, but i personally wouldn't make a layout like htat i usually have my navigation on the left.

A pretty detailed tutorial,

Well done if it's your first + rep


Daza

Thanks

ye i was getting alot of PM's asking how so i made this :P

but a few days ago it was you asking how Lmao.

Daza

Haha i know xD

Submited it to pixel2life

Moree people vote xD

this is a very good tutorial man good job

Cheers dude <3

Bump :P

I cant do the bit where you get a little border around the box.

You should do a coding one now to go with that tutorial well done :) +Repage

I like how you explained it and used lots of images. good tutorial but the outcome isnt that great 9/10 for explaining
6/10 for outcome.

Lol

Thanks

I cant code or slice :(

:D Why dont u learn

im trying to :( any GOOD EASY simple tuts?

Goto danrichard.com goto articles and goto riting a tutorial read it and see if your tut is ok :D

that site has like 4 tuts :P

non about coding haha

http://img416.imageshack.us/img416/604/10zx1.jpg

Just aload of boxes atm, i tried, didnt go well :(

it looks good atm man keep it up :)

Bielby is now the expert lol :D =] Go bielby go bielby lol :D

lol im ace xD