HinaPoTioa

Professional banner

In this graphic design course we'll realize a professional banner for your site, consider it like a Adobe Photoshop training. Click on the image for real size banner.

Step 1) Open a new document in photoshop with
Width 468
Height 60
Background white (for now..)
Step 2)
Create a new layer, layer > new > layer, and fill it with #666666
Note: press G as shortkey for Paint Bucket tool
Step 3)
Select text tool (T), click in the canvas. Photoshop automatically create a new layer.
Now set text as in image

Choose #FFCCCC as color.
Click in the top left part of the canvas and type R (Uppercase.. )
Step 4)
CTRL + J (copy a layer) two times with the text layer still selected. With the move tool (V), move your checkbox down as in image.

Step 5)
Add text to your checkbox
Font: Arial, bold, 11pt, crisp, #FFCCCC color

Step 6)
Let’s add some effect to our check box.
RIGHT Click on one of your check box layer as select “Blending Options”.
Go to “Drop Shadow” as set these settings.

Then go to “Outer Glow” and follow these setting
Note the color chosen is #FFFFBE

Then “Gradient Overlay”..

Note: Gradient is Foreground to Background, if you can find it out close the blending options then press X to reset these color and D to swicth ‘em.
Then if you want add an optional Stroke effect with these settings

The color is #CABABA
Now you should have a check box like this

Step 7)
To avoid a repetitions of step 6 a couple of times.. right click on the layer that has your finished check box with effect and select “Copy layer style”

Step 8)
Go to the other two layers with your check box right click each time on the correct layer and select “Paste layer style”.
If you have done all in the correct way you should have something like in image

HinaPoTioa

Step 9)
Repeat step 8 for your text but hide the stroke effect.. when done
Note: to hide an effect just click on the eye beside him.

Step 10)
Add some text in the right part of the canvas
Text HOSTING.CO with
Time New Roman, Roman, 30pt, Crisp, color#FFCCCC

Text THE BEST CHOICE FOR YOUR SITE
Arial, Bold, 11pt, Crisp, color #FFCCCC
Do not add effect to hosting.co for now
Add instead the same effect of Low Prices to “THE BEST..”


Step 11)
We need to add some arrow as background shapes
Click Custom Shape Tool (U), then in the top tool bar click on the triangle, select all and chooce the arrow shown in the image

Draw an arrow as in image with a white color

Add an Outer Glow effect
Note the color chosen is #FFFFBE

and Gradient Overlay with White to Trasparent as gradient color

Step 12)
CTRL + J the arrow layer two times, use the move tool to move your two new layer to the right. Apply the same effect to them with Copy and Paste layer style
Decrease the fill of the left arrow to 20%, center to 30% and right to 40%

Nice.
Step 13)
Now from Custom Shape Tool menu choose a Butterfly, with White as foreground color
Scale and move it as in image. Decrease the fill of the layer to 30%

Add these effect to the butterfly layers.

The color is #FFFFBE
And then Gradient Overlay
Gradient color is white to transparent


Step 14)
Hosting layer must be on top, click and drag it to move up if it is the case.
Create a new layer between the hosting.co layer and the butterfly one and with the Rectangular Marquee Tool make a selection like in image from side to side.
Fill the selection with White color
Decrease the opacity to 50%

Step 15)
Click Add vector mask

Select the Gradient Tool with black to white gradient
Draw a line from left to right in the already created layer (the one filled with white..).
This steps creates a fade in effect from transparent to white.


Step 16)
Add this inner shadow effect to the Hosting.co layer

Finished! Click for a larger image.