TutorialMan.com
Home Submit Help Partners Advertise Contact Search

Professional Banner Tutorial

Social Bookmarks   Add to Del.icio.us   Add to Digg   Submit to Reddit   Stumble It!   Blink & Share     Share on Share on Technorati   Share on Facebook
As a designer, many people may request an awesome, yet professional looking banner for their website. Here is a walkthrough of how I do mine.

1. Start a new document (696x150 for me), make a new layer and fill it with a random color.



2. Double click on this layer, go to Gradient Overlay, and create a gradient (Hint: do not use vibrant colors or else the banner will be too bright and discolored when you add more color).



3. I Imported a great looking stock photo of clouds on top of everything. (Hint: get a large image and then shrink it so that the quality increases).



4.I messed around with my blending settings so that it looks good on the gradient. For this I used a "Hard Light" for my cloud image. This gives it more vibrant color and also makes it look surreal.



5.I Imported a great stock photo of a butterfly. I have cut out the butterfly and placed it on the canvas. Please note that butterflies simply look good in design...I'm not sure why. You can use whatever photo you'd like.



6. I duplicated the butterfly, Filter > Blur > "Gaussian Blur"ed it at 6.9, and set it to overlay. This makes it darker as well as surreal.



7. I double clicked on the original butterfly image and added an Inner Glow and Outer Glow so that the edges were mostly clouded.



8. For this part, I followed my Abstract Swirl tutorial, made 4 swirls and placed them coming from an obvious light source.


Click Image to Download .PSD


Anyway, this tutorial was meant to show a few techniques of creating great looking banners and I hope you've learned something. Here are a few more banners I've made.



Social Bookmarks   Add to Del.icio.us   Add to Digg   Submit to Reddit   Stumble It!   Blink & Share     Share on Share on Technorati   Share on Facebook
Browse tutorial categories
· Web Graphics
· PS Basics
· Layouts
· FX (Effects)
· Digital Art
· Text
· Miscellaneous
· TutorialMan
· 3D Tutorials
· 3D Resources
Tutorial Search
Popular Search Cloud:
signature navigation button glass text abstract background indents clouds ice banner indent logo planet photoshop fire water metal
Highlights
Partners
3D TutorialsPlanet Boredom
Photoshop 101Depiction
Tutorial GuideAdes Design - Web Design and Development, Website Templates, Tutorials - Photoshop, Dreamweaver, CSS and PHP
WebDesignHelper.co.ukPhotoshop Roadmap
    Become a TM.com Partner
Advertisements
Click here to advertise on this spot!
Featured sites
Stock Photography
Website Hosting
Web Hosting
Mobiles Guide
OxyScripts.com
WebDesignHelper.co.uk
Flash Templates & Intros
Free Photoshop Tutorials
Vertex Templates
Tutorial Guide
Your link here?
Advertisements
Tutorial Guide
Advertisements
3D Resources
Copyright 2004-2010 TutorialMan.Com   |   Home - Submit - Help - Partners - Advertise - Contact - Site Map - Privacy Policy Powered By Digital Spark