Sunbursts are a very popular design trend within web and graphic design. A sunburst represents sun rays (or beams) exploding from a source point. They’re a Web 2.0 trend but they tend to work well with other graphical elements.
This post looks at how to create your own sunbursts, using existing Photoshop shapes and brushes and I’ve showcased 15 beautiful websites that include the sunburst effect in some shape or form.
Sunburst Photoshop tutorial and resources
Sunburst/sun ray tutorial
Thanks to Iceflow Studios for the video tutorial.
Photoshop sunburst brushes
Photoshop sunburst shapes
Showcase of beautiful websites using the sunburst effect
1. No Milk Today
2. That Indie Dude
3. SMS Parking
4. Yo Vivo en Vigo
5. i Menestrelli di Graelion
6. Ciclismo Urbano
7. The Relevant Elephant
8. Future of Web Design New York
9. Jared Campbell
10. Kindle
11. Morgan Hayes
12. SR28
13. Phizz
14. Glass Hills
15. Poll Daddy
Any thoughts on the sunburst trend? Do you like it, hate it, use it?
About the author
Lee Munroe is a freelance web designer from Belfast Northern Ireland. Like this article? Feel free to follow Lee on Twitter.
I personally hate it on most sites. SR28 is one of the few which uses it well. My pet peev with sunbursts is that they usually come from behind the page. If they’re used on a logo or illustration however they can be pretty good, but then again, that’s just my opinion.
nice work
Yes they can be a very useful way to drive visitors attention to the areas you want to highlight as central. Another pretty example of sunbursts combined with sticker.
Thanks for the comments guys
Cool list! Thanks for the feature
I like the sunburst when it’s a subtle, almost subliminal, but explosive graphic. As in That Indie Dude’s site above. Heck, I’m using it the subtle way as well: http://www.tonyakay.com/Blog/blogger.html
very nice
Thanks for the inspiration. I think I’ll start sun-bursting everything I can. I should have sun-bursted this one:
http://comicstripelpaso.com
When kept to a minimum or used in a subtle way sunrays can be cool!
Hi!
Nice article!
And thanks for showcasing my blog!
Nomilktoday.be
Hi Lee
I just found your site trough … hm, I don’t know anymore! But I think I already spent 20 min here and read some very useful stuff! Thx!
Oh, totally forgot to mention this. My website uses rays too but in a different way. Maybe it’s interesting too see. I know a tutorial that describes how to do it but i’ll have to look that one up.
@Martijn: Great to hear you’ve found the site useful. Great background image you have there, more of a realistic light effect. If you find the tutorial let me know
Okay! Found the tutorial. It’s a short and fun one to do actually.
http://www.bartelme.at/journal/archive/rays_of_light
Thanks, I think the Starburst and Sun Rays are here to say!
wow. i guess my site was trendy by accident. i feel so un-self-aware. lame.
Just came across your site today .. thanks for this article and many others in your blog. Great articles and nice design on your site
Mark
My sunburst design: http://www.etravelinsurance.co.uk/
Sunburst and sun rays can give a stunning look when using them properly and not in exccess. Thanks and keep up the good work!
Hey there! Thanks for the info. Can anyone help me with a link for a website utalizing the sunburst design as a full background? Need help to see if it can be done!
I also use a sunburst
check out how I use mine to add flavor to my Flash built site.
Thanks for this article. My favourite is the Phizz website. I’ve bookmarked this page.
Looks very nice. I like the way the rays have been used in each layout. Good Stuff!
Great ideas for sunbursts and sun rays designs. Cool stuff!!!