:p Learn How to do :Habbo Style Layout Tutorial (iFrame Version):enjoy :P

[v3nky]

hello guyz..as most of u looking for habbo theme website..i decided to make tutorial for u guyz!.. i hope u will like it.. add in habbo uk v3nky
give me ur comments about the tutorial..thnx

{sori guyz...i cannot add all the pics...habbox onli allow to add 15 pics..}



Notes: This tutorial requires Adobe Photoshop (CS recommended as this is the only version that it's tested on) . A piece of paper, or the program Notepad is required, along with Microsoft Frontpage (only tested on Frontpage) or Macromedia Dreamweaver (not tested on Dreamweaver) . You should use MS Paint or another graphic program to draw "Blue Prints" for the positioning of the box(es).
Tutorial:


Step 1
Create a new document (File -> New) as follows...


Step 2
Look at the "Navigator" box, notice that the view is set to 50%, or any other number, set it 100%.

Step 3
Select the "Rectangular Marquee Tool" or press M on your keyboard. Then select "Fixed Size" from the dropdown box




Two input fields should appear, fill in the width and height of the banner (I usually start with the banner, or just follow the blueprints) In this tutorial, we'll be making a medium sized layout, so about 500 px in width and 150 in height, you can however, choose whatever you wish. Place a Marquee box near the top of the canvas (workspace).

Step 4
Go to the following (Select -> Modify -> Smooth) :



A box should pop-up, it will ask you to input the "Smooth Radius" select 5, 10, or 20, I'd recommend 5 px





Hit "OK" (but you knew that, right?)

Step 5
Select the "Paint Bucket Tool" or press G on your keyboard. Then, press D to set the colors to default. Click anywhere in the Rectangular Marquee box, it should turn black, the default color. Once it's filled, right click on the canvas (workspace) and click deselect to take off the box (or just press CTRL + D to deselect). Then go to the following (Filter -> Stylize -> Emboss):



A new box should pop up, make sure you fill it in like below before hitting "OK" (you can change the height, but I recommend it at 2 or 3).




Step 6
Time to add some color, unless you want to keep the grey.... Anyway, hit CTRL + U together, a box should appear like below:


Make sure you "tick" the Colorize check box which would lead you to this:





Step 6.1 *Important Step*
Open up NotePad, hopefully, you should know where it is. Or you can open and other text editing program. Before you hit "OK", make sure you write/type/enter the values from the Hue/Saturation to NotePad to make your layout the same color, unless you want different colored boxes, skip this, but if you don't, write it down, so for me, it'll be like"

Hue: 100
Saturation: 25
Lightness: +45

This will help once I do my other boxes so they will have the same colour.

Step 6.2
If you want a nice light and pale green, enter the correct values, however, play around with it until you get something that you like. It's pretty straight forward. Hit "OK" once you have read step 6.1.

Step 7 (Optional)
This step isn't nessearcy, but I use it all of the time. You might want to "Stoke" your box. Basicly, it gives it a border with any color. go to "edit" then "stoke"


A box should appear like below:




Before you do anything, read first. Okay, well, first, make sure that it's set to "OUTSIDE" or else it'll look wrong. Secondly, experiment with other colors. What I did was take the color of my banner box and make it darker, but some colors that I'd recommend is black, grey, light grey (if you have a light color) or dark grey for darks. Or just take your original color and darken it like I did. Once you've got it, hit "OK" and remember you can always go back using the "History" box. Save as you go along aswell.

Progress Check (a little something in between to show you what you're supposed to have at this point of the tutorial)
By here, (the end of step 7) you should have the following box on you're canvas anywhere, it can be any size just to let you know. It doesn't not have to be the same color, if something is wrong, then check back, or send me an e-mail at venkatesh_991@ h :::tmail.com.




Step 8
Now, you know how to make the boxes. Now, make the content and navigation. Remember, they should be the same colors, and it should all be ina box form. Make your content box big enough for an iFrame to fit. Make sure it's evenly spaced out, so in this case, since I made my smoothing ammount 5 px, then each box must be 5 px away from each other. The content can do directly under the banner, and other boxes can go on the right or left, I'm going to use the right for this layout. Remember that each box MUST be on it's own layer, to add a new layer look below:


Progress Check Two
By here, (the end of step 8) you should have the following box on you're canvas anywhere, it can be any size just to let you know. It doesn't not have to be the same color, if something is wrong, then check back, or send me an e-mail at venkatesh_991@ ::::hot ::::mail.com.





Step 9
Now time to add some style, you can add headers and footers and label them as so:




To add the headers and footers, you need to zoom in to 1600%. Then, go 5 pixels down from a point in the top and bottom of the box like so:


Once you've got the line all the way (make sure it's the same color as the border) now fill it in with black (the header that you drew) make sure you set the Opacity to 20%

Step 10
Once you've got all of the headers done, add the text, use a nice pixel font such as "RotoCap". Add text to the header only if you use and make sure it's evenly spaced on each header. Like I did.

Step 11
Time to add the banner, this is when it gets tricky. First, zoom up to 1600% and select the whole banner box excluding the header and footer, and the border, should look something like this:


Now hit CTRL + C together and make a new document: File -> New . Before you hit okay, open up your NotePad with the Hue and Saturation, type in the width below it, so for me it's 500 px width and 152 px height. Don't make a new document, close that box. Now open you're favorite browser and log on to www.habbohotel.co.uk or other habbo websites... We're going to take a screenshot for our banner background. You can log on to .co.uk or any other ones. To take a screenshot, hit Prt Scr on your keyboard, near the top or beside the F12 key. Now go back to Photoshop and File -> New and click okay, then CTRL + V to paste it.

Step 12
Press M for the Rectanguarl Marquee Tool and set it to "Fixed Size" and enter the width and height like in your NotePad and find a good spot, then CTRL + C to copy, then go to File -> New and hit "OK" then CTRL + V to paste. Use the text tool to add your website name, add some effects like Scanlines or other patterns. You can edit the "Layer Style" of the text or add pictures of Habbos.

Step 13
Select the whole banner that you made and use CTRL + M to merge the layers together, to merge text layers, use the pencil tool on them and if it asks a Yes or No question, say Yes then merge it. Then CTRL + C to copy it. Open your layout and CTRL + V and but it in the banner box is it fits. Merge all layers together, and select the whole layout, CTRL + C to copy, and File -> New then CTRL + V and save you're final product. And you're done, here's the final product that I got:





Ending: Having troubles? Please send an e-mail to venkatesh_991@hot::::mail::::.com . A coding tutorial will be made soon, I may code some layouts, but it depends, once again, you know the e-mail.

[v3nky]

lol...i should post this thread in website Tutorial!... sori for posting in wrong place..

[Steven.]

Nice Tutorial, but i've seen it before on another site, and the Site owner did post it, Anyways it's not wrong section as you can't post threads in the Tutorial's section due to permissions, a Moderator must move it to the forum if they like it.

Thank's for reminding me of it though .

[Dentafrice1]

I Dont think your supposed to put ur emails in this do you? Correct me if im wrong

Kevin