adv banner
Photoshop  Home Photoshop Web Layout Tech Hosting Layout
rss

Tech Hosting Layout

Author: amitk More by this author


First let's start with a new document, with the following sizes:

760x770 pixels, and with the following color : #cdc8c2

Grab Pen Tool , and create the following shape ( hold down Shift key , and try to create the same shape like mine

image 1

For this shape add the following layer style

image 2

image 3

Duplicate this layer ( select the layer , then press Ctrl+J ), and for the second layer add the following layer styles

image 4

image 5

Here is a screen shot to see how looks my layout so far

Click to enlarge
Click to enlarge

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

image 7

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

image 8

After that go to Edit > Define Pattern...

Choose a name for your pattern and press OK

Now duplicate this layer one more time , and add the following layer style

image 9

image 10

This is my result:

image 11

Now it is time to play one more time with Pen Tool, I am going to create a few shape. you can see them in the next screen shot

Click to enlarge
Click to enlarge

For the top 3 gray shapes please add the following layer styles

image 13

image 14

image 15

image 16

This is my result after i have applied the same layer styles for all 3 shapes

Click to enlarge
Click to enlarge

Select all this 3 shapes

image 18

Then drag them to the " create new layer " button from the bottom of the layer palette. In this way you will duplicate this 3 layers in the same time

image 19

With the duplicated layer still selected press on Ctrl+E ( this will merge all this 3 layers into a single one )

image 20

For this merged layer please add the following layer style

image 21

image 22

After that select rectangular marquee tool, and create a selection like mine

Click to enlarge
Click to enlarge

Then press Delete on your keyboard, and Ctrl+D to deselect. This is my result

image 24

Now please add the following layer styles for the body of our layout

image 25

this is my result

image 26

Add the following layer styles for the gray shape from the footer of your layout

image 27

image 28

This is my result

image 29

Now please add alone some text with type tool

Click to enlarge
Click to enlarge

I will add a image with a 3D server. if you don't have nice 3D servers, you can download some nice 3D logos from www.logo-3d.com and place it instead of my server

image 31

Please go to this photo-shop-brush.com and download the following set of brushes. Load the brushes in photoshop, and on a new layer please add some details on your layout

Click to enlarge
Click to enlarge

After that you can download also the following set of brushes, and add another details

This is final result. i hope you like this layout. if you like it please register and download this layout to see how it's made

Tech Hosting 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 "Tech Hosting Layout"