Designing a layout
This is a basic tutorial that can work with any advanced image editor - feel free to refer to it even if you're using Paint Shop Pro, GIMP, Macromedia Fireworks, Corel PhotoPaint, whatever... As far as I'm concerned, you may as well draw your layouts in MS Paint if you have the skill.
This tutorial does not explain a detailed procedure. It's a set of tips for those who are unsure in their work so far.
Choosing a theme
It's the essential step in design. You must start thinking of design as a way to get the message through. You want your website to send a message, so do your best at it — use images wisely, as they sometimes may not have anything to do with your website. Don't use images just because they're there to use, but because you can make something interesting with them.
One of the stupidest things to do is to get a celebrity or anime image, draw some borders for content and navigation, half-ass it in Dreamweaver and call it done. It's not. It's not even near. Good design takes time, even if it's simple. You will spend many hours thinking the design through, drawing it in image editor and coding it.
After having that said and discouraging you in the first place, if you're still reading this, there is hope you will get somewhere. Those who quitted after last paragraph will never learn simply because they don't want to.
As I was saying, you need a theme. The theme should be connected with your website. If it's a personal website, make sure it reflects your attitude. If it's a shrine or fansite, I suppose you will use an image of a celebrity/character in your design. If it's a graphics site, then what were you thinking? If you don't know how to make good designs, please close your website right away and reopen it when you learn.
Designs can be made without a single photo. Actually, good designs don't need a lot of complex graphics since they will be pleasant to look at on their own. Remember this: less is more. I don't mean that you should have little content on your website, but sometimes empty spaces can help you to target the focus of your visitors where you want. If your site is cluttered with images and text, your visitors' eyes will easily get tired and this will make them leave your website.
Have you chosen the theme? Now it's time to get our hands busy.
Thinking the layout through
This issue of content and navigation should be considered before you start painting your layout. If you do the other way around, you will have to make the content fit the layout, instead of the correct way wich is to make a layout that will go well with the existing content. Content is what matters most, so make a design that will emphasize it, not make it inaccessible.
Getting it on paper
I have a hard time starting from scratch in Photoshop. My most creative layouts were once a pencil sketch. Here are some examples of such:
Except the obvious reason to do this — to keep the reference in front of you while working on your computer, the benefit of paper is that you can use it anywhere, at any moment! You never know when to expect a strike of creativity, so when it happens make sure you put it on paper ASAP.
Digital design
Your favourite step so far, I suppose — but don't skip just right to it. I cannot take you by the hand here because every individual has to learn this on his/her own. I will just give you a glimpse of how I do it:
- Start with a 770x500 px canvas — this size will fit into 800x600 px resolution and above. If your design doesn't fit inside it, make it smaller — resist the urge to make the canvas bigger! The main point is to utilize images as much as possible, not to make them the only thing visible on first sight — don't let the header push content out of sight, and don't make the layout too wide for most common resolutions.
- Draw a grid for content and navigation space. These guides will help you
maintain content width while painting/image editing.
- Pick images and colors and play with them. Note what I mentioned about the "theme"
while doing it. I won't preach about appealing color schemes, because personal taste plays a big role in it.
Just make sure there is sufficient contrast between letters and the background. People
want to read your text after all! Here's an example I just did — it contains a warm shade of red,
but I think it's not too aggressive.
Using images
Before you use the image you want, first make sure you are allowed to use it. If it's from DeviantART or any other artwork community, you definitely may not use it without author's permission. The same goes for private galleries and portfolios. I don't support obtaining your images from manga/artbook scan galleries either, because they don't have the right to redistribute art without original artists' permission. Try deviantART stock gallery, Stock exchange or Morguefile instead.
Once you got the image, use it in an interesting way. Blend it with other images. Use brushes, textures and patterns to make empty spaces more appealing.
Try your best not to use same things many people do: pixel-stretches, grid patterns, scanlines, brushes made of swirly fonts etc. These are old and boring tricks. If you have a style of your own, people will remember you.
Using brushes, textures and patterns
Be careful not to overdo with those. Try using not more than 2 different patterns, and don't apply them on all surfaces — it looks more interesting when a patterned surface is opposed to a plain one. Avoid eye-catching patterns on areas containing text, because it would make it difficult to read.
The same goes with brushes and textures, but if they're subtle enough, you may use plenty of them. One of the possible ways to use them is to paste a texture/brush on a separate layer and change the blending mode so the image shows through.
Final tips
- When saving images for web, make sure all of them will load fast enough on dial-up connections (see my tutorial on optimizing images for web), and preferably make the content load prior to images so your visitors have something to do while waiting until entire site loads. People are not willing to wait in front of a blank window over 5 seconds.
- Being inspired by other websites is acceptable. Plagiarism is not. After you see a certain website you may try a certain color scheme or theme yourself, but don't do everything exactly as seen. Try to figure out why you like that design in particular, and then try to accomplish the same feeling yourself. Copying other people's HTML and CSS is not allowed!
- Experimenting is a good thing. Don't restrain yourself just because you've never seen it before — even if you make a mistake, remember that you are constantly learning and improving with every such experiment.
- Never rush. If something looks a bit odd, figure out what it is and fix it. If you're too tired to do it today, have some rest and try again another day.
For details on image editing techniques, please refer to my other Photoshop tutorials.
If you wonder how to code a tableless two-column layout, continue by reading the next tutorial.
