8 Replies Latest reply on Jun 21, 2012 5:09 AM by GFP1963

    Gradient Strokes


      Is there another way to produce gradient strokes on an object in FW other then:


      • layering 2 rectangles on top of each other
      • making one smaller to create the appearance of a stroke
      • applying the gradient (or any other effect) to the bottom object?


      I am not too good with Photoshop (I find it very frustrating but I think I better get on board) and opened a .psd file in FW. The border of the graphic was identified as 'layer1'. When the object is selected you can resize it but cannot apply a stroke. There is a 'Photoshop Live Effects' filter active with the 'Gradient Overlay' option selected. I could not adjust the color of the 'border' so had to reproduce it in FW using the above steps.


      This is a .jpg export of the what was in the .psd file:



      and this is what I created in FW using the steps above:



      Just seems like there would be an easier way.

        • 1. Re: Gradient Strokes
          groove25 Level 4

          Not sure about the best Photoshop-to-Fireworks workflow, but here are a couple ideas:


          • To avoid having to draw the same shape twice, you can Clone the original object and then Transform (Command-T), holding the Shift key to maintain proportion and the Option key to transform from center.
          • You can convert your two rectangles to a single composite path using Command-J (Modify > Combine Paths > Join). This may change the way the gradient renders within the shape, though. And it doesn't make the "stroked object" any easier to create. You could also just group the two rectangles to make them easier to move, etc.
          • Instead of creating two rectangles, you can create a single rectangle and then apply the Modify > Alter Path > Expand Stroke... command. I've always found this command completely unintuitive, but for a rectangle I think it's pretty simple. Start with a simple unstroked object, then in the Expand Stroke command dialog, enter the desired stroke width (under Width). The result will be composite path, much like in my first suggestion. (To me, this command acts more like "expand path" not "expand stroke"; maybe that's why I've always found it so confusing. Also, it doesn't do a very good job with circles.)


          Incidentally, Adobe just added the ability to apply gradients to strokes in Illustrator CS6.

          • 2. Re: Gradient Strokes
            Linda Nicholls Level 4

            Here's a trick I like to use to create the appearance of a gradient stroke.

            1) Duplicate the path object (a rectangle in this case).

            2) With the duplicate selected, choose Modify > Alter Path > Expand Stroke.

            3) Try a width of 4, the first corner style, leave the Miter limit at default, and choose the first end cap style.

            4) Click OK.

            5) Fill with the gradient of your choice.

            1 person found this helpful
            • 3. Re: Gradient Strokes
              GFP1963 Level 1

              Thank you for the replies. I will definitely try the suggestions out.


              I have worked with Fireworks farily extensively in the past, and was failry proficient with Photoshop even before that (maybe up until version 3?). Long story short: my work (and then a lack of it) took me away from working with these programs for a while and I am just recently getting reinvolved in the design process. I have been reacquanting myself with Fireworks, learning InDesign, and shying away from Photoshop which I now find frustrating (the devil you know vs the devil you don't ...?). Surveying the landscape PS remains the defacto standard and it seems like FW may be on its last legs (citing one discussion, from this board: http://forums.adobe.com/thread/1003319?tstart=0).


              My question to the two of you that replied to my post, and the board at large, is assuming you are FW fan(atic)s (conjecture on my part,  based solely on the fact that you frequent this forum) what keeps you from following the crowd and adopting PS (assuming, again, that you don't)? Or at least why do you favor FW (assuming you do).


              As indicated in my initial post, given that I am receiving native PS files to work with/from I am feeling compelled to become proficient in that application again, probably at the expense of another (i.e. FW). It may also be useful to note that the work I am currently involved with involves print and web.


              I understand this is a pretty broad question and perhaps I have not articulated myself as well as I had hoped but I think the intention of the question comes across. In short:


              Why Fireworks?


              Message was edited by: GFP1963

              • 4. Re: Gradient Strokes
                groove25 Level 4

                Sorry not to answer your last question; I do enough pontificating on specific issues that I was hesitant to tackle a broad question like that.


                Getting back to your first question, there's an option that both Linda and I missed. It's a newer feature that's somewhat buried in the Paths panel: Convert Strokes to Fills, the third option under the "Alter Paths" section. It works exactly the way I'd expect the "Expand Stroke" command would work. You simply apply a stroke to the object, then select Convert Strokes to Fills, and the stroke gets converted to a composite path object. From there, you can apply a Gradient fill to the object, much like in your initial example.


                I imagine this is closer to the answer you were hoping for. It's definitely more intuitive than layering multiple objects in order to 'fake' a stroke, and easier than the Expand Stroke command. (It still drives me nuts that "Expand Stroke" isn't called "Expand Path"—it has nothing to do with stroke!)


                The Paths panel was created by developer Aaron Beall who's created a number of useful extensions for Fireworks. The "Convert Strokes to Fills" command is his own creation; it was never an official Fireworks command prior to its inclusion in the Paths panel. Hopefully, this will help to remind me of its existence in the future.



                1 person found this helpful
                • 5. Re: Gradient Strokes
                  GFP1963 Level 1

                  Thank you for the update. That's pretty cool. Interesting that it essentiually works the same way you might do it manually (per your prior suggestions).


                  To be honest I had never really installed any extensions in my time using the application. So I just had to spend some time figuring that out (then got distracted for a bit by the plethora of available extensions - on that site alone). I assume I did it correctly because it does work but is accessed differently then your description.


                  • I downloaded the 'Paths.mxp' file from Mr. Beall's site
                  • Selected 'Manage Extensions...' from the 'Help' menu to open the 'Extension Manager'
                  • Selected the 'Fireworks CS 5.1' icon
                  • Clicked the 'Install' icon and selected the .mxp file.


                  When it was done I found the function under


                  'Commands > Paths > Convert Strokes to Fills


                  along with a number of other path commands that were apparently included in the .mxp file.


                  I am using Fireworks CS5. When you state it is a "newer feature" maybe you are referring to CS6 which would explain the difference? In any case it definitely takes some of the legwork out of it.


                  "...pontificating..." Nice! 


                  Thanks again!

                  • 6. Re: Gradient Strokes
                    groove25 Level 4

                    Oh! I'm sorry about the miscommunication here.


                    I called it the "Paths" panel but it's technically the "Path" panel and it should be installed by default in Fireworks CS5. If it's not already visible, you can find it under Window > Others > Path.



                    Path panel in CS5.png



                    The version that's on Mr. Abeall's website is an older legacy version, for FW8 and CS3 users, according to his text. (And then there's also a set of Path commands that offer many of the same functions.) I was including the link to his site in case you might be interested in exploring other extensions.

                    • 7. Re: Gradient Strokes
                      groove25 Level 4

                      Thought I should mention that Aaron Beall has been tweaking the Path panel released with CS6 (to fix a few bugs) and has released an updated version of the panel that will likely work in CS5 as well.




                      If interested, I'd exercise caution and create a backup of the existing Path panel first (located in the Application > Configuration > Command Panels > Others folder), then go ahead and try installing the new version. Based on your previous post, I was a bit concerned that you might have accidentally overwritten the default CS5 version; I wasn't sure what happened there. In any case, I'm glad to see that this new version is now available. It does offer some improvements over the CS5 version.

                      • 8. Re: Gradient Strokes
                        GFP1963 Level 1

                        Thank you for your continued support, You are very thorough! I don't know if I am going to install the update. I am kind of done with gradient strokes for the time being - now that I know how to do it.


                        FYI: After having installed the extension the default CS5 version (when I found it per your previous instruction!)  was still intact.


                        Thanks again for all your help.