How to Design for Screen more Efficiently with Illustrator
Speed up your icon and vector graphics workflow
Adobe Illustrator is a great tool for designing icons and other vector graphics for both print and screen. But as a designer who creates artwork primarily for screen, I have found that some unconventional methods in Illustrator can make it even more efficient. Here are some of my top tips for designers wanting to speed up their workflow.
Always use Round Pixels Values
This is crux of an efficient workflow in Illustrator. We previously had an article on How to Get Pixel-Perfect designs in Adobe Illustrator
which covered various techniques for obtaining sharp, pixel perfect designs. But even if pixel perfection is not your aim, it is still far more efficient to always use whole pixel values in any design intended for screen. Round value numbers are simply easier for our brains to understand, and therefor easier to work with.
Give Preference to Even Pixel Values
In addition to using round pixel values, it is also wise to use even numbers whenever possible. For the purpose of scaling graphics in particular, odd numbers can always be doubled and result in round even numbers, but they cannot be halved without resulting in fractions. Even numbers of course can be.
X and Y Values are Important too
Just as important as having round width and height values for objects, the X and Y position values will also determine how pixel-precise a shape looks. For example a 40 x 40 pixel rectangle positioned at X 150.75 and Y 350.25 will not be aligned to the pixel grid and may appear blurry on some screens.
Use the Transform Panel to make Large Adjustments
Use the Free Transform tools to roughly find the correct size for a large size adjustment and then highlight any X, Y, H or W fields which are not whole values in the Transform panel, and hit the Up or Down key once to round up or down to the nearest whole value.
Use the Arrow keys to make Small Adjustments
To make small changes to a shape, either Isolate the object and use the Direct Selection tool to highlight one side of the shape and Nudge the vector points left/right or up/down with the arrow keys or use the transform panel and up/down arrow keys to tweak X, Y, H or W values. Both of these methods will retain whole pixel values (if Keyboard Increment is 1 px in the General Preferences).
Be Consistent with Strokes
Most artwork created in Illustrator will use outline strokes at some point. Being consistent with stroke values in Illustrator will create a more refined appearance, and speed up your overall workflow. There are a handful of options available for strokes which are:
- Stroke Width
- End Cap
- Corner Joint
- Stroke Alignment
- Dashed Line
- Line Profile
When we talk about being consistent with stroke values, we are really only focusing on Stroke Width, End Caps, Corner Joints and Stroke Alignment.
Depending on the complexity of your artwork, I strongly recommend deciding on 1-5 preset stroke widths to use throughout your artwork in the early stages. For example you may choose 1px for light lines, 3 px for regular lines and 5 px for heavy lines. By sticking to this template, your finished artwork will appear more polished, and consistent. It also reduces time spent deciding on what width to use for which lines if you limit yourself to only 3 options.
End Caps and Corner Joints
End caps and corner joints are styling options for strokes which determine how end and corner points are displayed. These are ultimately personal preference options, depending on which option is most suitable to your style of work. However once chosen, it is best to be consistent with your decision. Especially if you regularly use the Eye Dropper tool, which will duplicate styles including your end cap and corner options from one object to another.
Stroke alignment may seem unimportant, and most will probably select the alignment that looks best on a per-object basis. But like with the end caps and corner joints, if you decide to use the Eye Dropper tool to copy styles from one object to another, you may end up with a misaligned stroke. A better option for when you need to move a stroke in or out, is to make the actual object either slightly smaller or larger instead.
Which alignment should you use? It makes the most sense to always align strokes to the center rather than the inside or outside. The obvious reason being that it is the default value. But it is also the only type of stoke alignment that is currently supported in SVG.
Don’t Scale Strokes & Corners
One of my top tips is to uncheck both ‘Scale Strokes & Effects’ and ‘Scale Corners’ in the preferences when working on artwork to avoid accidental changes.
The ability to scale strokes is very useful, but it isn't always what you want to do. In fact, personally I find that more often than not, it is preferable for strokes not to automatically scale. The same goes for corners.
For example if you have a rectangle that is 100 x 100 pixels with a 1 pixel stroke, then resize the rectangle to 115 x 115 pixels, your stroke width will now be 1.15 pixels, which is not a round value and may appear blurry on some screens. Also being a relatively small change, may go unnoticed until it’s too late. If and when you do need to make precise scale adjustments, simply turn scale corners and strokes back on temporarily.
Use Align Tools
Seriously, these save so much time. There is often no need to drag in countless amounts of guides or have a calculator handy when you want to precisely place an object.
If you aren’t familiar with align tools, they can be used to move any individual object or group of objects to the top, bottom, left, right, vertical center or horizontal center of an Artboard or another object.
But it doesn’t just end there. For example, what if you want to place an object exactly in between two other objects? Simply select the two guide objects and group them them together, and then also select the object you want to move, mark the group as they key object and then align horizontally and vertically center.
And if you want to align an object to ‘that sort of empty space area over there’? Simply draw a temporary rectangle and use that for alignment, then delete the rectangle. It’s still quicker than drawing rulers!
Non-Destructive Pathfinder Operations (Compound Shapes)
Combining shapes is an essential part of creating icons, and illustration in general. Complex shapes are built by adding, subtracting, and intersecting simpler shapes. In Illustrator this is done with Pathfinder operations, as I’m sure you already knew. But what you may not know is that these Pathfinder operations don’t always have to be permanent.
Think about it, have you ever been in the situation where you combined two shapes together, then realised later that they weren’t quite right? You basically have two options in this situation, either hold down CMD+Z and cry a little as you watch the last of hour of work rewind before your eyes. OR the more popular but still annoying method, redraw the shapes and start again.
Although the default Pathfinder behaviour in Illustrator is to make permanent changes to shapes, it can also be done non-destructively. All you have to do is hold down the Alt key as you click one of the shape modes. The operation is performed but is not made permanent until you click the Expand button. In Illustrator this is called a Compound Shape.
Over time, little changes to your workflow which save a few seconds here and there add up to make a more substantial difference. Hopefully by sharing some of my favourite tips and tricks, you can be a little more efficient at designing for screen with Illustrator.