Hello

This is the Tutorial number 47 from the 100 Marathon Tutorial
As i have told you i will try to add a tutorial each day.

Today i will show you how to create a clean style layout. You can see it in the following image



Create a new document with a grey background: #464646
The size should be 760 x 770 px.
Create a new Layer ( press SHIFT+CTR+ALT+N )

Select Rounded Rectangle Tool and draw a white rectangle ( use 10 pixels radius )
The next image is resized



Add the following layer style



With the same tool ( rounded rectangle tool ) create another rectangle
I will use a light grey color ( it is more visible for you )



Now add the following layer styles:









This is the result



Now with the same tool create another 3 rectangles and place them like me: ( you will see a X in this photo - see details after this photo )



As you have seen i have used the same layer styles as above

Now Hold down the CTRL key and press on the layer thumbnail from the middle ( the one marked with X )



In this way you have selected the rectangle



Grab Rectangular Marquee Tool
Press on Subtract From Selection and delete the bottom part of the selection



After you will release the mouse button you will get this selection



Go to Select > Modify > Contract and choose : Contract by 2 pixels

Create a new layer ( press CTRL+SHIFT+ALT+N )

And fill the selection with white using the paint bucket tool
Then press on CTRL+D to deselect



Now add the following layer style









This is the result



Now duplicate this layer twice and place it on the other two rounded rectangles



We will create a pattern now
Now open a new document 3 x 3 pixels with a transparent background
Zoom this document to 1600 %
Select Pen tool ( brush size 1 pixel ) and draw a simple point in the middle of the document



Go to Edit > Define Pattern...
Chose a name for your pattern and press ok

Now let's come back to our layout

Create a new layer ( press CTRL+SHIFT+ALT+N )

Grab Rectangular Marquee Tool
Be sure you have this settings:



and make a small selection:



Select Paint Bucket Tool
Set source for fill area to Pattern ( use the pattern we have created above ) and press inside the selection
After that press on CTRL+D to deselect




Duplicate this layer a few times and place it under the first one



Now create a new layer ( press CTRL+SHIFT+ALT+N )
Grab Rectangular marquee Tool one more time and make a vertical selection



Fill this selection with the dot pattern one more time
Press CTRL+D to deselect



Now with the same method try to add more doted lines. i am sure you will place the lines based on your layout needs.

Here is my result



Now create some circles:



And add the following layer style



I have duplicated the circles and placed link in the following image



The same you can create another circles and place it like in the next image



Now we will add another rectangle



Change the fill settings to 0 %



And add the following layer style



This is the result



Duplicate this shape and add the following layer styles





Now add a photo from your stock photos



The next step is to add some text on this layout and we are ready



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

Attached Files

layout47.zip (430.8 KB, 1207 views)

3D Logo Creator + Mega Pack + Photoshop Designer's Pack = Only 148$ ( save 150 $ - use coupon code: talk )

Looking good I think I'll nick the table design :P

Nick - Coder/Designer

Yea, me too

I like header

thanks nice page admin

good work
thanks

very nice good job admin

<(^,^<) <-- kirby

looking professional

cool and thx

Hi there i might want to use this
BUT...
Did you make this or did you copy it from anthor web site like you did on this Tutorial Vista Style Layout ????

Thanks

Hi

I want to tell you first that a moderator has deleted the post from " Vista Style layout " the post was from member " freelancer_dan "

HE told me that i have riped a template from template monster.
I have seen that the same template has been released yesterday on template monster website

My friend has started this layout on 2 December and it was posted on the forum in one private forum

To be honest we have been inspired from windows website not from template monster
This is the inspiration link: http://www.microsoft.com/windowsvista/

It is true that my tutorial looks almost the same like the one from TM but my friend has started to do this tutorial on 2 December and i have released this tutorial yesterday. ( my mistake )
Please see this link for screenshot with a private forum and the date when this was started.
http://www.talk-mania.com/tutorials/...al48/forum.jpg

I am really sorry that i haven't released with a day before, because it was ready , and it was posted on a private forum ( it is hidden ), but i have told you that i will release one tutorial per day.

if you want to use this layout you can do it.
thank you very much

3D Logo Creator + Mega Pack + Photoshop Designer's Pack = Only 148$ ( save 150 $ - use coupon code: talk )