smashing-ebook-8

(Grace) #1

layers with vector masks ( just make sure you have “snap to pixel” turned on,
where possible). While a little awkward at times, switching to all vectors
does have significant advantages.


Before anyone mentions it, I’m not suggesting any of the methods are new;
I’m willing to bet that most icon designers have been working this way for
years. I’ve been using vector shapes for ages too, but the Retina display has
changed my practice from using vector shapes only when I could be
bothered, to building entire designs exclusively with vector shapes.


I usually draw simple elements directly in Photoshop using the Rectangle or
Rounded Rectangle Tool. Draw circles using the Rounded Rectangle Tool
with a large corner radius, because the ellipse tool can’t snap to pixel. Layer
groups can have vector masks too, which is handy for complex compositing
(option-drag a mask from another layer to create a group mask).


More complex objects get drawn in Adobe Illustrator to the exact pixel size,
and then pasted into Photoshop as a shape layer. Be careful when pasting
into Photoshop, as the result doesn’t always align as it should — it’s often
half a pixel out on the x-axis, y-axis or both. The workaround is to zoom in,
scroll around the document with the Hand Tool, and paste again. Repeat
until everything aligns. Yes, it’s maddening, but the method works after a
few attempts. Another option is to zoom in to 200%, select the path with
the Direct Selection Tool, and nudge once, which will move everything
exactly 0.5px.

Free download pdf