You are looking at archived content. The hot new stuff is happening at Veerle's blog 3.0. You should check it out!

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.

Drawing a line

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.

Add a glow

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:

Create the right brush

  • 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 ;)

Draw a random line using the brush

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.

Create a trail of stars

End result

The end result could be something like this:

picture taken at El Divino, Ibiza 2004

Want to learn more?

VECTORTUTS+ Vector Tutorials and 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

gravatar

1

permalink this comment steve Mon Aug 6, 2007 at 10.37 am

as always, amazing stuff explained in an easy-to-understand manner.  thank you!


gravatar

2

permalink this comment James Howard Mon Aug 6, 2007 at 11.21 am

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!


gravatar

3

permalink this comment Oli Mon Aug 6, 2007 at 11.25 am

Love your works! Thanks Veerle!


gravatar

4

permalink this comment djuro Mon Aug 6, 2007 at 03.39 pm

Rock on Veerle! Great job as always!


gravatar

5

permalink this comment Alex Mon Aug 6, 2007 at 03.41 pm

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.


gravatar

6

permalink this comment Deny Sri Supriyono Mon Aug 6, 2007 at 05.00 pm

great stuff, veerle - as always :)
thanks for sharing, will try this very soon.


gravatar

7

permalink this comment henry Tue Aug 7, 2007 at 03.49 am

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:)


gravatar

8

permalink this comment Josh Tue Aug 7, 2007 at 09.15 am

Great Tutorial. Easy and fast to understand. Ill have to bookmark this to use it for the design of our next flyers….


gravatar

9

permalink this comment Charbel Jamous Tue Aug 7, 2007 at 10.38 am

Thank you Verlee for providing the best tutorials ever. You’re are the best!
Good Luck!


gravatar

10

permalink this comment Rajeev Varier Tue Aug 7, 2007 at 06.33 pm

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.


gravatar

11

permalink this comment Fubiz Tue Aug 7, 2007 at 09.25 pm

Very nice tuto!


gravatar

12

permalink this comment Simon Bouchard Tue Aug 7, 2007 at 09.41 pm

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.


gravatar

13

permalink this comment sameer Wed Aug 8, 2007 at 11.22 am

this is quite a helpful tutorial

thanks for this


gravatar

14

permalink this comment Benny Wed Aug 8, 2007 at 03.11 pm

Cool. Thanks Veerle :)


gravatar

15

permalink this comment Donna Cruz Wed Aug 8, 2007 at 05.06 pm

Thanks for the tutorial. You’re an inspiration!


gravatar

16

permalink this comment Jim Wed Aug 8, 2007 at 08.25 pm

Nice tutorial. While this is a simple process once you know how, figuring out “how” is often the biggest roadblock.


gravatar

17

permalink this comment jackie Thu Aug 9, 2007 at 01.08 am

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.


gravatar

18

permalink this comment Jermayn Parker Thu Aug 9, 2007 at 05.52 am

nice….

amazing what a lil fairy dust can do..


gravatar

19

permalink this comment Leonie Thu Aug 9, 2007 at 09.07 am

This is great, simple, and to the point. Thank you!


gravatar

20

permalink this comment Veerle Thu Aug 9, 2007 at 09.31 am

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:

While this is a simple process once you know how, figuring out “how” is often the biggest roadblock.

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:

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?

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.

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.

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 ;)


gravatar

21

permalink this comment jackie Thu Aug 9, 2007 at 01.37 pm

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.


gravatar

22

permalink this comment Carlos Eduardo Thu Aug 9, 2007 at 03.38 pm

Great article!

Yesterday I wanted a tutorial to know how to do this…

Thank you for showing it :)


gravatar

23

permalink this comment bhuddlesmsu Thu Aug 9, 2007 at 03.57 pm

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.


gravatar

24

permalink this comment Veerle Thu Aug 9, 2007 at 04.33 pm

bhuddlesmsu said:

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.

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.


gravatar

25

permalink this comment Carolynn Giordano Fri Aug 10, 2007 at 02.36 pm

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!


gravatar

26

permalink this comment Fernanda Fri Aug 10, 2007 at 04.37 pm

Hi Veerle,

Many thanks for this!!!!


gravatar

27

permalink this comment ian Sat Aug 11, 2007 at 07.57 pm

Beautiful tutorial. Made me subscribe to your feed :)


gravatar

28

permalink this comment Laura Mercier Sun Aug 12, 2007 at 12.58 am

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 :)


gravatar

29

permalink this comment Blis Sun Aug 12, 2007 at 01.33 pm

Sweet tutorial Veerle. Simple, yet very effective.

Thanks!


gravatar

30

permalink this comment Alex Mon Aug 13, 2007 at 12.59 am

This is awesome and very well explained. Thanks again Veerle!


gravatar

31

permalink this comment David Thu Aug 16, 2007 at 11.39 pm

Thanks, this may come in useful on an upcoming project that I am probably going to be doing for hot chili sauce.


gravatar

32

permalink this comment Wim Fri Aug 17, 2007 at 04.25 pm

Very useful tutorial. Will definitely bookmark this one!


gravatar

33

permalink this comment vanessa Fri Aug 17, 2007 at 09.58 pm

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


gravatar

34

permalink this comment Rowan Wed Aug 22, 2007 at 06.10 am

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


gravatar

35

permalink this comment Mathew Wed Aug 29, 2007 at 01.03 pm

That’s absolutely beautiful. You make such a stunning effect so simple.



Commenting is not available in this weblog entry.

Flickrness

buy something from my Amazon wishlist