Exporting log to web (pixelated)

Question

Im a newbie to illustrator.I made a logo on illustrator and exported it to web as i wanted to use it for my website. I tried exporting it as a png, svg and jpeg file but with all versions, it was pixelated when i put it on my site. On illustrator, i did my logo on the custom 146.06 x 50 px, however when exporting it to my website changed the dimensions to 150*40 px.Is that why it would haver become pixelated? Does anyone know what I can do to fix this issue?

Dynamic Office · Accepted Answer

Is there anyway i can fix it to look better?

I don't think you're understanding what people are saying here.

Look at this image

That image is created at 150px x 40px, which looks great at the desired resolution.

Now look at this;

Same image, except I’ve blown it up to 600 x 200 and as you can see it’s very pixelated as you’d shown in your example.

Now see this;

I’d create a new document in illustrator, except my artboard is 600px x 200px, as you can see from my end result, a much clearer finish as it’s presented in the desired resolution.

Cari Jansen · Answer

If the logo is purely vector (using drawing tools in Illustrator, not including imported pixel based images for example), then you should be able to export the logo for Web at any size without seeing too much rasterisation, however if you make the logo larger within the web-site design you might end up seeing pixelisation. E.g. if you zoom in on the logo you've exported on screen you'll definitely see pixels.

If you want to retain transparency - and I normally suggest this for logo export - :

Use PNG as export format.

Here are some steps to use:

Choose File > Export for Screens
In the Export for Screens dialog box,
1. select Width (or Height) from the Scale dropdown menu. This allows you to set the size option for exported PNG
2. Enter a suffix (this is appended to the dartboard name you are exporting (it helps to make the artboard the same size as the artwork).
3. From the Format menu select PNG.
STILL in the same dialog box, click the Gear icon next to Android to open the Format Settings dialog box
Select the file format on the left, e.g. PNG, and set the Options for that file format. (choose PNG, not PNG 8, as PNG supports different levels of transparency and creates nice edging round the logo, PNG is a bit like taking a pair of scissors to the edge of your logo).
Click Save Settings
Back in the Export for Screens dialog box, you can continue enter multiple export size settings. Click on Export Artboard when you've set-up all your exports.

Let us know if this works for you and if you're happier with the result. Else pls upload some screenshots of what you are doing and seeing so we can help you better.

Sign up

To post, reply, or follow discussions, please sign in with your Adobe ID.

Sign in to Adobe Community

To post, reply, or follow discussions, please sign in with your Adobe ID.

Scanning file for viruses.

This file cannot be downloaded