Question! Is there a tutorial on how to make Layouts?

[blue_hair_dude]

Is there a tutorial on how to make Layouts and code them? I saw that you can make them in adobe phtoshop but I don't have it and I will never have that kind of money to spend on it. PLease can someone make or direct me to a tutorial?

[Myrddin]

Create them, yes. Code them, no.

Here's the results search page which list some of the layout tutorials, although, they are a little specific to one kind of theme and not a general 'this is how...' tutorial:

Long URL

Search terms used: website layout.

Always search first. You have the choice of two search engines, the built-in Forum Search ([link]) or the Paint.NET Google Custom Search Engine ([link]). Try both as they usually bring up alternate results between them.

EDITED: I appear to have an obsession with pluralising everything; removed the many 's's.

[blue_hair_dude]

Which one do you recommend?

[Myrddin]

Personally, I don't. But the tutorials you are looking for are the bottom two from the link I gave.

Actually, on second thoughts, my best advice would be to find some tutorials from the Internet on layouts, even PS tutorials, then try to adapt them to Paint.NET. You can always ask here if you get into a sticky situation with the 'conversion'.

[Crazy Man Dan]

Creating a tutorial for a website layout is even less straightforward than creating a tutorial for a sig. Not only should the website have your own style to it, but there are so many layout possibilities that it'd be impossible to cover them all. There are several questions you'd have to ask yourself before you even color in one pixel if you want to do it right:

• [*:3iwrybxq]Do you want horizontal navigation (and if so, which side of the page) or vertical navigation (above the header, below the header, integrated into the header, full-width, partial width and pushed over to one side)?
  [*:3iwrybxq]How many content columns do you want in the body and what content should be in each (this will determine both their layout order and the width each one needs to be)?
  [*:3iwrybxq]What style do you want (minimalistic, glassy, web 2.0, industrial, or something new you've never seen before)?

The very basics of a website are header, links, body area, and footer, but there are infinite possibilities as to the organizations of just these four elements. Then if you want to add a sidebar or Flash content or advertisements or micro-columns within the body for emphasis (then do you want a graphical icon for each one, do you want each one to be the same width and height), you have even more decisions to make.

Recently, I started designing a site for one the clients I handle at work, and I tried something I've not done before that worked rather well. Usually I sketch the layout I'm thinking of on a piece of paper, then create a design off of it, but this time I couldn't decide which organizational method I wanted to use from the paper sketches. To decide, I created a rough block structure using a graphics program (The GIMP, if you must know - you may lynch me now :wink: ) so I could look at it on a computer screen and make my decision from there. The design had four main sections: a persistent collection of section links above the header, a header, a side link bar, and the body. I tossed around three options:

Option 1 - This organizational structure went with a very straightforward approach, with the header links, header, body (with the side links integrated into the area), and a separate footer section.

Option 2 - This one took the same basic idea as the first, but let the header image spill out of the sides onto the page. The side links are still integrated into the body, but this time, so is the footer. The body is continuous, so the footer would just go below the content in the established body area.

Option 3 - This one combined the header style of the first with a body style similar to the second. Here, the footer is still integrated into the body at the bottom, but the side links are brought out. The body is indented from the sides of the header, but the links are aligned on the same vertical line on the left, separating the two in an interesting manner.

Once I got the layouts down in pixels, I imagined what the content would look like in each, and ended up going with a modified version of the second option. Who knows, perhaps this method may prove useful to you, dear reader. If so, then you may buy me a Cappuccino as a "thank you." :wink:

When you've decided on a layout structure, you still have to choose a style. Pick your base color, then pick colors that go well with that base color and with each other. Limit your hues and the saturation ranges thereof, or your page will look busy and uncoordinated. This section is really up to you and depends heavily on your own style.

Once you've made the design in your photo editor of choice, then you must cut it up and write the HTML to make it into a working web page. It is true that Photoshop (or InDesign? I don't recall which) can automatically chop up the image and plop the sections into a table, but that method results in messy code and slow-loading sites (not that broadband users would even notice, but still...). The best way, though more difficult, is to use (X)HTML with CSS to make the pages the way the internet was supposed to be used.

It is certainly possible to make site designs in Paint.NET: (click on each for a large-size)

The difficulty is in coaching someone else through it. So much depends upon your own style. As you can see from the examples above, I like having horizontal main links with a right-oriented sidebar. I find my eye reads body-text content more easily when it's the leftmost thing on the line, since Latin languages read left to right. You may have different opinions on layout, colors, texture simulation, et cetera, so following a tutorial that tells you step-by-step what to do can limit your potential and creativity. Hopefully, though, something in that mass of text above may help you on your way.

I'd be happy to answer any questions about the designing-in-Paint.NET end here. If you want to discuss the HTML end, Rick prefers we talk about that in The Overflow. :wink: