Both Fireworks and Illustrator have a superior feature set but I find myself using Photoshop’s vector tools for almost all interface design tasks. The main reason for this is personal familiarity (I’ve been using PS since version 2.5), but I also find there are workflow benefits from having less applications running at once.

There are some things that you simply can’t do with Photoshop’s vector tools, but there is a surprising amount that you can, with a few caveats. This post gives an overview of some useful techniques and workarounds.

Vectors in Photoshop

Vector graphics are ideal for creating interface elements since they are resolution independent and so can be scaled and manipulated without loss of quality, unlike their raster graphic counterparts.

Vector objects in Photoshop differ from their implementation in FireWorks and Illustrator however, since they are made from a solid colour layer that is masked by a vector path, rather than being a discrete object in it’s own right. The layer and the vector mask can be manipulated separately in the layer palette, plus the path can be selected independently using the Path or Direct Selection tools:

This can consequently lead to confusion in terms of knowing quite what to select when editing — the layer? the path? the vector mask???

This has remained the same since vector shapes were introduced in version 6.0. Maybe it will be improved in a future release, but for now we have to grapple with these different elements when working with vectors in Photoshop.

Resizing Rounded Corners

Most designers will be familiar with Photoshop’s Rounded Rectangle Tool, which creates (unsurprisingly) a rectangle with rounded corners, and possibly a core component in the creation of modern interface elements. The Options bar allows you to specify a corner radius value in pixels before you begin, but unfortunately this can’t be edited on-the-fly once the rectangle has been created. Worse though, is the fact that when you transform your rectangles, the corners are transformed as well. If you are, for instance, adjusting the height of a rounded rectangle, the corners become distorted:

Fireworks gets around this problem by offering a ‘nine-slice’ option that allows you divide the shape into a 3x3 grid and keep corners intact whilst other areas are transformable. This is similar to an approach used by the Flash authoring application and also the new CSS3 border-image property.

No such feature is offered in PS, but there is a fix, which I will explain below:

1. Create a shape with the rounded rectangle tool.

2. Choose the Direct Selection Tool and drag a selection area over the bottom two corners of the rectangle, as shown below:

3. With the Direct Selection Tool still active, drag the selected corners down to increase the height of the rectangle:

4. The rectangle has now been transformed, whilst keeping the shape and size of the rounded corners intact:

Quick Triangles

The provided shape primitives do not seem at first to include triangles, one of the more useful shapes, if you wish to break out of ‘block monotony’ in your interface design…

To create an equilateral triangle you must select the Polygon Tool and type ‘3’ in the ‘sides’ field in the Options Bar:

Holding SHIFT on the keyboard whilst drawing the triangle keeps it nicely aligned to the horizontal or vertical axis. Once created, you can use the Direct Selection Tool to manipulate the triangle’s anchor points and define different triangle types:

Combining Shapes

PS provides some primitive shapes that when combined can create more advanced and useful objects. The act of fusing the paths of two shapes together is far from intuitive however.

The two paths that you want to combine must be present on the same vector mask in the Layers palette. This can be achieved by holding SHIFT when creating vector shapes, but if they already exist on different layers, they can be moved onto the same mask.

Here is how to create a tabbed content area by combining two shapes:

1. Create two vector shapes, a large rectangle to form the main body of the content area, and a smaller rounded rectangle to form the tab as shown below:

2. Use the Path Selection Tool to select the path belonging to the rounded rectangle:

3. CUT the path ( EDIT > CUT from the menu, CTRL-X on Windows, CMD-X on Mac.

A dialogue box will appear, select ‘delete layer’, and click OK.

4. In the Layers Palette, single-click on the thumbnail of the vector mask you wish to move the path to:

5. PASTE the path into the selected layer mask (EDIT>PASTE, CTRL-V (Win), CMD-V (Mac):

Now this kind of looks okay, but each path is still a separate object and will behave strangely if we try to apply transforms or layer styles. To make these behave as expected, we need to combine them to create a new, single path.

6. To combine paths, both paths must be selected. With the Path Selection Tool active, hold SHIFT on the keyboard and click on the paths until both are selected. You can tell if you have both shapes selected by looking to see if all their anchor points are visible:

7. Now click on the COMBINE button found in the Options Bar:

We now have a single shape!

You may have noticed that to the left of the COMBINE button were different operators for combining paths; ‘add’, ‘subtract’,‘intersect’ and ‘exclude’:

These are not unlike those found in the Pathfinder palette in Illustrator and most other vector drawing applications. Using the technique above with these functions allows us to create a range of complex vector objects without ever having to leave Photoshop or launch additional applications. Here are some basic examples of what is possible:

Since these are single objects rather than a collection of separate vector paths, they can be transformed easily and layer styles will behave in the way you would expect.

Ensuring Additional Anchor Points Are Linear

Another method for creating more complex shapes is to append additional anchor points to a primitive shape. Again, this should be straightforward, but Photoshop tries to catch us out by making any new anchor points produce bezier curves by default. Quite often, you will want your path points to be linear, not curved. Here’s how to make that happen using a breadcrumb navigation design as an example:

1. Create a shape with the Rectangle Tool and then select it with the Path Selection Tool.

2. Switch to the Pen Tool (P on keyboard)

3. Move the cursor over the centre of the rectangle’s left-edge until a small ‘+’ appears next to the cursor icon (as shown below):

4. Clicking here will add a new anchor point to the path, albeit a bezier curved one. To convert the point to a linear one, ensure the Pen Tool is still selected, then hold ALT on the keyboard and click the point again.

5. With the Direct Selection Tool, select the new linear anchor point and move it to the right, creating the following shape (using Snap To Grid helps with positioning):

6. By performing a similar action on the right edge of the rectangle a ‘chevron’ shape can be created.

7. Duplicating the shape several times enables you to create this breadcrumb-style design:

Conclusion

In this post we have looked at some techniques that can be employed to create basic interface elements using the vector tools found in Photoshop. Although fiddly at times, it is possible to achieve a wide range of results, with the right know-how.

In Part 2, coming soon, we will look at some more advanced techniques and apply them to real-world examples.

Feel free to ask questions or give your opinion on using Photoshop over Fireworks or Illustrator for these kind of tasks in the comments.