Home Photoshop Web Layout Stylish Layout

Stylish Layout

Author: Meye.dk More by this author

Added: Jun 03, 2005 Rating:

Level: Beginner Software: n/a

Open a new document in 1024x768 px. Fill the background with #D1D1D1, which is grey.

Create a new layer and grab the Rectangular Marquee Tool. Make a big rectangle for your layout. My rectangle is 500 px width. Fill the selection with a brighter grey colour, #EFEFEF.

Go to Blending Options:

Click to enlarge

Now we are going straight to the banner but it's going to be different. Find a great picture for the banner and copy it over to our layout-document. The banner has to be a little bigger than 250 px. The height of my banner is 115 px.

Go to Blending Options again where Stroke is placed. Set the size to 10 px and the colour to #FFFFFF. The position has to be "Outside".

Place the banner in the left side of the layout and a bit down from the top.

Click to enlarge

Now to the menu. Grab Rounded Rectangle Tool and set radius to 15-20 px. in Options Bar. Create a new layer and set the foregroundcolour to #FFFFFF. Make a pill-formed figure and place it next to the banner on the right side. In this tutorial, we make three menu-buttons. Place each button next the banner under each other. PLace the three layers under the banner-layer in Layers-palette.

Click to enlarge

Submit text to the menu. The font which I have used is named Trebuchet MS. I have also named the site.

Click to enlarge

Grab the Zoom Tool and zoom a bit. Create a new layer and grab Rectangular Marquee Tool. The foregroundcolour is still #FFFFFF. Make a long rectangle from the left side af the layout to the right. My line is 5 px. height. Fill the selection with white. Grab Move Tool and place the line right under the banner.

I have submitted some text just to see how it's going to be.

Click to enlarge

Grab Zoom Tool and zoom into the document. Create a new layer and grab Rounded Rectangle Tool and set the radius to 5-10% in Options Bar. Make the rounded rectangle. Ctrl + click on the layer in Layers-palette and grab Gradient Tool. Set the foregroundcolour to #EFEFEF and backgroundcolour to #FFFFFF. Pull the tool from the top of the seelction to the bottom. Remove the selection up in Select > Deselect (ctrl + d).

Go to Blending Options:

Create a new layer and grab Rectangular M. Tool. We are going to make a line in relief. Make it 1 px. height and almost as long as the rounded rectangle. Fill the selection with #D1D1D1. Don't remove the selection. Grab the Rectangular M. Tool and hit the down-arrow on your keyboard, once! Fill the new place with #FFFFFF. Then you can remove the selection.

Insert a title of the box.