: My web logo looks pixelated after resizing I am trying to resize my logo for the web but so far I have not been seeing the result that I want to. It was in a vector format first (AI)

@Smith574

I deal with this all the time. My company has an "O" in it's logo and it "flat tires" when you resize it. This seems to be fixed in Photoshop CC (maybe CS6 also), particularly with the new image referencing feature.

In older versions of Photoshop though, to avoid it just import the vector at the final size you wish it to display at. In the import dialogue in PS, just set the dimensions there.

You don't need to make multiple versions, but you may have to delete and re-import while guessing the size that works within your design.

Vote Up Vote Down

@Ravi4787994

Convert your logo layer into smart object (right click on layer, you will find Convert to smart object) then you do re-size.

Note: Don't re-size again and again it will loose original quality, it will show pixels.

Vote Up Vote Down

@Radia289

You should rasterize it in the right pixel dimensions directly from Illustrator whenever possible, but when you're resizing things in Photosohop there is a choice of resampling modes:


Nearest Neighbor - This is the simplest form of resampling, if you can even call it that, where the original pixels are just expanded to the next full pixel to fill the new pixel grid. If you aren't rescaling by an even factor, it'll produce lots of distortions. And even when you rescale by an even factor it tends to create a lot of aliasing since you're just blowing up the pixels. This is typically only used when you have a design where all the color boundaries are aligned with pixel boundaries and you don't have issues with aliasing (e.g. pixel art).
Bilinear - This is the second quickest method to interpolate image data, and sort of averages the 2x2 px grid on the original image nearest to the point being interpolated (you're actually finding the rate of change in the x and y directions and then extrapolating the intermediate color at the precise distance between x1, x2 and between y1, y2 where the new point sits). The limitations of this method is when you rescale beyond a factor of 2 in either direction (i.e. blow up more than 200% or shrink to less than 50%).
Bicubic - There are actually 3 versions of this interpolation method in Photoshop: the stock version, and a sharper and softer version. All 3 are similar to bilinear resampling but use a 4x4 px grid, and instead of just using the derivative of a linear function to calculate the color value at the new point, it uses a cubic spline to obtain a smooth continuous function. The effect of this is that the color transitions are smoother and less choppy. This is not always a good thing (e.g. when you want to preserve hard color boundaries), but in general it's the more "accurate" interpolated image.

Bicubic Smoother is recommended for enlargements (as it averages out the "edge halo" at sharp boundaries that's an artifact of the cubic spline technique).

Bicubic Sharper is recommended for reductions, since shrinking large images down to a small size tends to blur the images and require sharpening (as many icon designers will attest to).


So if Illustrator doesn't produce the desired result, I'd try:


First, adjusting the alignment of the vector logo on the pixel grid to prevent unnecessary AA.
Then try manually touching up the AAed edges if only minor adjustment is needed.
Then try rasterizing to an even factor larger than the desired output (e.g. 200% or 300% size), and then using Bilinear or Bicubic Sharper to downscale the image in Photoshop.

Vote Up Vote Down

@Cooney243

You should be exporting directly to the pixel dimensions you need from the original Illustrator file.

You'll probably do just fine altering the size in the save for web dialog rather than creating a scaled vector version for every instance.

Vote Up Vote Down