Take the 2-minute tour ×
Graphic Design Stack Exchange is a question and answer site for professional graphic designers and non-designers trying to do their own graphic design. It's 100% free, no registration required.

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) and then it was converted to PSD. I then used the image resize option to resize it. This is how my logo looks in Photoshop:

locatask logo

This is how my logo looks on my website when I remove the background and place it on my website

locatask logo resized

It seems a bit pixelated. It does not have the sharp and crispy look I would expect it to have. I am wondering if there is a way to preserve the crispy sharp look of the logo even at that small size.

share|improve this question
3  
Create the logo at the proper dimensions rather than scaling it down in the browser. –  Johannes Feb 9 '13 at 2:39
    
@John I am shrinking it from a rasterized state. –  Joel Dean Feb 9 '13 at 2:44
4  
Stop. Reduce it in vector form, then save for web. –  Scott Feb 9 '13 at 3:27
1  
I'd more describe it as being blurry or having softened edges rather than "pixelated", which suggests aliasing or a mosaic effect. There's actually more aliasing in the large scale than the small logo. –  Lèse majesté Feb 9 '13 at 8:00
add comment

4 Answers

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.

share|improve this answer
add comment

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:

  1. First, adjusting the alignment of the vector logo on the pixel grid to prevent unnecessary AA.
  2. Then try manually touching up the AAed edges if only minor adjustment is needed.
  3. 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.
share|improve this answer
add comment

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.

share|improve this answer
    
Actually.. if it's a smart object you can resize as many times as you'd like, just so long as you never go above the original size before it was converted to a smart object. –  Scott Feb 11 '13 at 7:34
add comment

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.

share|improve this answer
add comment

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.