Div Layout I - Designs / Layouts tutorial
- Added: Sep 25th, 2004
- Level: Easy/Medium
- Author: Melfina
- Reads: 101,938
- Description: Learn how to do a div layers layout from the beginning
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 
(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.
If you like this tutorial why not 
digg it or 
add to del.icio.us?
Tutorial © Melfina. Do not reproduce in any way without previous permission from the author.