Div Layout I

Before reading: please note this is not the best way to create a div layout nor the best coding, but the easiest (at least for me). It was meant for beginners that know nothing about coding or not much. Once you understand this tutorial, you should improve by learning CSS and switching to XHTML.

Basics
So what you need to make a good layout? YOUR inspiration... and a little practice :).   Apart from that, just some litte things:
- Image: Make sure the image you're going to use has a good quality. Never take a small image and make it bigger... that's the worst thing you can do. Always use big images and make them smaller, or just use them as they are.
- Idea: you should have a slight idea of what you want to do. The layout normally won't end as it was on your mind, but if you don't even have an idea... it will take you much more time.
So you have the basic things now... you have an image, and you have an idea, let's start then.

Following the tutorial
- Keep saving the psd file of the layout (File > Save) in case your computer freezes, or you do something wrong. You don't want to lose everything, right?
- Of course, don't try making this if it's the first time you open Photoshop... I'll assume you know some basic (very basic) things about Photoshop, like how to create a layer. If you don't, try the Photoshop forum of the site.
- A little knowledge about HTML is recommended, because you will follow this tutorial easily.
- You can view most of the images bigger clicking on them.
- If you have any problem with this tutorial, please don't e-mail me. Use the forum instead.
- This tutorial has two parts. There's a link below for the second part.

Starting the layout
1. Open the image you want to use (File > Open). I used this Disgaea image.
2. Create a new image (File > New) with this settings: Width: 780, Height: 600, Background: white.
3. Put the image you want to use on the new image you've just create. You can do that by pressing Ctrl+A , Ctrl+C on the image, then Ctrl+V on the new image, or by clicking on the image and dragging it to the new image.
4. Too big? let's scale it down (like in the image below). Go to Edit > Transform > Scale and click on one corner and drag it to the middle to make the image smaller. Once the image is small enough click on the Move tool and move the image to the left corner.

Blending to the background
1. We'll change the background color. Take the Eyedropper tool and click somewhere on the background of the image, on the right side. I marked with a cross on the image below a good place to get the background color so that you know what I mean.

2. On the layers window ( Windows > Layers ) click on the Background layer and go to Edit > Fill. Make sure that Foreground Color is selected and that the opacity is 100%
3. Now into the blending. Make the top layer active again (clicking on it) and with the Magic wand tool tool-magicwand.jpg (515 bytes) (Anti Aliased must be selected) click somewhere out of the image. Go to Select > Feather and put 30 pixels. Cut the selection (Ctrl+X or Edit > Cut).
4. Go to Select > Reselect and cut again. Repeat this about 3-4-5 times,  until the edge of the image disappears.

Content boxes
1. With the rectangular marquee tool , make a selection where you want your content box. Press Shift and make the same for the navigation box.
2. Create a new layer for the boxes.
3. Take a color from the image with the Eyedropper tool (the one you want to use for the boxes) and go to Edit > Fill.
4. Now play around with the blending modes and the boxes' layer opacity until you like how they turned out. The blending modes and opacity can be changed at the layers window, at the top of it. I used Multiply as blending mode and 45% opacity.
5. Optional step: to add a border to the boxes, right click on the boxes layer and click on blending options. A window with all blending options will open. Select Stroke from the left list.

Next part »

Tutorial © Melfina. Do not reproduce in any way without previous permission from the author. Printed from http://celestial-star.net