Zymic

Webmaster resources

Follow us on Twitter!

Hosting status updates - Click here

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

30.10.2009 -

sayar05 says …

Çok Güzel Program

08.10.2009 -

gabykorupt says …

Nice ... but whta do you say about some flash banners ?

05.10.2009 -

monish001 says …

Good one.. But please tell how can we add add these types of banners in our websites???

01.09.2009 -

SephiiPod says …

UNCOMPLETE,
the click here are borkne

18.08.2009 -

Sohanchy_3d says …

Awesome!!!

View all user comments for this tutorial.

Tutorial statistics

Date added:
20.07.2005
Author:
Jack
User rating:
5/5
Rate tutorial:
Total views:
34312
Total comments:
80

Advertisements