PhotoshopForce.com
PhotoshopForce.com home tutorials forums downloads contact-us PhotoshopForce.com
PhotoshopForce.com
Broken Rubber Stamp Extended Text Gradient Twirl Gradient Map Tool Fresh Tutorials:
Last Update: 2.14.2007
Online: 67 Users
Adverts
Advetise on Photoshopforce.com For only $50 per month!
PhotoshopForce.com
PhotoshopForce.com 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 1 of 3


Step # 1
Create a new document in photoshop that is 800 x 600 in size, and fill the background with black (#00000).




Step # 2
Create a new layer. First we will start by creating the header for our layout. Get out the rectangular marquee tool () and make a rectangular select near the top of the canvas as l've done here:



Set your foreground color to: #230000 and your background color to #AF0000.

Get out the gradient fill tool (), choose "foreground to background" as the gradient type:


Result:


Double click this layer, and apply the following blending options:
Bevel & Emboss


Result:





Step # 3
Create a new layer. Set your foreground color to #FF4E00 and get out the Pencil Tool () and set it up like so:


Now draw a line across the bottom of the rectangle we had made in the previous step as l've done here. Holding the SHIFT key while drawing this line will ensure your line is perfectly straight:
This should be done on the same layer.


Double click this layer, and apply the following blending options:


Result:





Step # 4
Create a new layer. Get out the rectangular marquee tool () and make a rectangular selection as l've done here:


Fill this selection with #434343 using the paint bucket fill tool:


Set your foreground color to #FF4E00, and draw a 5 pixel line across the bottom of this box with the pencil tool, just like we did in the previous step.
This should be done on the same layer.


Double click this layer, and apply the following blending options:



Result:





Step # 5
Create a new layer, get out the rectangular marquee tool () and once again make a selection as l've done here:


Fill this selection with #434343 using the paint bucket fill tool.






Step # 6
Create a new layer, once again using the rectangular marquee tool () make a selection as l've done here:


Fill this selection with #585858 using the paint bucket fill tool.

Go to "Edit->Stroke" and apply the following settings:


Result:





Step # 7
Press CTRL + J on your keyboard to duplicate this layer.

Pres 'V' on your keyboard to get out the move tool.

Drag this duplicate layer over to the left as l've done here.
Holding down the SHIFT key while moving this item will ensure it stays purfectly aligned with our other content box:





Step # 8
Create a new layer. Next we'll begin to create an area for the navigation panel.
Get out the rectangular marquee tool () and make a selection as l've done here:


Fill this selection with #363636 using the paint bucket fill tool.


Double click this layer, and apply the following blending options:



Result:


Next l created a new layer, and used the same technique used in Step #2 to create a header for the navigation area:



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


Download File Download Modern Layout Complete Source Package



Author: Sacred M.
Discuss this tutorial on the PhotoshopForce.com Forums
Affiliates:
SourceCrave - Quality Webmaster Resources Free online adobe Photoshop tutorials! Learn webdesign easy with our adobe photoshop CS2 and Adobe Photoshop CS tutorials
All Affiliates / Your Link Here
HOME   |   TUTORIALS   |   FORUMS   |   DOWNLOADS   |   CONTACT US
© 2007 - 2008 www.PhotoshopForce.com Duplication/Redistribution prohibited. Map
Top of Page