Zymic

Webmaster resources

Website Traffic Special

1000 visitors from $3.95 - Learn More

Adobe Photoshop

Free Tutorials » Adobe Photoshop » Web Host Banner

Create a professional banner for your company.

Step 1

New document: 468 x 60 pixels. Fill canvas with colour #6aa02b

Step 1 diagram

Step 2

Make a new layer and make white your foreground colour.

Select the "Gradient tool" and select the "white > transparent" gradient as shown in the second picture.

Step 2 diagram

Step 3

Hold shift and drag from the top to just over a one 3rd of the document.

Set the layer mode to "Overlay"

Step 3 diagram

Step 4

Use the Elliptical Marquee Tool and make a curve edge on the far right side of the banner

Step 4 diagram

Step 5

Make a new layer and fill the selection in with white. Press CTRL+D to deselect.

Bring up the blending options.

> Outer Glow
> Bevel & Emboss
> Gradient Overlay


And now you should have:

Step 5 diagram

Step 6

Now select half of the current layer.

Step 6 diagram

Step 7

Make a new layer, fill the selection in with white and change the opacity to 17% This should give it a bit of a shine.

Step 7 diagram

Step 8

Now type the initials of your host name, for example purposes I did zh - zymichost and I used the font Dungeon (comes with XP)

Step 8 diagram

Step 9

Change the text colour to #2f2f2f

Use this blending style for stroke. (Click Here)

Step 9 diagram

Step 10

Make a selection like below. Make a new layer and drag it underneath all the other layers so it's all behind. Fill it in with white.

Step 10 diagram

Step 11

Now give the layer this stroke - click here

Now using the gradient tool make a gradient similar to below.

Step 11 diagram

Step 12

Insert an image of some servers, perhaps shadow it slightly.

Step 12 diagram

Step 13

Use the Rounded Reqtangle Tool and make a shape like below

Step 13 diagram

Step 14

Bring up the blending styles:
Inner Glow .. Click Here
Bevel & Emboss .. Click Here
Gradient Overlay .. Click Here

Step 14 diagram

Step 15

Now add some text and what your company offers. I added a few touches such as a border etc. Other Colours:
Blue
Red
Yellow

Step 15 diagram

Tutorial comments

20.11.2008 -

hocvientinhoc says …

i like it

11.11.2008 -

Terminology says …

Very nice tut. I could actually use this to begin with

28.10.2008 -

teosorama says …

nice tut, very easy :-)

14.10.2008 -

NetTalk says …

the most useful tool i ever leaning from this site is this one thanks i love it wow.

20.09.2008 -

thatsawesome says …

Nice tutorial. I wish
I had PhotoShop.

View all user comments for this tutorial.

Tutorial statistics

Date added:
20.07.2005
Author:
Jack
User rating:
5/5
Rate tutorial:
Total views:
22167
Total comments:
55

Advertisements