home tutorials forums downloads contact-us
Simple Blog Layout Patchwork Background Effect Extended Text Professional Portfolio Layout Fresh Tutorials:
Last Update: 2.14.2007
Online: 110 Users
Advetise on For only $50 per month! Tutorials Web Layouts Modern Layout Complete

Modern Layout Complete

In this tutorial you will learn the steps to create an entire website that is both sleek and maximizes the users viewable window area, allow you the webmaster to place as much content onto the screen at one time as possible without giving the layout a nasty "cluttered" look. In this example we will be designing a website for a fictional R&B Netradio station called "Mixtape Bodega", here is what we'll be creating:

Download File Download Modern Layout Complete Source Package

Go To Page: [ 1 2 3 ]

Page 3 of 3

Step # 17
Create a new layer. Next get out the Pencil Tool () and set it up like so:

Set your foreground color to: #FF7200

Draw 3 dots in the bottom right hand corner of your button to give it a little more detail as l've done here:

Finally the only thing left to do is to place the text onto the button. I didn't use any fancy fonts here, just a 10pt Tahoma (Windows standard font) with a color of white #FFFFFF:

Now you can easily copy these buttons by creating a folder, and placing each of the button layers into the folder and copying once for each button your layout needs, here's how mine ended up:

Here l've added my company logo and website name to the header area.

As well as a few images that are relevant to the pages theme:

At this point the page is nearly ready to be sliced up and coded. Here is how this particular web layout might look in a working environment for an R&B net radio website:

Thank you very much for reading this tutorial, l hope you've enjoined it! Please be sure to check out the reset of our href="">layout tutorials while you're here!

Download File Download Modern Layout Complete Source Package

Author: Sacred M.
Discuss this tutorial on the Forums
Affiliates: - A quality tutorial and render website FREE Photo Shop Tutorial LooseMoose52
All Affiliates / Your Link Here
© 2007 - 2008 Duplication/Redistribution prohibited. Map
Top of Page