UI Design in Inkscape (3)

Drawing the Twitter logo using circles and path operations

This post discusses Inkscape operations I use frequently while designing UIs. Some may appear obvious (like #1 and #2 below) but included are details and tips I’ve found useful to know over the years.

1. Transpose, resize, rotate

We start with the most basic of operations, which move and modify shapes. They all start with selecting a shape. You can Tab to it or select it using the mouse. Handles show up around the shape.

"Transform" handles around a crown. Top image shows "resize." Bottom image shows "rotate" and "skew."
"Transform" handles around a crown. Top image shows "resize." Bottom image shows "rotate" and "skew."

Transpose

To move a shape, use the arrow keys (, , , ). If the shape has a fill defined, you can click and drag on the enclosed area to move the shape around. However if the shape has no fill defined, you’ll have to drag and move the shape by its stroke.

Shift+← → ↑ ↓ increases movement speed. Alt+← → ↑ ↓ makes it finer. Holding down Ctrl while dragging with the mouse moves the shape along the horizontal or vertical axis from its original position.

Resize

The handles that appear when you first focus on a shape are the resize handles. Drag them to resize the shape. The handle opposite the one you’re dragging becomes the anchor. Holding down Shift while dragging makes the center of the shape the anchor instead. To retain the aspect ratio while resizing, use the Ctrl key. The < , and > . keys also resize shapes. Alt+< , and Alt+> . will halve the rate at which resizing happens.

Rotate

Clicking on a shape a second time or pressing Shift+s again activates the rotation and skew handles. These you can drag, holding down Ctrl to do it in steps of 15°. You can also use [ or ] to rotate the shape counter-clockwise or clockwise in steps of 15°, holding down Alt for finer control.

2. Zooming and panning

Mockups are created zoomed in. It is easier to select, align, or otherwise micro-manipulate things when they are 2x or 3x their actual size. On the other hand, it is important to keep an eye on the overall picture. I find it easier to spot UX goof-ups when I look at the mockup as a whole. In fact this zoom-in-zoom-out-pan interaction is such an important part of the workflow that Inkscape offers several ways to do both:

Zooming
  • Ctrl+mouse-wheel
  • =/+, -/_
  • z then click and Ctrl+click
  • z then draw rectangle
Panning
  • Mouse-wheel and Shift+mouse-wheel for scrolling
  • Space+mouse-drag
  • Mouse middle-button-drag
  • Ctrl+← → ↑ ↓

3. Alignment

Careful alignment makes everything look professional. In fact, you can draw attention to symmetry in your UI by using subtle changes in background color.

Alignment errors that slip through become apparent to your users as their eyes track horizontally, estimating and comparing occupied and free space around adjacent shapes. The first obvious fix for this is to properly use the Align and Distribute toolbox (Ctrl+Shift+a). By default, this tool will work relative to the page, but I find that First Selected and Last Selected are the most useful options. This toolkit is pretty functional and self-explanatory, and you can find more details in the manual.

You can also use guides (|) to visually estimate locations of shapes that are far from each other, for instance, on opposite sides of a dialog. Enable snapping (toggle using %) to jump or snap nodes to nearby waypoints. (To select other options for waypoints, enable View>Show/Hide…>Snap Controls Bar.)

Note that alignment is more about perception than geometry. In reality, we don’t interpret sizes as widths and heights but as areas. Our perception is also influenced by the meaning of a shape and the context in which it is presented. In the figure below, though the first triangle is centrally aligned with its circle, the rightmost one seems the most uniformly distributed and “correct.”

Diagram shows a triangle centered inside a circle using different methods: cartesian coordinates, centre of mass, and visual centre
Aligning shapes correctly

This kind of visual alignment is needed to align headings to paragraph text or text inside boxes. You can find more information about shapes and alignment in this excellent article by Slava Shestopalov.

4. Path operations

One way to create complex shapes is by combining multiple shapes. While you can always overlap and group multiple shapes together to form a single shape, they will continue to exist as individual shapes, unable to share certain properties, for example, a stroke. Besides, there are operations other than union, which is the one that looks like grouping, that are useful. Here is a quick list:

Various path operations
Various path operations

Path operations are particularly useful for creating icons and logos where more complex shapes are needed. Here’s an example of using these operations on circles to draw the Twitter logo:

5. Clipping and masking

You can clip one shape out of another without changing the original. I often use clipping when I want to create round or oval shaped profile photos. As an example, here’s how we can use the Twitter logo drawn in the video above to clip a shape out from a vibrant background image:

Using Inkscape clip operation to shape a vibrant multicolored background into the shape of the Twitter logo
Using Inkscape clip operation to shape a vibrant multicolored background into the shape of the Twitter logo

In order to create a clipped path or shape, the clipping path should be topmost (highest z-order). Superimpose it over the source object and select Set clip from the context menu or Path>Clip>Set from the top menu.

Masking is similar to clipping, but in addition to setting the shape, you can also change the opacity of the masked object by tweaking the color and opacity of the mask.

The real power of clipping and masking lies in the fact that they can be performed on groups, and when the original object is edited, the clip or mask reflects the change. Further, clipping and masking don’t change the original object as path operations would. Another advantage is that the size and color/opacity of the clip or mask can be controlled via CSS, allowing for interesting transforms and animations to be performed on web pages. Here’s an example that uses clipping in this manner, by Sebastian Popp on CodePen:

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.