Web Hosting Layout Tutorial
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
Open a New Document 800×700 with white as your background color
Create a new layer. Using the rounded rectangle tool, with a 10px corner radius, draw a square in the middle of the page.
Right click on the layer and select blending options. Apply the following Layer Styles:
Stroke
Outer Glow
Save these settings to use them later by clicking the New Style button. When the box pops up name your style and save it.
Your image should look something like this.
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.
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
Popularity: 26% [?]
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
on February 12th, 2008 at 8:42 am
This tutorial is simply one of the best I’ve come across so far. Excellent – Thanks
on January 12th, 2009 at 8:05 am
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.
on January 12th, 2009 at 10:33 am
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.
on August 24th, 2009 at 1:31 am
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.