PhotoshopForce.com
PhotoshopForce.com home tutorials forums downloads contact-us PhotoshopForce.com
PhotoshopForce.com
Grunge Signature Tech Site Layout Modern Layout Complete Energy Pulse Background Effect Fresh Tutorials:
Last Update: 2.14.2007
Online: 100 Users
Adverts
Advetise on Photoshopforce.com For only $50 per month!
PhotoshopForce.com
PhotoshopForce.com Tutorials Web Layouts Flawless Layout

Flawless Layout

In this tutorial you will learn the techniques used to create a very balanced modern website that keeps optimization and search engine accessibility in mind, though designed and developed in photoshop the final web page file size could be reduced to mere kilobytes by use of stylized CSS.


Download File Download Flawless Layout Source Package

Go To Page: [ 1 2 ]

Page 2 of 2


Step # 8
Now we'll work on the navigation system. Get out the rectangular marquee tool () and set it up like so:


Create a new layer. Now create a selection with the marquee tool as shown here:



Using the Flood Fill paint bucket tool, fill this selection with with #424242.
Deselect by pressing CTRL+D.




Step # 9
Now press CTRL + J on your keyboard to duplicate this layer.
Press 'V' on your keyboard to get out the move tool.

and move the duplicate button over to the right about 5 pixels away from the previous button.

Continue to do this until you have enough buttons for your navigation system, in my case there are 4 total buttons:





Step # 10
Create a new layer. Set your foreground color to #A2A2A2. Get out the pencil tool () and set it up like so:


Now add a 5x5 dot to the upper-right hand corner of each of the navigation buttons:





Step # 11
Continue until you've added a dot to each of the navigation buttons:
Image




Step # 12
Create a new layer, get out the pencil tool again set your foreground color to #424242, and set the pencil tool up like so:


Now draw a straight line across the bottom of the header underneath the navigation buttons like so:





Step # 13
Now to add the text to the navigation buttons, get out your text tool, and set it up like so:





Step # 14
Using the same basic techniques you've learned in this tutorial continue to refine and add small details to your layout to break up the monotony a bit. I added a few squares with different opacities in the corners of the header, you can do so to easily with the Rectangle Shape tutorial.

Here l've added some stock photos to the layout and applied text so you can see what this type of layout might look like in a real world environment:


The stock images and photos used in the above layout are all available in the download pack for this tutorial. As you can see, though the techniques are simple, and easy to preform the end result is a very clean, sharp looking layout. I hope you've learned form this tutorial, and have gathered some good ideas. Be sure to check out the rest of our great tutorials while you're here!


Download File Download Flawless Layout Source Package



Author: Nick P.
Discuss this tutorial on the PhotoshopForce.com Forums
Affiliates:
SourceCrave - Quality Webmaster Resources Kostenloses für den Webmaster 
Photoshop Guides - quality, hand-picked Adobe Photoshop tutorials added daily. PhotoshopTower.com
All Affiliates / Your Link Here
HOME   |   TUTORIALS   |   FORUMS   |   DOWNLOADS   |   CONTACT US
© 2007 - 2008 www.PhotoshopForce.com Duplication/Redistribution prohibited. Map
Top of Page