Mobile app version of vmapp.org
Login or Join
Vandalay110

: Vector graphic export looks blurry I'm trying to export and upload a logo to Facebook from Illustrator. It's coming out a bit blurry and I don't know why! Logo from fb profile: I'm exporting

@Vandalay110

Posted in: #AdobeIllustrator #Export #Logo #Vector

I'm trying to export and upload a logo to Facebook from Illustrator. It's coming out a bit blurry and I don't know why!

Logo from fb profile:



I'm exporting the logo by using the following methods:


Save for Web (legacy)
Change image width and height for facebook profile. W = 180px, H = 180px

10.02% popularity Vote Up Vote Down


Login to follow query

More posts by @Vandalay110

2 Comments

Sorted by latest first Latest Oldest Best

 

@Hamaas979

A 180x180px image is quite small, and you will lose detail when outputting images at that size, particularly if some of the details are already small/fine.

You could try this and see if it helps: Export it at a larger size from Illustrator, then use Photoshop to rescale the image using Bicubic Sharper (best for reduction), or if you don't have access to Photoshop, GIMP has a Sinc(Lanczos 3) interpolation method for rescaling/resampling.

Raster image editors will give you more control when rescaling images. These interpolation methods help to a degree by sharpening to the images to keep small details visible. However, ultimately if you make images small that have fine detail, your will lose some detail. That's to be expected. You should try to avoid that when designing logos so that the problem doesn't arise, so that they look good at any scale.

10% popularity Vote Up Vote Down


 

@Margaret771

See the following image:



The grey square is 180 pixels high and wide. Image is drawn in Photoshop. It has details about the same size as your problematic logo. Everything has got the usual anti-aliasing except the white B, which for that reason is extremely jaggy. But it's not blurry.

180 pixels is so small that it will seem blurry if it's anti-aliased. Without anti-aliasing all details must be drawn as pixel art. That means everything is designed and during the drawing work carefully fitted to pixel boundaries. Otherwise it's jaggy.

You have 3 options:


redesign your logo as pixel art (no idea does FB blur it anyway because FB wants 180 x 180 size image and tells it be shown as 170 x 170)
make all fine details in the image bigger
export and put to FB in bigger size than 180 x 180


Ai allows you to snap everything along pixel grid during the drawing, if you want. That of course will spoil all smooth curves. Beware leaving it on by accident.

BTW. This is FB's current short form quide for image sizes. The sizes are different for mobile displays:

10% popularity Vote Up Vote Down


Back to top | Use Dark Theme