PhotoshopForce.com
PhotoshopForce.com home tutorials forums downloads contact-us PhotoshopForce.com
PhotoshopForce.com
Stylized Glossy Navigation Gradient Map Tool Energy Pulse Background Effect EZ Lightning Effect Fresh Tutorials:
Last Update: 2.14.2007
Online: 137 Users
Adverts
Advetise on Photoshopforce.com For only $50 per month!
PhotoshopForce.com
PhotoshopForce.com Tutorials Web Layouts Simple Blog Layout

Simple Blog Layout

In this tutorial you will learn how to utilize the layer blending options to create a nice soft web site layout. This layout would look great on a blog, or personal home page. The techniques taught in this tutorial can be applied to many other photoshop designs.



Page 1 of 1


Step # 1
Create a new document in photoshop that is 700x600 in size, and fill the background with #F3F6F8.




Step # 2
Create a new layer, get out the rectangular marquee tool () and make a selection similar to this:


Using the Flood Fill paint bucket tool, fill this selection with white (#FFFFFF).
Double click this layer and apply the following blending options:

Drop Shadow:


Stroke:


Result:


Press CTRL + D on your keyboard to deselect this selection.




Step # 3
Create a new layer, get out the rectangular marquee tool () and make a selection similar to his:


Fill this selection with white (#FFFFFF).

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


Stroke:


Result:





Step # 4
Create a new layer. With the rectangular marquee tool () make a selection similar to this:


Fill this selection with #60B9F1:


Now open up an image you would like to use for a background. You can make your own, or find a great looking render off of the net. Try using some of the great effects you've created with other "effects" tutorials here at PhotoshopForce.com.

Once the image is open, press CTRL + A to select everything.

Press CTRL+ C to copy everything to your clipboard.

Go back to our layout document.

Create a new layer above the "blue" rectangle we have just made, and press CTRL + V on your keyboard to paste the render.

Now press CTRL + ALT + G to group this layer with the previous, your layers pallet should look like this afterwards:


Now you may need to maneuver, or move the render a bit, that is usual. Press 'V' on your keyboard to get out the move tool, and you can drag the 'header background' image around and position it just like you want it. Sometimes you need to resize the render as well. This can easily be done by pressing CTRL + T to get out the free transform tool.

Once you are happy with the position of the render, change the "blending mode" of the layer the render is on to "overlay" in the layers pallet to highlight it a bit, and make it look a little nicer:


Result:





Step # 5
Create a new layer get out the rectangular marquee tool, and make a selection similar to this at the footer of your document:


Fill this selection with #D1D2D5.

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


Result:






Step # 6
Create a new layer. Get out the rectangular marquee tool, and make a selection similar to this:


Fill this selection with #EDF0F2.

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


Leave the selection still active.




Step # 7
Create a new layer. Go to "Selection->Modify->Contract" with a setting of around 8 pixels:


Fill this selection with #EDF0F2, right click on this layer and

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





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



Press and hold the SHIFT key on your keyboard and draw a vertical line in the middle of your content box to act as a content divider:





Step # 9
The only thing left to do with this layout is apply the text to the buttons/navigation area, and in the header. You should choose whatever font you like, however we do have several designer fonts available for download in our downloads section that you can choose from. I've decided to use a font called "Alpha Male Modern" for this particular layout, with a black color (#000000).

I also added the following blending options to the text, just to give it a little depth:
Drop Shadow:





Step # 10
Finally to add some dividers between the text in the header area.
Create a new layer, set your foreground color to #4F718B. Get out the pencil tool ():


Now draw a vertical line mid-way between your navigation text(s) with the pencil tool like so:


Next set your foreground color to #EBEDF1, and draw another line on each side of your navigation dividers using the pencil tool similar to this:


Do this for each of the button dividers in your navigation bar.
Here is what the layout looks like so far:

Here is how this layout would look in a real life application, on a personal website for a possible team of motor cross enthusiasts:

Thank you for read, please be sure to check out the rest of our great tutorials while you're here!




Author: DEVs
Discuss this tutorial on the PhotoshopForce.com Forums
Affiliates:
Pure Photoshop - Adobe Photoshop Center. 9 tutorials - Photoshop tutorials , Flash tutorials, PHP tutorials and much more  Desktop Deck - Desktop wallpapers and graphic design tutorials Kostenloses für den Webmaster You-Teach.com - photography and web design articles and tutorials
All Affiliates / Your Link Here
HOME   |   TUTORIALS   |   FORUMS   |   DOWNLOADS   |   CONTACT US
© 2007 - 2008 www.PhotoshopForce.com Duplication/Redistribution prohibited. Map
Top of Page