TutorialMan.com
Home Submit Help Partners Advertise Contact Search

Professional Banner Tutorial

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.



Browse tutorial categories
· Web Graphics
· PS Basics
· Layouts
· FX (Effects)
· Digital Art
· Text
· Miscellaneous
· TutorialMan
· 3D Tutorials
· 3D Resources
Tutorial Search
Popular Searches:
abstract, photoshop, fire, background, banner, logo, planet, water, metal, indents
New tutorials on video
Building Websites in Flash Building Websites in Flash
45 minutes of tutorials on how to build killer websites in Flash
LearnFlash.com
100 Photoshop Tutorials 100 Photoshop Tutorials
Experts show you how: Training Videos, Tips and Shortcuts
WatchandLearnPhotoshop.com
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
Featured sites
Flash Tutorials
Banner Design
Flash web templates
Best web templates
Ecommerce Web
Design
vBulletin Skins
Mobiles Guide
OxyScripts.com
WebDesignHelper.co.uk
Tutorial Park
Flash Templates & Intros
Free Photoshop Tutorials
Vertex Templates
Photoshop Roadmap
Tuition Agency Singapore
Tuition Agency Singapore
Graphic Design Hub
Web Hosting
Web Design Library
Tutorial Guide
Your link here?
Advertisements
Advertisements
3D Resources
Copyright 2004-2008 TutorialMan.Com   |   Home - Submit - Help - Partners - Advertise - Contact - Site Map - Privacy Policy Powered By Digital Spark