Host layout « Web « Photoshop Tutorials

Home
Photoshop Tutorials
1.3D
2.Animal Creature
3.Animation
4.Background Cover
5.Color
6.Design
7.Effect
8.Hardware
9.Holiday Event
10.Human
11.Image Format
12.Logo
13.Nature
14.Object
15.photography
16.Shapes
17.Text
18.Textures
19.Tools
20.UI Controls
21.Web
Maya Tutorials
3ds-Max Tutorials
Illustrator Tutorials
GIMP Tutorials
Photoshop Tutorials » Web » Host layout 

Then add some servers, from your stock photo collection, and in the same time you can add also some text for your hosting plans

Now go to lipsum.com and copy some dummy text. Dummy text is used as a fill-up for templates so that you get a better idea on what the finished result will be. So copy some dummy text. Select the Type Tool and paste it in (Edit- Paste).

We are ready with the body of our layout. now we will move to the header. I will add some icons over my header, and some text

1. First of all, you will need to find all of the images that you are going to use for your layout. This way, creating your page all in Photoshop will go much faster. For the purpose of this tutorial for a web host layout, I'm using pictures from multiple google image searches. When creating the "real thing", I would avoid using other people's images if possible. If you do for some images (ie. servers, which is popular), please post its source on your page.

Now let's return to our layout. Create a new layer ( press Ctrl+Shift+Alt+N ) , and with the brush tool create some clouds on your header

Create a new document with the dimensions 850�1030 pixels. Double click your background layer then press ok on the box that pops up, your background layer should now be �unlocked� double click your background layer once more and add this gradient overlay.

A few days ago i've showed you that images are very important when you create a layout. Here is the tutorial i am talking about: Tutorial. In this tutorial i will create a sleek web hosting layout without any image. All will be only text and very nice gradients. All from this set of 27.000 Gradients

If you followed the pictures and used the same Pen Tool settings, your top bar will just be an outline, to make the top bar shape an actual layer you need to click the Paths box and right click �Work Path� then select �Make Selection�. This will make a new selection based on the shape of your path and you'll see the marching ants. Make sure to create a new layer for this shape (Layer > New > Layer)!

w___w__w___.__j__a___v___a___2__s__._c__o_m | Contact Us
Copyright 2009 - 12 Demo Source and Support. All rights reserved.
All other trademarks are property of their respective owners.