I am using Adobe Illustrator to design a number of full screen layouts for an iphone app. I want to achieve the exact same spacing from my desings in the final app. Currently the only way I know how to do this would be to turn on the guides and rulers and painstakingly measure each space between each object manually. Is there an easier alternative to this, be it a setting in Illustrator which can be switched on, plug-in, or some type of external program which can do this automatically.
i.e Some way of quickly being able to automatically see a visual overlay representation of the vertical and horizontal spacing measurements between the individual elements, and possibly combined with the dimensions of the elements themselves.
Any help would be much appreciated.
Pixel spacing in illustrator is easy once you have illustrator set up in the right way.
I use a few settings and tools to achieve what I think you’re talking about here.
First, make sure your document is set up to use RGB and pixels for measurement (command + , for setting units).
Go to View > Pixel Preview and make sure that’s on as well as View > Snap to Pixel. You can also turn on the grid from here, but I don’t find it that useful with these settings. Now if you zoom in far enough you can actually see the pixels that make up your shape (like in photoshop).
Next, your most important tools will be the Alignment panel and Transform panel at the top of the screen. Alignment will ensure all groups and elements will be at the right x or y coordinates. Transform will allow you to set the placement on the artboard to the exact point. Spacing between elements can best be accomplished using key objects and distribute spacing (in the align details panel).
Alignment details panel:
From here it’s important to work with groups to handle your elements. Think of layers as the levels of a shelf while the groups are the bins that hold all the things on your shelf.
With groups you can align objects inside of the groups and then align those groups inside of other groups, etc etc to speed things up.
Finally, I use the ruler tool to create guides quickly. You can work with these just like objects, aligning them, copying, etc. I’ll use this to build my document grids and then either have the artboards running vertically so they all use the same document grid.
A couple things to remember:
- Strokes (borders) will always be positioned right on the line of your shape by default. This is bad as it puts 50% of your line inside and outside the box. You always want this to be either inside or outside your shape.
- Strokes do not contribute to the size and position of your shape unless they’re expanded (Object > Expand). Just remember when you expand these borders they’re now considered completely different objects.
- Always keep an eye on your transform panel. This will give you the best indication of when things are off.
- Guides can be added to groups to make things easier to keep track of.