Pixelmatrix Design

In the process of making very large icons, it’s increasingly important to use vectors (shape layers) to design icons rather than raster layers. Ever since i’ve been introduced to this feature I have not been able to go back to “ye olde raster layer” days. One feature that I’ve missed dearly since converting is the Select → Modify features. Using this feature, you can expand or contract your marquee selection by a certain number of pixels. This allowed for all sorts of possibilities such as making your own strokes, and consequently being able to style those any way you like. Today I’m going to show you how you can do this with vector shapes.

Modifying Selections

So first lets review how this feature works:

Make a selection using the “Marquee Selection” tool (M), create a new layer and fill the selection with your foreground color (Opt-Delete).

Then, go to the “Select” menu and under the “Modify” menu there are a few choices. We’re just going to talk about the Expand feature today, but I trust you will be able to figure the rest out on your own. So choose “Expand…” and enter the desired amount of pixels.

You should see that the selection has magically grown by the number of pixels you entered! Select a new foreground color, create a new layer underneath your first layer, and fill the new larger selection with your new foreground color.

And just like that, you’ve created your very own custom stroke!

The Vector Workaround

Warning: This workaround will require Adobe Illustrator.

Now let’s apply the same thing to vector shapes. First, create a rectangle using the “Rectangle Shape” tool (U). This should create a new “Shape Layer” filled with your foreground color.

Then, take the vector selection tool (A) and click directly on the path. You should see selected points on all the corners of your rectangle. Copy this path to the clipboard by pressing Cmd-C (or Ctrl-C on Windows).

Setting up Illustrator

First, if you haven’t already done so, open Illustrator. Go to Units & Display Performance in Settings (Cmd-K). Set the “General” property to “Pixels”. This will let you work with Illustrator in terms of Pixels rather than Points or any other Unit.

Now, create a new document with similar dimensions to those of your Photoshop file.

Modifying the Shape

Paste (Cmd-V) your shape into Illustrator. If asked what to paste it as, choose “Compound Shape”. You should see your shape from Photoshop in your new Illustrator document.

With your shape selected, choose Object→Path→Offset Path… from the menu.

You should now see the dialog above. Turn on the preview setting so you can see your changes in action, then go ahead and enter the values you want.

Offset
This controls how much your shape is offset. TIP: You can set a negative number to “Contract” your shape rather than “Expand” it.

Joins
This property controls what sort of corners you want.

Miter

A join that forms sharp corners

Round

A join that form rounded corners

Bevel

A join that forms beveled (or flat) corners

The default setting is “Miter” which gives you nice corners, but if you’re going for smooth, stroke-like corners try the “Round” setting.

Miter Limit
This property only applies to the “Miter” join setting. It determines which corners are shaped as mitered, and which corners are beveled. It’s probably best to leave this at the default setting.

When you’ve got the settings you want, click OK.

Deselect all objects (Cmd-Shift-A) and click on the new path that you’ve created. Copy this new path onto the clipboard (Cmd-C).

Putting it all together

Now, return to Photoshop. Paste the shape back into your document. If asked how you want to paste the shape in, choose “Shape Layer”.

Now line up your new shape with the original one and you’re done!

Benefits of Vector

There are tons of benefits to using vector for your work. There are a few downsides too, but that is a topic for a post of it’s own. Here’s how it benefits you to use this method:

Photoshop’s selection modifications are often times jaggy and not precise. Although this vector method takes more time, and requires Illustrator, it is much more accurate and smooth than Photoshop’s natural “raster” way.

I hope you enjoyed this little workaround. This is a feature I’ve been hoping Photoshop would include for years and maybe someday we’ll see it included. In the meantime we’ve got this workaround.