5

When I save a 4000x1000px large image into a fraction of it's size (100px in width), there are rectangles equal of size and color that does not look identical any more.

The logo is simply text with dots (vector rectangles) in between each character.

L . O . G . O

The dots are the same size and color, but when viewing the output result, the last dot has more contrast and looks crisper.

How would I go forth exporting large logos into small web-bitmaps, keeping the pixel-grid some what aligned to the bitmap elements?

|improve this question
  • Does zooming out, and taking a screenshot, then using the screenshot work? My friend recently used this technique for upscaling pixel art actually, he just zoomed in and used the screenshot, because resizing it made it kind of fuzzy. – Hanna Mar 4 '11 at 19:08
  • I just copied all the elements from Illustrator and pasted it into a image of the exact similar size in Photoshop as a Vector Smart Object, and exported from there on. Very very big difference, and much better quality. – dropson Mar 5 '11 at 14:59
5

Whenever you rescale a picture from one size to another, regardless of bigger to smaller or vice versa, there is always going to be a lot of averaging of pixels, even when sticking with purely 200%- or 50%-divisible factors.

If you want pixel-perfect conversions of sizes, at some point you are going to have to work manually at the pixel level to make everything look clean and neat at any size. There really aren't any magic plug-ins, tools, or methods to guarantee this.

Most any image-editing application will make this easy. Illustrator really isn't designed for this sort of work.

|improve this answer
  • Additionally to @Philip Regan The best solution is to resize the image in photoshop (or similar raster image program) and then place the image back into illustrator if you are making layout etc in it. Photoshop handles anti-aliasing quite different and can yield better results when down-sizing the (raster)image. If you are already working with vector art you should resize the vectors and than export for web. – leugim Mar 4 '11 at 20:17
  • @leugim Good tip. – dropson Mar 5 '11 at 9:32
2

Have you tried using Photoshop to rasterize the artwork? In general, I've had great successes using Photoshop to create web graphics from Illustrator. You also have a great deal more control over the raster properties and aliasing.

|improve this answer
  • Initially I did use photoshop for the logo design, but now Illustrator for a vector based design. I'll play around with Photoshop and see what I can accomplish. Thanks for the tip – dropson Mar 5 '11 at 9:35
2

I'd take the your exported Illustrator image, and use it as a basis for recreating in Photoshop at the smaller size.

This will also take advantage of Photoshop's text handling - there are several 'anti-aliasing' settings which encourage letters' horizontals and verticals to be drawn along exact pixel boundaries to a greater or lesser extent.

|improve this answer
1

You should activate 'Pixel Preview' in Illustrator's 'View' Panel. It shows you the actual result of the rasterized image, so you can align the dots to the pixel grid to make them look the same.

|improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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