Subscribe to our rss feed

Web Hosting Layout Tutorial

Posted in Photoshop Tutorials, Web Layouts by John Ward on the October 16th, 2007

Use the delete key to get rid of that section. Repeat this until all of the blue area is gone. I also used the eraser tool to fade the top of the cables out.
Web Hosting Layout Photoshop Tutorial

Now Create a new layer. Draw another rounded rectangle like the one below.
Web Hosting Layout Photoshop Tutorial

Now apply the layer style that you saved earlier. Right click on the layer and go to blending options. Click style on the side and then select the style that you saved and click ok.
Web Hosting Layout Photoshop Tutorial

Now CTRL+Click on the layer with the new box to select the box. Now use the marquee tool and hold down the alt key and drag the selection over the lower part of the box.
Web Hosting Layout Photoshop Tutorial

Let go of the mouse button and you selection should look like this. Fill the selection with #2f2f2f by selecting it as your foreground color and pressing alt+backspace.
Web Hosting Layout Photoshop Tutorial

Now right click on the layer and duplicate the layer 3 times. Move the layers to the right using the arrow tool so that you get this.
Web Hosting Layout Photoshop Tutorial

Create a new layer. Using the rectangle marquee tool create three small squares above the header graphic and fill them with #6f6f6f.
Web Hosting Layout Photoshop Tutorial

Now select the text tool. The font I used was Impact 30 point and the color for the word “pro” is #4d6dff and the word “web” is#6f6f6f.
Web Hosting Layout Photoshop Tutorial

Now use the text tool to add the tag line using Impact 14pt font and color #4d6dff.
Web Hosting Layout Photoshop Tutorial

Add the links on the right using the same Impact 14pt font with the color#d4d4d4.
Web Hosting Layout Photoshop Tutorial

The site is looking pretty good this far. Now we will need to add the hosting plan information. Select the first grey box layer from the layers pallet on the right of the screen. Now add the word Bronze using Impact 36pt font.
Web Hosting Layout Photoshop Tutorial

Apply the following blending options to the bronze layer:

Drop Shadow
Web Hosting Layout Photoshop Tutorial

Gradient overlay
Web Hosting<br />
Layout Photoshop Tutorial

Popularity: 28% [?]

Share and Enjoy:
  • Digg
  • Sphinn
  • del.icio.us
  • Facebook
  • Mixx
  • Google
  • BlogMemes
  • Fark
  • Furl
  • Live
  • NewsVine
  • Reddit
  • Slashdot
  • StumbleUpon
  • TwitThis
  • YahooMyWeb

Pages: 1 2 3 4 5


Go Daddy $1.99 Domains

2 Responses to 'Web Hosting Layout Tutorial'

Subscribe to comments with RSS or TrackBack to 'Web Hosting Layout Tutorial'.

  1. Daniel said,

    on January 29th, 2008 at 11:43 pm

    Really thank u a lot for providing this tutorials with images even, No one use to give tutorials with images………..

    Hats off

    Daniel

  2. Pierce said,

    on February 12th, 2008 at 8:42 am

    This tutorial is simply one of the best I’ve come across so far. Excellent - Thanks

Leave a Comment