Skip navigation
GFP1963
GFP1963 Calculating status...
Currently Being Moderated

Gradient Strokes

May 16, 2012 1:29 PM

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:

grad_stroke.jpg

 

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

 

grad_stroke_fw.jpg

Just seems like there would be an easier way.

1622 Views   8 Replies   Latest reply: GFP1963, Jun 21, 2012 5:09 AM
 
Replies
  • groove25
    Currently Being Moderated
    1. groove25,
    May 16, 2012 5:16 PM   in reply to GFP1963
    Report

    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.

     
    |
    Mark as:
  • Linda Nicholls
    Currently Being Moderated
    2. Linda Nicholls,
    May 16, 2012 4:58 PM   in reply to GFP1963
    Report

    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.

     
    |
    Mark as:
  • GFP1963
    Currently Being Moderated
    3. GFP1963,
    May 17, 2012 4:47 AM   in reply to Linda Nicholls
    Report

    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

     
    |
    Mark as:
  • groove25
    Currently Being Moderated
    4. groove25,
    Jun 17, 2012 7:57 PM   in reply to GFP1963
    Report

    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.

     

    http://fireworks.abeall.com/

     
    |
    Mark as:
  • GFP1963
    Currently Being Moderated
    5. GFP1963,
    Jun 18, 2012 6:32 AM   in reply to groove25
    Report

    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!

     
    |
    Mark as:
  • groove25
    Currently Being Moderated
    6. groove25,
    Jun 18, 2012 8:42 AM   in reply to GFP1963
    Report

    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.

     
    |
    Mark as:
  • groove25
    Currently Being Moderated
    7. groove25,
    Jun 20, 2012 9:56 PM   in reply to groove25
    Report

    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.

     

    http://fireworks.abeall.com/extensions/#Path

     

    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.

     
    |
    Mark as:
  • GFP1963
    Currently Being Moderated
    8. GFP1963,
    Jun 21, 2012 5:09 AM   in reply to groove25
    Report

    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.

     
    |
    Mark as:
Actions

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points