Design An Advertising Banner For Your Website Using Photoshop
Posted on 28. Apr, 2009 by Web Design in Photoshop
In this tutorial I’ll teach you how to make a nice, sleek and professional advertisement banner. It’s really quite easy, but you will need previous Photoshop knowledge to successfully complete this tutorial.
Step 1:
First step is to make the document in Photoshop. File > New, use a size of 468 x 60 pixels.
Now fill the background with a nice orange gradient, the colors I used for my gradient were #e14d0f and #4d1805.
Note that you’ll need to use the Gradient Tool to fill the background with the gradient. You can find the gradient tool on the same button as the fill bucket tool.
Step 2:
Next thing to do is create a new layer. Now using the Polygonal Lasso Tool, make a selection like mine in the left section of your document.
Be sure you’re on a new layer, then fill your selection with a nice, bright gradient, the colors for the gradient I used were #0084e6 and #003967.
Right-click your layer and go into the Blending Options, apply the following layer styles for your blue gradient layer:
After you applied those two layer styles, your thing should now look like this:
Lastly for this step, add a nice glossy highlight to your blue gradient layer, you can do this by following these few simple steps:
- Start by making a new layer, now select the blue gradient layer by holding ctrl and clicking the layer’s thumbnail.
- Using the Gradient Tool, drag a white gradient inside of your selection.
- After making your gradient, nudge your selection down 30 pixels (hold shift and press the down arrow key three times) then press delete.
- Change the layer mode for your shine layer to Soft Light, and lower the opacity to about 30-55%.
Step 3:
How about adding some nice details?
Start by using the pen tool to make a nice, smooth path in the background on the right. After you made a nice selection, do a little soft brushing inside then change the layer mode to Soft Light and lower the opacity if needed.
Step 4:
Write out your description text in the left section using the Horizontal Type Tool, write your text out in white (#FFFFFF.)
The font used above is called RockWell, you can find it for free on DaFont.
After writing out your text, apply the following layer styles:
That will have made your text stand out a bit more nicely.
Step 5:
Next thing to do is add in some thumbnails or something else on the right side, or you could use some descriptive text. I added in 3 thumbnails from tutorials from PhotoshopSpot, then applied this Inner Glow and this Stroke.
You should have something like this:
Step 6:
Lastly you’ll want to add in something that will attract the users’ eye, so I added in a little star badge with the text: “GO!”
Firstly I made the star badge by using the Polygon Tool, then I added in the following layer styles:
And you should have a badge that looks like this:
Lastly I added in the text for the badge, I then applied the following layer styles:
And now you should have text that looks like this:
Step 7:
Last thing you will want to do is add in the border, I guess it depends what sort of website it will be going on to choose the color. If it’s going on a black website, you should use white as the border, if it’s going on a white website, you should use a black border.
Thanks for reading, we hope you enjoyed the tutorial. If need be, you can also download the PSD file from this tutorial from here. Need more help or guidance with any of the tutorials then please register and visit the forum.
25 Responses to “Design An Advertising Banner For Your Website Using Photoshop”
Leave a Reply
Loading ...
XTREMEGFX.NET
28. Apr, 2009
Nice TT
Thank’s 4 Sharing By : XTREMEGFX.NET
cris
28. Apr, 2009
COOL…….!!!
Matt
28. Apr, 2009
Nice Tutorials, Thanks
Josh Hough
28. Apr, 2009
Pretty good pretty good.
Mat Greenfield
28. Apr, 2009
Nice
Adam
28. Apr, 2009
Nice one thanks
~ Adam
Jim
28. Apr, 2009
Nice tutorial.
So easy to follow even i might be able to create it!!!
maruti
28. Apr, 2009
thanks
hardip kohli
29. Apr, 2009
nice tutorial
K. Herren
29. Apr, 2009
Very helpful. I plan to use it right away on
LasVegasNetDaily.com
maikal fardha
13. May, 2009
very usefull…and easy to learn…tangs aloat
huwaw69
22. May, 2009
i loved the way you made the step 3 thing… hahaha definitely perfect!
huwaw69’s last blog post..20 Hand Picked photography and Art Inspirations # 17
Asanka
30. May, 2009
thats good …. so nise , thank u very much
Dmitry Marduk - Graphic Design Resources
01. Jun, 2009
[...] Webdesigndev web advertising banners & more [...]
Michael Burns
04. Jun, 2009
Well written article. I really enjoyed it. Keep up the good work.
diane
15. Jun, 2009
This is great, would like to see vertical banner design as well please
zikoon
27. Jun, 2009
looooooz
Sam
09. Jul, 2009
Awesome tutorial, great job!
raman
21. Jul, 2009
very nice i like this tutorial
Stephen
25. Jul, 2009
Hi, I can´t to do step 3. Can somebody help me? Otherwise…the tutorials are super
…thank for help …
Compton
02. Sep, 2009
Nice tutorial.
Jar
27. Sep, 2009
Nice !
rubii
30. Oct, 2009
niceeeee
Biker
25. Jan, 2010
Hi, I cant do step three as it is in the picture. At first, I cannot make selection just from the line (I have to connect the object arround, so it is thicker than just the line in the picture. Brushing means just use the brush (with setting opacity) and then nothing happened if I change it to soft-light. Should I do the selection in the new layer or on the background as it is written?
Thank you fo rany help
Murlu
31. Jan, 2010
Very helpful, love the tutorial.