Grasp the chance to enhance your site with the best fitting layout, including elements like buttons, headers and logos.  Home Photoshop Web Layout Old Style Layout

Old Style Layout


Create a new document with a white background.the size should be 760 x 700 px.

Create a new layer by pressing Ctrl+Shift+Alt+N in the same time.

Set Foreground Color to #001677

And the Background color to #333333

Select the Gradient tool And press on Reflected Gradient:

image 1

Then Press SHIFT key and draw a line from the middle to margin of your document

image 2

This will be our background.

Now with the Rounded Rectangle Tool draw a rectangle and place it on the middle of you document. ( be sure you have the radius set to 5 px )

For the Rectangle use this color: #c0af91

I have resized this image for faster loading

image 3

Next step is to duplicate this rectangle.

With the Rectangle Layer selected you have to press CTRL+J

Then go to Edit > Transform Path > Distort and move the corners like in the following image:

Click to enlarge
Click to enlarge

You can notice that i have changed the color to #666666

Now set your Foreground Color to #534a3c

With the Rounded Rectangle Tool draw a rectangle.

Now go to Filter > Sketch > Note Paper

You will be asked if you want to Rasterize the Shape. Press OK

Now use the following values then press Ok:

image 5

Select Eraser Tool. then try to find a nice brush ( i recommend Faux Finish Brushes ) and start erasing this layer:

You can use multiple brushes until you are happy with your image.

I am trying to make delete parts of this layer because i want to achieve an old style look

image 6

You can see above a part of what i have done. this steps you have to make it alone.

Now you have to apply a layer style. Use this settings please:

image 7

If you don't know how to create a pattern please go on this link and you can learn how to do a simple pattern. ( you can download also some of the most used patterns ):www.talk-mania.com

After you apply this effect this will be your result:

image 8

Now we will create some simple text buttons and i will place this buttons on the bottom of the template. please see the next image:

Click to enlarge
Click to enlarge

Now we will create some nice separators for our buttons.

Create a new layer

With The type tool write some ------ ( minus signs )

After you type 4 or 5 minus signs go to Layer > Rasterize > Type

Then go to Edit > Transform > Rotate 90

Then Duplicate a few times this small separator and place it between buttons:

Click to enlarge
Click to enlarge

You can see that i have a place in the middle. We will add there a logo.

I will add the logo myself. I will not explain in this tutorial how i have created the logo.

The logo you can make by using a custom shape. After that you can add some layer styles and you are ready. This layer styles are included in Talk-Mania Big-Pack

image 11

Now we have to add another details.

We will make some separators. We will use one more time the Type Tool to write some minus signs " ----"

Then after you create this minus signs be sure you have to rasterize the layer.

I will add some text. I will not explain this steps because i think are very simple. In case you are not able to do it please register and i will answer you.

Click to enlarge
Click to enlarge

Do you remember our first layer we have created? ( if you haven't change the name of the layers it should be : Shape 1 Copy )

Please duplicate this layer

Then select Burn Tool and start drawing on this new layer. You will be asked if you want to rasterize the shape. Press OK

After you press Ok chose a nice brush and start creating some nice borders to give it also an old style.

You will have this effect when you use the Burn Tool.

Click to enlarge
Click to enlarge

I will add another rectangle on the left side. I have created the texture with the Burn Tool and with a brush which you can find it in Photoshop.

Then i have applied a shadow and this is my final image. You can download the psd file from the bottom of the thread.

Old Style Layout Tutorial: Final Result (Click to enlarge)
Click to enlarge


Author's URL: amitk
Thank you for voting.
Rate this Materials:
Bad 
1 2 3 4 5 Excellent
print this page subscribe to newsletter subscribe to rss

Advance your current skills or acquire new skills in Photoshop by creating projects using our step-by-step tutorials. More Tutorials: Most Popular Materials | Fresh Materials | TutorialKit New Photoshop Tutorials

Add comments to "Old Style Layout"

Only registered users can write comment

Reader's comments