15 Replies Latest reply on Mar 13, 2011 8:49 AM by Jim_Babbage

    fireworks seems less free form then photoshop

    skudman1

      I just spent a bunch of time on tutorials on fireworks, and now that I'm starting to work I see most of tutorials on the web are for Photoshop.. s.g. a simple tutorial on creating a rounded rectangle, and slicing it in photoshop (using the marquee tool) is not that simple in Fireworks.  this is driving me nuts.  The slice tool seem like it wants you to export items to html.. NO.. I don't want a program to control my workflow.  I hate this.  I just want to take a simple round box and slice the top, and bottom so I have two images I can use in css divs to create an expandable box.    I invested time in FW cause I thought it was simpler to use the PS...   Can someone who has used both comment.  I understand if it dosn't make sense, cause sometimes things are designed by MBA's for a long term profit strategy, not ease of use...

        • 1. Re: fireworks seems less free form then photoshop
          Linda Nicholls Level 4

          What you want is the Knife tool, not the Slice tool. The slice tool is, indeed, for when you want to export to HTML/CSS. Note that instead of using the Knife tool you can also punch a second rectangle through the first one to cut it

          • 2. Re: fireworks seems less free form then photoshop
            Jim_Babbage Level 4

            If you keep comparing the two applications you will get frustrated. They are not the same application. Just like Photoshop is not Illustrator or InDesign. There are similarities, yes, but they are not the same application. If they were, there'd be no point in having two applications.

             

            Overall, Fireworks is simpler to use for web and application mockups - assuming you've used it a few times. I can put together web page mockups in FW far faster than I could in Photoshop and they will be more accurate and easier to work with for web purposes.

             

            If you are truly "slicing" this object for export (and not just trying to change its shape on the cnavas) then make sure you pick the CORRECT settings for export. FW has several export workflows you can use, depending on what you are trying to do. If you want to export three slices from an entire design, select those slices first, then when you choose export, make sure you are exporting IMAGES ONLY, rather than HTML and Images or CSS and Images.

             

            There's nothing worse than learning software "on a deadline" and it seems like that's what you up against.

             

            Lastly, it seems like you have similar posts over multiple threads. It becomes very difficult for those who wish to help to track and answer the question if we have to look in a few different places, so if possible, try to keep the posts in a single thread rather than cross posting.

             

            HTH

            1 person found this helpful
            • 3. Re: fireworks seems less free form then photoshop
              skudman1 Level 1

              Great... thanks a lot.  that worked great... Just had to 'ungroup'... looking for tutorial on knife tool.. The 'Essential FW CS5 dosn't seem to cover it over on Lynda....  It seem like a real box cutter, e.g. I have to cut twice, or three times to get it to work.. I'm sure there is a key stroke command hidden somewhere. 

              • 4. Re: fireworks seems less free form then photoshop
                skudman1 Level 1

                Good perspective.  As I'm doing mostly corporate gradient decorative graphics for Sliding Doors and drop shadow expandable page sections, and don't need all the PH imaging features.  Just Wish Fireworks let us select the radius px count for the rounded corners tool, as I only need the top corners rounded for a section header and I like the little yellow controls for setting the individual corner radius.

                (now that I can use the basic rectangle, set 6px radius, and then Slice out the bottom to make it Flat...)

                 

                Thanks for tip on forum as well.  Now I'm seeing the slice tool is great for exporting a bunch of images and adding roll overs etc.  for now I like doing it by hand..   I can't wait till the dead line is over so I can play more with the tools.

                 

                Only thing I dont' like about the Knife, is you have to cut it twice.  The FW Essential CS5 on Lynda, didn't seem to have a Knife Section under vectors.  I'll look again, as a visual tutorial would help a lot.  I liked the compound tool example of cutting the sections out of the SF bridge posts showing the use of the Subtract/Punch feature.

                 

                P.S. on the forums.. I didn't know there was some type of formal support of people reviewing the posts  which is Great!! ... I thought his was just general public and volunteers... so I posted question in DW, and FW... Thanks again for the tip...

                • 5. Re: fireworks seems less free form then photoshop
                  Jim_Babbage Level 4

                  I didn't cover the Knife tool in the Essentials training so no need to look. I opted for the Compound Shape tool instead. I'll consider it for the next video though.

                   

                  Another option for you.

                   

                  1. Draw a standard rectangle. Set the corner radius in pixels using the Properties panel.
                  2. Ungroup the rectangle.
                  3. Choose the Subselection tool.
                  4. Select the two points which control one of the corner radiiby holidng down Shift and clicking on each control point.
                  5. Open the Path panel.
                  6. Choose Sharpen Points from the Edit Points section of the Path panel. Instant corner.

                   

                  It will probably take you longer to read the steps than perform them. :-)

                   

                  Conversely, you can also use this ungrouped rectangle and the path panel to create pixel precise rounded corners as well, by selecting a corner point and choose Filet Point

                  1 person found this helpful
                  • 6. Re: fireworks seems less free form then photoshop
                    skudman1 Level 1

                    Now that was FUN.. thx..  I tried the Sharpen Points,  then the Fillet Points to create a 6px corner.  Both were great, and opened up some ideas seeing how both worked.  -->.. I compared the Fillet with the original and it looked the same.  That fillet is a great command to know about.

                    • 7. Re: fireworks seems less free form then photoshop
                      Jim_Babbage Level 4

                      Yeah, the Path panel has some awesome features in it

                      • 8. Re: fireworks seems less free form then photoshop
                        skudman1 Level 1

                        this is getting better.  I tried photoshop, and found like fireworks much better/  I'm missing a concept.  When I

                        1. draw a rectangle.

                        2. then use the sub-selecting tool to try and select two corners.  Fireworks says.  To Edit a Rectangles Points you must first ungroup it to turn it into a vector.   

                        3. What does this mean.  Whats the difference between the stock rectangle I drew, and a Vector and why does un grouping it turn it into a vector.

                        4. Maybe if I understood the difference between path/rectangle/vector/group that would clear it up.  I know they are math based but thats it. couldn't find any explanation on line.

                         

                        thx

                         

                        Greg

                        • 9. Re: fireworks seems less free form then photoshop
                          TonyRedhead Level 2

                          Hi Skudman1,

                           

                          I'm glad you are getting to like Fireworks, persevere it will be worth it. Now about your rectangle....

                           

                          When you first draw a rectangle, fireworks, by default, groups it. I guess the intention was to enable you to manipulate it as a whole object i.e. Scale, reposition etc.

                           

                          So when you want to select a point you have to ungroup it first. The text in the dialog box is a bit misleading because it already is a vector. It should read something more like, "To Edit a Rectangles Points you must first ungroup the object to enable individual points"

                           

                          In regard to the difference between path/rectangle/vector/group we should look at them in the following hierachy;

                           

                          Vector

                          Path

                          Rectangle

                          Group

                           

                          1. Vector graphics (from Wikipedia) - Vector graphics is the use of geometrical primitives such as points, lines, curves, and shapes or polygon(s), which are all based on mathematical equations, to represent images in computer graphics.

                           

                          (Me) So the simplest vector graphic would be a straight line from one point to another. For example, in order to draw a vertical line of 4 cm length, behind the scenes this would be represented by an equation similar to;

                           

                          0 0 moveto
                          0 113.385827 lineto stroke


                          The advantage of a vector primitive is that unlike a bitmap it can be moved and resized endlessly without loosing resolution.

                           

                          2. Vector Path (from Wikipedia) - Vector path is a drawn or generated outline that represents a series of (vector) lines instead of raster dots (or bitmap dots). Therefore, the paths are independent of resolution.

                           

                          (Me) Paths can be open, like a straight line, closed, like a circle. Mulitple paths can be combined in a number of different ways e.g. two vector path circles, of different size, on top of each other can be combined in such a way that one circle "punches" a hole in the other.

                           

                          3. Vector Rectangle - A rectangle is a form of path (quadrilateral) made up of four sections with four right angles.

                           

                          4. Group - In Fireworks when you group objects together they behave as a single object. If you move, transform, or change attributes of the group all of the objects in the group are changed accordingly. Grouping a vector object such as a rectangle allows you to transform that rectangle as a group, if you want to change the shape you need to ungroup it, modify a point and then regroup it to transform it as an object.

                           

                          So we start with the concept of Vector Graphics, use that concept to draw a Vector Path, in your case a rectangle and then have to ungroup it to modify individual points.

                           

                          Hope this helps rather than confuses :-)

                           

                          Tony

                          • 10. Re: fireworks seems less free form then photoshop
                            skudman1 Level 1

                            Thanks Tony.  This was extremely helpful putting Vectors/Paths/Rectangles in Context.   This should be added in the Intro to the Lynda Fireworks Training videos so people understand the context rather then just the commands. (e.g. teach a man to fish). 

                             

                            • Just wondering if there is a way to draw a rectangle, then do something to it to look at the 4 elements that make up the vector.  or Ungroup them.  When I un group a rect I see four dots..
                            • On the Knife tool.  I got feedback from J Babbage.  He said he didn't cover the Knife tool in the Lynda videos.
                              • Can you do one or your great explanations on what the knife tool is doing if you have time.
                              • To split a Rect in Half, I'm just putting another rectangle in it, and using the Combine Paths/Punch out tool
                              • I'd rather do this with the knife tool.
                                • I need to un-group before the knife tool is highlighted. (not sure why)
                                • Then when I cut it in half nothing happens.  there are now two blue dots, but it dosn't split.
                                  • To get it to split.  I click another vector on the page.  then hover over the cut rectangle and the sections turn RED.  I can then move the red sections away.  Maybe if I knew what the RED color meant.

                             

                            thanks again

                             

                            Greg

                            • 11. Re: fireworks seems less free form then photoshop
                              Jim_Babbage Level 4

                              Hi:

                               

                              • Just wondering if there is a way to draw a rectangle, then do  something to it to look at the 4 elements that make up the vector.  or  Ungroup them.  When I un group a rect I see four dots..

                              When you ungroup the rectangle it contains the four control points for distorting the shape. You can use the Sub Slection tool to drag any single control point to distrot the shape, or use the Pen tool to convert the corner points to curve points by clicking and dragging.

                               

                              • On the Knife tool.  I got feedback from J Babbage.  He said he didn't cover the Knife tool in the Lynda videos.
                                • Can you do one or your great explanations on what the knife tool is doing if you have time.
                                The Knife tool cuts a path. That's all it does. Make sure you start drawing with the knife tool outside the path edge and then drag across to the other side of the path to cut the path.
                                • To split a Rect in Half, I'm just putting another rectangle in it, and using the Combine Paths/Punch out tool
                                • I'd rather do this with the knife tool.
                                  • I need to un-group before the knife tool is highlighted. (not sure why)
                                  You need to ungroup because FW rectangles are special grouped vectors, allowing you to control corner radii frrom the Properties panel. When you ungroup the rectangle, you lose the ability to quickly change corner radii all at once. When ungrouped, you would use the Path panel to filet the points to create rounded corners.
                                  • Then when I cut it in half nothing happens.  there are now two blue dots, but it dosn't split.
                                  When the knife cuts the path, both sections remain selected, so you need to deselect one of the paths. Usually just as easy to click off the canvas then reselect the section you want to edit 
                                    • To  get it to split.  I click another vector on the page.  then hover over  the cut rectangle and the sections turn RED.  I can then move the red  sections away.  Maybe if I knew what the RED color meant.

                                    The red highlight is just a preview to indicate what object you are over and that it is selectable.

                                  HTH
                                  •  

                                           

                                          thanks again

                                          • 12. Re: fireworks seems less free form then photoshop
                                            TonyRedhead Level 2

                                            Hi Skudman1,

                                             

                                            Well Jim seems to have covered most points, I've just got a couple of little things to add that can help in the process.

                                             

                                            You shouldn't have to ungroup a rectangle to have the knife tool available, simply selecting it is enough.

                                             

                                            If you hold down the Shift key you can constrain the knife to a horizontal or 45 degree angle

                                             

                                            If you have a guide in place the knife will snap to the guide

                                             

                                            If you only cut one edge it has the effect of adding another control point, that you can move, however the path itself is now open and needs to be joined using the menu/modify/combine paths/join command.

                                             

                                            regards,

                                             

                                            Tony
                                            • 13. Re: fireworks seems less free form then photoshop
                                              skudman1 Level 1

                                              Yes that helps.  Thanks a lot.   I followed your instructions and then played around for a couple hours and it's much better.  I have a much better concept of whats happening.

                                              • So the rect tool isn't magic.  I can make a rect using the pen tool, and then use the filet tool to make the corners rounded (like you said earlier)
                                              • Then use the knife tool to cut it. (having both sections highlight was confusing me.)
                                              • And even use the Modify/Combine Paths/Join tool to join lines back.

                                               

                                              thanks again for the help.

                                               

                                              -Greg

                                              • 14. Re: fireworks seems less free form then photoshop
                                                skudman1 Level 1

                                                Thanks again Tony.   Between you and Jim I'm much better and can sleep at night.  What use to take me

                                                8 hours I can now do in 15 minutes.

                                                • After I cut my rectangle in half, I then used your instructions to Modify/Combine Paths/Join... It connected the open section.  Not sure what the join is doing but it's nice. I'm going to do some tutorial on the join from the Adobe Help.
                                                  • In the past to make my table top rounded corner I had to do a rounded rect, then a rect layer and overlay it.  Now I can use the knife to much which i like much better.

                                                 

                                                Thanks again

                                                 

                                                Greg

                                                • 15. Re: fireworks seems less free form then photoshop
                                                  Jim_Babbage Level 4

                                                  Yep, my bad on the ungrouping. Not necessary as the Knife tool automaically ungroups the shape for you.