rianology

In this tutorial we are going to learn how to create a simple web layout. There are 2 major sections, layout design and HTML,CSS scripting.

We will need few tools to help us to do our job, in this case I am using Photoshop CS3 and  Notepad++ as text editor.

As for now, lets try to design a simple layout web using Photoshop…

• Create a new Photoshop document, width: 1000px and height: 1200px, then fill the background with #858264 color
• Put some additional  guides approximately 770px (don’t forget the outer lines for the shadow). View > Rulers (Ctrl + R). Click anywhere on the ruler and drag it down or to the left and release. There’s also a toggle to show/hide the guide. View > Show > Guides

• Guide resembles the header, body, and footer.

• Create a new layer, create a rectangle selection (Rectangular Marquee Tool), the size as show below and fill it with this color #fafbe9.

• Apply Outer Glow style to the layer we just create. This will give a small shadow effect to the overall body. Right click on the layer, select “Blending Options”, and then select “Outer Glow”.

• Prepare a header image and just paste it into a new layer. Adjust the header image size to the guides we create earlier.

• Create a new layer, create a rectangle selection (Rectangular Marquee Tool), and apply this color #c8bc93 to make a sidebar section.

• And here’s the result.

• The next step is to save it to smaller parts which are header, main_body, and footer. Because there’re only few parts, so we’re going to use manual method. I’d recommend using slicing tool otherwise.

• Create a rectangle selection (Rectangular Marquee Tool), select the header region. Edit > Copy Merged (Shift + Crtl + C). Create new document (Ctrl + N) and paste. Save the image as header.jpg.

• Do the same like before for body region and save the image as body.jpg.

• Do the same like before for footer region and save the image as footer.jpg.

• As we can see here, all three images have the same width size. Now put the images in a folder we can name it “images”.

Next –> after finishing the design images, we could start with the scripting languages..

~ by riano annas on October 11, 2008.