Editor: Kevin Yank
E-Mail: [email protected]
URL: http://www.SitePoint.com
July 7th, 2001 [Issue #18]
----- Kev's Quick Tip: Cool Photoshop 6 Starburst -----

As a departure from our usual hacker's code-fest, this issue I thought I'd feature a cool Photoshop tip.
A surprising number of Web developers also produce the graphics for their sites, so I'm pretty sure a fair few of you will be able to put this dazzling effect to good use!

Just open Photoshop 6 and follow these steps to create a cool starburst lighting effect around a piece of text. You can even try it later with your company logo! If you don't have the latest version of Photoshop, then check if your image editor of choice sports a Polar Coordinates filter, which is the key to this tip. If it does, you may be able to adapt this procedure to work in your program.

1. Create a new 640x480 pixel image. In the "New" dialog box, name the image 'Starburst' (or whatever you like) and select 'Transparent' for the initial contents of the image.
2. Choose Edit -> Fill and select 'Black' as the Contents to fill the single layer in the image with solid black.
3. Click the Text tool in the toolbar (the little 'T'), then choose a nice, thick font in the options bar (I recommend 'Arial Black'. Type '100px' for the font size, choose Centered alignment, and set the text color to white.
4. Click in the middle of your image and type 'BOOM' (or whatever text you had in mind), then Ctrl-Enter to create a new layer containing the text.
5. Using the Move Tool (at the top-right of the toolbar), position the text as close to the center of the image as possible, so that the effect will appear to be centered on the text. Make sure there's plenty of room around the text for the effect -- you can always trim the image later if it's too big.
6. In the Layers palette, right-click on the name of your text layer (as opposed to its thumbnail) and choose 'Rasterize Layer' from the popup menu.
7. Ctrl-click on the text layer in the Layers palette to select the outline of your text.
8. On the Select menu, choose 'Save Selection'. Type a name for your selection (e.g. 'BOOM outline') in the Name field and click OK to save the selection as a new channel.
9. On the Select menu, choose 'Deselect' (or Ctrl-D).
10. On the Layer menu, choose 'Merge Down' (or Ctrl-E) to combine the text with the black background.
11. On the Filter menu, choose 'Blur -> Gaussian Blur' and specify a radius of 5.0 pixels. Your text should become fuzzy around the edges.
12. Choose Filter -> Stylize -> Solarize. The fuzzy outline of your text will remain on a black background.
13. Choose Image -> Adjust -> Auto Levels (or Ctrl-Shift-L) to brighten up the outline.
14. Right-click on the name of your layer in the Layers palette and choose Duplicate Layer, and click OK in the dialog box to accept the default name.
15. Hide the top layer by clicking the eye icon to the left of the first layer on the list in the Layers palette, then select the bottom layer by clicking it in the list.
16. Here's where things get weird! Choose Filter -> Distort -> Polar Coordinates. In the Polar Coordinates window, choose 'Polar to Rectangular' and click OK. Your text outline will be warped across the top of the image.
17. Choose Image -> Rotate Canvas -> 90 degrees CW.
18. Invert the colors in the image with Image -> Adjust -> Invert (or Ctrl-I).
19. Choose Filter -> Stylize -> Wind, and make sure the method selected is 'Wind' and the direction is 'From the Right' before you click OK.
20. Type Ctrl-F to repeat the Wind effect.
21. Choose Image -> Adjust -> Auto Levels (Ctrl-Shift-L) to restore some of the darkness to the image.
22. Invert the image back to a black background (Ctrl-I).
23. Repeat the Wind effect twice more (Ctrl-F x2).
24. Choose Image -> Rotate Canvas -> 90 degrees CCW to return the warped text outline to the top of the image.
25. Choose Filter -> Distort -> Polar Coordinates, but this time choose 'Rectangular to Polar' and click OK.
26. The image should be starting to look pretty cool alrady! Now let's get back to our hidden top layer. Click the top layer in the list to select it and make it visible again.
27. On the Blend Mode drop-down list (next to the Opacity drop- down at the top of the Layers palette), choose Screen. The starburst effect from the bottom layer should now show beneath the bright, fuzzy outline of the top layer. This is already a pretty cool effect!
28. On the Select menu choose 'Load Selection' and choose the selection you saved earlier ('BOOM outline') from the Channel drop-down. Make sure 'New Selection' is selected and click OK to restore the saved selection. The original outline of the text should now appear as a marquee on your image.
29. Double-check that the top layer is selected, then choose Edit -> Clear (or just hit the Del key), then choose Select -> Deselect (Ctrl-D) to clear the selection.
30. Combine the two layers by typing Ctrl-E.
31. This is the basic starburst effect, but to make it look especially slick, let's add a splash of color! Right-click the layer name in the Layers palette and choose 'Blending Options'.
32. Select 'Gradient Overlay' from the list of styles to the left. For the Blend Mode of the gradient, choose 'Overlay'. Pick a gradient suitable for your purposes, or create your own by clicking on the gradient displayed (not the drop-down arrow) and adjusting the colours yourself. I created a fade from a bright blue (0,0,255) to a bright green (0,255,0).
33. Click OK to see your finished image!
To see the results of this effect, go to:
http://webmasterbase.com/examples/starburst.gif
Or Click here.
Experiment with your own graphics or with changes to these steps to tweak this effect for your purposes. A smoother starburst effect can be achieved, for instance, by applying the Radial Blur effect (in Zoom Blur mode) immediately after step 25, or a horizontal Motion Blur filter after step 23.


Did you like this tip? Drop me a line and let me know that you'd like to see more graphics tips!


H O M E
Hosted by www.Geocities.ws

1