I'm having some problems matching workflow including Ai and Ps. I`ll try to explain:
I'm developing some little icons 20px in Ai, I work pixel by pixel creating 1px squares to fully control the aspect. However, I need to finish them in Photoshop but when I use the copy/paste method I get a new Photoshop file at weird resolution (96.012). As a result I always get blur, dirty pixels.
I know that I can save the art as PNG from Ai and then open it in Ps with exact pixel match, but I did work before copying & pasting and I always got nice and clean 72pp document in Photoshop.
I guess it's due some preference -either in Ai or Ps- someone changed and I don't control.
Thanks in advance for your help.
P.D. I'm using CS5 suite.
Mostly because the wide range of shapes I can draw in Ai wich may be more complex to draw in Ps. By using pixel preview you can control exactly the aspect that your vector drawing will have once in the website. Anyway, as I said before, further work in Ps is sometimes needed in order to finish the art properly but Ai is way much more comfortable and accurate to begin designing icon packs or entire websites.
With an icon so small, you could "Export" the vector file at 300ppi. Try Save for Web and see what you get there, too. But 72ppi is going to make any image chop sui, bigger-the-better. Your graphic is small enough where high resolution file size is not an issue. After "Export", you could save the graphic as a .jpg or .png, whatever is appropriate.
Hi john, thanks for your answer:
"Bigger-the-better" is not suitable for web designing, the images, particulary icons or favicons, are so small that you need to control and decide almost every single pixel in the image. For this kind of works I'd say "Exact-size-the-only-way".
That's the reason why is so important the resolution matching between Ai and Ps.
The question still, Why if I copy/paste from Ai to Ps I get resized 96ppi image?.
In order to control the size, you'll be better off "Exporting" out of Illustrator instead of copy & paste. Remember, you are copying a vector ( resolution independent ) to a bitmap format. It could be that default Photoshop files are set for 96ppi, so your Illustrator file will get resized. If you do not want to "Export" the artwork, close it out of Illustrator and then open it using Photoshop where you will be able to apply your size requirements and resolution. When I said :bigger-the-better", I meant larger sized images look better at 72 ppi than smaller ones. You say you are building an icon at 20px., but what is the actual size when placed in your web page? I recommended 300ppi based on the size of the graphic, which I read as pretty small. So, an RGB based graphic will be 75ppix75ppi at .25" and will only be a few hundred "k", if that. That's better than 24ppix24ppi at .25" at 96ppi, where you are getting jaggies. I thought you could try it to see if it works better for you. I wonder if there is a way to "Save-for-Web as a vector .gif?
That method you mention, exporting from Illustrator in png file with transparency on, is the one I`ve been using since I had found this 96ppi issue while copy/pasting. What's weird is that I only get this 96ppi result in certain computers, reason why I began to suspect that it was something related with the preferences of either Ai or Ps.
I'm building an icon at 20px precisely because that's exactly the same size it will be shown in the website. You can see a sample here. As you can see we are talking about really small images with few pixels to manage .
I've never tried what you suggested of using 300ppi images for that task, I'll try.
As far as I know there is no way to "Save-for-web" as a vector. Since displays show images in pixels I guess there is no way to improve this little icons visibility but building them sharp and clean.
Thanks again for your time and interest.
P.D. After posting I realized that the image I linked is automatically resized when shown here, feel free to check the image at 100% by using this url:
Europe, Middle East and Africa