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

Web Design Company Layout


Open a new document in photoshop

Size: 760 x770 pixels
Color: #333333

Grab the Rounded Rectangle Tool, and start creating 3 shapes. All must have the same size. the best way is to create one then duplicate 2 times

When you select the rounded rectangle tool please set the radius to 5 pixels

image 1

Then Add the following layer styles for all the shapes

image 2

image 3

image 4

image 5

image 6

This is the result

Click to enlarge
Click to enlarge

Rasterize all the shapes . To rasterize a layer please go to Layer > Rasterize > Shape

Then select the left rectangle, and go to Select > Load selection

You will notice that your left rectangle will be selected

image 8

Now Create another document: ( we will create a pattern )

image 9

Zoom this document to 1600% and with the Pencil Tool Draw 3 points:

image 10

After that go to Edit > Define Pattern...

Choose a name for your pattern and press OK

To learn more about patterns , please visit the following link www.talk-mania.com

After you have created this pattern please return to the layout.

Go to Select > Modify > contract ( and choose contract by 5 pixels )

image 11

Grab the Paint Bucket Tool and use the following settings

image 12

Now create a new layer ( press Ctrl+Alt+Shift+N ) and fill the selection with the pattern

Press Ctrl+D to deselect

image 13

Then Press on the " Add layer mask " Button

Select Gradient tool

Press On Radial Gradient button

And draw a line like in the following image

image 14

Then Duplicate this layer and place it on the other 2 shapes

Click to enlarge
Click to enlarge

Then Select Line Tool ( set the weight of the line to 1 pixel ) and make a line with a dark color

image 16

Press on the " Add layer mask button "

Select Gradient Tool

Press on the Reflected Gradient

( be sure you have the foreground color - White , and the background color Black )

Then draw a line from the middle of the line to the exterior of the line

This will be your result

image 17

Then duplicate this line, Change the color to white, and press on the down arrow key to place the white line under the black one

image 18

Duplicate all the lines, and place it on the other 2 shapes

Click to enlarge
Click to enlarge

Select all your shapes

image 20

Then hold down the Ctrl+Shift and press on the each layer thumbnail

You will see that all your layers will be all selected

Click to enlarge
Click to enlarge

Select Elliptical Marquee Tool

Press on Intersect With selection

image 22

Then make a big oval selection like this

Click to enlarge
Click to enlarge

After you will release the mouse button you will have the following selection

Click to enlarge
Click to enlarge

Then go to Select > Modify > contract ( choose contract by 5 pixels )

image 25

Create a New Layer ( press Ctrl+Shift+Alt+N )

Select paint Bucket tool and fill the selection with white

After you will fill the selection press on Ctrl+D to deselect

Then add the following layer styles

image 26

image 27

image 28

image 29

image 30

This is my result

Click to enlarge
Click to enlarge

Then add some images on this layout. I will add some 3D boxes. You can use any image you want.

If you want to see how i have created this 3D box please follow this tutorial: link

If you are lazy you can download a photoshop action which will make the 3D software box only with 2 clicks

You can download from the following link

This is my result with my 3D software box images

Click to enlarge
Click to enlarge

Then add some text

Click to enlarge
Click to enlarge

This is my final image.

Web Design Company 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 "Web Design Company Layout"

Only registered users can write comment

No comments yet...