Professional Blue-Grey Layout

admin · #1 (**permalink**) 10-25-2006, 04:40 PM

Hello

Today we will continue with the 100 Marathon Tutorials
For our newest members this means that each day i will add a new tutorial.
This one is Tutorial Number 30

We will create the next layout

Create a new document with a white background.the size should
be 760 x 700 px.
Create a new Layer ( press CTRL+ALT+SHIFT+N )

Then with the Rounded Rectangle Tool create a rectangle:
Go to Edit > Transform > Warp and use the following Settings:

Here is my result ( the next image is resized )

Now select this Layer ( Shape 1 ) and let's change the layer style.
Please use this settings:

For Inner Glow settings use the color #003399

Set the Gradient color for the left #66CCFF and for the right #0066CC

Please duplicate this layer. ( press CTRL+J )

Now Hold the CTRL key down and with your left mouse Button click one time on the Layer Thumbnail: ( you can see the red circle on the following image )

You will notice that you have now a selection.

Got to Select > Modify > Contract
and change the settings to Contract by 5 pixels. then hit OK

Select rectangular Marquee Tool and Keep your ALT key Pressed ( you will notice that a minus sign will be visible.
Now while you keep the ALT key pressed we will delete a part of the selection from the bottom.

After you delete the selection you will have something like this

Now Create a new layer ( press CTRL+SHIFT+ALT+N )
Select Paint Bucket Tool and with a black color press one time inside your selection

Then press CTRL+D to deselect and you will have something like this:

Now we will add a layer style for this black layer

Gradient color for Gradient Overlay settings:

Gradient color for Stroke settings:

And for Orange Rounded Rectangle add the folowing layer style settings:

Gradient color for Gradient Overlay settings:

The result will be like mine: ( i hope

) This will be our navigation buttons

Now duplicate this Layer ( press CTRL+J )

Go to Edit > Transform > Flip Vertical and with your Arrow keys place this new layer on the bottom like in the following image:

With your Rounded Rectangle Tool Create a new Rectangle: ( you will see a black rectangle) Please make it white. it will help us much on the following steps.

Go to Edit > Transform > Perspective and drag the right corner to the middle of the shape. You can see the arrow above.

Now add a layer style:

Aftyer you add this style please drag this layer under the navigation:

And the result should look like this:

Now we will create a pattern. Open a new document with a transparent background. the size should be 20 x 20 pixels

Zoom the document to 1600%

Set the foreground color to white. and with the Pencil tool create some dots like on the following image: Do not use the grey color ) I have used this color so you can see better what i am doing

Then go to Edit > Define Pattern
Choose a name for your pattern and press OK

Now we will come back to our layout.

Hold down the CTRL key and press on the Layer Thumbnail for the " Shape 2 "

You will see a selection:

Now create a new layer ( press CTRL+SHIFT+ALT+N )
Select Paint Bucket Tool. And we will fill the new layer with the pattern from above:

Now press on Add Layer Mask

Now press on " D "
Select Gradient Tool and draw a line from top to bottom like on the following image: ( please note that you can see also the end result )

Now we will create some text buttons:

Select Line Tool and create 3 lines ( the following image is zoomed in 500% )

You can press on Add Layer Mask for each line and with the gradient tool you can create a nice effect
Be sure you set to Reflected Gradient
Then you have to create line while you keep the SHIFT key down

Basicaly you will create a nice indent. i will zoom in the image to see what you have created.

After you create this 3 lines duplicate them a few times and place them with your arrow keys between the text buttons.

Now with the Rounded Rectangle Tool i will create another rectangles and i will use the same layer style we have used for the navigation bar.
In the same time i will add also some text.

Now with the Rounded Rectangle Tool create another 3 rectangles and place them under the buttons. Use the same style as we have used for top of the layout:

THE NEXT IMAGE WILL BE MY FINAL RESULT.
You can add your own text if you want or you can add another details. if You have questions please let me know.

If you want to add extra details on this layout then you might be interested in Talk-Mania Big-Pack

mismaar · #2 (**permalink**) 10-26-2006, 07:01 PM

it is lovly. thanks alot

scorpion · #3 (**permalink**) 11-06-2006, 12:09 PM

ohhhh it's on good tutorials now yey

go admin go

.insane · #4 (**permalink**) 11-06-2006, 08:49 PM

Hi:
There is no doubt that this is a great tutorial but i will have to disagree with on bit, i dont believe that this tutorial is very professional. other than that great job. :P