Subscribe to our Feed

Home Submit Tutorial Browse Search Top Tutorials

Blog 0

By RSS

By Email

Shining and Sparkling Text with Photoshop and Flash

Posted in Design on August 28, 2009 7:38 am by Gabriel

Homemade Tutorials is the blog of Tutorialsphere.com where you can find Photoshop (and more, soon!) tutorials for all of you knowledge hungry people out there. Enjoy!
Sponsored by

Gabriel here, with a new tutorial for you. Most of you have probably seen shining or sparkling text (maybe even both) on Flash websites and if youre like me, probably wondered hmm, how did they do that?. If, however, you are a Flash or Photoshop guru, then you might want to skip this one, as its mostly beginner stuff for both. This tutorial will teach you how to create a shine and sparkle text effect, taking you from creating the text in Photoshop, to animating the effects in Flash.

Advertise Here

Adver t i se Her e

This tutorial was created with Photoshop CS2 and Flash Professional 8, but Im sure it can be done with newer versions of these programs as well, so dont despair . This is the effect well be trying to achieve through this tutorial (click on the image below). If youve got a slower connection, wait a while until it loads the 200kb movie.

Recent Posts Shining and Sparkling T with Photoshop ext and Flash 22 Free Photoshop Cloud Brush Packs Recreating The Dark Knight Poster Realistic 3D Flag in Photoshop CSS Overlapping T Menu abs Vector Christmas Decoration Icon Website Announcement The Dark Knight Logo Website improvements Web Video Player Skin Tutorial Categories CSS (1) Design (8) News (2) Resources (1) Website Related (2) Recent Blog Comments Free PSD Tutorials: amazing tut thanks Khyne: Really cool tutorial, thanks. JABIR: very very bery goooooooooooooo fenderbirds: nice article, keep the posts c Manik: Excellent work with brilliant Tixy: Nice tutorial, pitty you used Rex Banner: Aces tutorial! One of the best physical therapist: Pretty nice post. I just stumb davenycity: great blog thank you Motte: Please make a tut on how to gr Tutorial Archives

Step 1
Create a new Photoshop document of 1024544 pixels. Fill it with #112538, then name the layer Background. Create a new layer (Ctrl+Shift+N) and fill it with #112538. Name this layer Light.
August 2009 March 2009 February 2009 December 2008 October 2008 August 2008

converted by Web2PDFConvert.com

August 2008 May 2008 April 2008 February 2008 January 2008

Create a new layer mask for the Light layer, then select the Gradient tool, Radial. With the layer mask selected, drag from the center of the canvas towards the top edge. Keep trying until you get a similar effect to the one below.

Step 2
Now lets create a pattern which we will use. Create a new document, then grab the Pencil tool (B). Before you use it, create a new layer and hide the first layer under it to show just the transparency. Now draw one pixel using the Pencil tool anywhere on the canvas. Phew, exhausting, isnt it? Grab the Rectangular Marquee tool (M) and create a selection of 13 pixels, like shown below. By the way, the document is zoomed in, thats why the pixel is showing so large in the screenshot.

converted by Web2PDFConvert.com

Go to the menu Edit Define Pattern and enter Horizontal Line Pattern in the input area (or whatever name you wish to give the pattern). Click OK. Now your pattern will show in the (oddly enough) Patterns list when you open the Layer Style window. But, well see about that in a second.

Duplicate the Light layer and fill it with white (#ffffff). Make sure the layer is selected, not the mask before you fill it up. Rename this layer Pattern. Give it a Blending Mode: Overlay and set its Opacity to 20% (press 2 on the keyboard). Double-click on this layer inside the Layers window and select Pattern Overlay on the left. Set it up like below. Your pattern is now showing at the end of the list if you click on the little arrow next to the big pattern thumbnail. The result should look like below:

converted by Web2PDFConvert.com

Step 3
Time to add some text. Press T to grab the T tool and choose Adobe Garamond Pro if you have it, if not, you ext can use Comic Sans (just kidding) . I used Adobe Garamond Pro, Bold, 91px and placed it smack in the middle of the canvas. You should do that, too.

Step 4
Now lets spice this text up a little. Bring up the Layer Style window for the text (double click the layer in the Layers window). Use the settings below:

converted by Web2PDFConvert.com

1 2 3 4 5

Step 4
Got it? Cool. Time to export our stuff into Flash. Grab the Slice T (K) and draw a slice 57096, or enough so ool that it includes the whole text, with shadows. Be careful not to cut off part of the shadow. Name the slice shinytext. Hide all other layers, then press Ctrl+Shift+Alt+S (I know) to export it. From the Preset box on the top right of the export window select PNG 24, so that we have full transparency in Flash, keeping our text lookin good. Press Save and go ahead and choose a folder where you want to save the image. I usually choose the Desktop, because Im lazy. Be aware that Photoshop will create an images subfolder in the one you chose and thats where it will save the slice(s)..

Once youve saved the text, go back to your document and hide the text layer, but unhide the others. Press

converted by Web2PDFConvert.com

Ctrl+Shift+S to save the document, then browse to the folder where you saved the text image, choose JPG as the file format. Make sure its at its highest quality, name it background and save it.

Step 5
Now its time to open up Flash! (*insert screams and creepy thriller violin music*). This is usually the part where spectators will scream nooo, dont go in there!, but were gonna go ahead and do that anyway. Create a new Flash document 1024544 pixels, make sure you set the Frame rate to 30fps for smoother animations. Press Ctrl+R to bring up the Import window, then browse and select the background image and import it. Make sure that its set at 0px, both on the X and the Y axes. Name the layer background and lock it (see below).

Step 6
Create a new layer, then press Ctrl+R again and import the text image this time. Align it to the center of the document, by using the respective buttons inside the Align palette. Name this layer text and lock it.

converted by Web2PDFConvert.com

Step 7
Create a new layer, name it highlight. Grab the T tool and type your text anywhere on the canvas. It has to be ext the same text as the one you have imported from Photoshop, same font and size and of white color. We have to align it on top of the text layer (see image below).

Step 8
Select the contents of our highlight layer (the text) and press F8 to convert it to a symbol. A Flash symbol can be Graphic (static graphics or text), Movie Clip (animated graphics) or Button (behaves like a button, has only four frames in its timeline corresponding to its four states). This time were choosing Movie Clip, because we want to create an animation that will play over and over (or only once, if we so choose). Give this Movieclip the name shine. Ill be referring to the above symbol creating process again later in this tutorial, so keep it in mind.

converted by Web2PDFConvert.com

Now, in Flash, symbols behave kind of like groups of objects (or layers) and can be opened in order to be edited, by double-clicking on them on the canvas or inside the Library.

Step 9
Go ahead and open the shine movieclip (unless its already opened from when you created it) and youll notice that inside theres our Flash text. Click on it and press F8 again to convert this text to a symbol, this time choosing Graphic, and name it shine_text. Rename the layer its on shine text.

Step 10
Create a new layer and name it highlight. Grab the Rectangle T and draw a rectangle with an approximate ool shape of the one below:

converted by Web2PDFConvert.com

With the Selection tool (V), click on the rectangle to select it, press Ctrl+C to copy it to the clipboard, then rightclick anywhere on the canvas and select Paste in place from the menu. This pastes the rectangle in the exact same position as the one you just copied, which is handy when trying to align objects either horizontally or vertically. Holding Shift and with the pasted rectangle selected, press the right arrow key to nudge it to the right, about 10px away from the old one (see image). Select the Free Transform tool (Q) and click on the second rectangle (the copy) and shrink it horizontally to about a third of its original size. You should have something like the image below.

Step 11
Select both rectangles, then in the Color Mixer palette, set Type as Linear. This gives your objects a linear gradient fill. Click on each of the two little color squares at the bottom and assign them both the color white. Click on the one on the right and select an Alpha value of about 40% for it. This makes the gradient go from white, alpha
converted by Web2PDFConvert.com

100% (alpha meaning opacity) to white, alpha 40%. The process is illustrated in the image below.

Step 12
Select the rectangles again and press F8 to convert them into a Graphic symbol with the name highlight. Select this symbol youve just created and rotate it about 30 degrees clockwise. Make sure the highlight layer is above the shine text layer in the timeline, then right-click on the highlight layer and select Mask from the menu. This converts the respective layer into a mask for the layer right under it. A mask in Flash works just like it does in Photoshop (meaning the layer below will show only through the masks pixels), except that in Flash it can be animated! Woohoo!

converted by Web2PDFConvert.com

Step 13
What were trying to do here is create the moving highlight or shining part of our animation, so were trying to move the mask from the left of the text to its right. Remember, the mask layers actual contents never show. They are simply a sort of filter for the layer theyre masking, if that makes sense, so the rectangles weve been messing with wont actually show up in the animation. Now lets unlock the shine text and its mask layer. Right-click on the keyframe (the little rectangle with a dot inside) in the timeline and select Create Motion Tween from the menu. What this does is turn on the animation switch, so to speak, starting at that frame for that specific layer. The way this works is it animates any changes in position, opacity etc. of that layer between two or more keyframes. Lets go ahead and click on the frame 20 in the timeline and press F6 to create a keyframe. The layer contents at this keyframe automatically inherits its properties at the previous keyframe. But, since were trying to create an animation, we need to move the layer contents at the second frame (the terminal frame, since this is where the animation ends). So lets move the mask all the way to the right of the text, completely away from it, not overlapping at all. Now click on the 20th frame of the shine text layer and press F5 to insert frames from 1 to 20 for that layer.

converted by Web2PDFConvert.com

Step 14
Now if we go back to frame 1 of our animation here and we press Enter we should see the mask layer moving from point A (the left of the text) to point B (the right of the text). What Motion tween did when we added it earlier was fill in all the missing animation frames in between point A and point B. Now lets right-click on the Mask layer and select Show masking. This will hide the mask layer and now when we play our animation from the beginning well see the actual shine effect that weve done all this for. Unlock the layers again and go to frame 100 in our timeline and press F5 for both highlight and shine text to add some more frames. The effect of this is a small delay after each play of the shine effect, which is certainly easy on the eyes. Since we didnt set a stop(); event at the any point in our timeline, and since were inside a Movie clip, our movie will loop ad infinitum. Go ahead and press Ctrl+Enter to test your animation. Or preview here the way its supposed to look.

Step 15
Next, were going to create our spark. Create a new layer and name it spark. Create a square of about 8080px. Select the Free Transform tool, then holding Shift, rotate it 45 degrees (one step) either way. You should now have what looks like a rhombus. Now click outside the shape, then click on it again (with the Free Transform tool selected). Scale our shape to about 5-6 pixels wide, like the image, but really this is up to how thick you want the sparks rays to be. Once youre done, click again outside the shape, then on it again. Press Ctrl+C, then right-click outside and select Paste in place. Rotate this shape to 90 degrees. You should now have what looks like a plus sign (see image below). Same process as above, click outside the shape, then on it, Ctrl+C, then paste in place. Rotate this to 45 degrees and shrink it to about 40-50% of its size. These would be the sparks secondary rays.

converted by Web2PDFConvert.com

We need a little more work on our spark shape. Select it, then go to the Color Mixer palette and select Radial as the Type of fill. Repeat the same steps as you did with the linear fill (the two squares, white color, the one on the right make it Alpha 30-40%). You should have what looks like the bottom part of the above image.

Step 16
Select the spark shape and press F8 to convert it to a Movie clip symbol. Name this movie clip spark. Open it up (double click it) and inside there should be our spark shape again. Select it and press F8 to convert it to a Graphic symbol; name it spark_graphic.

Step 17
Lets animate our spark. Go back to editing our spark movie clip. You should have our spark_graphic in it on its only layer. Right-click on the keyframe inside the timeline and select Create Motion Tween. I think you know where this is going Click on our spark graphic and in the Properties window (should be docked at the bottom of your workspace) select color: Alpha and give it a value of 0%. Click on frame 20 on our timeline and press F6 to create a new keyframe there. Select our spark graphic at frame 20 and rotate it 180 degrees from the Transform window. Now go to frame 10 in our timeline and create a keyframe there as well. Select our spark graphic at keyframe 10 and give it Alpha of 100%, rotation of 90 degrees and scale it to 180%. Go to frame 100 and press F5 to add frames and a matching delay to our shine animation.

converted by Web2PDFConvert.com

Step 18
Go back to editing the shine movie clip and duplicate the spark layer two times. Name the duplicates spark2 and spark3. Move the keyframe of the spark layer to frame 10. Move spark2s to frame 5. Move spark3s to frame 15. See image below for illustration and placement of the spark movie clips on the canvas. Once all this is done, make sure that all of the layers frames go all the way to 100, in order for the effects to synchronize.

Press Ctrl+Enter to test and export your movie and voil! A sparkling and shining text. Thats all, folks! Hope you guys enjoyed it. Be sure to please Digg it and leave a comment if you did (or not) or to show me your version! Thank you for reading. Download Shining and Sparkling Text with Photoshop and Flash PSD and FLA sources (869 KB)

Digg

Del.icio.us

Stumble

Post comment

converted by Web2PDFConvert.com

12 Comments for Shining and Sparkling Text with Photoshop and Flash
[...] Excerpt from: Homemade Tutorials Blog Archive Shining and Sparkling T ext [...] BTW I love your blog!

Homemade Tutorials Blog Archive Shining and Sparkling Text - DigitalMunk

Aug 29, 2009

I really like this. Thanks for taking the time to post this.

Clay Jackson
Aug 30, 2009

I love the amount of details you gave in your instructions through this tutorial. Looking forward to more from you.

image masking services

Oct 1, 2009

This is awesome. Thank you so much

Jean Luc Houdanou

Oct 24, 2009

This was the best thing ever!!!! Very simple indeed. I learnt so much tips and tricks here that I never knew before

3d tutorials
Jan 9, 2010

thank youuuuu so much,veryclear interestingly presented.A dentist by profession, but interested in arts and graphics

dr.jose nelson
Jan 20, 2010

it is good. it would be more better if u can upload a video of this shining and sparkling tutorial

john
Mar 9, 2010

This is such a great resource that you are providing and you give it away for free. I enjoy seeing websites that understand the value of providing a prime resource for free. I truly loved reading your post. Thanks!

physical therapist
Jul 15, 2010

A brilliant and resourcefully post

Photoshop Clipping Path

Aug 14, 2010

3 Trackback(s)
Aug 28, 2009: Homemade Tutorials Blog Archive Shining and Sparkling T ext Aug 28, 2009: Homemade Tutorials Blog Archive Shining and Sparkling T - DigitalMunk ext
converted by Web2PDFConvert.com

Nov 2, 2009: Shining and Sparkling T with Photoshop and Flash | Adobe Tutorials ext

Post Comment
Name (required)

E-mail (will not be published) (required)

Website

Submit Comment

Copyright 2008 Tutorialsphere.com. All rights reserved. Take a bite:

Tutorials

converted by Web2PDFConvert.com