Design, Tutorials

web 2.0 star burst in Photoshop

This is a step by step tutorial with screenshots on how to create a web 2.0 star burst in Adobe Photoshop. web 2.0 star burst has become very popular recently thanks to web 2.0 hype. Those glossy web 2.0 star bursts are also known as Star flashes, Seal, web 2.0 Badge and can be seen everywhere especially on web 2.0 logos. At the end of this tutorial, you will be able to create a web 2.0 star burst using Adobe Photoshop.

Create a new Photoshop document of 300x300 pixels and name it anything you like.
web 2.0 star burst in Photoshop

Change the foreground color to #ffac0b.
web 2.0 star burst in Photoshop


Expand Rectangle Tool menu and click on Custom Shape Tool.
web 2.0 star burst in Photoshop

Select Seal from Shape drop down list and make sure you have the same option settings (Mode, Opacity, Anti-Alias, etc) as below:
web 2.0 star burst in Photoshop

Create a new layer and draw a Seal. Hold down Shift key when drawing to get a perfect Seal.
web 2.0 star burst in Photoshop

Press Ctrl+Click on the layer thumbnail (containing the Seal). That will select just the seal and nothing else. With the seal selected, create a new layer.
web 2.0 star burst in Photoshop

Change the foreground color to #ffc604.
web 2.0 star burst in Photoshop

Expand Paint Bucket Tool and click on Gradient Tool.
web 2.0 star burst in Photoshop

Click inside the Gradient Drop Down menu from the Options toolbar (where it says "click to edit the gradient"). The Gradient Editor will pop up. Select the second item from Presets which is Foreground to Transparent and click OK.
web 2.0 star burst in Photoshop

Draw a gradient line inside the Seal selection on the new layer. It should look something like below.
web 2.0 star burst in Photoshop

Expand "Rectangular Marquee Tool" and click on "Elliptical Marquee Tool".
web 2.0 star burst in Photoshop

Create a new layer, and make a selection of an eclipse like below and fill it with white.
web 2.0 star burst in Photoshop

Change the Opacity of the new layer (the one with an eclipse) to between 7% - 15%. web 2.0 star burst in Photoshop

Type any text inside the Seal.
web 2.0 star burst in Photoshop

Right click on the text layer and click on "Blending Properties".
web 2.0 star burst in Photoshop

Tick "Drop Shadow" from Styles sidebar and set the options as below:
web 2.0 star burst in Photoshop

Crop the document nicely and make the background layer invisible (you can do this by clicking on the eye next to a layer thumbnail)
web 2.0 star burst in Photoshop

And this is what you will get! You can also add a very subtle drop shadow if you like.
web 2.0 star burst in Photoshop

And there you have it, a web 2.0 star burst!

I used Adobe Photoshop CS4 to create the star burst. You can get one from Amazon at about $680.

If you don't have Graphics software or time to do it, check out the Mega Web 2.0 Elements for premade badges, sliders, shiny marketing graphics (buy now, subscribe now, download, free trial, etc) and other commonly used web 2.0 graphics. All files are in fully layered PSDs.

[tags]star, star burst, web 2.0, beta, badge, photoshop, design[/tags]

One thought on “web 2.0 star burst in Photoshop

  1. Nice, easy to follow and effective, thanks!

Comments are closed.

Twitter
LinkedIn
YouTube
Instagram