11 Replies Latest reply on Jan 10, 2008 5:39 PM by Newsgroup_User

    New to Fireworks and graphics

    dzclaire
      Hi,

      I'm just learning to use Fireworks. Following a basic tutorial, I created a button, that consists of a rounded rectangle, another smaller rounded rectangle inside it, and some text.

      The button is complete, but I have no idea what to do next to resize the button in two different sizes to place on a website.

      I've saved the button as a PNG file. How do I resize the button? When I tried to resize, all I could do is resize one rectangle, not the whole button. I found the group button, and thought that would be the answer. Do I group, and then use transform, scale to get buttons of different sizes that will maintain the text correctly?

      Hope I'm making sense. Sorry, this is such a basic question, but I'm getting pretty frustrated.
        • 1. Re: New to Fireworks and graphics
          Level 7
          dzclaire wrote:
          > Hi,
          >
          > I'm just learning to use Fireworks. Following a basic tutorial, I created a
          > button, that consists of a rounded rectangle, another smaller rounded rectangle
          > inside it, and some text.
          >
          > The button is complete, but I have no idea what to do next to resize the
          > button in two different sizes to place on a website.
          >
          > I've saved the button as a PNG file. How do I resize the button? When I tried
          > to resize, all I could do is resize one rectangle, not the whole button. I
          > found the group button, and thought that would be the answer. Do I group, and
          > then use transform, scale to get buttons of different sizes that will maintain
          > the text correctly?
          >
          > Hope I'm making sense. Sorry, this is such a basic question, but I'm getting
          > pretty frustrated.
          >

          Try using File > Image Preview. You can optimize and size the button
          there, just make sure to save it with a different file name.

          --
          Jim Babbage - .:Community MX:. & .:Adobe Community Expert:.
          http://www.communityMX.com/
          CommunityMX - Free Resources:
          http://www.communitymx.com/free.cfm
          ---
          .:Adobe Community Expert for Fireworks:.
          Adobe Community Expert
          http://tinyurl.com/2a7dyp
          ---
          See my work on Flickr
          http://www.flickr.com/photos/jim_babbage/
          • 2. Re: New to Fireworks and graphics
            JoeDaSilva Level 4
            You're saying you want to make the button wider right? Click the white selector in the tools panel, then click your button (you may get a prompt, ignore it). You should see the "points" that make up the vector shape of your button. You can now manipulate these points by clicking them, then using the arrow keys on your keyboard, or by dragging them with your mouse. You can select multiple points by holding down the shift key.

            Try that and lemme know how it works out!
            • 3. Re: New to Fireworks and graphics
              dzclaire Level 1
              Sorry, your instructions don't seem to be making sense to me. I'm using Fireworks CS2, and using File -> Image Preview brings up a dialog box that allows me to select what kind of image I want, gif or jpeg. It took me about 10 minutes of playing around on the dialog box to realize that the icons in the right corner of the left pane had to do with the export wizard. I still have no idea how to resize my button.The export doesn't seem to bring up any options for specifying the size. This is very frustrating...
              • 4. Re: New to Fireworks and graphics
                JoeDaSilva Level 4
                You don't change the size of the image you're working with in the export window, you change them the same way you created them - by manipulating the vector points.

                http://www.awdsf.com/courseware/fireworks/FW2_layers_transform.htm
                • 5. Re: New to Fireworks and graphics
                  Level 7
                  dzclaire wrote:
                  > Sorry, your instructions don't seem to be making sense to me. I'm using
                  > Fireworks CS2, and using File -> Image Preview brings up a dialog box that
                  > allows me to select what kind of image I want, gif or jpeg. It took me about 10
                  > minutes of playing around on the dialog box to realize that the icons in the
                  > right corner of the left pane had to do with the export wizard. I still have no
                  > idea how to resize my button.The export doesn't seem to bring up any options
                  > for specifying the size. This is very frustrating...
                  >

                  Sorry I misunderstood. I thought you were trying to export the same
                  button at different sizes.

                  If you click on the FILE tab in the Image Preview window, though, you
                  WOULD see options for image dimensions.

                  --
                  Jim Babbage - .:Community MX:. & .:Adobe Community Expert:.
                  http://www.communityMX.com/
                  CommunityMX - Free Resources:
                  http://www.communitymx.com/free.cfm
                  ---
                  .:Adobe Community Expert for Fireworks:.
                  Adobe Community Expert
                  http://tinyurl.com/2a7dyp
                  ---
                  See my work on Flickr
                  http://www.flickr.com/photos/jim_babbage/
                  • 6. Re: New to Fireworks and graphics
                    Level 7
                    Would it be better to make the button into a Symbol?

                    Can FW CS2 do that?
                    • 7. Re: New to Fireworks and graphics
                      Level 7
                      deebs wrote:
                      > Would it be better to make the button into a Symbol?
                      >
                      > Can FW CS2 do that?

                      If we're talking about the version prior to CS3, it was FW 8 (There was
                      no FW CS2) and yes it can certainly to that. Symbols have been part of
                      the feature set since the first version.

                      --
                      Jim Babbage - .:Community MX:. & .:Adobe Community Expert:.
                      http://www.communityMX.com/
                      CommunityMX - Free Resources:
                      http://www.communitymx.com/free.cfm
                      ---
                      .:Adobe Community Expert for Fireworks:.
                      Adobe Community Expert
                      http://tinyurl.com/2a7dyp
                      ---
                      See my work on Flickr
                      http://www.flickr.com/photos/jim_babbage/
                      • 8. Re: New to Fireworks and graphics
                        dzclaire Level 1
                        Ok, you're right, it's not Fireworks CS2, it's Fireworks 8. Don't know what a symbol is, nor do know anything about resizing vector points. There are lots of points in the image. Each rectangle has its own points, the text part has points too.

                        I'm new to this. What I want to do:
                        1. save the button I created to two different sizes
                        2. use the two buttons on a web page.
                        I have no idea how to export the file, the tutorial doesn't explain.

                        I checked the Fireworks help, and found export info, but I'm not sure what I'm supposed to do before the export. Am I supposed to group everything? Then somehow do a symbol? I followed an online tutorial to create the image, but the tutorial doesn't explain what to do after the image is created to save it for use on a web page.

                        • 9. Re: New to Fireworks and graphics
                          Level 7
                          dzclaire wrote:
                          > Ok, you're right, it's not Fireworks CS2, it's Fireworks 8. Don't know what a
                          > symbol is, nor do know anything about resizing vector points. There are lots of
                          > points in the image. Each rectangle has its own points, the text part has
                          > points too.
                          >
                          > I'm new to this. What I want to do:
                          > 1. save the button I created to two different sizes
                          > 2. use the two buttons on a web page.
                          > I have no idea how to export the file, the tutorial doesn't explain.
                          >
                          > I checked the Fireworks help, and found export info, but I'm not sure what I'm
                          > supposed to do before the export. Am I supposed to group everything? Then
                          > somehow do a symbol? I followed an online tutorial to create the image, but
                          > the tutorial doesn't explain what to do after the image is created to save it
                          > for use on a web page.
                          >
                          >
                          >
                          Upload your PNG to your web site and I'll try to make a video for you.

                          --
                          Jim Babbage - .:Community MX:. & .:Adobe Community Expert:.
                          http://www.communityMX.com/
                          CommunityMX - Free Resources:
                          http://www.communitymx.com/free.cfm
                          ---
                          .:Adobe Community Expert for Fireworks:.
                          Adobe Community Expert
                          http://tinyurl.com/2a7dyp
                          ---
                          See my work on Flickr
                          http://www.flickr.com/photos/jim_babbage/
                          • 10. Re: New to Fireworks and graphics
                            JoeDaSilva Level 4
                            Draw your button the way you want it to look on screen. Now select the "slice tool". Draw a box over the button, being careful to only cover the area you wish to export. You can adjust the shape of the box when you have the black pointer selected in the tool panel, and you can also set the slice to different types of file formats (gif, jpg, etc.). Now right-click the slice that you created using the black pointer, and select "export selected slice".

                            Now just pick where you want the image to be saved to, and presto - you've got a button.

                            There's an immense about things Fireworks can do, and there's also many other ways of making buttons, and exporting them.

                            Try some of these videos, and don't hesitate to ask questions here ;-)

                            http://www.youtube.com/results?search_query=adobe+fireworks+tutorials&search=Search

                            • 11. Re: New to Fireworks and graphics
                              Level 7
                              A Symbol is something that becomes very easy to use upon repeated use.

                              It makes it easy to change every instance of the Symbol and adds it into
                              your user library so one does not need to design it all over again.

                              It has some sophistication that needs skills to use effectively (or so
                              it seems to me).

                              dzclaire wrote:
                              > Ok, you're right, it's not Fireworks CS2, it's Fireworks 8. Don't know what a
                              > symbol is, nor do know anything about resizing vector points. There are lots of
                              > points in the image. Each rectangle has its own points, the text part has
                              > points too.
                              >
                              > I'm new to this. What I want to do:
                              > 1. save the button I created to two different sizes
                              > 2. use the two buttons on a web page.
                              > I have no idea how to export the file, the tutorial doesn't explain.
                              >
                              > I checked the Fireworks help, and found export info, but I'm not sure what I'm
                              > supposed to do before the export. Am I supposed to group everything? Then
                              > somehow do a symbol? I followed an online tutorial to create the image, but
                              > the tutorial doesn't explain what to do after the image is created to save it
                              > for use on a web page.
                              >
                              >
                              >