5

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?

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

2 Answers 2

9

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 ).
5
  • 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
    Commented Jul 2, 2014 at 12:25
  • Most importantly I want to preserve transparency (in the background) as well. Will these formats do that?
    – Solace
    Commented Jul 2, 2014 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
    Commented Jul 2, 2014 at 12:44
  • 2
    You can use caniuse.com/svg to check what browsers support .svg natively.
    – Joonas
    Commented Jul 2, 2014 at 12:50
  • 1
    @Zarah No problem. Just one thing. I meant to say "If browser doesn't support .svg, use....."
    – Joonas
    Commented Jul 2, 2014 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).

3
  • 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
    Commented Jul 2, 2014 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 Commented Jul 2, 2014 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. Commented Mar 31, 2015 at 15:38

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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