home tutorials forums downloads contact-us
Stylized Glossy Navigation Tech Style Web Buttons Tech Site Layout EZ Lightning Effect Fresh Tutorials:
Last Update: 2.14.2007
Online: 42 Users
Advetise on For only $50 per month! 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 1 of 2

Step # 1
Create a new document in photoshop that is 776 x 660 in size.

Fill the background with white (#FFFFFF).

Step # 2
Set your foreground color to a light green (#6F8719)
Set your background color to a dark grey (#424242).

Step # 3
Create a new layer.

Get out the rectangular marquee tool (), and make a selection similar to that pictured below at the top of the canvas, this will be our header:

Using the Flood Fill paint bucket, fill this selection with your foreground color (#6F8719):

Do not deselect the selection.

Step # 4
Next we're going to add a diagonal pattern to the header.

Press CTRL + N on your keyboard to create a new photoshop document, and set the size to 4x4:

Set your foreground color to black (#000000).

Get out the pencil tool (), and set it up like so:

Now zoom in as close as you can to the image by pressing and holding the CTRL key and pressing the + (plus/addition) button a few times.

Once you are zoomed in, draw four dots onto the canvas, exactly as l've done here:

Now go to: Edit->Define Pattern and name your pattern something you'll remember:

Step # 5
Now lets move back to the actual PSD document that we are working on.
Once there create a new layer, get out the flood fill paint bucket, and set it up like so:

Now fill in the selection on the new layer with the diagonal pattern.

Change the opacity of this layer to around 10 percent:


Step # 6
Next we'll add the text to our header, you can use any font you like. \
Create a new layer. Set your foreground color to white (#FFFFFF).
There are several designer fonts available in our download section that you can choose from. Here I have used a basic Verdana font, with the following settings applied:

Type in the site title:

Step # 7
Now for the company/web site slogan. Create a new layer.Grab the same font; However this time I used the following settings:

Now drop the opacity of this layer down to 60 percent:


Go To Page: [ 1 2 ]
Page 1 of 2
Tutorial Index

Download File Download Flawless Layout Source Package

Author: Nick P.
Discuss this tutorial on the Forums
Pure Photoshop - Adobe Photoshop Center. 9 tutorials - Photoshop tutorials , Flash tutorials, PHP tutorials and much more  graphics, tutorials, softwares, designing, free training, downloads Best Tutorials Site From Romania for noobs and experts
All Affiliates / Your Link Here
© 2007 - 2008 Duplication/Redistribution prohibited. Map
Top of Page