2

this is a newbie question. I'm not a designer but I would learn something. Look this image:

enter image description here

Well, I would recreate this image (without the pattern background, it doesn't matter). The point is that I want resize the image without quality loss. So if possibile, I would the same quality at, for example, 150x40 and the same at 1500x400. Probably for a web designer this is absolutely easy but for me not.

Can you give me some tips for doing that? For this, is it better to work in Photoshop or Illustrator? Thank you!

1 Answer 1

10

If you need to scale images up at the ratio you're describing, it's practically necessary to work with vector images rather than raster images. The main difference is that raster images are made up of pixels, discrete dots of a fixed size, whereas vector images are described by geometric paths.

The essential point is that vector images can be scaled up practically infinitely while retaining smooth edges, but scaling up a raster image increases the size of each individual pixel and produces "blocky" effects.

You can read more about the differences here:

http://en.wikipedia.org/wiki/Raster_graphics

http://en.wikipedia.org/wiki/Vector_graphics

Even though Photoshop is meant for working with photos, which by nature are raster images, it has a fairly decent set of vector tools. However, Illustrator is really the preferred tool for working with vector graphics, and probably the one you should be using. Fireworks provides a mix of both toolsets and may be less intimidating than Illustrator if you're just getting started.

One final note. If your final output is for the web, keep the vector file, but export a raster version (most likely a PNG), at the size needed for display on the site. This way you get the maximum quality output, since the vector to raster conversion is happening AT the size required and there is no scaling of the raster image after rasterization. You also preserve the vector file should you need to edit it later.

5
  • 1
    +1 for mentioning FW as a possible tool for a beginner. Welcome to GD, by the way. :-) Commented Nov 10, 2011 at 9:02
  • Thanks for your very useful answer. One trouble I encountered is, when I have a vector image in Illustrator, copy-paste it in Photoshop and the lines is very ugly. For see what I mean check my question's update. Also, if I work in Illustrator I don't have all full set of effects/options to apply to the images. How can I solve it? Should I try Fireworks? :) Commented Nov 10, 2011 at 14:08
  • 1
    make sure you are pasting the illustrator image as a smart object. That might be the reason it's looking ugly...
    – Yisela
    Commented Nov 10, 2011 at 14:30
  • @utopicam I paste it as a smart object. Look my update to see the problem. Commented Nov 10, 2011 at 15:31
  • 1
    Sorry for flooding this question with comments. If it's an image made in curves, and the layers are not blocked, and you are copying all of the elements... it should look exactly the same in photoshop and illustrator (if you want, check my profile, go to my deviant page and you can see my email there, email me)
    – Yisela
    Commented Nov 10, 2011 at 15:40

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.