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.
1 person found this helpful
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.
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:
Message was edited by: GFP1963
1 person found this helpful
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.
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.
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.
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.
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.
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.