Requirement of professional looking banner remains fresh to designers and bloggers for their different projects. This tutorial will show you how to create a stylish banner that can be used on posters or on websites, it is a very simple process but offers techniques which can be used on any project.
Sample Image Credit
I have used "Style and Beauty Festival" as a Sample Image from flickr to present this interesting, creative and professional Photoshop banner tutorial.
Photoshop Banner Tutorial Final Preview - 300x250
TutorialChip - Photoshop Banner Tutorial
Let's start our Photoshop banner tutorial i.e The Horizon of Beauty.
Step 1
Open Adobe Photoshop, and create a new Photoshop document. I am going to create a new document of 300 x 250 px with white background.
Step 1 300x250
Step 2
Create a new layer named "Base", and fill it with any color. I have filled it with #000000 color. Apply the following Blending Options.
Gradient Overlay
Blend Mode: Normal
Opacity: 100%
Gradient: #f2b01b (Location: 0%), #cb6b1f (Location: 100%)
Tick the Reverse check box
Style: Linear
Angle: 150
Step 2 Preview
Gradient Overlay
Step 3
Take Custom Shape Tool and select "starburst" shape. Apply it,
Set Foreground color to : #720000
Draw the shape in a way that it should be close matched to the following preview. Layer should be above the "Base" layer
Set the Layer Opacity to 20%
Rename the layer to "Startburst Shape Layer"
Step 3 Preview
Starburst Shape
Step 4
Select Ellipse Tool and do as follows,
Hold "Shift" key to draw an accurate circle above the "Startburst Shape Layer" as in preview. No matter what the Fill color is. There is #720000 in my case.
Rename this Layer to "Circle Layer"
"Circle Layer" will above the "Starburst Shape Layer"
Apply the following Blending Options
Outer Glow
Blend Mode: Screen
Opacity: 50%
Color: #ffffbe
Spread: 0%
Size: 24px
Inner Glow
Blend Mode: Screen
Opacity: 100%
Noise: 0%
Color: #ffffbe
Choke: 0%
Size: 12px
Gradient Overlay
Blend Mode: Normal
Opacity: 100%
Gradient: #720000 (Location: 0%), #720000 (Location: 50%), #e79d1c (Location: 100%)
Style: Linear
Angle: 90
Step 4 Preview
Circle Blending Options
Step 5
Select Rectangle Tool and do as follows,
Draw the rectangle as in preview. No matter what the Fill color is. There is #720000 in my case. This layer will be at the top of Circle Layer
Rename this Layer to "Rectangle Layer"
Apply the following Blending Options
Drop Shadow
Blend Mode: Normal, Color: #930303
Opacity: 100%
Angle: 90
Distance: 0px
Spread: 2%
Size: 5px
Inner Glow
Blend Mode: Normal
Opacity: 75%
Color: #ffffff
Choke: 0%
Size: 2px
Gradient Overlay
Blend Mode: Normal
Opacity: 100%
Gradient: #ca1010 (Location: 0%), #840808 (Location: 100%)
Style: Linear
Angle: 90
Stroke
Size: 1px
Position: Outside
Opacity: 100%
Color: #8a0909
You may adjust the layer (up/down) to some pixels in order to get following effect.
Step 5 Preview
Step 6
Select the "Rounded Rectangle Tool" and set its Radius to 5px. Do as follows,
Draw the rounded rectangle as in preview. No matter what the Fill color is. There is #a8a8a8 in my case.
Rename this Layer to "Button Layer" which is above the "Rectangle Layer"
Apply the following Blending Options
Drop Shadow
Blend Mode: Normal, Color: #000000
Opacity: 75%
Angle: 90
Distance: 1px
Spread: 1%
Size: 1px
Inner Glow
Blend Mode: Normal
Opacity: 75%
Color: #ffffff
Choke: 0%
Size: 2px
Gradient Overlay
Blend Mode: Normal
Opacity: 100%
Gradient: #a8a8a8 (Location: 0%), #f7f7f7 (Location: 100%)
Angle: 90
Stroke
Size: 1px
Color: #a8a8a8
Step 6 Preview
Button
Step 7
Let's write some text ("Enter" in case of tutorial).
Select the Text tool
Text Color: #000000
Font Family: Adobe Heiti Std
Font Size: 9pt (Sharp)
Write "Enter" and adjust it over the button as in preview
Step 7 Preview
Enter Normal Text
Step 8
Let's apply some "Embedding Effect" to the text. It is very simple and interesting in the following three steps,
Duplicate the "Enter" layer. (Ctrl+J). I have renamed the layer "Enter Duplicate". Now you have two layers with the same text and color, stacked over each other.
Make the text color to "#ffffff" of bottom layer.
Move the bottom layer to 1px down.
It is done and the effect is,
Step 9
I have completed all text in this step, You have to achieve the following preview by adjusting the text one by one. Some helping parameters are,
Font Family in all cases: Adobe Heiti Std
Font Color in all cases: #ffffff
Layer: Domain name (www.tutorialchip.com) size: 9pt
Layer: Beauty size: 36pt
Layer: The Horizon of: 13pt
Layer: Free Samples: 10pt
Layer: Bonus Products: 10pt
Layer: Limited Time Markdowns: 10pt
Layer: $10 OFF: 18pt
$10 OFF Layer has following Blending Options
Outer Glow
Opacity: 100%
Color: #7b0909
Spread: 30%
Size: 10px
Stroke
Size: 1px
Position: Outside
Opacity: 100%
Color: #000000
Step 9 Preview
Informative Text
Step 10
Let's make some adjustments to our Sample Image
Remove the background of Sample Image by using suitable Lasso tool. I have used Polygonal Lasso Tool to gain the following effect.
Scale it by holding the Shift key as in the preview: Edit - Transform - Scale -or- Ctrl+T
Apply the following Blending Options
Outer Glow
Blend Mode: Screen
Opacity: 75%
Color: #ffffff
Spread: 5%
Size: 8px
Step 10 Preview
Sample Image
Step 11
Let's finalize our Photoshop Banner Tutorial of 300x250 pixel.
Duplicate "Sample Image" layer
Following operation will be on bottom "Sample Image" layer
"Clear Layer Style" of bottom "Sample Image" layer. Right Click - Clear Layer Style
Select Hue/Saturation by Image - Adjustments - Hue/Saturation -or- Ctrl+U
Enter -100 in Lightness and hit Ok
We have prepared the shadow of "Sample Image". It will be hidden under the upper "Sample Image" layer. So move the bottom "Sample Image" layer to right in order to view this layer.
Adjust this layer as shown in preview.
Adjust the Layer Opacity to 20%.
Final Preview
TutorialChip - Photoshop Banner Tutorial
