7 Replies Latest reply on Dec 8, 2008 12:23 AM by Newsgroup_User

    Fireworks-MX  (oldschool) -  How to outline text several times, without jagged edges

    trehug Level 1
      Hi FW pros.....I hope it is still allowed to ask questions about MX version...

      What I am trying to do is create text that has several layers of outlines, different colours. An example of what I'm trying to learn is like this logo design here... http://thunderfuel.com - the logo is the text THUNDERFUEL, which has a drop shadow, then an outer surrounding rim, then another drop shadow.

      When I create text - no problem.

      When I do the shadow - no problem

      But when I select the text and increase the selection marquis to create the outer surrounding colour (like the outer plate of that logo) - the fill becomes jagged. I have tried feathering the selection before selecting, after selecting, feathering the fill property - but it always is either jagged, or not sharp.

      Does anyone have advice how to use fw-mx to create these kind of multi-outlined text effects, or should I be using something else like iilustrator or PS or something? (hopefully not cause i don't own either, but whatever...)

      Really appreciate any advice, or even some tutorial links for this effect in fw-MX would be perfect - thanks!!
      trev
        • 1. Re: Fireworks-MX  (oldschool) -  How to outline text several times, without jagged edges
          pixlor Level 4
          I think you will want to create that outer plate using vector drawing tools. Shadows are meant to be blurry, so you'll get a fuzzy selection. Also, the example you show doesn't follow the outline of all the letters, it's mostly flat. You might try building something with text shapes converted to paths joined with rectangles, but having a good set of node-editing tools would still be very useful.

          I find the tools in Fireworks CS3 to be quite rudimentary and I don't care for them. Other people don't have so much trouble. A couple of alternatives to Illustrator are Inkscape (open source) and the old version of Expression (basis for the current Expression Design product from Microsoft). (I love drawing in Expression.)

          • 2. Re: Fireworks-MX  (oldschool) -  How to outline text several times, without jagged edges
            trehug Level 1
            - text to path~ thanks a lot Lorraine!

            I had just been trying that exact thing and having good results when I came back to check this thread. I've got a good amount to learn about paths and nodes like you say, but this seems to do the thing I want

            - so, on that thunderfuel website, if you go to the "web designs" page, there is a curved red arrow that says "launch". That arrow is first red, then a larger outline of yellow, then another red, then a dup layer to make a slight 3d at the bottom, then a shadow glow...

            so, what i wanted to do is like the first 3 parts - the original shape, then a larger outline, then another larger outline. I could get the starting shape nice and sharp, but when I used "expand marquis" and fill to do the next outline, it would be jagged...so is "paths" the usual tool that designers use to create these multi-layer outlines for text and shapes, cause I see that technique everywhere...?

            I think I'll play around with paths for a while tho - thanks
            /trev
            • 3. Re: Fireworks-MX  (oldschool) -  How to outline text several times, without jagged edges
              Level 7
              Hi Trev,

              > But when I select the text and increase the selection marquis to create
              > the
              > outer surrounding colour (like the outer plate of that logo) - the fill
              > becomes
              > jagged. I have tried feathering the selection before selecting, after
              > selecting, feathering the fill property - but it always is either jagged,
              > or
              > not sharp.

              FW works with both vectors and pixels. For this, you want to stick to the
              vector stuff - if you select pixels and then increase their size, of course
              you're going to lose clarity. Try creating the back plate with the pen
              tool - you can use the shift key to keep the line straight on the
              horizontals and verticals. If you're not familiar with using the pen tool,
              here's the main thing: when you click, the tool creates the end node of a
              straight line. If you drag the mouse as you click, then the tool creates a
              curve node, which sprouts arms that you can then manipulate with the
              sub-selection tool (the white arrow).

              This lets you make nice curves that you can always adjust.

              So, if I were going to duplicate the example's back plate, I would open that
              image in FW, and I would put the pen tool at the left top corner of the
              plate, and click. Then, move the mouse to the right to the spot where the
              curve down starts. Click there, which puts down a straight node, then place
              the mouse where the curve ends, and with a slight dragging motion, click.
              This puts down a curve node. Then click to the right, where that curve ends,
              without dragging, to put down a straight node. Then click to the right and
              up, where the next curve ends, with a slight drag, to put down a curve node,
              etc. Don't worry if the lines around the curve nodes aren't where you want
              them - you will adjust that later, with the sub-selection tool - the thing
              here is to put down the nodes in the right spots. Even that's not critical,
              because you can move the nodes with the sub-selection tool later. When
              you've made your way around the plate, click on the first node you made to
              close the path you've created.

              Once you've finished the outline, (and it will look weird with crazy curves
              at the curved nodes), select the sub-selection tool and adjust the nodes.
              You can move the nodes by dragging them . You will see that the curved nodes
              have two arms - you can adjust the curves by moving and lengthening and
              shortening the arms.

              You can then either hide or delete the original image.

              When you have the back plate's outline perfect, you can fill it with a
              gradient, add drop shadows, glows, bevels, etc. as you like. And everything
              will be scalable - you can make it as large as you wish with no pixelation.

              --
              Aloha,

              Jerry
              http://MauiWebDesigns.com



              • 4. Re: Fireworks-MX  (oldschool) -  How to outline text several   times,   without jagged edges
                Level 7
                trehug wrote:

                > But when I select the text and increase the selection marquis to create the
                > outer surrounding colour (like the outer plate of that logo) - the fill becomes
                > jagged. I have tried feathering the selection before selecting, after
                > selecting, feathering the fill property - but it always is either jagged, or
                > not sharp.

                Use vectors. :-)

                Here's an example of a way to create multiple outlines in Fireworks.
                Right click on the image to download the file. Step through the layers
                panel in FW to see how it was done.

                http://www.playingwithfire.com/outlines.html

                --
                Linda Rathgeber - Adobe Community Expert
                http://www.adobe.com/communities/experts/members/8.html
                --------------------------------------------------------------
                • 5. Fireworks-MX  (oldschool) -  How to outline text several times, without jagged edges
                  trehug Level 1
                  Thanks a lot Jerry and Linda - using paths is totally cool and I understand what you are saying. I get the way the pen tool works with dragging and adjusting the corners - this is like a whole new world just opened up!

                  - won't be getting a lot of sleep tonight i guess - the creative doors just got blown right off the wagon and into my neighbour's yard, this is fantastic. can't believe I've never used paths before...

                  thanks ever so kindly for the detailed answers -

                  take care, thanks,
                  /trev
                  • 6. Re: Fireworks-MX  (oldschool) -  How to outline text several   times,   without jagged edges
                    trehug Level 1
                    ....linda, i just got that outlines image and will look through that - thanks a lot, that is really nice :)
                    • 7. Re: Fireworks-MX  (oldschool) -  How to outline text several   times,   without jagged edges
                      Level 7
                      Hi Trev,

                      > - won't be getting a lot of sleep tonight i guess - the creative doors
                      > just
                      > got blown right off the wagon and into my neighbour's yard, this is
                      > fantastic.
                      > can't believe I've never used paths before...

                      That's how I felt too - bezier curves rule!

                      --
                      Aloha,

                      Jerry
                      http://MauiWebDesigns.com