Dedicated Servers banner design

In this free tutorial we will show you how to quickly and easily create this picture that could be used as a web banner or flyer.
 
Begin by creating a new file (File>New) with 410×198 px and 72 dpi

Next choose the Rounded Rectangle Tool (U) (radius 10 px) to represent the background of the banner to be on the final stage.

Dedicated Servers banner design

Select the next demonstrated parameters by making a mouse click on the layer we work with on the layers’ panel: Blending Options>Gradient Overlay

Dedicated Servers banner design

Gradient’s parameters:

Dedicated Servers banner design

Blending Options>Stroke

Dedicated Servers banner design

 

Dedicated Servers banner design

Find out in Internet a picture containing a server, cut it out and insert it on the made banner.

Dedicated Servers banner design

Create a new layer and apply on it the standard Brush Tool (B) (Opacity 10 %) to draw the shadows under the server. The Eraser Tool (E) is helpful when erasing the unnecessary elements of the shadows. Place the shadows’ layer under the layer containing the server’s one (on the layer’s panel).

Dedicated Servers banner design

 

Dedicated Servers banner design

Write now the banner’s title:

Dedicated Servers banner design

DEDICATED

Dedicated Servers banner design

SERVERS

Dedicated Servers banner design

Next we shall insert the server options’ list:

Dedicated Servers banner design

 

Dedicated Servers banner design

Choose the Pen Tool (P) to represent a pointer near the server’s options, selecting the color #449ACB

Dedicated Servers banner design

Make two copies of the pointer’s layer and select Free Transform option to place the copies as below:

Dedicated Servers banner design

On the banner’s left top corner we shall insert a layer containing the price. In this case we have to select the Pen Tool (P) and the Convert Point Tool for the appropriate corrections.

Dedicated Servers banner design

The layer’s parameters: Blending Options>Gradient Overlay

Dedicated Servers banner design

Gradient’s parameters:

Dedicated Servers banner design

Blending Options>Stroke

Dedicated Servers banner design

 

Dedicated Servers banner design

Write now the text for the price list, keeping the next indicated demands and then select the Free Transform option to turn over the text’s layer:

Dedicated Servers banner design

$10

Dedicated Servers banner design

.99

Dedicated Servers banner design

Select the next shown parameters for the layer containing the prices: Blending Options>Outer Glow

Dedicated Servers banner design

 

Dedicated Servers banner design

Using the Rounded Rectangle Tool (U) (radius of 5 px), it’s possible to draw a button under the options’ list:

Dedicated Servers banner design

The layer’s parameters: Blending Options>Drop Shadow

Dedicated Servers banner design

Blending Options>Gradient Overlay

Dedicated Servers banner design

Gradient’s parameters:

Dedicated Servers banner design

Blending Options>Stroke

Dedicated Servers banner design

Gradient’s parameters:

Dedicated Servers banner design

 

Dedicated Servers banner design

Make a copy of the new button’s layer and apply the Free Transform solution to place the copy the same way shown below, changing the parameters for the copy’s layers: Blending Options>Gradient Overlay

Dedicated Servers banner design

Gradient’s parameters:

Dedicated Servers banner design

Blending Options>Stroke

Dedicated Servers banner design

Gradient’s parameters:

Dedicated Servers banner design

 

Dedicated Servers banner design

Insert on this stage the buttons’ inscriptions, keeping the same demands shown below:

Dedicated Servers banner design

INFO

Dedicated Servers banner design

START

Dedicated Servers banner design

Choose out the indicated here parameters for the START word: Blending Options>Outer Glow

Dedicated Servers banner design

 

Dedicated Servers banner design

Finished!