4

I am new to Adobe Illustrator. I created a simple image with a shape and some text and wanted to create a vector image. So I basically created the shape and the text. Then right-clicked and selected "Create Outlines" from the drop-down menu, which did create outlines.

Then I went ahead to export the image as a .png file. It was saved. But the problem is that when i open it with Windows Photo Viewer and increase its size, it becomes pixelated. So what should I do to make it a vector?

  • @Bakabaka Thank you for editing. I need to work on my articulatory skills. – Solace Jul 2 '14 at 12:42
  • 1
    Any time. Welcome to GDSE! – Vincent Jul 2 '14 at 13:13
8

It's the .png format that is the problem.

.png is a raster format that will not upsize very well, just like any raster format.

You need to save it in a vector format, such as:

  • .ai - You'll most likely want to save everything to this format for your own safe keeping because it retains all editability unlike other formats. You would then save the same file to another format to use elsewhere.
  • .pdf - Typically the format you'll want to send to a client, print or even use in a website, if it's like info graphic or something like that. Typically you don't embed pdf into a website.
  • .eps - Older print format.
  • .svg - Typically used in websites in place of images that would "normally" be .jpg, .png or .gif. .svg is not natively supported by all browsers ( IE ).
  • Thank you for all that information! Which format will you suggest to save a logo (to be used in a website) in? I am thinking about .svg but you said it is not natively supported by all browsers. – Solace Jul 2 '14 at 12:25
  • Most importantly I want to preserve transparency (in the background) as well. Will these formats do that? – Solace Jul 2 '14 at 12:29
  • 2
    @Zarah So these days it's relatively safe to use .svg in a website. If you want to have a fallback (I would), you can use .png format. Which would basically work like: "If website doesn't support .svg, use .png instead". Modernizr is often used for that. This article explains how you could do such fallback.. There are also scripts like Raphael js that will basically make .svg images work in older IE versions, if you care enough to do that. – Joonas Jul 2 '14 at 12:44
  • 2
    You can use caniuse.com/svg to check what browsers support .svg natively. – Joonas Jul 2 '14 at 12:50
  • 1
    @Zarah No problem. Just one thing. I meant to say "If browser doesn't support .svg, use....." – Joonas Jul 2 '14 at 13:11
1

PNG's format aren't vector, like jpg, gif and many others. Their are raster image.

If you want to export a vector image, you have to do "File > Save As.." and then select the file format like .svg, .eps, ai (Illustrator) and .pdf. These images are visible only through any software or in the browser.

If you do "File > Export..." you can only save a raster image (no zoomable and resizable).

  • Which format should I use for a logo, to use it in a website, and the transparency of the background should also be preserved. – Solace Jul 2 '14 at 12:33
  • 1
    The choice depends on the logo. If you want to use a vector logo in your webpage, must be simple (no complex shape) and with no gradient (possibly). All vector have no background if you do not design it. See this link for some example. The only format you can use in a webpage is the .svg. It's supported in all modern browser and IE 9+. For the compatibility you can see at caniuse.com/svg – Mattia Astorino Jul 2 '14 at 12:50
  • I know I'm late to the party, but I want to clarify that Firework's native format is actually PNG as well but Firework's PNG version can actually contain vectors and layers, just like a PSD file. Like a PSD file a Firework's PNG file IS NOT for production, is only for editing and creating other types of files. – Ricardo Zea Mar 31 '15 at 15:38

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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