Help with using CS4 Fireworks and Vector Graphics - They appear to be pixelated

Hi Everyone,

I am very new to Fireworks and vector graphics more specifically. I have created a cartoon character I want to use for my website, but I would like to scale him up and down depending on how I need to use him. For some reason, I cannot scale him in Fireworks without getting a distorted image. The character was definitely draw with only the vector tools. I can even copy the character and select edit Copy to vectors and then paste it in Illustrator. It looks good in Illustrator and I can size it up or down with no problem. But I don’t understand why I have to use Illustrator to do this. Shouldn’t it just resize as a regular vector image in Fireworks? Also, when I zoom in on my vector objects, all the lines look like bitmap images very pixelated. Why is this? It’s a vector image, it shouldn’t do this right? I’m just really confused, and hoping someone can help me.

Josh

hard to say - could you post a link to the fireworks png?

when you zoom in in fireworks you’ll always get a pixellated view at anything other than 100% zoom but that’s only a bitmap representation of the vectors. make sure you always view at 100% when you want to check that it still looks and not pixellated

how are you resizing it in fireworks? use the scale/transform tool or image resize or…?

Thanks for the quick reply. I have taken some screenshots to share. The first ones are from Fireworks. Then I use “edit -> copy as vectors” and paste to Illustrator. Then I took some screenshots with it in Illustrator. I just want to know why in Fireworks it doesn’t appear the same (as a vector image). It also doesn’t work like a vector (i.e. when I resize it, it changes the shape of objects, etc, when I resize back to the original after the resize to a smaller size. Thanks for any help!

the screenshots from fireworks are when you are zoomed in - fireworks gives you a bitmap representation of how your image would look at e.g. 200% on the web, whereas illustrator shows how your resolution independent file would look printed at any given size.

you only need to worry about how it looks in fireworks at 100% - if it’s smooth at the zoom level then it’s good to go.

as far resizing changing objects goes i would reckon it’s because illi is working on pure vectors, whereas fireoworks works with vectors, but then fits them to a pixel grid.

i would suggest for this type of illustration you would be far better working purely in illustrator and exporting your web graphics from there or get everything ready in illustrator then bring the final artwork into FW and export from there for web

Thanks Davemies!

I was guessing that was it, but I wanted an experts confirmation. hmm, well I guess the only thing I am confused by is why I can scale down and then back up in Illustrator but when I do it in this software it results with a modified character. It seems like a very basic function that should work if I was really working in vector mode, which fireworks states I should be able to do. I just like using fireworks as it just feels easier to compose graphics and draw in than illustrator (illustrator is so complicated and I get stuck in modes that I have no idea how to get out of them). But if this is the only thing, than I guess I can edit it here and then when I need to resize to output to web I can move it into illustrator, shrink it and export it.

I was just hoping to get an answer as to why the heck the image distorts when I scale down and scale back up a vector image.

Hey, I thought it would be good to upload photos of the process of scaling down and then back up and showing the result. When I do this in illustrator the image goes back to just the way it looked prior to doing anything. In fireworks it looks like crap. What gives?!?!?

your attachments are still pending approval so i can’t view them yet but in the meantime can i ask why you’re scaling down and then back up again?

Are the photos showing up for you now? It’s not that I really need to downsize and then upsize. It’s the fact that the result of resizing is messing with the quality. There SHOULD be now change as far as I understand. Also, let’s say I shrink down the vector graphic and save the application, but later I need to make it bigger, then the quality will look like crap and I will have to start over (or do what I have been doing which is copy and paste into illustrator and resize it). I haven’t tried yet testing if I resize and it looks like crap what it will look like if I copy and paste in illustrator, maybe it will clear up). I’m concerned with this because whether or not I resize and resize again later, the quality is still deteriorating when I resize either when I do it once or I do it twice. Any idea why this is happening? THANKS so much for any help!

yeah they show up now (attachments were pending admin approval).

the only thing i can think of is that when fireworks resizes it it uses the pixel grid to fit it to so when it’s sized back up again there are some rounding-up (or rounding-down) errors. could i have a play with your file? if so can you email it to me at gekkoweb[at]gmail[dot]com

i would suggest learning illustrator - it shouldn’t take too long to make the transition (i’ve made it myself recently) and getting the basic techniques down to make something like the ninja shouldn’t be too difficult. I’ve been using fireworks since the first version but have got a lot more into illustrator recently (though i’m hardly what you could call an illustrator myself :slight_smile: ) and i can see what all the fuss about using ill vs fireworks is about, though i’ve seen some equally amazing things done in fireworks.

the other thing i would suggest is when you need to size up, do so first in a multiple of 200% or preferably 400% then size to the exact size tyou need (or use illustrator to do resizng, bit of a faff i know :wink:

Thanks, I will email you over a copy of the file. Yeah, I was thinking that it resized in bitmap mode or something. That’s why I was hoping someone would know this right of the bat and say, ah yeah because of that…

maybe there is some way to resize in vector mode or be in vector mode when I resize? no idea. Im a total beginning at this stuff. thanks!

if it’s a vector then it resizes as vector - there is no mode as such in FW - it’s all down to the object involved: if it’s vector then it is resized as vector.

i find it generally ok resizing in firework though

e.g. look at this (native fireworks) png: http://gekkoweb.com/stuff/zepplin-test.png

one on the left is original size as drawn. I duplicated it, used the numeric transform (ctrl +shift + t) or modify transform - scale. Scaled it to 10% then back up to 800% then used the freeform transform to simply size it exactly the same size as the original. I’m hadr pushed to see any difference so i’ll be intersted to play with your file :wink:

just playing with your ninja now… yes i get the same thing. resizing in percentages seems to work a lot better but it’s a bit harder to get the xact size :wink:

it might help if you tidied up the points a bit on the mask tail (i.e. remove some points but retain the basic same shape) i think fireworks is having trouble with re-placing these points when it scales back up. see http://gekkoweb.com/stuff/control-points-ninja.jpg also (see same pic) there is s stray path on the right that gets blown back up on resize (it’s not visible but is there on the original).

i think illustrator would be the way to go - you can always rough out the basics in fireworks first (if it’s quicker) then take it into illi to resize and clean up but i would strongly advise you to just do it all in illi and you won’t (hopefully) look back :wink:

Interesting, well, looks like I will just start learning illustrator, no point in using fireworks if I can’t manipulate my drawings. I just can’t believe this would be how the software is supposed to work. Ah well. Thanks a lot Davemies!

you might get a more technical explanation on the adobe forums http://forums.adobe.com/index.jspa

I was also trying to do that thing but didn’t figure out everything. If anyone can teach me this then i will be really grateful to him.

OK… once more peopel are trying to use the wrong tool for the wrong thing.

FW is a weird blend of vector/ and raster. When you draw a shape in FW is like when you draw a SHAPE in PS, except FW assumes you are intending to use it on the web. Actually drawing in FW is also akin to drawing in Flash. In any case, you have created your vector, but it gets rasterized and that’s what you are looking at… thus the pixelization. If you increased the resolution ( not the canvas size) you’d see that at a 100% you still had a sharp image. You can also copy/past the paths you create into illustrator… you would have to recolor them and they uld behave as AI paths … but this shows that your original is a PATH that gets raasterized live. So you have to abandon the PS mindset and the AI mindset… FW is something different and you have to adjust to that paradigm