ShoutCreate
Open the app →
Core course · ~35 minutes

Vector Design — Draw Anything

This is the ShoutCreate studio's beating heart. Draw with the Pen, snap shapes into place, fuse them with boolean operations, pour in gradients, bend text into outlines and export razor-sharp SVG and print-grade PDF. Vectors scale to any size without ever going fuzzy — so you draw once and use it everywhere.

In this course
Pen toolShapesTransformBoolean opsJoinCompound pathsGradientsLayers & groupsText to outlinesVectorizeArt libraryStyle PacksSVG & PDF export
The big idea

A vector isn't a grid of pixels — it's a set of paths described by maths. That's why it scales from a business card to a billboard with perfectly crisp edges, exports as tiny clean files, and stays editable forever. This course walks you through every drawing tool in the studio.

01 · MODULE

The vector idea

Before you draw a single line, it's worth knowing why vectors are special — because it changes how you work.

Paths
Maths, not dots
Pixels
Blur when enlarged
Scales
Any size, still sharp
Editable
Every point stays live
  1. A path is a route. Each vector shape is a line that runs between anchor points, with the curve between them controlled by handles. Nothing is baked in — you can nudge any point at any time.
  2. It scales without loss. Blow a vector up to poster size and the edges stay knife-sharp, because the studio simply recalculates the maths at the new size.
  3. It stays small and clean. A vector logo is a handful of instructions, not millions of coloured dots — perfect for the web and for print.
Rule of thumb If it's a logo, icon, illustration, type treatment or anything you'll resize a lot, draw it as a vector. You only ever need to make it once.
02 · MODULE

Draw with the Pen

The Pen is the tool that draws anything. It lays down anchor points; how you place each one decides whether you get a sharp corner or a flowing curve.

  1. Click for corners. A single click drops a corner point. Click, click, click around a shape and you get straight edges between each point — ideal for angular icons and geometry.
  2. Click-drag for curves. Instead of releasing, drag as you click and the point becomes a smooth Bézier curve. The further you drag, the deeper the curve; the direction sets which way it bows.
  3. Let it snap. As you draw, the canvas snaps your points to guides — so edges line up, points meet cleanly and symmetry stays honest without you fighting the mouse.
  4. Close the path. Click back on your first point to close the shape, or leave it open as a line — your choice.
Corners and curves together Most real shapes mix both — a corner here, a sweeping curve there. Just switch between clicking and click-dragging point by point as you go around.
Go slow at first The Pen rewards a light touch. Place a point, drag a little, look at the curve, then move on. A few minutes of practice and it becomes second nature.
03 · MODULE

Shapes & precise transforms

Not everything needs the Pen. For clean geometry, reach for the shape tools — then move, scale and rotate them with precision.

The shape tools

RectangleEllipsePolygonStarLine

Drag one out on the canvas and it's a fully editable vector — you can always convert it to points and reshape it with the Pen later.

Move, scale, rotate

  1. Move. Select and drag. Guides snap you into alignment with other shapes and the canvas.
  2. Scale. Drag a corner handle to resize. Because it's a vector, it stays crisp at any size.
  3. Rotate. Grab outside a corner and spin. Snapping helps you land on tidy angles.

Selecting shapes that overlap

When shapes stack on top of one another, you don't have to move things out of the way to reach the one underneath.

  1. Click the top shape as normal to select it.
  2. Cycle down the stack. Alt-click (or right-click) on the same spot to step through each overlapping shape in turn, until you've grabbed the one you want.

Align & distribute

Select several shapes and use Align to line them up by edge or centre, and Distribute to space them evenly. It's the fastest way to make a layout look deliberate rather than nudged-by-eye.

04 · MODULE

Combine shapes

This is where vector design gets powerful. Rather than drawing complex outlines by hand, you build them from simple shapes and let the studio fuse them.

Boolean operations

Select two or more overlapping shapes and combine them — non-destructively, so you can always adjust the originals.

Union
Merge into one
Subtract
Cut top from bottom
Intersect
Keep the overlap
Exclude
Drop the overlap
OperationWhat it doesReach for it when…
UnionMerges shapes into one outlineBuilding a blob or a combined silhouette
SubtractCuts the top shape out of the one belowCarving a notch, a bite or a window
IntersectKeeps only where shapes overlapTrimming to a common area
ExcludeKeeps everything except the overlapMaking crosses, links and cut-out effects

Join open ends

Drawn an outline that doesn't quite meet? The Join command closes the gaps between open path ends automatically, snapping them into one clean, closed path — no fiddly point-nudging required.

Compound paths — punch holes

To make a genuine hole (the middle of a letter O, a doughnut, a ring), combine an outer shape and an inner one into a compound path. The inner shape becomes a true see-through hole rather than a white patch sitting on top — so whatever is behind it shows through.

Non-destructive by design Because boolean results stay editable, you can pull the source shapes apart later and the combined outline updates. Build boldly — nothing is set in stone.
05 · MODULE

Colour, gradients & layers

With the shapes drawn, it's time to bring them to life with fills — and to keep the artwork organised as it grows.

Fills

  1. Solid colour. Give any shape a flat fill. Clean, bold and print-friendly.
  2. Gradients. Switch a fill to a linear or radial gradient and add multiple stops for smooth blends — a sunrise sky, a glossy button, a soft shadow.
  3. Tune the stops. Drag stops along the gradient to move where each colour sits, and change the angle or centre to aim the blend.

Layers & groups

As artwork gets busy, layers and groups keep it under control.

ActionWhy you'd use it
Group / UngroupBundle related shapes so they move and scale as one
ReorderSend shapes forward or back to control what sits on top
LockFreeze a layer so you can't nudge it by accident
HideTemporarily switch a layer off to work on what's beneath
Group early Grouping the parts of a logo or an illustration as you finish them keeps big drawings tidy — and means you can restyle a whole element in one move.
06 · MODULE

Type & turning text into outlines

Text in a vector studio starts as live, editable type — and can become fully editable artwork whenever you need it to.

  1. Add text. Drop in a text object and type. Edit the words freely, just like anywhere else.
  2. Choose a font. Pick from the font menu to set the tone — headline-bold, elegant, playful, technical.
  3. Convert to outlines. When the wording is final, turn the text into outlines — the letters become editable vector paths.
  4. Reshape or cut. Now you can pull letter shapes around with the Pen, apply boolean effects, or send them to a cutting machine — the type is pure vector.
One-way street Once text is converted to outlines it's no longer editable as words — you can't retype it. Keep an editable copy of the text if you might reword it later, and only outline the final version.
Why outline? Outlining locks the look so it renders identically anywhere (no missing-font surprises), and unlocks effects and cutting that live text can't do.
07 · MODULE

Shortcuts: Vectorize, the Art library & Style Packs

Drawing from scratch is powerful, but you don't always have to. These three shortcuts get you to a finished vector faster.

Vectorize a raster image

Have a photo, sketch or logo trapped in pixels? Vectorize turns a raster image into editable vector paths you can recolour and reshape.

  1. Drop in the image you want to convert.
  2. Run Vectorize. The studio traces it into clean vector shapes.
  3. Try the Travel poster preset. It gives a bold, flat-colour look — 8 flat colours with boosted contrast — for that graphic, screen-printed feel.

The Art library

Tap the Art button to browse a built-in library of 600,000+ CC0 / public-domain museum artworks. Drop any piece straight onto the page and its credit line comes attached, so attribution is handled for you.

Style Packs

Switch on a Style Pack to give your whole design a genre. Choose Manga Graffiti Bauhaus Pop Art and more. Turning one on:

  1. Pins matching fonts to the top of the font menu.
  2. Leads the colour strip with that pack's palette.
  3. Unlocks per-genre stamps — motif graphics you can place and recolour.

Stamps are ready-made genre motifs: drop one on, recolour it to fit, done. See the full breakdown in the Style Packs guide.

Working on big designs

For large, detailed artwork, the Navigator mini-map lets you jump around without losing your place, and Max View hides the panels for a distraction-free canvas.

Mix and match Vectorize a sketch, drop in a museum piece from the Art library, then flip on a Style Pack — all three combine into one editable vector design.
08 · MODULE

Export SVG & print PDF

Vectors earn their keep at export. Because everything is paths, you get files that are tiny, crisp and truly scalable.

  1. Export true SVG. The studio writes native beziers and clean markup — no embedded bitmaps — so the file stays sharp, editable and small. Perfect for the web, icons and handing off to developers.
  2. Export print-grade PDF. Send a PDF at any print size, right up to poster, ready for professional printing.
  3. Export PNG when you just need a plain image for a slide, a social post or a quick preview.

Which file for which job

FormatBest for
SVGWeb, icons, logos, developer hand-off — infinitely scalable, editable
PDFProfessional print at any size up to poster
PNGA plain flat image for slides, social and previews

Tools you used

Pen toolShapes & transformsBoolean opsJoinCompound pathsGradientsLayers & groupsText to outlinesVectorizeArt libraryStyle PacksSVGPrint PDF
Keep this handy

Cheat sheet

Common commands

Pen
Click = corner, drag = curve
Select
Click; Alt / right-click cycles the stack
Group
Bundle shapes to move as one
Union
Merge overlapping shapes
Join
Close open path ends cleanly
Export
SVG, print PDF or PNG

Boolean at a glance

Union
Merge into one
Subtract
Cut top from bottom
Intersect
Keep the overlap
Exclude
Drop the overlap
Compound path
Punch a real hole
Your turn

Drawn something sharp?

Export it as true SVG, print it to poster size, or drop in a Style Pack to reinvent the look.

Open ShoutCreate and start drawing → ← Back to ShoutCreate