designing template tutorial

[MandyJay]

Hi gang,
Have tried searching for tutorials on template design - but a no go. I dont want to know how to make the graphics, but more the best way to chop them up and how to best lay them out in tables etc so they will expand with resolutions etc .... now I know fireworks (I think) will chop them up for me and also even make the table, but I dont want that, I want to be able to do it myself .... know how to .... apart from the fact I havent got fireworks :D:

I did download a template to study its layout etc, and it confused me, in IE it looked perfect, but when I openend it it normal view of FP, the tables had gaps in the cells and the graphics just did not fit together at all - yet they did when viewed in browser - so I need to know best way etc
Ta everso

[justjay]

Hey MJ -

IMHO I don't think you are going to find a really good tutorial on this subject, because there are SOOO many things that you should, could, would do with each little and big step that you come to when it comes to building a template.....You might be better off getting an idea, and then drawing it out the old fashioned way - on GRAPH paper!! LOL

If you want to have free will on where and how you slice up a graphic - you might want to give Adobe Photoshop a try-see....I use that when I need to slice up a graphic...and I also play with the colours and pixel density there as well.....

Keep me posted on how you do with this venture....

[awasson]

Yup,

Photoshop's nice Fireworks too.

What you really need is a graphics program that works with layers. It's kinda like having tracing paper (or semi transparent layers) with different parts of your web page on it.

With layers you can either view them or not. This makes rollover states really easy to do. (I think Paintshop Pro works in layers as well).

Anyway, onced you have an idea of what you want it to look like you pretty much draw it in your graphics program and decide where you will cut it up. Things like Headers, Footers, Main Navigation, Content, etc...

At this point I look at it as if I were placing tables in my web page.

Sometimes you will need to remove a complete section of your graphic and save it as a seperate graphic file to further divide images and buttons etc...

There are so many approaches to this it's hard to explain it. I suppose it is time for a tutorial on templates huh

[MandyJay]

Thanks guys,
I do have Corel PHotopaint/draw 10 so no problems with graphic programme , but I suppose its knowing what table to design, i.e. size, cell sizes etc before I can chop up the graphic ..... there must be a standard size designers work to surely???

Yes, Andrew, that is definitely one tutorial to add to the list - it is the tables that is causing me problems - usually with my web pages I make the table fit the contents - only here with my graphic template that doesnt seem to work, I get all messed up, so need the template to fit the table ... but dont know what table to use ... think you get my drift.
Look at this link, this shows my confusion
template tables

[Nancy]

Boy did you open up the proverbial can of worms!!

There are certainly a lot of variables involved, and although I make a living doing exactly this very thing, I am not professing to being an expert. All I can do is tell you where/how I start. And hopefully, without writing a book here, I'll also tell you where I end up. *S*

I start in Photoshop. Paint Shop Pro or Fireworks would likely work just as well. Or any graphics program that handles layers.

I start with an image that is 750px wide and about 500px high. I use that width so that I know it will fit for monitors set at 800x600. Don't ask me why, but I always have a blank layer at the bottom of the stack. Then I start with working on what will be the header section. Maybe starting with a vector rectangle the width of the image, and about 100 px tall. Did I mention you should work with rulers or guides turned on?

Next I may work on the navigation area on the left. I will not end up slicing this area as I'll make a separate image, but I want to know how it is going to look so I do include it. Again a vector rectangle and will use color overlays just to get an idea of what the navigation buttons will look like with a rollover. Eventually I'll probably drag that layer into a small new image to turn into the navigation bar. Usually about 125 wide by about 20-25 high. This is a little smaller than most FrontPage themes, but I like the size better. sometimes even a little smaller.

I may then add an area on the right that will become a column in a table in my html editor. Again, mostly just to get a feel for the layout, and not usually something I will slice and use. I prefer to use table or cell colors there for some color rather than an image.

Well that was the quick version of the graphics work. Next I slice the header area. I know it is going to fit at one resolution, and with a little bit of luck it is going to stretch. I do that by making sure somewhere in the header section there is a small width of the graphic layout that has nothing but colors, no text or image usually. I make a small slice, usually only 10 or 20 px width and the heighth of the header, 100 or so. This will become the table background, and as the table stretches for higher resolutions, it should not show gaps. I slice the rest of the header section.

Next, I make the navigation image. I'll drag the layer I made into a new small image. Add the text for each button, and any special effects. Each text for a button goes on its own layer. Then I just have to hide a layer and export the images individually. This part is for Dreamweaver templates, but I'll export the blank images with no text also, to be used as a FrontPage theme. I did do a tutorial on how to do this, so if anyone wants the link, let me know and I'll post it.

Oh heck, I'll go ahead and post it now.

http://www.thetemplatestore.com/tutorials/navimage.asp

Now it is time to make the donuts! *S* err uhh I mean the tables.

I start with making a header table. Usually one row with 3 columns. The center cell is going to basically be the cell that stretches. I don't set cell dimensions until after I insert the images.

The rest of the page is going to go into what is known as a stacked table - a table under the header table. Again it is probably one row with three columns. Each column is likely going to get a nested table in it. One nested table in the left column for the navigation, which will usually be an include page. one nested table in the center section for content, and the same for the right column, that again is likely an include page.

Lastly I'll put a table on the bottom - footer area. Usually it contains no graphics but relies on table and cell colors. Again an include page will fill in the text for that area.

That's pretty much a quick run down to get you started. There are of course variations depending on what I want to accomplish. I think the most important part is knowing tables - really knowing them inside and out is essential. Learn how to use small images to your advantage for tiling as a background etc. in a table.

Slicing the graphics to fit is really much more minor I think. I don't use any slicing tools in Photoshop. I do it manually as I find it more reliable. There is an option there to set the selection tool to be a fixed size, so that is what I use.

I could of course go on for hours but not this time.

Nancy

[MandyJay]

Nancy
:F: :F: :F: :F: :F:
Thank you, that has answered many of my doubts and queries ..... and if you ever want to continue, and carry on talking for hours on the subject ....... just carry on! I use Corel PHoto Paint, which does all the necesary things and has layers and stuff, so all can be achieved. Interesting that bit about having small piece of header for table background, I would not have thought of that, and does solve a huge problem.
thank you for your in depth description, I feel much more confident now.

[awasson]

Nancy,

I'm so glad I just touched on the subject and didn't go into detail. I started typing the other day and realized that it would take a huge amount of time to write down all that I was thinking.

Thanks for the great explanation and the link to the navigation image tutorial.

I read it going "uh huh", "yup", "ummm hmmmm, yup 750 by 500 or so for 800x600, me too".

That is really great info and you can only get it by doing it for a while.

Thanks for all of your expertise.

Andrew

[Armentarius]

I second that, Andrew.

Nancy, you have done a great service for those of us who want to work outside of the box. Your experienced, "been there, done that" advice is exactly what the doctor ordered. Thanks.

Please, whenever you feel up to continuing on with the story, I, for one, will be interested.

Again, thanks.