11 Replies Latest reply on Oct 20, 2007 2:10 PM by pixlor

    Tapered lines in FW CS3?

    dhogue94
      Is it possible to draw tapered lines with the pen or line tools in FW? I want to learn how to draw the flourishes and tapering curves that are so common around the web right now, and I know it can be done with brushes in Photoshop and Illustrator, but I haven't found a way to create the effect of a curved line that starts thick and tapers to point from one end to the other.

      Are there ways to use the pen and line tools I don't know? Any demos or tutorials out there? I know I could use some fancy fonts for some of the elements, but my goal is to learn how to draw them myself - not just copy them from somewhere else.

      Thanks!
        • 1. Re: Tapered lines in FW CS3?
          heathrowe Most Valuable Participant
          I tried this past wekend with various Brush options but to no avail.
          I can see it in the preview of the Advanced window (tappering from one side) but when applied, either through a Brush or Vector Brush all I get is the 'straight' version.

          Ultimately, I think it boils down to a combination of vector Paths and/or font options.

          h
          • 2. Re: Tapered lines in FW CS3?
            abeall Level 3
            There was actually just a discussion about this, the user wanted to create these floral designs in Fireworks. You'd create them with the pen tool and a careful eye.

            But sounds like you are looking for the easy way. In Fireworks, I'd suggest getting some of of istockphoto.com as vectors, and then placing them in your image. Same basic concept as using decorative brushes in Photoshop.

            http://www.istockphoto.com/file_search.php?action=file&text=floral
            • 3. Re: Tapered lines in FW CS3?
              Level 7
              heathrowe wrote:
              > I tried this past wekend with various Brush options but to no avail.
              > I can see it in the preview of the Advanced window (tappering from one side)
              > but when applied, either through a Brush or Vector Brush all I get is the
              > 'straight' version.
              >
              > Ultimately, I think it boils down to a combination of vector Paths and/or font
              > options.

              Not exactly. It's a matter of manually adding the "speed" and "pressure"
              data you would get from drawing brush stroke paths with with a tablet
              instead of a mouse.

              Let's say you create a path with the Pen tool and give it a Charcoal
              Creamy stroke of size 40, you then need to find the Path Scrubber tools
              which are under the Freeform Tool button in the Vector section of the
              main toolbar.

              One tool is "additive" and the other is "subtractive" and you can adjust
              whether it affects pressure, speed or both as well as the rate from the
              Property Inspector when one of these tools is selected. You'll need a
              bit of practice to get the hang of it but you just click and drag along
              sections of the path to modify the stroke. You can go back on the same
              path segment as many times as you want, you can scrub it in a come and
              go movement, whatever. Just give it a try.

              --
              Stéphane Bergeron
              reach : connect : communicate
              http://www.webfocusdesign.com
              blog : tutorials : articles : gallery
              http://www.pixelyzed.com
              • 4. Re: Tapered lines in FW CS3?
                dhogue94 Level 1
                Thanks for the info and ideas - I do not want to rely on pre-drawn vector art or fonts, because I want to develop my own drawing skills. I also played with the Brush tool and discovered that I could get the path to taper is I sped up my mouse movement as I drew, but that doesn't give the degree of control I am seeking.

                I tried Stephane's suggestion for the Path Scrubber tools, and this was the first time I think I really understood how those tools work, so thanks! Unfortunately, this doesn't provide the level of accuracy that I seek, either.

                Here's how I simulated the ability to produce a path that systematically tapers in an even/balanced way:

                (1) Use the line or pen tool to draw a 1 px path in the desired shape or curve(s) - this does not work with closed paths - only with open paths

                (2) Use the Path panel to "Expand Stroke" to width of the widest end of the path (e.g., 40 px wide with butt end (40,10,butt,miter))

                (NOTE: can someone explain what the "miter limit" is and the difference between the "corners" options? For simple strokes the corners options don't seem to produce much difference...)

                (3) Use the Subselect tool manually move the bezier points on the expanded stroke closer together - at one end I combined the end corner points (to create a single point), at the other end I left them where they were, and in the middle I adjusted placement as necessary to get a gradually tapering stroke

                (4) Fill the object as desired and (optionally) remove the stroke - you now have a tapered stroke that follows all of the original curves and (hopefully) has a systematic and gradual decrease in width.

                So, there are at least three ways to simulate this effect within Fireworks. There must be a way to write an extension that does this automatically - just draw a path and give the extension a starting width and ending width, then it calculates the decreasing (or increased) width of the path along it's length. We could even apply this to the Spiral auto shape to get a path that decreases in width as the radius decreases...

                • 5. Re: Tapered lines in FW CS3?
                  heathrowe Most Valuable Participant
                  Thanks Stephane that explains it.

                  I admit first time using those two tools.

                  dhogue94 - nice woraround, though, by following your routine, it appears no different than just using the Pen Tool and drawing them (aside from using the Path Panel). Yes/No?

                  And after a few more tries, you will prabably get better results if you use x,x, round,round

                  h
                  • 6. Re: Tapered lines in FW CS3?
                    Level 7
                    dhogue94 wrote:

                    > (2) Use the Path panel to "Expand Stroke" to width of the widest end of the
                    > path (e.g., 40 px wide with butt end (40,10,butt,miter))

                    Just draw a rectangle, fill it with a gradient, and then reduce its
                    height to 1 pixel.

                    --
                    Linda Rathgeber [PVII] *Adobe Community Expert-Fireworks*
                    --------------------------------------------------------------
                    http://www.projectseven.com
                    Fireworks Newsgroup: news://forums.projectseven.com/fireworks/
                    CSS Newsgroup: news://forums.projectseven.com/css/
                    http://www.adobe.com/communities/experts/
                    --------------------------------------------------------------
                    • 7. Tapered lines in FW CS3?
                      dhogue94 Level 1
                      Linda,

                      Yes, this works if I need a straight line with tapering width (and it creates a fading line of constant width), but not if I want a curving/flowing line with tapering width. For that I use the Pen tool to get the curve I want, expand the stroke, then reduce the "width" of the stroke at one end only. Since the curves are important to the design, the rectangle tool won't work here - though it would give me a very precise linear taper.

                      Thanks for the suggestions, hints, and guidance on the Path Scrubber tools.

                      Dave


                      Darrell,

                      I suppose I could use the Pen tool and draw two separate curves (or draw one path and duplicate then offset it) then connect the ends to produce a closed path, but I can't draw two separate paths precisely enough, and the Expand Path function eliminates the extra steps of connecting the ends of two parallel duplicate but separate paths.

                      • 8. Re: Tapered lines in FW CS3?
                        abeall Level 3
                        > I do not want to rely on pre-drawn vector art or fonts, because I want to develop
                        > my own drawing skills

                        Right on, there's a time to use existing artwork, but it's always better to learn to do it yourself if you can.

                        The way you describe with the Expand Stroke command is fine. For me, I would prefer to use the Pen tool by itself. It's not as hard as you might think: make the path as you want it, then go back down and do it in reverse. It won't be perfect, but then you can use the subselect tool to adjust the points: select two "sister" points and compare the handles, then make them match more or less.

                        The problem with Expand Stroke is that it can distort your original path, or add points in such a way that make future edits harder.
                        • 9. Re: Tapered lines in FW CS3?
                          dhogue94 Level 1
                          Yeah, I've noticed that for some paths the Expand Stroke function adds or removes points and alters the curves. I haven't been able to figure out the circumstances under which it does this, though.

                          In the situations where Expand Stroke has altered the path in a way that I do not like, I just undo the Expand, duplicate the path, offset the duplicate from the original a distance equal to the max width of the taper, use the line tool to connect the two path ends at the wide end and the subselect tool to merge the points at the tapered end. This way I do not have to draw two nearly identical paths with the pen tool - I just draw one, duplicate it, then manually join the ends to produce the same effect.

                          These have all been great ideas - thanks for the discussion!
                          • 10. Re: Tapered lines in FW CS3?
                            Level 7
                            I think the effect has been around since 1993 - 1994 or thereabouts and
                            an "easy" way is to use applications that support skeletal strokes.

                            Skeletal strokes are a dream to work with and almost as easy to edit and
                            create.

                            A Google on "skeletal strokes" will turn up quite a bit of stuff and
                            some names that are important in the development of these are HH Lee,
                            Irene ??? and Alex Hiu (I am not too sure of the full names).

                            Skeletal strokes in FW would, at least for me, be a dream come true.

                            http://www.pixcentral.com/images/900085071020 03a.jpg
                            • 11. Re: Tapered lines in FW CS3?
                              pixlor Level 4
                              Deebs, the "skeletal strokes" technology belongs to Microsoft, now, since they bought Creature House (developers of Expression). I think all the main personnel moved to Microsoft from Hong Kong, too.

                              It looks like the similar technology in the Adobe world would be the Illustrator brushes. In that sense, it would be great if FW could be enhanced to use Illustrator brushes, to be able to apply them to vector paths.