Take the 2-minute tour ×
Graphic Design Stack Exchange is a question and answer site for Graphic Design professionals, students, and enthusiasts. It's 100% free, no registration required.

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.

share|improve this question
    
    
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 –  ivan Sep 3 at 7:01

5 Answers 5

up vote 9 down vote accepted

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?

share|improve this answer

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

share|improve this answer
    
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 Jul 26 '12 at 9:15
1  
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 Jul 26 '12 at 9:46
    
Citing your own article as if it has any more credibility than your opinion here is a bit ludicrous. ANYONE can create a web page which supports ANY opinion, right or wrong. Heck I've seen entire in-depth web sites dedicated to explaining completely inappropriate color management techniques. 25+ years of practice means more to me. That along with direct discussions with people like Andrew Rodney, Bruce Fraser, and Chris Cox. Unless you can absolutely control the color profiles on EVERY monitor your work will be seen on, you want sRGB. We'll have to agree to disagree. –  Scott Jul 26 '12 at 9:57
1  
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 Jul 26 '12 at 10:49
1  
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 Jul 27 '12 at 2:38

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.

share|improve this answer

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).

share|improve this answer

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.

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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