31

I am new to Adobe Illustrator and I have a logo image which I need to use in 5 or 6 different sizes. The logo image was created in Adobe Illustrator, but when I try to save the image to PNG or JPEG what should have been simple turns out to be very complicated.

I understand that Adobe Illustrator wants to treat the image as a certain size, and then wants to multiply that size by a pixels per inch scale factor to result in the actual number of pixels that it saves. It has a few limited scale factor choices which give a very limited set of resulting output pixel sizes.

However for many web uses the user already knows the output pixel dimensions that are needed. Is there a way of just specifiying either the pixel width or height of the saved graphic which is needed?

I have seen suggestions to export the image and then use Photoshop to resize it, but that results in a poorer image quality vs. creating the final image from the vector image.

Improve this question
2
  • 1
    Related: Best workflow to save an image in 3 different sizes
    – JohnB
    Commented Dec 3, 2013 at 19:55
  • theres number of ways to do that, mine is select all then image you want to export then theres the width and height option in the header, just change it then export it
    – user29328
    Commented Sep 3, 2014 at 7:01

5 Answers 5

Reset to default
29

File > Save for Web and then enter the pixel dimensions by clicking the Image Size tab on the right of the Save for Web window.

Or am I not understanding you correctly?

Improve this answer
2
  • 1
    Perfect, thanks. I've just spent around 15 minutes with the "export"-function, but since it refuses to use less than 72ppi, I had to rescale the artwork and artboard for very small exports, that's propably what the asker did as well.
    – Kjeld Schmidt
    Commented Dec 10, 2015 at 9:15
  • Since this is the 'accepted' answer, let me bump it up almost a decade. Contemporary versions of AI (in 2021) will consider 'Save for Web' as legacy, offering an additional (new) export function. Here you can click the checkbox for 'Include Bleed' (assuming that your Artboard specifies the correct dimensions) and then select whatever size(s) and file format(s) you wish (JPEG, PNG, SVG, PDF). AI will batch-save them all in all sizes.
    – Gwyneth Llewelyn
    Commented Mar 19, 2021 at 14:23
13

Using File → Save for Web and entering the dimensions will do what you're after. Also, Illustrator uses vector scaling, so the results are better than if you tried the same thing in Photoshop — entering dimensions that don't match the document in Photoshop means the image will be bitmap scaled.

Please note that you have to click Apply after changing the dimensions, if you're using a version of Illustrator prior to CS6.

Save for Web in Illustrator

Oh, and there's a very good chance you'll want Convert to sRGB turned off — it destructively converts your image from the current colour space to sRGB, making colours shift.

enter image description here

Improve this answer
9
  • There is no Apply button in CS6.... and I disagree about Convert to RGB, you want that ON for images destined for the web.
    – Scott
    Commented Jul 26, 2012 at 9:15
  • 2
    Thanks regarding the CS6 tip. Leaving Convert to sRGB on is absolutely the wrong approach for web and UI work. Here's an entire article on why: bjango.com/articles/photoshop (Contest me on this at your peril!)
    – Marc Edwards
    Commented Jul 26, 2012 at 9:46
  • 2
    Did you actually read the article? When you're doing web and UI work, exact colour values MUST be maintained throughout the entire process. If you enter #FF0010 as a colour, that MUST be output in the file as #FF0010 if you intent to match the colour in code. This means Convert to sRGB MUST be off. I get the feeling you don't do this kind of work and don't understand what's involved.
    – Marc Edwards
    Commented Jul 26, 2012 at 10:49
  • 1
    Scott, please don't take this as an ad hominem attack, but from similar discussions I think you may have picked up some erroneous ideas about RGB colour representation. See also graphicdesign.stackexchange.com/questions/7815/….
    – e100
    Commented Jul 26, 2012 at 11:09
  • 3
    Convert to sRGB is the wrong choice in almost every conceivable situation when working for web. "There's a REASON the Save for Web team implemented the Convert to sRGB option" — Time to get that fixed. feedback.photoshop.com/photoshop_family/topics/…
    – Marc Edwards
    Commented Jul 27, 2012 at 2:38
1

When I need to support multiple pixel sizes I dupe and scale the art within the same AI file. Each size goes onto a separate correctly sized artboard. I append the board name with the file format to be exported. Then I run a jsx that exports each artboard and picks up the file format from the name, using the last settings I entered for that format in that file. This is all in CS5.

I use this workflow for some logos, icons, and display ads.

Improve this answer
3
  • Please, can you share the .jsx?
    – kelin
    Commented Jun 19, 2017 at 9:29
  • @kelin I'm afraid I can't. It's been a long time since I've bothered with Adobe products.
    – plainclothes
    Commented Jun 19, 2017 at 15:55
  • 1
    Not a problem, I found great script here: stackoverflow.com/a/28067227/3050403
    – kelin
    Commented Jun 19, 2017 at 20:57
0

You can also create a document of the appropriate size in Photoshop (or box out an area with guides) then File > Place the vector art.

You can scale the size of the shape before it is rendered. Obviously scaling after that will reduce its quality.

I've always used this technique for logos in order to give precise control over size, eg getting the baseline of the logo's text elements on a pixel boundary (a form of hinting).

Improve this answer
0

An addition to this subject which I found intresting for mobile app designers, is this script that creates retina assets for iOS and Android in 1 click.

Improve this answer

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.