7 Replies Latest reply on Jun 13, 2011 10:46 AM by JoyceEvans

    Scaling images without ruining them?


      How does one NOT resample images when scaling them?


      This has probably been asked by everyone who has ever used Fireworks but I couldn't find anything searching for previous posts on the subject.


      And if you mistakenly get the aspect ratio of an image out of whack can you get it back? without resampling of course.



        • 1. Re: Scaling images without ruining them?
          pixlor Level 4

          If by "image" you mean a flattened bitmap, such as a .jpg or a .png which isn't a Fireworks document, then you can't avoid resampling an image if you want to scale it. An image is color data mapped to a rectangular grid of pixels. If you want that color data mapped to a different range of pixels, then the color data needs to be mathematically manipulated to span the new range. (Vector elements are mathematically determined to begin with, so you can scale these elements non-destructively.)


          If you want to maintain the aspect ratio when you scale, hold the shift key while you drag with the mouse. For tighter control, go to Modify > Transform > Numeric Transform to scale or re-size by a specific amount.

          • 2. Re: Scaling images without ruining them?
            xamzmith Level 1

            If one imports an image (e.g., a .jpg file) into a Fireworks file where that imported image is, say, 250px x 250px and takes a look at what the design may look like with that image at 100 px x 100px and then decides that it is too small and wants it back to 250px x 250px one would need to import the .jpg file again. Is that right?


            If I was training someone to use Fireworks I would have to tell them that before they place (import) any image into a Fireworks document that they must discover the dimensions of the file to be imported and write down those dimensions. When the file was imported that they must make really sure that they do not drag it out any larger than the dimensions that they wrote down earlier and then never ever change it's size again except they can downsize it once.


            How do we prevent designers from not degrading imported images when they don't understand how to maintain the highest quality of imported images? Or what if over the months of designing the website an imported image is accidentally bumped out of its aspect ratio and is distorted?


            This brings me to believe that one of two policies must be maintained: all imported images must be checked for distortion and degradation before the final Fireworks files go to the HTML developers or Fireworks is not allowed in the studio.


            How many lawyers would be smiling after they'd heard a million consumers went into their corner bodega asking for the new shorter fatter Coke bottles.


            Googling around the World Wide Web it seems most designers are using Photoshop to layout websites. Fireworks seems to be the better choice because of multiple pages but if there are quirks like this image sizing thing it would explain the popularity of Photoshop as a layout program (and that a zillion people already are comfortable with it) but something doesn't seem right.



            • 3. Re: Scaling images without ruining them?
              Linda Nicholls Level 4

              I've never used the technique myself, but rumor has it that if you convert the image to a symbol before resizing it, you can resize it as many times as you like without degrading the image.

              • 4. Re: Scaling images without ruining them?

                When you import a bitmap, convert it to a symbol (Right click > Convert to Symbol - or - Modify > Symbol > Convert to Symbol - or - F8 key). When you shrink the image it will still maintain the data for the full-sized image, so you can then enlarge it again up to the original size without losing quality.


                As for aspect ratio, the best practice is of course to never mess it up to begin with (which really isn't a lot to ask of someone who's job includes design. It's a very very basic skill), but if you were to lose the correct aspect ratio you could always edit the symbol, get the aspect ratio from the bitmap within the symbol by noting the size and then apply it to the instance of the symbol in the document by manually entering the size.

                • 5. Re: Scaling images without ruining them?
                  JoyceEvans Level 3

                  Normally when you optimize for the web you don't want to maintain the data for a larger image causint it to load to slower. Why not just have a folder for the original source files? Then if you need to size up just get the original again?

                  • 6. Re: Scaling images without ruining them?
                    richardthepratt Level 1

                    You maintain more data in your source file on your local computer. What you post online should be an optimized export.

                    • 7. Re: Scaling images without ruining them?
                      JoyceEvans Level 3

                      Ok, great. I left the source image the format it was (png. tiff etc.) the added a slice and set to jpg for export. Having the symbol is a great way to keep original for re-editing.