Follow Us!

Web Hosting Layout Tutorial

Posted by on Oct 16, 2007 in Photoshop Tutorials, Web Layouts | 6 comments

This tutorial will show you how to create a layout for a web hosting company using Adobe Photoshop.

This is what the finished product will look like
Web Hosting Layout Photoshop Tutorial

Open a New Document 800×700 with white as your background color
Web Hosting Layout Photoshop Tutorial

Create a new layer. Using the rounded rectangle tool, with a 10px corner radius, draw a square in the middle of the page.
Web Hosting Layout Photoshop Tutorial

Right click on the layer and select blending options. Apply the following Layer Styles:

Stroke
Web Hosting Layout Photoshop Tutorial

Outer Glow
Web Hosting Layout Photoshop Tutorial

Save these settings to use them later by clicking the New Style button. When the box pops up name your style and save it.

Web Hosting Layout Photoshop Tutorial

Your image should look something like this.
Web Hosting Layout Photoshop Tutorial

Ok now you will need to download the following graphics so you can add them to the header. These are all available for free from sxc.hu.

Web Hosting Layout Photoshop Tutorial

Web Hosting Layout Photoshop Tutorial

Web Hosting Layout Photoshop Tutorial

Ok now that you have the images saved to your hard drive you can open them in Photoshop. Copy and paste the call center image into the layout document. On the menu in Photoshop go to Edit > Transform > Flip Horizontal. You image should look like this

Web Hosting Layout Photoshop Tutorial

Pages: 1 2 3 4 5

  • http://www.jithbiz.com Daniel

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

    Hats off

    Daniel

  • Pierce

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

  • http://www.claudiudesign.org web design romania

    I tried your server picture scaling as you did above and it’s kinda’ rough. Not sure about it. Maybe you can show another technique.

  • John

    As long as you are scaling down and you check the box for constrain proportions you won’t have any problems with the pictures looking rough.

  • http://www.siriusmail.com/ siriusmail.com

    Contrast is one thing that makes the page attractive. The use and mastery of it in color, value, size and weight will greatly affect the site’s appearance and edge.

  • http://www.gcommerce.com.au/ web design brisbane

    I will rasterize this lines. To rasterize a layer, you have to right click on the layer in your layer palette, then select Rasterize and with Eraser tool.