website promotion banner
eturnkeys
Your Ad Here
Photoshop  Home Photoshop Web Layout Another Web Design Company Layout
rss

Another Web Design Company Layout

Author: amitk More by this author


So let's start by creating a new document in photoshop
Size 760 x 770 pixels
Background color #d9d9d9

Zoom out your document to 50 %
Select Pen Tool and create the following shape ( HOLD down the Shift key while you use the Pen Tool )

image 1

Then with the same tool , hold the Ctrl key and press one time in one corner of your shape. You can see some small squares

image 2

then Hold down the Alt key and drag the corner of your path from the left circle to the right circle like in the following image

image 3

With the same technique do the same for the other part of the path
You can see in the following image what i am talking about

image 4

Now be sure you have the Pen tool selected , then hold down the Ctrl key and drag the 2 middle point like in the following image

image 5

Now you have one nice shape .

image 6

For this shape i will add some layer styles

image 7

image 8

image 9

image 10

Now duplicate this shape ( Ctrl+J )

Then go to Edit > Transform > Flip Horizontal
And you should have something like this

Click to enlarge
Click to enlarge

With the Move tool place this 2 shape as in the following image

Click to enlarge
Click to enlarge

Duplicate this 2 layers ( to duplicate both layers in the same time, first you need to select the layers in the layers palette , then drag both layers to the " create a new layer " button from the bottom of the layer palette

Then with the new layers selected go to Edit > transform > Flip Horizontally
With move toll place the layers on the bottom of your layout like in the following image

image 13

Then Duplicate the firs layer we have created in this tutorial ( Select the first layer - then press Ctrl+J )

And with the move tool place it like in the next image

image 14

Duplicate this last layer ( press Ctrl+J ) then go to Edit > Transform > Flip Vertical
With the Move Tool place the shape like me

image 15

Then select this 2 layers from the middle of the layout. When the layers are selected ( in the Layer palette should be both layers with a blue color ) press on Ctrl+E ( this will merge the 2 layers into a single one )

Then add the following layer styles

image 16

image 17

image 18

image 19

image 20

This is my result

Click to enlarge
Click to enlarge

Now find some nice images on the internet and add some images on your layout

To add a image to a layout you first you have to open the image in photoshop, then drag the image from one document to another

Or you can copy the image ( Ctrl+C ) then select the layout document and press Ctrl+V ( paste )

In my next image you will see that the image with the eye is behind the other layers. This is because i have place the image with the eye above the background layer

Click to enlarge
Click to enlarge

Then add alone some text on your layout with Type tool and also some images

Click to enlarge
Click to enlarge

Then add some text buttons on the header, and you can add also a text logo

For the text logo i have applied only a gradient layer style with 2 different blue colors.

The line under the logo is done with Rounded rectangle tool

Click to enlarge
Click to enlarge

Then create a new layer ( press Ctrl+Shift+Alt+N )
Select Pencil Tool ( choose 1 pixel brush )
Zoom your layout to 1600 % and make on the new layer some points with the pencil tool

image 25

Then duplicate this layer a few times and place the small arrows like in the following image

Click to enlarge
Click to enlarge

maybe you will ask yourself why i have an empty area in the middle of the layout.
Oh well you can add there a nice flash gallery
Or just some simple images. I will use a image from another tutorial of mine.
I am just to lazy now to search a good image to place on this layout

image 27

Then add some more details. for example add some dots between text and images. you can add the dots with a pattern or you can choose a small font and simply type some " ....... " <<< DOTS

Click to enlarge
Click to enlarge

Now grab Custom Shape Tool and choose the following Custom Shape

image 29

And make one single shape, then duplicate a few times ( press Ctrl+J to duplicate ) and place the arrows like in the following image

image 30

I think we are ready with this layout. i will ad a simple slogan and a few more arrows on the header and i will end here my tutorial.
The slogan is very important
Come tomorrow on Talk-Mania.com for a new tutorial

Another Web Design Company Layout Tutorial: Final Result (Click to enlarge)
Click to enlarge


Author's URL: www.talk-mania.com

Rate this Material: Bad 1 2 3 4 5 Excellent
print this page tell a friend subscribe to newsletter subscribe to rss

Add comments to "Another Web Design Company Layout"