HTML downloadable version also avaliable http://www.deviantart.com/deviation/44961892/


[highlight]NOTE:[/highlight]
1) Images maybe too dark as I was looking at the layout from my old computer and the images very tooooooo dark. I made this tutorial using my new computer and the screen is really bright so I apologize if the images are too dark.
2)You must be pretty familiar with how GIMP works as dont have pics for every single step as this tutorial is mostly your imagination.
3)Images maybe low quality from what they were designed to be since the file format of pics (to reduce file space) is .jpg. Thanks.
4)I would like to apologize for the delay as I've been sick and wasn't able to post sonner.

This is what we will be doing:
1) Planning and thinking
2) The Sketch
3) Navigation
4) Content Boxes
5) Slicing the layout
6) Adding content to HTML document
7) Making the style sheet

Before starting to create your site, you may want to consider the following. First of all you have to know, which kind of site you are going to make. Is it a designer site? Clan site? Car selling site? Or whatever. After considering that, your site must have a name. The name is one of the most important things. Your name must be easy to remember, and also when someone hears the name, the first thing they think about must be your site. Now you must ask yourself some things: Why? What do you want to say? To whom? What do other people benefit from it? What do you yourself benefit from it? Now you must think about the theme / colors for your site. To pick the right colors is also a very important thing to think about. In this tutorial I am going to recreate GimpTalk.com home page. I will choose some dark colors for it. Some dark Wilbur’s brownish color for shade probably / black / grey. After considering all those things, I think we can start making the layout!


Start of by making a new layer 900x600 and fill a new layer with the background color of your template.
Now take your Rectangular Selection tool and make a selection for you banner.
A banner is nothing more than a larger version of a sig thus I will not be going into much detail of how you should make a banner but I would like to say that make something that will compliment to the style and the color of your web page. If you don’t know how to make a banner find a sig tutorial and instead of making sig size canvas, make something like 900x160 (banner size). BTW my banner size is 900x160.


Now that we have the banner, make a new layer and then take your Rectangular Selection Tool and make a selection right below your banner as this is where the buttons will go.


Now take you gradient tool and with your foreground color to black and background color to something that compliments your style and banner, run a gradient. I used black and white.


Now we will stroke our selection to give it more depth. I personally don’t like using the Stroke Selection to stroke my selection instead I use a 1px default brush to draw the lines. To make it simple for us I’ll use the stroke selection from the edit menu. Select your button layer if already now selected and then go to Layers>Transparency>Alpha to Selection and with the selection selected create another transparent layer. Then go up to Edit>Stroke Selection and stroke the selection with a solid line of one pixel. If it works fine for you and looks nice don’t change the layer mode but for me it doesn’t do a stroke of one pixel thus I set this layer to Overlay. Experiment with your stroke layer to see what works best for you.
It may not be that clear but this put across a black canvas is clearly visible.
Right After Stroke:

After changing the Layer Mode:


Now for creating boxes the put text, pics etc in.
Start of by duplicating your button layer. Then to the duplicated, scale it for height so that the width is same as the button row but the height is smaller for the scaled layer. Note I will refer to this layer throughout the rest of the tutorial as maybe scaled, button layer or something of that sort so you should know that I’m referring to this layer.
Button layer duplicated:

Scaled afterwards ( please ignore the black space as it is not part of the scaling. Thanks. Tell me if I should clarify more.):


Very Important: Since we want to create a field for the content, rotated the scaled layer that you created by 180 degrees or upside down. Note again please ignore the black space since to save me time I rotated what is being displayed up.


Now depending on how you want to lay out your website, created using the scaled layer of buttons places where the content will go.
First we’ll define the size of the top of the content box where the title will go.
This is what we’ll be doing ultimately so if you understand/know where and how I’ll do it, please feel free to skip the next few steps.


First of all with the scaled rotated button layer selected, go to Layers>Layer to Image Size. Select part of the button content.

You should now be able to move the selected floated layer.

Move it to where you want to place it and align it with the other content of the layer so it looks like a whole.

This is what you should have now. Note this is only an example and you should define the dimensions to how big you want this contents box to be.


Now we will define the background of the contents box. You should at this point chose a color for the background of your contents box that will blend in well. The easiest way to chose a color is to zoom into to the scaled button layer and using your color picker, chose probably the second to last pixel from the color. I say this because the last pixel if you were following my directions is stroked and when we put this contents box together, we will want the “written stuff” to stand out.


After you’ve done that. Make a new layer and with the dimensions of your contents box defined, using the Rectangular Selection Tool , make a selection on your new layer with the dimensions that you have decided on. Fill the selection with the color you picked as you background color. Now make a new layer and stroke the selection (if the selection is not selected go back to the layer with the background for your content box and go up to Layers>Transparency>Alpha to Selection and then active the layer you just created) with white or complimentary color to your theme of one pixel and set to overlay or other mode that’s to your liking.



Now that we have ourselves the background of the contents box, we will now add the headers. Now duplicated your scaled button layer and places it above the background you just created. Make sure that your scaled button layer covers 1px of the background cause we don’t want to show two overlays. Do the same thing for the bottom (note you don’t have to cover 1px from the background layer if its not visible we’re applying this so that only one sharp line is shown for depth). Duplicate you scaled button layer and rotate it by 180 degrees and place it at the bottom of the background layer if you have to adjust the sharp lines feel free to do so.


Do this till you have what you were looking for as far as the layout. This is what I have so far: (mind the white boxes as those are for references)


Time to add text. Pick you text tool and using a [url]http://www.dafont.com/font.php?file=visitor]Pixel Font[/url] write the text for the navigation layer as well as the contents box.
Then draw one pixel lines by the height of your button layer and then duplicate them as many times to separate your button like so.
Also duplicate your scaled button layer and stretch it across the bottom as this is where you will be inserting the copyright information. This is how my canvas looks so far:


Optional Step Involves Javascript-
In a lot of websites when you scroll over a button, it either glows or some sort of effect happens. To make our buttons more interesting we will apply a glow to the buttons when scrolled over.
To apply a glow select your button layer below the banner and then go to Layers>Transperancy>Alpha to Selection and then make a new layer. With your foreground color set to white, apply a gradient to the selection on the new layer.


You should now have something like this:

Play with the opacity till you have something that you like when scrolled over. After you’ve got something that you like go to the layers dialog box and click the little eye icon next to your glow layer.


This is what you should have so far:


Now we will slice the images.
Now go to Edit>Copy Visible and paste the contents on a new layer. Then using your selection tool pick out different parts of the image and save them seperately. Note the background for the contents box should be widthx1px as you may want to use different size fonts when tying text and you will not want to have extra space left over. This is what you should have after you're done. For the sake of the tutorial I showed all the selection on a single page but you should do each selection one at a time and then save it as a new file. Having the canvas size defined for your image is pretty easy. When you have your selection selected copy it and then in the file menu go to new and then canvas size should be the same as the image. save all your images as either .gif or .png. I'd go with .png cause it has more colors. We need a transparent file format


This is what I have so far after selecting everything: NOTE some of my boxes very same length so I used the same image again when I coded
















Contributed by omgitstehjesus

-----

For beginning HTML users I suggest going with the free hoster Bravehost (http://www.bravehost.com). They have a text HTML editor and a WYSIWYG (what you see is what you get) editor so you can make a website easily without knowing to much code.
Also if you are making an actual website you should make a folder on your webspace called "Images" inside your root folder. Then when you call an image you can just call it from "\images\whateveritis.jpg" instead of calling it from another image hoster.
If you want to actually learn how to code HTML and make a full fledged interactive website I reccomend learning from HTMLGoodies (http://www.htmlgoodies.com). Its an amazing site that teaches you all about HTML you need to know.

-----


Now to code the website. Make a new html document and create a table with 1 coulmn by 4 rows with zero cell spacing & padding and align the table if the center. (NOTE [don’t need to read if you don’t have borders-skip this part] depending on how your web layout was made there maybe gutters, don’t know the exact term but on a lot of websites there are vertical borders on both sides if the layout is made to be in the middle. If that’s the case depending of if you want the copyright bar, buttons, or banner to be inside the bar, then create a table with 1 row and 3 columns and place your borders in the outer two columns and then create another table inside you middle column with 1 coulmn and 4 rows and follow below)


Now start placing you images in the table, just make sure you have the tables height and length defined or to auto fit. For me it was banner in the first row, navigation below that, contents space where I added another table to separate and get some more contents. And you should place your copyright in the last row. I’m not going to show you how to add each table. Just keep adding table and such till you have what you need. If you have any questions regarding tables and coding feel free to pm me. Now for those who don’t want to spend their time, you can take the source code from the html file that I’ve provided. To take the source code you shall Right click, and press View Source, Show the pages source or something similar to that (according to your browser). Then you shall Copy / Paste it over to your page. Now we just need to make a Style sheet for our page.

it looks all right now, but it needs a style sheet! A style sheet is basically a document that defines how a page will look. Belowis if you want to create it using code. A lot of website development softwares allow you to add this content without right codes by hand if you format the page. You just have to find page properties, background, text and such. If your programm does not have this follow the xample I’ve provided below.
Basic page > CSS width=589 height=442> 2. First we will define the background, write: body { background-color:#061B33; } Let us breake it up: body{ means that it is something for the body we will define. background-color:#061B33 Means that the background color for body will be #061B33. } Means that the body definations end. 3. Now for some more definations, write this: td, th { font-family: Arial, Verdana, Helvetica, sans-serif; font-size: 11px; color: #CCCCCC; } Let us also breake this up: td, th { Means that is it tds and ths we will define font-family: Arial, Verdana, Helvetica, sans-serif; means what font it is, Arial first, then if a guest don't have Arial, it will be Helvetica, and so on. font-size: 11px; Defines how big the text will be. color: #CCCCCC; Defines which color the text will be. } Means that td and th definations end. 4. Now for some link styles: a { color: #3366CC; text-decoration: none; } a:hover { text-decoration: underline; } I don't want to break it up, I think you got it now.

We are almost done, view the source code for your html, make sure you define the title. The title is what the browser displays in the top and also in the taskbar when you view a page. I don’t think I’m missing anything so I guess we’re doing. Make sure that you host all the pics and I would really like to see results as this was my first tut. Thanks for following this tutorial.

For beginning HTML users I suggest going with the free hoster Bravehost (http://www.bravehost.com). They have a text HTML editor and a WYSIWYG (what you see is what you get) editor so you can make a website easily without knowing to much code.

Also if you are making an actual website you should make a folder on your webspace called "Images" inside your root folder. Then when you call an image you can just call it from "\images\whateveritis.jpg" instead of calling it from another image hoster.

If you want to actually learn how to code HTML and make a full fledged interactive website I reccomend learning from HTMLGoodies (http://www.htmlgoodies.com). Its an amazing site that teaches you all about HTML you need to know.

Hope you dont mind all that input Man of Valor dont wanna hijack your tut or anythin. My results will be posted soon.


I would like to see results and if you have any questions, feel free to pm me or post right here.

HTML File: http://files.filefront.com/6380634

HTML downloadable version also avaliable http://www.deviantart.com/deviation/44961892/

XCF Files [NOTE I'm not that organized so they may not be in order and there are two files as I added text and some other stuff in seperate files. I had this all on one file but for some reason those files have become corrupted. Sorry]
http://files.filefront.com/textbpxxcf/;6384338;;/fileinfo.html
http://files.filefront.com/tutorialxcf/;6384337;;/fileinfo.html


RESULTS:

omg. thats gonna take long

Its not very detail but it is long.

I skimmed and didn't see anything about what image format to use. Here are some tips you might want to follow when saving images for web use:

NEVER have images that are too large. Saving as jpeg will cause color distortion and therefore layout distortion, often, if you're working with things like solid colors and gradients unless you jam the quality all the way up. Avoid this by making the image indexed with a low color count (optimize it based on how many colors are in the image. Those gradients, for example, would do well with 32 colors or so. A color analysis works wonders) with no dithering. The image will look exactly the same, but you may save it as a .png (be sure to turn off "save background color" [probably inaccurate wording here] in the png save options) for lower file size than a high quality jpeg, as well as consistency in the coloring.

That was a HUGE block of text with no bullets. But hopefully it made sense.

Wow, thank you for posting this tutorial! :h: I'm gonna try this and I'll post the URL to my result afterwards. Let me get something clarified: So after you get a HTML page done, then you copy & paste the HTML stuff into every new page you make?

Images are hosted seperately when you create a website so you make links on your HTML page for that will display the image. Download NVU its free and good. Thats what I used. Create the template. Then split the images and save as seperate files. Oven up NVU if thats what you're planning to use and play around a bit and you'll get the knowledge. Then create some table and such and post your stuff. The reason why we create tables is so that stuff can be displayed next to each other without spaces. If you have anymore questions feel free to ask.

I used .png for the final outcome. yes I know there are blobs of text but hopefully people will get what i'm trying to say.

i cant read all of that without getting bored lol

NOOO, WHAT HAPPENED TO THE IMAGES!!!!!! : : :

i will probably try this over christmas break since it is so long but it is definitely really good

Click

^^ That's mine, not very good, but still practicing..... :w: Again, thanx for this tut! My websites are gonna look way more professional now. Later instead of using tables I'll figure out how to position div boxes, but this works great, too.

Wow. This must have taken you a while. I will try it put when I get some time! Thanks for doing this by the way.

@sydney

Very nice. You should now consider making an HTML.

@sir hobo

Sorry but thats just the way it is.

everyone else please try as i would like to see if this tutorial was worth the long writing.

Of course it was!

I have a few questions.

# When it comes to the HMTL bit, what program did you use?

# You say the roll over effects on the buttons need JavaScript. Is this difficult to do?

# When you added the separating lines to the buttons, you said:



What tool did you draw them with?

# Would it be possible for you to supply the XCF file for this project, for learning purposes?

# How did you get the cool blue effect on the buttons in this?

Thankyou.

I did; that's the screenshot. :w: TY!

Nice tut Man of Valor, I really should work on my design concepts. The way I work normally tends to be more hit and miss ....

Personally I try not to use tables if I can avoid it, as they should be set aside for tabular data. Saying that though, I found designing with divs and spans instead of tables pretty hard at first :

Still, great job though :l:


I'd use good old notepad :w: (if I was still using Windows)

Edit: BTW

It's not so hard to do.

Java Script rollover

Personally I try to use CSS in place of Java Script, by using the :hover attribute to replace an image.

I'm using NVU. Its also free. You can download the portable version from portableapps.com or the regular installing version from download.com. Its pretty good.

Not that hard if you're familiar with HTML. denegibson Provided a link maybe that will help you.

Couple of tools you can use. The rectangular selection tool to do a selection of 1pixel x your desired height. The Default one px brush

Sure I'll upload the XCF shortly.

I didn't do that but its very simple for PS users. There are couple of ways of doing this. Blue background and then a white overlay or screen selection ontop. Maybe I will do a tut on that but more detailed than this one. :a:

I tried figuring out what they were but had no luck. Looked online and as far as tutorial and such, I found that divs are basically tables. I know thats wrong but can you explain it?



Do you know of any good free CSS programms?

Try this

I'll try and explain it a bit more later if you still don't understand.



I actually code everything myself so I couldn't say.

Let me google that one for you

Yes, I also use Nvu. Its pretty cool. Way better than Frontpage.



Thanks.

.

Thanks.



That would be awsome.

np. Glad I could help. :h:

I am an experienced HTML programmer and thought i would give some hints to people that want to get the most out of free hosting.

For beginning HTML users I suggest going with the free hoster Bravehost (http://www.bravehost.com). They have a text HTML editor and a WYSIWYG (what you see is what you get) editor so you can make a website easily without knowing to much code.

Also if you are making an actual website you should make a folder on your webspace called "Images" inside your root folder. Then when you call an image you can just call it from "\images\whateveritis.jpg" instead of calling it from another image hoster.

If you want to actually learn how to code HTML and make a full fledged interactive website I reccomend learning from HTMLGoodies (http://www.htmlgoodies.com). Its an amazing site that teaches you all about HTML you need to know.

Hope you dont mind all that input Man of Valor dont wanna hijack your tut or anythin. My results will be posted soon.

Best tutorial in the whole forum for a webdesigner!

Thank you so much. I will post my results later.

P.S.- This with Chocolate's image map tutorial will go well together.


-----

Thank you I'll edit my tut for this helpful information. Hope you dont mind.



Yes please try as I would like to see results. I'll go find the image map tutorial.

I use normal HTML how do I arange the images ??? ana make them clickable?