PDA

View Full Version : Website Layout Tutorial



Bielby2ooo
17-04-2006, 10:46 AM
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/tutorials/habbo_style_layout/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/tutorials/habbo_style_layout/step_four_one.gif
A box should pop up asking the Radius use 5px
http://www.animik.ca/images/tutorials/habbo_style_layout/step_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/3408/tempfortut11fq.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/8633/templatewipwip7ey.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 :)

beddy
17-04-2006, 10:53 AM
good tut dude , very helpfull 10/10:D

Bielby2ooo
17-04-2006, 10:55 AM
Thanks man :)

D3stroyer
17-04-2006, 10:55 AM
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
17-04-2006, 10:56 AM
Thanks

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

D3stroyer
17-04-2006, 10:57 AM
but a few days ago it was you asking how Lmao.

Daza

Bielby2ooo
17-04-2006, 11:06 AM
Haha i know xD

Submited it to pixel2life

Bielby2ooo
17-04-2006, 11:31 AM
Moree people vote xD

My3tery
17-04-2006, 01:18 PM
this is a very good tutorial man good job

Bielby2ooo
17-04-2006, 01:30 PM
Cheers dude <3

Bielby2ooo
19-04-2006, 05:57 PM
Bump :P

Callum.
19-04-2006, 07:18 PM
I cant do the bit where you get a little border around the box.

DMB-Hosting
19-04-2006, 07:21 PM
You should do a coding one now to go with that tutorial well done :) +Repage

Sygon.
19-04-2006, 08:01 PM
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.

Bielby2ooo
19-04-2006, 08:07 PM
Lol

Thanks

I cant code or slice :(

Sygon.
19-04-2006, 08:19 PM
:D Why dont u learn

Bielby2ooo
19-04-2006, 10:12 PM
im trying to :( any GOOD EASY simple tuts?

Sygon.
19-04-2006, 10:59 PM
Goto danrichard.com goto articles and goto riting a tutorial read it and see if your tut is ok :D

Bielby2ooo
20-04-2006, 01:03 PM
that site has like 4 tuts :P

non about coding haha

Callum.
20-04-2006, 06:47 PM
http://img416.imageshack.us/img416/604/10zx1.jpg

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

Bielby2ooo
20-04-2006, 08:06 PM
it looks good atm man keep it up :)

Sygon.
20-04-2006, 08:44 PM
Bielby is now the expert lol :D =] Go bielby go bielby lol :D

Bielby2ooo
20-04-2006, 08:48 PM
lol im ace xD

Want to hide these adverts? Register an account for free!