Take the 2-minute tour ×
Graphic Design Stack Exchange is a question and answer site for Graphic Design professionals, students, and enthusiasts. It's 100% free, no registration required.

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?

share|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. –  Johannes 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

4 Answers 4

up vote 4 down vote accepted

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.

share|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

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.

share|improve this answer

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.

share|improve this answer

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.

share|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

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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