4 Replies Latest reply on Mar 13, 2012 11:39 PM by groove25

    Best import format (typographic artwork)

    motiondude Level 1

      Hi there, I'm working on a website that involves some typographic artwork. Those texts are created in AI, exact or around 100% of the actual size used in the website, and converted to outlines. I'm using those as symbols in a library. No gradients or anything, just solid colours. So far I've tested 2 import options:

      import as AI artwork@72 dpi in FW


      import a png version of the AI artwork in FW @72 dpi


      However, when I look at the results @ 100% in FW I'm a bit dissapointed. I don't use tiny sizes but somehow I have the idea things could look a bit more sharp. But coming from the print world this could be a normal response. I just want to make sure, what's the best practice when it comes to importing critical artwork into FW making it look as sharp as possible? And is there any point in upping the res for that matter? I work with CS 5.5.

        • 1. Re: Best import format (typographic artwork)
          groove25 Level 4

          That's an interesting question. Do you have samples to share?


          To me, the biggest difference between AI and FW is that vector rendering in AI is so much smoother across all preview sizes, whereas FW delivers smooth resolution only at 100% zoom. I've never thought about it this way before, but I believe that a graphic at 100% zoom is directly mapped, pixel by pixel, to monitor output. For example, my monitor is approximately 112ppi, so that's the resolution at the which any FW graphic is actually rendered on my monitor. In other words, you're not viewing the graphic at 72ppi; you're viewing it at the native resolution of your monitor. The 72dpi setting is a bit misleading that way.


          You could change dpi in FW's Modify > Canvas > Image Size command, but this would only have an impact on rendering if "Resample image" were checked. And in that case, you'd actually be increasing the pixel dimensions of the graphic. For example, if you changed the resolution to 144dpi with "Resample Image" checked, you'd actually be doubling (or squaring?) the relative size of the graphic. In fact, this would result in smoother-looking vectors, since there'd more pixels with which to render the vector shapes, but it would also increase the size of the graphic relative to your screen. So I guess what I'm saying is, you could try doubling the size of your graphic in the working stages, and then when it's time to export, you could play around with different resizing algorithms to get sharper or smoother results, according to taste.


          But your real question was: What's the best practice when it comes to importing critical artwork into FW making it look as sharp as possible? And I don't know the answer to that. Importing as vectors seems like a good idea. Although, it could be worth considering that text and vectors are not rendered identically. With text, you have the option of choosing a different rendering intent (e.g. Smooth anti-alias, Strong anti-alias, Crisp anti-alias, etc.). Also, if vectors don't have a satisfactory appearance in Fireworks, it might actually make sense to flatten them in Illustrator first, and then import them as bitmaps; you might be able to "lock in" a better appearance that way.


          Sorry if I'm just thinking out loud...

          • 2. Re: Best import format (typographic artwork)
            Jim_Babbage Level 4

            Fireworks uses the same Font Engine as Illustrator and Photoshop, believe it or not, so as long as you're not sharing the symbols with people who don't own the font, I think you'll have better luck using the font right from within Fireworks. That way - as groove25 indicated - you'll have full control over anti-aliasing the font, either by using the presets or creating your own custom anti-aliasing.


            That said, I've seen complaints in the past that the font in Fireworks doesn't exactly match how the font rendered in Illustrator. If the problem is very noticeable, another option is to import the font as vectors. You can then try "doubling up" the artwork in a symbol (stacking two or more copies of the font on top of each other) to increase apparent sharpness. It won't make the font bold, but it'll fill in some of those blended, anti-aliased pixels.


            Fireworks also has an option to convert fonts to paths, but again, I've heard complaints that it isn't 100% accurate. It may work better at larger font sizes, but I haven't tried it.


            Not sure if either of these options will help, but they are worth a try.



            • 3. Re: Best import format (typographic artwork)
              motiondude Level 1

              Thanks Groove & Jim! I was aware of FW's capabilities. For this question the fonts were already outlined in AI because of font issues and to avoid that (the wrong) people start messing with the design. Don't hold back groove25, those thoughts are more than welcome. I will test into your suggestions as well but I think in this case doubling/stacking of artwork looks the most promising. I'm working on rollovers with text so I want them to look as sharp as possible. Thank you both.

              • 4. Re: Best import format (typographic artwork)
                groove25 Level 4

                Here's a sample of what I meant when I suggested that increasing the size of your graphic may improve vector rendering in Fireworks. Keep in mind, this was done in FW8, and vector/text rendering may have improved quite a bit since then.


                It's subtle, but there's an unpleasant "edgy" or vibrating quality to the slanted italic text here; the contours don't appear smooth. This text was converted to outlines, and the canvas size/resolution is 400x100 pixels @72dpi.


                Palatino 72dpi.gif


                TIP: To see what I'm referring to, you'll need to click on the graphic to view it full size.


                Using Modify > Canvas > Image Size, this vector graphic was doubled in resolution (to 800x200 pixels). Then in Image Preview, it was scaled back down to its original resolution. The edginess is gone.


                Palatino 144dpi 50%.gif



                Oh, what the heck... It's probably easier to compare them in the same graphic, so here they are again:


                Palatino combo.gif