Illustrator to photoshop export

Question

I am having problems with some illustrator files (I'm a developer more than a graphic designer). Basically, I can't seem to get around two things. Firstly, I have an illustrator file in which some of the components are located at non-integer values... Is there a way to force illustrator to lock to 1 point, without having any decimals after? I need to do this because I am exporting the file into a png, and I need to be able to totally match pixels in another program.

EDIT: It seems the problem causing sections are all the text labels. Is there no way to constrain text areas to a pixel grid?

EDIT2: I just put up an example AI file here that shows my problem. If you select the text area, its coordinates are x = 49 px, y = 45.834 px, width = 48.503 px, and height = 11.11 px (from the middle), this also refuses to snap to pixels. Now, I have a whole pile of these types of components, and I don't want to go through one at a time and change them. Any ideas?

My second problem kinda arose along with my first. For some reason, when I export a .ai file to photoshop, it seems to come with a 1px transparent border around it, which I need to remove. However, I can't seem to grab it with the magic wand or anything and I don't exactly want to resize the image (cause it would throw off the other coords). Is there an easy way to do this? Thanks beforehand!

Answer 1

Here's how I would approach the problem.

• If (sadly typical, which is why I mention it) your AI document is all on one layer, your first step is to move all the text onto at least one, possibly more than one individual layers. Name them appropriately so it's easy to keep track of them.

• Next, bring the AI document into Photoshop as a Smart Object (use `File > Place') and get the background exactly placed. Don't fret the text at this point.

• Make a copy of this layer as a new Smart Object using Layer > Smart Objects > New Smart Object via Copy. This is important. You want two independent Smart Objects, not a straight copy that would cause them to update in synch.

• Open the one you first placed (double-click on the layer icon), turn off the text layer(s), save and close.

• Now open the second copy similarly, and turn off the background.

At this point, your text is only showing in the second layer, and you should be able to fine tune the position from there.

Conditional: If nudging all of the text at once doesn't get you the result you need, you may have to put individual text segments on their own layers, make multiple Smart Objects, and adjust the individual text blocks independently.

The alternative approach, which would give you ultimate control, is to create the background SO as before, but then copy the text piece by piece from the AI file into new text layers in Photoshop. To make this work, you have to create a text frame in Photoshop, flip over to Illustrator, select the text, copy, then paste it into the Photoshop text frame.

This has the advantage that you now have live text in Photoshop, which you can even onion-skin over the original text if need be (by turning on the text layer in the AI file temporarily, reducing the opacity of the live text in the PSD and fine-tuning that way). This method will also keep any kerning, glyph substitution or other OpenType features intact when the text comes into Photoshop. That may be necessary if the layout needs to be very precise, but I would try the first method first.

Answer 2

Current versions of Ill have "snap to pixel" mode: http://help.adobe.com/en_US/Illustrator/14.0/WS714a382cdf7d304e7e07d0100196cbc5f-636da.html.

Edit: Here's an example how image looks like in Ill when pixel preview is accordingly on and off:

In first case when also "Snap to pixels" is on, nodes will be snapped to pixel grid.

Answer 3

not sure if you're still having problems with this, but the newer versions of Illustrator have options for creating web-based images. Solves a lot of issues you've listed. Check out: http://tv.adobe.com/watch/max-2013/using-illustrator-for-web-design-and-graphics/