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

16.01.2012 -

moumni10 says …

Thanks

15.12.2011 -

dinesh1234 says …

Excellent so nice

09.11.2011 -

baneta91 says …

Cool

22.09.2011 -

davidlooi123 says …

Learning something thx

10.08.2011 -

inyourpc says …

Nice ...Simply owsum.

View all user comments for this tutorial.

Tutorial statistics

Date added:
20.07.2005
Author:
Jack
User rating:
4/5
Rate tutorial:
Total views:
52766
Total comments:
104

Advertisements