Design Tutorial 1 – Web 2.0 Banner

Posted by ScotSpellman on Nov 23, 2010 in Diving Into Design | 3 comments

For my first tutorial, I wanted to keep it simple. I was curious to see how all of these web 2.0 effects trends are created, specifically the glare, gloss gradient effects that makes these elements pop. I came across this ‘Sylish Banner for your Website’ Photoshop tutorial and it was a great place to start.

I realize that I could have spent more time cutting out the flowers, but I really wasn’t doing this tutorial to become proficient in cutting up images. Looking at the final product, I think that’s the only thing I could have done a little better. I learned how to do the effect I was going for regardless of the little choppiness in the flower cutout. Overall, this was a great starter tutorial for me because I don’t know how to use Photoshop very well. Doing this tutorial forced me to familiarize myself with some Photoshop tools and taught me some basic web 2.0 design techniques.

Here is the finished product:

Download Scot’s PSD source file: banner.psd

View the tutorial here: http://www.photoshopstar.com/web-graphics/stylish-banner-for-your-website/