How-to

Selection Tool Part 2: Master the Control Bar & Transform Panel

Introduction

This continuation of our Selection Tool series dives into the Control Bar and its most precise companion—the Transform Panel. You’ll learn how to apply numeric, exact edits for size, rotation, position, skew, and visibility so your logos, icons, and layouts snap into place with confidence.

Control Bar Overview

The Control Bar (right side on desktop, bottom on phones) adapts to the active tool. With the Selection Tool active, you’ll see:

  • Transform: exact size, angle nudges, position, skew, visibility.
  • Object: layer order, group/ungroup, flip, clip mask.
  • Align: align to canvas or to a target object.
  • Arrange: linear spacing or grid layouts.

Common panels (available across tools) include Boolean, Stroke, Shadow, Layers, Settings, Document, and Export.

Transform Panel: Precision Controls

Use the Transform panel to make exact numeric edits to your selection:

  • Lock (padlock): When locked, changing Width updates Height proportionally (and vice versa). Unlock to freely set each dimension.
  • Width & Height: Type exact values for pixel-perfect sizing. Combine with the lock for proportional scaling.
  • Rotation: Vector Ink treats the object’s stored angle as zeroed on drop. Use the field to nudge or apply an exact delta (e.g., enter 90 to rotate 90°). The field returns to 0 afterward by design.
  • Position (X, Y): Coordinates relative to the document. Set X=0 to snap to the left edge, Y=0 to the top edge. Arrow controls nudge in 10-pixel increments.
  • Skew: Apply horizontal/vertical skew via increment arrows. Like rotation, skew is applied as a delta (not permanently tracked as a live angle).
  • Visibility: Set opacity from 0 (hidden) to 1 (fully visible) for quick focus and reveal workflows.

Quick Recipes

  1. Scale a logo proportionally: Lock the padlock → set exact Width (e.g., 512) → Height updates automatically.
  2. Rotate by an exact value: In Rotation, enter 45 (or use arrows) → rotation applies; field resets to 0 (expected behavior).
  3. Snap to canvas edges: Set X=0 for left edge, Y=0 for top. Combine with Align panel for final centering.
  4. Create a subtle italic effect: Apply small Skew increments (e.g., a few taps) to tilt text or shapes consistently.
  5. Focus edit a layer: Temporarily set Visibility of nearby objects to 0.2–0.4 while you adjust the hero element, then restore to 1.

Pro Tips & Gotchas

  • Rotation zeroing is intentional: Treat the field like a “rotate by” control. Need pivot accuracy? Set an Anchor first (Selection Tool action menu), then rotate.
  • Pixel-perfect grids: Use Position increments (10 px nudges) to quickly step rows/columns into place; finish with Arrange → Grid.
  • Proportions drifting? Ensure the padlock is engaged, or use Selection Tool’s Constrain action while dragging.
  • Skew for perspective: Light skew + minor rotation deltas can fake perspective on flat UI cards or badges without complex effects.

2-Minute Practice

  1. Draw a rectangle. In Transform, lock proportions and set W=320. Enter 15 in Rotation.
  2. Set X=0, Y=0 to dock to the top-left, then nudge X/Y arrows twice to offset by 20 px.
  3. Apply two taps of horizontal Skew for a subtle tilt, then set Visibility to 0.8 to preview over a busy layout.

Design with Numbers, Not Guesswork

Pair the Transform panel with the Selection Tool’s Target Selection, Align, and Anchor features to build clean, repeatable systems. Ready to try it on a live project? Open Vector Ink and dial in your next logo or UI layout with precise, numeric control.

Related