Make a layout? hmmm

[God..]

Hi,

yesterday I saw Redtom make a layout, hmm. I want to know how he did that? is there any easy - to - use tuts?

thanks!

[Kazco]

Hi,

yesterday I saw Redtom make a layout, hmm. I want to know how he did that? is there any easy - to - use tuts?

thanks!

Yes, if anyone can find one it would be good, as I wish to learn how to code too.

[God..]

Yes, if anyone can find one it would be good, as I wish to learn how to code too.
This isn't coding

This is layout making :P

[Kazco]

This isn't coding

This is layout making :P

Layout making is what I meant, sorry for the confusion.. again :P

[Pazza]

Okay, here comes a lame explanation:

To Make The Layout:

1 - Go into a graphic design program [Paint, Fireworks, Photoshop ETC.]
2 - Get the simple out line of your design.
3 - Add content boxes and 1 box bigger that the other for main content.
4 - Fill in colours that suit the purpose [Habbo - orange,blue ETC.]
5 - [OPTIONAL] Add some images, for Habbo Add habbos etc.
6 - When you've finished the layout, add a banner.
7 - Make sure there are no pixel errors and you have the simple layout.
IMPORTANT- Make sure the dimensions arent too big or too small.

Coding Your Layout:

1 - Use a program like Macromedia Fireworks to 'Slice' your layout.
2 - There will be a button on the side like this: http://nmc.loyola.edu/intro/planning/images/inFireworks.gif
3 - Use it to make a square inside the content boxes and this is where the content of the boxes would go.
4 - After you think you have sliced appropiately, on the top right corner click export to dreamweaver and put it to a file of your choice.
5 - Now open a program like Dreamweaver, Frontpage.
6 - You will notice there are outlines where you can write in, this is the simple sliced layout in HTML.
7 - You can add content in them boxes and upload all of the files to a webhost.
8 - If you want to make your layout even better, make the main content box an IFRAME.
9 - For some HTML Codes try: http://www.tizag.comor http://www.htmlgoodies.com.

I hope this Helped you!!
I've sat here for 15 minutes writing this haha.
;)

[redtom]

Or...

Open photoshop (yeah get it or your basicly going know where fast with web design) create a new document, by know you should already know what you going to design, if you don't have anything in mind learn to code and do that. Now you've got your idea, Hmmm... lets say for this example a personal portfolio, well to me it should be clean, very user friendly, good to look at but nothing amasing. okay so now I've thought about it lets get to work, as it's a portfolio I don't really want to have a fancy banner just a logo will do or a logo on a simple gradient, okay so thats done (btw I design it all in colour most of the time instead of doing it black and white and then changing it to colour like people say to do.) we're moving down the page whats next? the navigation and content, now as it's a simple layout and it's a portfolio I'm just going to do a simple text navigation, and as I've seen in most simple blog/profolio layouts the navigation is normaly found on the right so lets not be diffrent and do it on the right now add text to the left and wow we've done a layout. (oops forgot to say keep the background white and the text grayish there done!)

Design is not somthing you instantly good at you have to practise for ages, so take every tut you find, mess around with photoshop see what happens, whats good and whats not, athough if you don't have an idea of what your going to design before you design it then I suggest you take up coding, I find it much easy to get into then design and basicly easyer over all as its all the same over and over again un like design when it all has to be diffrent =[.

[Pazza]

Redtom,

You just stole my precious glory moment :(

[Nemo]

Redtom,

You just stole my precious glory moment :(
its k, i think your explanation was better.

[Pazza]

Thankyou for that, Ive found a good explanation :

http://www.habboxforum.com/showpost.php?p=4061808&postcount=5
:P
Read my grueling one ^^^^^^^^^^^
Or maybe Tutorialised has one?
http://www.tutorialised.com

[redtom]

Redtom,

You just stole my precious glory moment :(

Haha sorry lol =[


its k, i think your explanation was better.

Yeah it was. (if you talking about his)

[Nemo]

Haha sorry lol =[



Yeah it was. (if you talking about his)Yup i was talking bout his

[Pazza]

3 options:

My tut http://www.habboxforum.com/showpost.php?p=4061808&postcount=5
Search here: http://www.tutorialized.com
Or here: http://www.talk-mania.com/showthread.php?t=34682

[Yamini]

lolll you dont know how to make a layout. -rep noob

[Pazza]

lolll you dont know how to make a layout. -rep noob

Your -repping me?

You got no rep power so it'll make no difference ;)
AND, atleast i try and contribute to this forum?
So if anybody's the noob here,
Its You!

[iTechnical]

lolll you dont know how to make a layout. -rep noob

Better than you could >_>

My tuts better though :eusa_danc

Design
Slice
Code
Upload (H)

[God..]

I can code, but I can't make a layout, it's a weakness.



lolll you dont know how to make a layout. -rep noob

Why give him a -rep? your the only noob around here.

[Pazza]

Read my tut read my tut !!

http://www.habboxforum.com/showpost.php?p=4061808&postcount=5

Has some links for you to get started, if you cant code only use the top half. If you think my tut is crap do this:

http://www.habboxforum.com/showpost.php?p=4061997&postcount=12

[iTechnical]

I can code, but I can't make a layout, it's a weakness.




Why give him a -rep? your the only noob around here.

Agreed.

[God..]

Read my tut read my tut !!

http://www.habboxforum.com/showpost.php?p=4061808&postcount=5

Has some links for you to get started, if you cant code only use the top half. If you think my tut is crap do this:

http://www.habboxforum.com/showpost.php?p=4061997&postcount=12
Yeah, I will, thanks mate +rep <3

[Pazza]

Yay, TY

Also Kazco, this should Help you aswell...

[Kazco]

Yay, TY

Also Kazco, this should Help you aswell...

Thanks a lot, I believe I'm still on 0 rep as I got -Rep... * REDTOM * for 'spamming'.

Anyway, thanks a lot, I will be following your lovely guide... Now, it's slicing time. ;P

EDIT: I'm on 1 Rep -Clap-! +Rep'ing now.

[Jamesy]

How do you make an IFrame?

[Kazco]

How do you make an IFrame?

Sorry, all I know is <iframe src, etc...> </iframe>

Don't know how to code it, I'll get my layout coded by luke xD

[Jamesy]

mmm. Anyone be willing to teach me how? :)

[rh4u]

Photoshop & Fireworks. Reccomended ;)

[Jamesy]

And a crapload of keygens if you are tight like me :D

[rh4u]

^^^^^
Pointless? :P:D

[Lycan]

Hi,

yesterday I saw Redtom make a layout, hmm. I want to know how he did that? is there any easy - to - use tuts?

thanks!

Hi Nick,

Please contact me ASAP :)

[Rockstar]

Hi,

yesterday I saw Redtom make a layout, hmm. I want to know how he did that? is there any easy - to - use tuts?

thanks!

How could you watch him make a layout!

[Kazco]

How could you watch him make a layout!

Redtom's coding video?

Found here:
http://www.fovq.com/video.zip

[Jamesy]

Saw him post on here? I don't know. dammit, how the hell do iframes work. I sat here for like an hour trying to get it to work :(

[Kazco]

Saw him post on here? I don't know. dammit, how the hell do iframes work. I sat here for like an hour trying to get it to work :(

Theres currently a thread in the Coding section.

Was top when I last checked, it's got some html post's in it, check it out.

[Jamesy]

I have been :( I'll go look again :)

[Document]

Wow some of these [TUTS] people said on here helped me thanks

[chrisgocrazyH]

Okay, here comes a lame explanation:

To Make The Layout:

1 - Go into a graphic design program [Paint, Fireworks, Photoshop ETC.]
2 - Get the simple out line of your design.
3 - Add content boxes and 1 box bigger that the other for main content.
4 - Fill in colours that suit the purpose [Habbo - orange,blue ETC.]
5 - [OPTIONAL] Add some images, for Habbo Add habbos etc.
6 - When you've finished the layout, add a banner.
7 - Make sure there are no pixel errors and you have the simple layout.
IMPORTANT- Make sure the dimensions arent too big or too small.

Coding Your Layout:

1 - Use a program like Macromedia Fireworks to 'Slice' your layout.
2 - There will be a button on the side like this: http://nmc.loyola.edu/intro/planning/images/inFireworks.gif
3 - Use it to make a square inside the content boxes and this is where the content of the boxes would go.
4 - After you think you have sliced appropiately, on the top right corner click export to dreamweaver and put it to a file of your choice.
5 - Now open a program like Dreamweaver, Frontpage.
6 - You will notice there are outlines where you can write in, this is the simple sliced layout in HTML.
7 - You can add content in them boxes and upload all of the files to a webhost.
8 - If you want to make your layout even better, make the main content box an IFRAME.
9 - For some HTML Codes try: http://www.tizag.comor http://www.htmlgoodies.com.

I hope this Helped you!!
I've sat here for 15 minutes writing this haha.
;)



How do u slice okay??? i have cs3 but i click it and den what???

[Jamesy]

There is a little tool like the one here

http://nmc.loyola.edu/intro/planning/images/inFireworks.gif

[Beau]

Don't use Fireworks' coding feature. It'll code in tables, which will be incredibly bad for browser compatibility.

Use Photoshop, and code it in Notepad, using CSS.