11 Replies Latest reply: Mar 28, 2012 1:25 AM by corriela RSS

    AI to Fireworks drop shadow problem

    corriela Community Member



      I'm importing .AI files into Fireworks in order to export them as .pngs because the raster quality is better than out of .ai,

      One of my files has a white box with a 100% black drop shadow on a grey background. In AI it looks fine, but when I open the file in Fireworks the shadow appears white, a bit like a glow.


      The shadow is set to 'Multiply' and has worked in other files.


      Any ideas why it's doing this? It's only on this file.


      See below:





        • 1. Re: AI to Fireworks drop shadow problem
          groove25 Community Member

          I'm not surprised that something got lost in translation as I'm sure it takes considerable work to get the two applications to work smoothly together. In my older versions of these applications (FW8 and CS2), importing an AI file into an FW file results in a bitmap, not a vector object with effects.


          So can you select the vector object in FW and re-apply the drop shadow as a live Effect from the Filter menu of the Properties Inspector? If that's inconvenient, perhaps you could go back to AI, edit the Drop Shadow effect (from the Appearances panel) to adjust the blend mode to Normal. Then once it's imported into FW, set the blend mode to Multiply. Because it sounds like it might be an issue with translating the blend mode behavior. (I forgot to ask: Does the AI drop shadow appear as an effect in FW, or as another vector object?)


          I'm surprised that the quality of raster graphics is better in FW than AI. In a different post, I was suggesting to someone that they try doubling the size of their vector graphic and then outputting the graphic as a bitmap at half-size. This can sometimes smooth out a rough or aliased-looking vector object.


          ONE MORE IDEA: In Illustrator, you have the option of flattening effects like Drop Shadow by selecting the object and choosing Object > Expand Appearance. This might help in your case. And I believe that the Document Raster Effect Settings (under the Effects menu) will influence the quality of effects rendering—so setting it to Medium or High before flattening would be a good idea.

          • 2. Re: AI to Fireworks drop shadow problem
            corriela Community Member

            Hey Groove25,

            Thanks so much for your reply, very helpful.

            I could re-apply the shadows in FW, the main problem though is that I have a whole GUI designed in AI with many buttons so having to re-apply everything in FW would take too long. I have tried changing the raster quality in AI, but the quality isn't as crisp as through FW (i.e. 1px lines become fuzzy 2px lines for example)


            This is an article a found about FW being better for PNG export (than AI and PS):



            The other probelm is that all my other shadows have imported fine and I have already saved these out for the software engineers, switching to a different method could give some inconsistency if I now have to export some shadows in a different way.


            I'll apply the shadows in FW for now as a workaround because I'm working to a deadline but I'd still like to know why it's happened and why some shadows import fine.



            • 3. Re: AI to Fireworks drop shadow problem
              corriela Community Member

              groove25 wrote:

              Does the AI drop shadow appear as an effect in FW, or as another vector object?)

              Sorry forgot to say - the white area has come in as a single layer with the shadow rastered as part of the same object - the shadow is not a separate object in FW (I imagine if I expanded it in AI it would be but that wouldn't solve the problem).

              • 4. Re: AI to Fireworks drop shadow problem
                corriela Community Member



                If I lighten the background grey, or make the shadow darker it imports correctly! It's like there's a crossover point where FW can't translate the shadow's 'Multiply' effect or something.

                I don't know if this discovery rules out anything else that might be causing it.



                • 5. Re: AI to Fireworks drop shadow problem
                  groove25 Community Member

                  Did you try changing the blend mode of the drop shadow in AI from Multiply to Normal? (As long as it doesn't change the appearance in AI, you might get better results upon importing to FW.)


                  I have to admit I'm a bit lost here... If the shadow is being rasterized, that suggests that the vector itself has been flattened to a bitmap object upon being imported into FW. In that case, I can't imagine that exporting from FW would deliver better-looking results... but I'll leave that to you to determine. If the button and its shadow are fused into one bitmap object, I would again suggest that you could flatten the effect in AI by choosing Object > Expand Appearance.


                  Interestingly, I'm just noticing that FW8's drop shadow effect does not offer a blend mode option.


                  Were you aware of Illustrator's Pixel Preview capabilities (under the View menu)? With that view enabled, a Snap to Pixel option appears in the View menu as well. I don't know if it would help in your case, just thought I'd mention it.

                  • 6. Re: AI to Fireworks drop shadow problem
                    corriela Community Member

                    Interestingly changing the drop shadow from Multiply to Normal in AI gives the same result as my picture above - i.e. turns it to white, so obviously FW is losing the effect.


                    It's a bizarre one, as you suggested I've expanded in AI to get round the issue, but it does seem odd that if the shadow is dark enough, or the grey background is light enough it comes in correctly.


                    I do know about the pixel preview, thanks - it's been really useful for seeing how the graphics might appear on the final screen (except my monitor isn't the same res so it's a bit of a hash, but I can at least see roughly how the pixels will view)

                    Snap to piel drives me nuts as I have icons made of many parts, if I move it, AI decides which bits to snap to which pixal and it messes up the icon alignment! Useful for somethings though.


                    Thanks again groove25 

                    • 7. Re: AI to Fireworks drop shadow problem
                      groove25 Community Member

                      It's hard to know what's going on without seeing the files, and even then it could be a mystery—it's most likely a bug in FW. Or a quirk. I'm assuming you checked the blend modes of all the objects in the FW document (and also considered blend modes of objects and layers within AI)?


                      It's too bad my Multiply-to-Normal suggestion had no effect. I was thinking that Multiply is a good choice when you want to preserve colors but that Normal would work just as well in this particular case, since it's a grey-on-grey blend.


                      For curiosity's sake, you could try recreating the object from scratch in FW, with those exact color values, to see if the same results occur.

                      • 8. Re: AI to Fireworks drop shadow problem
                        corriela Community Member


                        Hi, so this image shows a few trials. All of these were created in AI, then I opened the .AI file in FW.

                        All of them came in with the grey boxes as separate layers and the white boxes as separate layers, but their shadows were rasterised with them so there's no way of separating the shadow in FW.

                        I used the bottom one for the client in the end, but I could have exported a .png directly from AI.


                        I'm not too worried because there are all sorts of workarounds, I'm just interested to know why FW does this.


                        If you have time, let me know if you're able to recreate this,c us it'd be interesting to know if it's my AI version (5.5) or something I'm doing differently.




                        • 9. Re: AI to Fireworks drop shadow problem
                          groove25 Community Member

                          Aha! In terms of pinpointing the problem, a crucial piece of information was the color or value of the drop shadows—in the first two of your examples, it's actually lighter than the background color.


                          I made these graphics directly in FW8, using a feathered rectangle for the shadow so that I could apply a blend mode to it. They're based on your 2nd, 3rd, and 4th examples. The top shadow in each graphic is set to Normal at 100% opacity; the bottom shadow is set to Multiply at 100%.




                          From this, I can tell that the Blend mode was getting lost in translation. In hindsight, it becomes more obvious: A single object can be assigned only one blend mode. If the button and its shadow were getting flattened into a single bitmap, then the blend mode attached to the drop shadow effect would naturally get jettisoned.


                          That said, I don't know for sure if blend modes between AI and FW are compatible, but you could easily test for this with a simple document using just two objects, one blended into the other. For this case, though, I think the key would be expanding the appearance of the effect in AI, and possibly ungrouping it from the button object—whatever it takes for the two items to be imported as separate objects in FW. Then in FW, you could apply a separate blend mode to the shadow object, to restore its original intended appearance.


                          Other thoughts: I don't have the latest versions of these applications, so I don't know... You might take a look at Preferences in AI and FW, to see if there are any Export or Import settings that could help with translating effects like this. Also, I have to admit, I don't usually use a lighter color for a drop shadow; I'd use a darker color instead and lower its opacity. However, there's nothing wrong with the way you're doing it as long as it works in the application(s), which it does.

                          • 10. Re: AI to Fireworks drop shadow problem
                            groove25 Community Member

                            This is a bit off-topic, but it relates to how Illustrator and Fireworks sometimes handle rasterization of vector objects differently, and I thought you might find it interesting. (This was done using Illustrator CS2 and FW8; I can't say whether CS5 behaves the same way or not.)


                            The basic question is this: Where does a 1-pixel stroke belong on a vector object that's aligned to a bitmap grid?


                            In Illustrator, with Snap to Pixel enabled (in Pixel Preview mode), the vector itself is aligned to the bitmap grid, and a 1-pixel stroke is balanced across both sides of the vector—appearing in effect as a lighter, 2-pixel, anti-aliased stroke. The result looks very imprecise. You can fix this by setting the Keyboard Increment (in Preferences) to 0.5 pixels, turning Snap to Pixel off, and nudging the object a half pixel in each direction using your keyboard arrow keys: Now the stroke, not the vector, is aligned to the bitmap grid.


                            AI snap to pixel.gif


                            Theoretically, you should be able to adjust stroke position to handle this issue; however, I found that setting the Stroke to "Inside" produced an unexpected bit of anti-aliasing on one side of my rectangle. (This type of problem may have been fixed in a newer version of Illustrator.*)


                            stroke inside.png


                            In Fireworks, vector objects tend to snap to the pixel grid automatically, as do strokes. But how can FW do this? After all, the default stroke position is center-aligned, just as it is in Illustrator. Well, it turns out that the application is willing to bend the rules a bit: A 25-pixel square with a 1-pixel stroke applied to it still only occupies 25 pixels on the grid, because Fireworks moves the stroke to the inside of the object. It cheats. Once you bump up the stroke weight to 2 pixels, the stroke alignment reverts to center. At 3 pixels, the stroke remains center-aligned but becomes anti-aliased, too.


                            FW snap to pixel w_text.png


                            So anyway... I hadn't really sat down with Illustrator's Pixel Preview mode before. Despite the issues above, I think it's kind of neat in that it's like a window into the world of Fireworks and pixel grids. (In Fireworks, by contrast, you don't have the option of seeing vectors rendered smoothly at any zoom level, as in Illustrator's standard view mode.) I can't recall whether Preferences can be saved in a Workspace, but View settings can at least be saved as part of a template file, and you could probably set up a de facto workspace for working with pixels in Illustrator in a relatively short amount of time. This could help you avoid surprises when using "Save for Web" (as described in the article to which you linked).


                            *Later, I was able to fix the "stroke inside" rendering problem in Illustrator by setting the stroke to .99px instead of 1px.

                            • 11. Re: AI to Fireworks drop shadow problem
                              corriela Community Member


                              Thank you so much for all your time and hardwork on researching this, it must have taken you ages

                              really appreciate it.

                              There's a lot there and I'm working to a crazy deadline today and I'd like to do this topic justice, so I'm going to go through your replies later, but forgive me if I don't reply for a little while.


                              Thanks again and I'll be back