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

Hosting Layout

Browse Pages: 2  > >>

I will create a new document with the following size: 1000 x 980 pixels. With rectangle tool

Hosting Layout image 1

I will create a rectangle with the following color #000000. I will place this rectangle on top of the document

Hosting Layout image 2

After that with Rounded rectangle tool.

Hosting Layout image 3

I will create another rectangle, with the same color #000000.

Hosting Layout image 4

With the same tool, I will create another one with the following color #e6e4e5.

Hosting Layout image 5

For this gray rectangle I will use the following layer styles.

Inner Glow

Hosting Layout image 6

Gradient overlay

Hosting Layout image 7

Gradient:

Hosting Layout image 8

Stroke

Hosting Layout image 9

This is my result:

Hosting Layout image 10

With this layer selected, I will press on Ctrl+J and I will place the shape in the footer of the website:

Hosting Layout image 11

The next step is to create another shapes with black color #000000.

Hosting Layout image 12

To apply the same layer style to all these 4 shapes you have to select the top gray layer , and right click on it , in your layer palette.

Then choose Copy Layer style:

Hosting Layout image 13

Then select each black shape, and right click on it, and select Paste layer style.

After you paste the layer style settings to each layer, you will have the following result:

Hosting Layout image 14

I will create a new layer:

Hosting Layout image 15

and I will grab Brush tool:

Hosting Layout image 16

With the following brush:

Hosting Layout image 17

With a white color I will make some random designs. be careful where you place the layer. You can drag the layer in your layer palette in the right place.

Hosting Layout image 18

I will place a image with some servers

Hosting Layout image 19

With Rounded rectangle tool I will create another shape with the following color #484848.

Hosting Layout image 20

and another one with the following color #3e3e3e.

Hosting Layout image 21

Under this one I will create another one with a different color #303030.

Hosting Layout image 22

With the same tool, I will create another rectangle with the following color #434242.

Hosting Layout image 23

For this last rectangle I will add some layer styles:

Stroke

Hosting Layout image 24

This is my result:

Hosting Layout image 25



Author's URL: amitk
Thank you for voting.
Rate this Materials:
Bad 
1 2 3 4 5 Excellent
Browse Pages: 2  > >>
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 "Hosting Layout"

Only registered users can write comment

Reader's comments
comments miamiwebdesign February 17, 2009 says:
Hosting Layout
Looks great! Nice to see someone else's technique.