Website Layout Tutorial

[Bielby2ooo]

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''


5: Once you got it in place , let go of the mouse button and go to ''Select > Modify > Smooth''

A box should pop up asking the Radius use 5px

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

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

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

[beddy]

good tut dude , very helpfull 10/10

[Bielby2ooo]

Thanks man

[D3stroyer]

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

[Bielby2ooo]

Thanks

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

[D3stroyer]

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

Daza

[Bielby2ooo]

Haha i know

Submited it to pixel2life

[Bielby2ooo]

Moree people vote

[My3tery]

this is a very good tutorial man good job

[Bielby2ooo]

Cheers dude