Aug 06
Creating light motion trails & glowing sparks
2007 at 10.09 am posted by Veerle Pieters
A technique often used in advertising these days, is these glowing lines. They look like light motion trails. If you ever wondered how to create these kind of lines, here is how I do it…
Light motion trails
Drawing a line
Draw a nice thin curved filled line in Photoshop using the Pen tool.
Add a glow
Double click the shape layer on the right to activate the Effects. Check the Outer Glow option and play with the color, transparency,... That's basically it. I think the hardest part is finding the exact setting and drawing the exact line you want.
Glowing sparks
Create the right brush
Create a brush using the following settings. Choose the default Soft Round 21 px brush. Go to the Brushes palette and edit the following settings:
- Change the spacing in the Brush Tip Shape to 222%
- Check Shape Dynamics and change the Size Jitter to 100%
- Check Scattering, check Both Axes and put the Scatter to 775%
Draw a random line using the brush
Choose a light color that will match perfect for the glowing sparkling dots. Draw a random line using the brush. That's it ;)
Trail of stars
As an extra we create a trail of stars. Launch Illustrator, create a new document and draw a group of random stars using the Star shape tool. You can use a circle as a guide (draw a circle and hit command/control + 5). Select all stars and drag them in the Symbols palette. Now select the Symbol Sprayer tool, choose the stars as symbol to spray with and draw the trail. You may need to experiment a bit with the Symbol Sprayer tool settings. Do this by double clicking the Symbol Sprayer tool in the Toolbox. If you got your trail, select all stars and go to Object > Expand. Select all stars, go to Photoshop and paste your stars as a Shape Layer. Fill them in the color you want, add some transparency or a gradient mask etc. Play around.
End result
The end result could be something like this:
Want to learn more?
A good and not expensive source to learn more about Illustrator, Photoshop, or web design is by joining the Tuts+ sites. You get access to the source files for just $9 a month. So your ONE membership gives you access to members-only content for ALL the Plus sites. I've written a tutorial for the Vector Tuts section.
35served
1
as always, amazing stuff explained in an easy-to-understand manner. thank you!
2
As with many of your illustrator / photoshop tutorials, I start off thinking that it looks cool but can’t imagine what you could use it for. As always, though, your final example answers my question.
Another fine tutorial!
3
Love your works! Thanks Veerle!
4
Rock on Veerle! Great job as always!
5
On a somewhat related note, I like to use the overlay blend mode to achieve the effect of the stars (or whatever) as being sort of burned or seared into the image. It’s kind of a nice effect when whatever you’ve got on top of your base image stands out too much.
6
great stuff, veerle - as always :)
thanks for sharing, will try this very soon.
7
hey thanks alot for this tutorial, been trying to get this effect right for a loong time but never really succeeding. gonna try it out later:)
8
Great Tutorial. Easy and fast to understand. Ill have to bookmark this to use it for the design of our next flyers….
9
Thank you Verlee for providing the best tutorials ever. You’re are the best!
Good Luck!
10
There are tools out there.. Only a good worker knows how to use them well.. and u r a master in this art. Jealous of u.. of how u use tools to get the effect u need. Great tute..!! Wish u all the best.
11
Very nice tuto!
12
The hardest part in this tutorial is to “Draw a nice thin curved filled line using the Pen tool.”
How can I do that? I’ve tried several times without any success.
13
this is quite a helpful tutorial
thanks for this
14
Cool. Thanks Veerle :)
15
Thanks for the tutorial. You’re an inspiration!
16
Nice tutorial. While this is a simple process once you know how, figuring out “how” is often the biggest roadblock.
17
Hi -
Very nice tutorial - I really like the star trail and the lines.
I tried to do the star trail, however I noticed that when I expanded the star trail, then copied it into Photoshop as a shape layer, that they just became solid squares with the color fill of the shape layer, and were no longer stars. Do you have any idea why that might have happened?
Also, I am wondering what settings you used with the symbol sprayer tool to get the star trail to curve in such a nice neat way? The end result does look good as background embellishment on the photo above - it reminds me of laser lights or something.
18
nice….
amazing what a lil fairy dust can do..
19
This is great, simple, and to the point. Thank you!
20
Thanks for the comments so far, I appreciate your feedback. Simon, I’ve sent you an e-mail with some tips. Hope this helps :)
Jim said:
That’s exactly true, even for me after writing these tutorials and spending a lot of time in Photoshop and Illustrator I often look at cool effects and wonder “how the hell do you do that?”. Especially with Photoshop I always get the feeling I know so little and I just scratch the surface. I wonder if there is a person on this planet who knows the entire app and has used it completely in all its feature ;)
jackie said:
Hm, maybe try expanding the stars in Illustrator twice? If you expand 1x you get the stars in boxes. If you expand a 2nd time, they will become actual star shapes. Then copy and paste them in Photoshop. I did reproduce the whole thing with 1 expand and it still worked on my end, not sure why it doesn’t on your end. Maybe you use CS2? I’m using CS3 and I’m not sure if this behavior is exactly the same between the 2 versions.
These are the settings I’ve used : Diameter 200px, Itensity 5 and Symbol Set Density 6. The way the trail looks in the end depends entirely on how you spray, how fast you move with the mouse and how you move. I moved my mouse in a curved line from top left to bottom right in 1 single move but not too fast otherwise you get gaps. If you move too slow you get too much overlapping stars. When the trail was drawn and I expanded it I tweaked some stars here and there to make the trail perfect the way I wanted. Some stars were removed because they were overlapping others. Hope this explanation makes sense ;)
21
Thanks so much Veerle for the explanations on how to do the expansion, as well as using the symbol sprayer tool. That really helps! Maybe there is a difference between versions - I am using an older version of Illustrator, so that might have something to do with it. How to use the symbol sprayer tool effectively probably takes practice to develop just the right “stroke” and intensity. Thanks again for your detailed descriptions!
I will try it all again.
22
Great article!
Yesterday I wanted a tutorial to know how to do this…
Thank you for showing it :)
23
I am having the same problems as simon. I usually do all of my curves in illustrator. I am having issued creating a filled curved with photoshop. Thanks, your the best.
24
bhuddlesmsu said:
There are some differences in how the Pen tool works in Photoshop in comparison with Illustrator. For example to draw a corner anchor point or to close a path with a corner you need to hold down the option/alt key. You can also draw your path in Illustrator and paste it as a shape layer in Photoshop ;) Adobe should make the Pen behavior the same in all their apps, that would make things easier. Using the Pen tool is already rather difficult if you’re not experienced or very used to it.
25
I just discovered this website not too long ago. Its great to know there are people out there who love design for the pure art of it and want to spread their knowledge with others. Truly amazing and wonderful work! Thanks for sharing!
26
Hi Veerle,
Many thanks for this!!!!
27
Beautiful tutorial. Made me subscribe to your feed :)
28
This is neat, I am trying to update my website and this is exactly what I was looking for. I would always come across your blog for CSS inspiration but would just pass through. I think I will stay and see what you have to offer :)
29
Sweet tutorial Veerle. Simple, yet very effective.
Thanks!
30
This is awesome and very well explained. Thanks again Veerle!
31
Thanks, this may come in useful on an upcoming project that I am probably going to be doing for hot chili sauce.
32
Very useful tutorial. Will definitely bookmark this one!
33
I would like to know more about how to created a curved filled line using the pen tool within photoshop to achieve this effect. The diirections are a little vague, do you think you could email me a step by step on how to use the pen tool, I can do the rest, just need help on that part.
Thank you
Vanessa
34
Actually, with a little bit work this can also be done completely in Photoshop.
To create the curves in PS, use the pen tool and draw a straight line by clicking twice in different parts of the image.
Once you have your line, use the add anchor points pen tool to add your first anchor point, then, grab one of the anchor point handles and drag it around to create the curve that you want. Repeat by adding another anchor point on your original path and dragging the the anchor point handle again.
Next, grab one of the preset calligraphic brushes of a suitable size for your image resolution so that it’s not too small. You can leave the fill color as white. Once you have selected your brush type and color, right click the path you created before and select Stroke Path. This will create one of the nice curves for you.
Create a new layer above, and Ctrl click on the layer in which you created your curve, this will create a selection based on the curve outline. Then grab your favourite gradient or color bucket to fill your curve.
Then using Veerle’s technique add an outer glow to your selection.
Finally, remove your original layer and change the opacity and blend options for your new layer to taste.
I think you can also use Veerle’s star brush settings and grab the star shape also from Photoshop preset brushes, create another curved path as previous and stroke path with your star brush with the spatter/jitter settings similar to Veerle’s
35
That’s absolutely beautiful. You make such a stunning effect so simple.