Pro Socialgo > For web community software

We're going to mak a little web 2.0-ey starburst and then place it in the header of our Socialgo Network. We will use this as a button for prosocailgo that directly links to our latest  CSS 101 series. But first things first. Here is how you create the graphic using Photoshop. 



Create a new doc around 200px by 200px.  Now select the shape tool in the tool bar.

 

In the toolbar at top center you will see the Shape drop down click on it and look for the starburst shape. If you don't see it, then click the options drop down (a small arrow, top right of pallet. ) and select all. You should find it now.. 

 

click on it and draw a shape hold down the SHIFT key to keep it proportionate.  you will need to fill this shape with the color you want I went with black.

 

Once you find the color, click ok and fill the shape by using key command alt + Delete. You have to colors in the tool bar. The foreground (the one ontop) the background. You can use this key command to fill with either foreground or background. Foreground is alt+delete, Background Command or control Delete.  

Now Make a new layer above the shape.
 

Now select you marquee tool (the dancing ants tool)



Now drag a circle once again holding the Shift key to keep it a true circle. Draw it about 40% to %50 over the shape creating a half moon.



While it's still selected,  (make sure your on the new blank layer) fill it with white. you can do this with key commands b hitting the D key, that sets your colors to default (black and white.) then hit the  X key, that puts white to the foreground, and as we know you can now fill it with alt+delete. 



Now we are going to delete the outer section of this white circle. We will retain the starburst shape by using it as the selection for deleting.  

Ok, Make sure your new white layer is still selected and  caommand (apple) Control (sucky computers) CLICK the shape's mask layer.



You will now see that the shape has been selected with the dancing ants. 




Now we want our white highlight to be a few pixels in from the edge of the shape. So while this is still selected go to your SELECT menu drop down and click Modify > Contract. In the Pop-up enter 3 for three PX, press enter.

Now don't touch anything and go back to the SELECT dropdown and select "Inverse"



Hit Delete. You have now deleted the outside parts of the white, and left a cool little outline for our highlight.

That Highlight is too bright so we will just drop the transparency. NOTE: it's also a nice touch to do a very subtle gradient on this highlight, from White to transparent. But first transparency. Select the layer and slide your transparency down to around 30%. 



Now for a few effects. We will put a outline at 1 px, with a color that is only a few degrees bellow our starburst color. So I'm using a very dark gray.





While we have that open select the "drop-Shadow" radio button at the top of the panel.  adjust the occupancy to about 50.



Almost done. Now on that starburst shape we created we want to make a gradient to give it some more dimension. 

The way we will do this is close to the same way we deleted the white circle. Create a new layer, while the layer is still selected Control or Command click the starburst mask, just like before. 



Make sure the blank layer you just created is selected and go to your color picker on the tool bar. Now to do our very subtle gradient, I'm going to pick black as my  foreground and a few degrees lighter gray for my background. Now we are going to fill that selection that should still be dancing ants on the stage. 



Select Gradient tool and then click the gradient properties in the horizontal top toolbar. You have the option (usually default) for the foreground to graduate into transparency -- we don't want that, we want the one that is fading our foreground to our background color.



Now drag the gradient to diagonally across the selection. (It it's still not selected, just command click the shape mask again, then select the blank layer we want to fill. )



Well thats it! You can of course play with it more, try some different gradients, maybe bevel / emboss.  I'm just going to throw some text on there (text with slight drop shadow) and we're done. In part two we will put this into our header. If you want to see a example go to littlepraerbox.com look in the banner and see our beta burst. this one is not linked though, like the one we're going to do.

 


>>>Download PSD Starburst 2.0
GoTO: Part 2 

Ran across this cool and very simmple adobe air app that allows you to coustomize CS3 icons and web 2.0 badges to your own needs called icon generator. You might only use it once, but it's a nice little tool for those without photoshop.