Jump to content


Photo

Using Blend Paths to create wavey, abstract background effects


  • Please log in to reply
39 replies to this topic

#1 abeall

abeall

    FireworksNut

  • Administrators
  • PipPipPipPipPipPip
  • 523 posts

Posted 10 August 2007 - 07:39 PM

Simple effect achieved with the new Blend Paths command in Fireworks CS3.

Attached Images

  • waveblend.small.fw.png


#2 blue2x

blue2x

    FireworksMaster

  • FwGurus
  • PipPipPipPipPipPipPip
  • 720 posts
  • Location:Cagayan de Oro City , Philippines
  • Interests:Adobe Fireworks , Business , Investing , Art , Technology

Posted 10 August 2007 - 07:45 PM

holy moly ! i tried the blend paths tool during the jam session, never knew that the stroke could do something like this ! its a very promising tool.

#3 abeall

abeall

    FireworksNut

  • Administrators
  • PipPipPipPipPipPip
  • 523 posts

Posted 10 August 2007 - 07:49 PM

holy moly ! i tried the blend paths tool during the jam session, never knew that the stroke could do something like this ! its a very promising tool.


It's a good start, but definitely not the same level of power as the Illustrator blend tool. Put your requests in here, though! How about if you could re-apply the Blend Paths command to an already blended group and it will know to delete the old blend paths and make new ones, so you don't have to keep undoing and redoing when you are toying with different effects?

#4 blue2x

blue2x

    FireworksMaster

  • FwGurus
  • PipPipPipPipPipPipPip
  • 720 posts
  • Location:Cagayan de Oro City , Philippines
  • Interests:Adobe Fireworks , Business , Investing , Art , Technology

Posted 10 August 2007 - 08:11 PM

heres my shot

blend_paths.png

#5 blue2x

blue2x

    FireworksMaster

  • FwGurus
  • PipPipPipPipPipPipPip
  • 720 posts
  • Location:Cagayan de Oro City , Philippines
  • Interests:Adobe Fireworks , Business , Investing , Art , Technology

Posted 10 August 2007 - 08:18 PM

It's a good start, but definitely not the same level of power as the Illustrator blend tool. Put your requests in here, though, I'm listening! I'm considering making it so that you can re-apply the Blend Paths command to an already blended group and it will know to delete the old blend paths and make new ones, so you don't have to keep undoing and redoing when you are toying with different effects.

Ick, the tutorial image is being downsized and it's all blurry. I'll see if I can resize it so it doesn't get blurry...


a.)was wondering why blending a square with a circle, the image is distorted a bit on its other half ( pls see the link below ) , is there any way to achieve smoothness?

b.) how many steps is the maximum? or the advisable amount? tried it over 350, and the image looks unclear, what do u think?

paths.jpg

#6 abeall

abeall

    FireworksNut

  • Administrators
  • PipPipPipPipPipPip
  • 523 posts

Posted 10 August 2007 - 08:26 PM

a.)was wondering why blending a square with a circle, the image is distorted a bit on its other half ( pls see the link below ) , is there any way to achieve smoothness?

b.) how many steps is the maximum? or the advisable amount? tried it over 350, and the image looks unclear, what do u think?


a.) All that the command does is blend point to point, it doesn't do any intelligent guessing on what's the closest point or add points as needed, so the number of points and order of points in two given paths makes a difference. If two paths have different number of points, it will blend two points to the same point, and so you'll get a sort of pinching/distorting effect. In other words, it works best with two shapes with the same number of nodes -- and it even matters what order the nodes are in(see attached image).

b.) I wouldn't do more than a few hundred, for fear of Fireworks hanging up on you. :) Strokes for some reason take a lot longer for Fw to blend than solid paths. For smooth effects, you'd usually want to use filled solid paths, not strokes. Strokes are good for that sort of stepped effect, but for perfectly smooth blends you'd use filled shapes, and go from one color to another. See attached PNG.

PS - sweet image, the dashed stroke creates a neat effect I hadn't tried!

Attached Images

  • blendflip.gif
  • blendsmooth.fw.png


#7 raja

raja

    FireMonkey

  • Members
  • PipPipPipPipPipPipPipPipPipPip
  • 1,227 posts

Posted 10 August 2007 - 09:22 PM

Awesome.Tks a lot

#8 premiermc

premiermc

    FireMonk

  • Members
  • PipPipPipPip
  • 59 posts

Posted 11 August 2007 - 05:47 AM

I have the most basic of questions and thanks for the tut by the way. How do you make the first step?

How do you draw a curved line. Is it with the pen tool and how do you get such a perfect curve as mine is always jagged and no way fluid like your step 1.

The rest I can handle but step one gets me. I try draw a circle and punch with another circle but then it is not a line but a shape, if you know what I mean.

#9 stompwampa

stompwampa

    FireworksNut

  • Members
  • PipPipPipPipPipPip
  • 484 posts
  • Location:Minnesota

Posted 11 August 2007 - 08:08 AM

I have the most basic of questions and thanks for the tut by the way. How do you make the first step?

How do you draw a curved line. Is it with the pen tool and how do you get such a perfect curve as mine is always jagged and no way fluid like your step 1.

The rest I can handle but step one gets me. I try draw a circle and punch with another circle but then it is not a line but a shape, if you know what I mean.



Use the pen tool, and set the stroke to be 1 or 2 pixels soft...the hard edge option looks jagged.

Here's mine:

Attached Images

  • LineSteps.png


#10 abeall

abeall

    FireworksNut

  • Administrators
  • PipPipPipPipPipPip
  • 523 posts

Posted 11 August 2007 - 08:52 AM

I have the most basic of questions and thanks for the tut by the way. How do you make the first step?

How do you draw a curved line. Is it with the pen tool and how do you get such a perfect curve as mine is always jagged and no way fluid like your step 1.

The rest I can handle but step one gets me. I try draw a circle and punch with another circle but then it is not a line but a shape, if you know what I mean.



Oops, I completely forgot to mention you need to use the pen tool! Sorry, first time making a tutorial. ;) I updated the tutorial.

Like stompwampa said, the key for the tutorial effect is to use a 1 pixel soft stroke(see attached image), not the default hard line stroke. Of course, you can experiement with using any sort of stroke and color you want.

stompwampa - Nice! This effect can really have a million different outcomes.

Attached Images

  • 1pixelsoft.gif


#11 zabberwan

zabberwan

    Fireworks Ninja

  • Members
  • PipPipPipPipPip
  • 129 posts

Posted 11 August 2007 - 12:32 PM

That's really an ingenious effect, Abeall. Thanks for showing us how!

#12 premiermc

premiermc

    FireMonk

  • Members
  • PipPipPipPip
  • 59 posts

Posted 11 August 2007 - 01:03 PM

Thank you very much I figured it out and created it as per your tutorial and got an amazing effect.

The possibilities are endless. I learn something everyday here.

#13 so1980==MikeTaylor

so1980==MikeTaylor

    FireworksNut

  • FwGurus
  • PipPipPipPipPipPip
  • 645 posts
  • Location:Brooklyn, New York, USA
  • Interests:Fireworks, Sociolinguistics, Dialects, New York City, & Burritos.

Posted 13 August 2007 - 05:23 AM

Holy crap, abeall. This is SOOO perfect. Last week I was playing with the paths panel trying to figure out how to really use Blend Paths, you know, more useful than just a shape tween-effect.

Thanks dude.

(in the jam session i even asked if you were around to demo Blend Paths--perfect timing man.)

#14 abeall

abeall

    FireworksNut

  • Administrators
  • PipPipPipPipPipPip
  • 523 posts

Posted 14 August 2007 - 05:40 PM

Holy crap, abeall. This is SOOO perfect. Last week I was playing with the paths panel trying to figure out how to really use Blend Paths, you know, more useful than just a shape tween-effect.

Thanks dude.

(in the jam session i even asked if you were around to demo Blend Paths--perfect timing man.)


I really need to get to the next jam session! I can't believe I've only been to like one, total. They are really great, I always enjoy watching the recordings when I get a chance.

#15 Zenith

Zenith

    FireworksCommander

  • Members
  • Pip
  • 7 posts
  • Location:Wimbledon, London

Posted 15 August 2007 - 05:51 AM

I really need to get to the next jam session! I can't believe I've only been to like one, total. They are really great, I always enjoy watching the recordings when I get a chance.


ditto. just want to say that I'm very happy indeed to find this site and this page in particular.

One question i have though, about the blend effect . . .

Could it be used to do something like this. . . .????

Attached Images

  • 41df9LG3WgL._SS500_.jpg


#16 abeall

abeall

    FireworksNut

  • Administrators
  • PipPipPipPipPipPip
  • 523 posts

Posted 15 August 2007 - 07:36 AM

One question i have though, about the blend effect . . .

Could it be used to do something like this. . . .????


Hm, probably not exactly(you're best bet there would probably be to look for some photography of real smoke like that), but you could probably get a similar feel at least. The key would be:
1) Create a blend, using stroked paths which are quite squigly and overlap at a lot of points, and for the blend use a lot of steps(careful not to overdo it and stall Fireworks)
2) Select all the paths indivually(easiest way is to ungroup twice, so you don't have the group selected, but rather each path indivually -- or you could try Select > Subselect) and set all the path's opacity to a small number, like 5 or 10

The result is that the areas where paths overlap will cause the the opacity to sort of "build up" in those areas and create a sort of translucent depth feel. Then you could blur and use overlay shapes with blend modes to create a softer, richer appearence. Here's my PNG try(you could get better results with some tinkering):

Attached Images

  • blend.smoke.fw.png


#17 Zenith

Zenith

    FireworksCommander

  • Members
  • Pip
  • 7 posts
  • Location:Wimbledon, London

Posted 15 August 2007 - 07:52 AM

The result is that the areas where paths overlap will cause the the opacity to sort of "build up" in those areas and create a sort of translucent depth feel. Then you could blur and use overlay shapes with blend modes to create a softer, richer appearence. Here's my PNG try(you could get better results with some tinkering):

OMG! :thumbsup:

#18 Zenith

Zenith

    FireworksCommander

  • Members
  • Pip
  • 7 posts
  • Location:Wimbledon, London

Posted 15 August 2007 - 08:29 AM

2) Select all the paths indivually(easiest way is to ungroup twice, so you don't have the group selected, but rather each path indivually -- or you could try Select > Subselect) and set all the path's opacity to a small number, like 5 or 10

wow thats some effect.

The only thing i dont understand is the "ungroup twice".
I'm using FWCS3 with the built in blend too but after i do the blend and then ungroup, I get the three original paths and two blends (128 each, rounding hmmmm :) ).

No matter what I try I cant get the blends to separate into individual paths........

PS ) Many thanks though, this is exactly what ive been after for months :) :)

#19 abeall

abeall

    FireworksNut

  • Administrators
  • PipPipPipPipPipPip
  • 523 posts

Posted 15 August 2007 - 08:39 AM

The only thing i dont understand is the "ungroup twice".
I'm using FWCS3 with the built in blend too but after i do the blend and then ungroup, I get the three original paths and two blends (128 each, rounding hmmmm :) ).

No matter what I try I cant get the blends to separate into individual paths........


The blends, ex "Blend: 128 steps" are really just groups, you should be able to select them and ungroup them, too. Even if you don't ungroup them, you can select the groups and use Select > Subselect to select the paths individually. You'll probably want to group the whole thing so you don't have hundreds of paths floating around in the layers panel. :)

#20 Zenith

Zenith

    FireworksCommander

  • Members
  • Pip
  • 7 posts
  • Location:Wimbledon, London

Posted 15 August 2007 - 09:21 AM

The blends, ex "Blend: 128 steps" are really just groups, you should be able to select them and ungroup them, too. Even if you don't ungroup them, you can select the groups and use Select > Subselect to select the paths individually. You'll probably want to group the whole thing so you don't have hundreds of paths floating around in the layers panel. :)


finally got it! wow! :sillybunny: its a whole new technique for me, so some playing is in order :)
Fantastic

#21 so1980==MikeTaylor

so1980==MikeTaylor

    FireworksNut

  • FwGurus
  • PipPipPipPipPipPip
  • 645 posts
  • Location:Brooklyn, New York, USA
  • Interests:Fireworks, Sociolinguistics, Dialects, New York City, & Burritos.

Posted 15 August 2007 - 10:47 AM

hmm...i think a design center tutorial is in order.

:cough: :cough:

this is brilliant.

#22 Alan

Alan

    FireworksGuru

  • Root Admin
  • PipPipPipPipPipPipPipPipPipPipPipPipPipPipPip
  • 1,507 posts
  • Location:San Francisco, California USA
  • Interests:Longboarding, art and video games

Posted 15 August 2007 - 05:52 PM

Here's a similar effect. I kept everything together, increased the amount of blends, and applied a Live Filter > Gaussian Blur at 2.4.

Good show Aaron!

ribbon.png

#23 Zenith

Zenith

    FireworksCommander

  • Members
  • Pip
  • 7 posts
  • Location:Wimbledon, London

Posted 18 August 2007 - 08:15 AM

i'm getting some interesting effects with all this blend stuff but there is one but one thing is causing problems for me.

Its not strictly a blend problem but rather with applying tints and than placing everything into a symbol.

The image below looks a mess right? but load it up into fireworks and examine the symbol "Swirl".

Its built up from lots of flattened blends (boy does that make working with this blend stuff quicker!!!)
When its viewed inside the symbol the colouring is how i want it, but outside the tints just dont work.......

Any suggestions anyone ?

Attached Images

  • SWIRL2.png


#24 MagdalenaH

MagdalenaH

    FireworksNut

  • Members
  • PipPipPipPipPipPip
  • 557 posts
  • Location:Canada

Posted 18 August 2007 - 08:35 AM

Wow - this looks like something diff_lock could use for his rave party poster!
I can hardly look at it for more then 2 seconds :)

#25 abeall

abeall

    FireworksNut

  • Administrators
  • PipPipPipPipPipPip
  • 523 posts

Posted 18 August 2007 - 11:24 AM

i'm getting some interesting effects with all this blend stuff but there is one but one thing is causing problems for me.

Its not strictly a blend problem but rather with applying tints and than placing everything into a symbol.

The image below looks a mess right? but load it up into fireworks and examine the symbol "Swirl".

Its built up from lots of flattened blends (boy does that make working with this blend stuff quicker!!!)
When its viewed inside the symbol the colouring is how i want it, but outside the tints just dont work.......

Any suggestions anyone ?


Zeneth, this is a very unfortunate architecture problem with symbols and object blend modes. Blend modes don't apply when you are outside the symbol -- the blend modes basically get reverted to "normal" instead of whatever you have them at(Color and Color Burn in your PNG -- my favorite blend mode is Overlay, btw). I don't know of any workaround, other than not using a Symbol if you need blend modes, like your case. If you break the Symbol apart(Modify > Symbol > Break Apart) it will create a group with all the elements, including the hidden elements(which will still be hidden), and the blend modes will work -- look out, though, as blend modes on elements which are in a group within another group also have this problem(they revert to normal).

These blend mode problems really need to be fixed, and I hope it does in the next version of Fireworks. Put your vote here:
http://adobe.com/go/wish

#26 Zenith

Zenith

    FireworksCommander

  • Members
  • Pip
  • 7 posts
  • Location:Wimbledon, London

Posted 19 August 2007 - 01:01 PM

Yup, got my vote in.
Its really annoying that I cant use symbols in the way i expect it to work....

#27 Jim Babbage .:CMX:.

Jim Babbage .:CMX:.

    FireStarter

  • Members
  • PipPip
  • 22 posts
  • Location:Toronto, Ontario
  • Interests:Photography, digital imaging, reading, listening to audiobooks, playing around with Fireworks!

Posted 07 April 2008 - 07:21 PM

Aaron, this is awesome!

#28 dFever

dFever

    FireworksCommander

  • Members
  • Pip
  • 8 posts

Posted 08 April 2008 - 06:01 PM

great effect. ciggarette smoke can be made with this! awesome

#29 Alan

Alan

    FireworksGuru

  • Root Admin
  • PipPipPipPipPipPipPipPipPipPipPipPipPipPipPip
  • 1,507 posts
  • Location:San Francisco, California USA
  • Interests:Longboarding, art and video games

Posted 13 April 2008 - 08:55 AM

i'm getting some interesting effects with all this blend stuff but there is one but one thing is causing problems for me.

Its not strictly a blend problem but rather with applying tints and than placing everything into a symbol.

The image below looks a mess right? but load it up into fireworks and examine the symbol "Swirl".

Its built up from lots of flattened blends (boy does that make working with this blend stuff quicker!!!)
When its viewed inside the symbol the colouring is how i want it, but outside the tints just dont work.......

Any suggestions anyone ?


We have been investigating this issue on the Fireworks team. The fact that we havent engineered this into Fireworks is the limitation. We'll seriously consider this enhancement for Fireworks 10! We are definitely aware of the issue!

#30 Blue Shift

Blue Shift

    FireworksCommander

  • Members
  • Pip
  • 6 posts

Posted 08 May 2008 - 01:31 PM

Great tip!

I'm aware that this is bordering on thread necromancy, but i just made the following using the Blend Paths tool:

Posted Image

This "wormhole" was made using blend paths, twist-and-fade (only 1 step, so could be done manually), radial blur, and zoom blur.

I'm thinking of submitting it to Solar Voyager so that real artists can laugh at it...

P.S. : You don't want the source file, trust me.

#31 MagdalenaH

MagdalenaH

    FireworksNut

  • Members
  • PipPipPipPipPipPip
  • 557 posts
  • Location:Canada

Posted 08 May 2008 - 03:30 PM

...

This "wormhole" was made using blend paths, twist-and-fade (only 1 step, so could be done manually), radial blur, and zoom blur.

I'm thinking of submitting it to Solar Voyager so that real artists can laugh at it...

P.S. : You don't want the source file, trust me.


LOL - it almost looks like your name :)
I like it tho... it is really "twisted". Makes me want to go visit my optometrist.

#32 Blue Shift

Blue Shift

    FireworksCommander

  • Members
  • Pip
  • 6 posts

Posted 08 May 2008 - 04:04 PM

Uh-Oh, I mis-spelled my account name. This isn't good.

Edit: Actually, it's a typo in my Display Name only... I wonder if there's a way to change it.

#33 abeall

abeall

    FireworksNut

  • Administrators
  • PipPipPipPipPipPip
  • 523 posts

Posted 08 May 2008 - 04:52 PM

I fixed your display name :)

Cool wormhole, too!

#34 Blue Shift

Blue Shift

    FireworksCommander

  • Members
  • Pip
  • 6 posts

Posted 08 May 2008 - 05:11 PM

Thanks! (For the compliment and the fix, that is...)

#35 SiamJai

SiamJai

    Fireworks Ninja

  • Members
  • PipPipPipPipPip
  • 205 posts

Posted 09 May 2008 - 08:36 PM

LOL - it almost looks like your name :)

Haha - that made me chuckle! :bigsmile:

Blue Shift, I'm glad you've resurrected this old topic... otherwise I'd have never found this excellent tutorial.

Aaron, thanks for showing this cool use of the Blend Path tool! LiveDocs only mentions that it exists, but doesn't give any description of its use. I started to appreciate this tool now, thanks to your great tutorial! ;)

I had some fun playing around with this new knowledge, and here are a couple of my results:

blendpaths_stingray.png


blendpaths_matrix.png

#36 Grafikamateur

Grafikamateur

    FireworksFreak

  • Members
  • PipPip
  • 12 posts

Posted 17 June 2008 - 09:08 AM

nice :)

Posted Image

#37 hooperman

hooperman

    FireworksCommander

  • Members
  • Pip
  • 4 posts

Posted 20 March 2012 - 04:40 AM

Simple effect achieved with the new Blend Paths command in Fireworks CS3.

Thanks very much for the tutorial! Sorry, I'm a bit late to the party, I can't believe this thread is 5 years old. I've been having fun creating some PowerPoint backgrounds with this method. I'll work down the other posts in this thread and see what else I can come up with.

Posted Image

Let me know if you want the pngs, but they're all pretty basic. :)

#38 blue2x

blue2x

    FireworksMaster

  • FwGurus
  • PipPipPipPipPipPipPip
  • 720 posts
  • Location:Cagayan de Oro City , Philippines
  • Interests:Adobe Fireworks , Business , Investing , Art , Technology

Posted 27 March 2012 - 12:37 AM

using fireworks to create powerpoint backgrounds is a nice combo, tried it before =)

Posted Image

Let me know if you want the pngs, but they're all pretty basic. :)
[/quote]

#39 hooperman

hooperman

    FireworksCommander

  • Members
  • Pip
  • 4 posts

Posted 27 March 2012 - 11:43 AM

It is a good combo. Daz 3D are allowing users to download their 3D software for free at the moment, so Bryce + Fireworks + PowerPoint is also a good combo :-)

#40 Mai

Mai

    Fireworks Sparkle

  • Members
  • Pip
  • 1 posts

Posted 15 August 2012 - 10:50 AM

After downloading the latest path extension from Adobe, I followed your instructions to the letter and was able to generate the curves using "Blend paths".
However, when I try to convert the strokes to fill with the "Convert strokes to fill" right above the "Blend path" in the paths menu, I get the following error (see the screen snapshot) after 20 seconds or so.
I wanted to be able to apply gradients to the curves. It does work for 15 lines or so but not more.
When I look at the resorces in the task manager, it uses up to 3.8 GB of ram and then it gives up with the error.
I have to restart FW in order to do the 15 lines again.
125 lines is out of the question for the "Convert strokes to fill" command. Or even 35 for that matter.
Any ideas why?

Attached Images

  • firworks error.png