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?
Tommy says:
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.
jim says:
nice work :D
Sasa Bogdanovic says:
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.
Lee says:
Thanks for the comments guys
Alex Linebrink says:
Cool list! Thanks for the feature :)
Tonya Kay says:
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
w2b says:
very nice :)
Flash Buddy says:
Thanks for the inspiration. I think I’ll start sun-bursting everything I can. I should have sun-bursted this one:
http://comicstripelpaso.com
Chris says:
When kept to a minimum or used in a subtle way sunrays can be cool!
Milk says:
Hi!
Nice article!
And thanks for showcasing my blog!
Nomilktoday.be
Martijn says:
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!
Martijn says:
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.
Lee says:
@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
Martijn says:
Okay! Found the tutorial. It’s a short and fun one to do actually.
http://www.bartelme.at/journal/archive/rays_of_light
Logo Design Guru says:
Thanks, I think the Starburst and Sun Rays are here to say!
c wylie says:
wow. i guess my site was trendy by accident. i feel so un-self-aware. lame.
Mark Carter says:
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/
Carlos Hermoso says:
Sunburst and sun rays can give a stunning look when using them properly and not in exccess. Thanks and keep up the good work!
ambrea says:
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!
Adam T. Janes says:
I also use a sunburst :)
check out how I use mine to add flavor to my Flash built site.
Silver Firefly says:
Thanks for this article. My favourite is the Phizz website. I’ve bookmarked this page.
Richard Warren says:
Looks very nice. I like the way the rays have been used in each layout. Good Stuff!
Ron Arts Web Design says:
Great ideas for sunbursts and sun rays designs. Cool stuff!!!