Design Agency Layout - Tutorial 151

admin · #1 (**permalink**) 02-28-2008, 05:48 PM

Hello

Today i will create a more detailed tutorial than yesterday. This tutorial is number 151 from our 500 Tutorials Marathon. If you have Web design company you have to impress your clients from start. I will try to add as many details in this layout.

This is my final result :

For start, i will create a new document. As usual i will use my measurements:

760 x 770 Pixels

Then download the following image:

Open this image in photoshop, then go to Edit > define pattern
You can close this document, then grab Paint Bucket Tool, and be sure you have selected the pattern we just made

Then click one time on your canvas
This is my result

After that download a free set of custom shapes i have made special for this tutorial. You can find a free set at the bottom of this tutorial, and you can find one on VIP download area
Custom shapes for VIP members
here you can find a tutorial on how to apply for VIP subscription

After you will load these custom shapes, you can add some on the layout like in the following image. I will make them with different colors. it will be easier for you to see how it's made

With Rounded rectangle tool, create a simple shape, and place it like me

Now, select the black tab, ago to Layer > Rasterize > Shape
Then with eraser tool, delete some parts from this black shape

Rasterize also the pink tab, and with eraser tool, delete also some parts from this tab until you have something like me

Now select 3 layers in your layer palette. The pink tab , the black tab , and the white shape

When you have these 3 layers selected, press on CTRL+E ( this will merge all the layers into a single one, and the result will be the same )

On this merged layer please apply the following layer styles

This is my result

Select this big white shape, and press CTRL+J ( this will duplicate the layer ) , after that go to Edit > transform > Rotate 180
With move tool , place the shape like mine

Select one more time Rounded rectangle tool, and create a simple shape on the bottom of your layout

Now for the first tab, add the following layer styles ( these styles you can find them in " 3D logo creator " package or in " Talk-Mania Big Pack " )

This is my result

For the second tab, use the following layer styles

This is my result

For the last tab please add the following layer styles

This is my result

Now go to www.photo-shop-brush.com , and download the following set of Old paper brushes

Load the brushes in photoshop, then you have to load the selection for the top white shape. To load the selection , be sure you have the layer selected, then go to Select > load selection ( press OK )

Create a new layer above this one. ( press CTRL+SHIFT+ALT+N ) to create a new layer, the with brush tool, make some random drawing inside the selection

Do the same for the other white shapes.

Then you can download also this set of brushes : Corner brushes
And on a new layer add some other details

Select ellipse tool, and create a few circles

Then with pen tool, create a small shape like mine

Duplicate this layer a few times, and place it like me

Now it is time to add some text, and images

Also you can add a cup of coffee and a small office items: a pen , or any other item you consider is good

If you want to change the background color, you have to select the first layer we have created in this tutorial, then you must press CTRL+U ( hue saturation )
play until you are happy with the color

I hope you like my final result.
This Layered PSD layout is available only for VIP members. You can download it here

morning · #2 (**permalink**) 02-28-2008, 07:39 PM

very good work admin nice tut

wfdgraeme · #3 (**permalink**) 02-28-2008, 11:56 PM

That is just a great tut, as always I have learned some new techniques, may all who view this be better off. Thanks for sharing your skill.

Turbocharged_06 · #4 (**permalink**) 03-01-2008, 09:57 PM

wow.... now thats the best layout you have created in my opinion its so creative and realistic i love it!

ahmedmansour · #5 (**permalink**) 03-02-2008, 09:52 PM

thanks to you

dontsee · #6 (**permalink**) 03-04-2008, 04:23 AM

very very nice tutorial. i want to try it myself.
but i'm having problem d'l the tab shapes. i'm getting the following error

! C:\Documents and Settings\EmoTipa\Local Settings\Temporary Internet Files\Content.IE5\4VC4F19C\free-tabs-shapes[1].zip: Unknown method in tabs-shapes-free.csh
! C:\Documents and Settings\EmoTipa\Local Settings\Temporary Internet Files\Content.IE5\4VC4F19C\free-tabs-shapes[1].zip: No files to extract

any idea??

thanx for a very good tutorial