Designing in Accord Suite's Graphics Core: shapes, type, symbols, layouts and one design in every size

Graphics Core is Accord Suite's page for design — "layers, the canvas, properties and time, for drawing a graphic and making it move." Posters, social posts, logos, menus, flyers, app screens and lower thirds are all made here, as vector shapes and live type that stay sharp at any size and stay editable until you export them.

Graphics Core in sixteen seconds.

This guide walks through the craft from the first shape to the files a printer or a developer asks for, with the terms explained along the way.

Shapes, paths and how to combine them

Draw. In the tools, open Shape and choose Rectangle, Ellipse or Line. For a star, a polygon, an arrow and more, choose Rectangle and pick the shape from the tool options. Drag on the canvas; hold Shift to keep a rectangle square, an ellipse round, or a line to 45° steps. Press Return instead to drop one in the middle of the canvas.

Fill and stroke. Under Shape in the Properties panel, switch on Fill and choose a colour; switch on Stroke, choose its colour and set its Width. Position puts the stroke on the Centre of the edge, Inside it (a border that keeps the card its size) or Outside it.

Rounded corners. Set one radius for every corner — or unlink them and set Top left, Top right, Bottom right and Bottom left separately, for a tab or a speech bubble.

Booleans. Select two or more shapes and choose Path ▸ Unite, Subtract, Intersect or Exclude. These are the four classic shape operations: join them, cut one from another, keep only where they overlap, or keep everything except the overlap. Choose Path ▸ Live Boolean instead and the result stays editable — move a shape later and the combined outline updates.

Path surgery. Path ▸ Join makes two open lines one (or closes a path left open); Reverse Direction turns a path round (useful for arrowheads); with the Pen tool, click a point and choose Split at Point to cut a path there. Outline Stroke turns a line into a filled shape — to join it with other shapes, keep its weight when scaled, or send it to a vinyl cutter.

Strokes with character. Under the stroke settings, Thickness Along the Line gives a line a profile — a brush-like taper, a swoosh, a bulge — or Edit Thickness on the Canvas to shape it by hand.

Shapes from elsewhere. Copy an SVG, or a drawing from another Mac program, and choose Edit ▸ Paste: it arrives as a group of shapes you can edit. Edit ▸ Copy as SVG goes the other way.

Colour: fills, gradients and gradient meshes

For a fill, choose its colour in the Properties panel. For a gradient, choose its Shape under Gradient, then each colour stop and where it sits.

For shading that follows a form — a fruit, a bottle, a fold of cloth — set the gradient's Shape to Mesh. A grid of points appears; click a point and give it a colour, drag points to bend the mesh, and add Columns and Rows to make the grid finer. This is the technique illustrators use for photo-real vector shading.

Patterns. Draw a tile (a dot, a leaf) and the shape, select both and choose Fill with Pattern in the shape's Fill controls. Spacing is set in the Clones section.

Moodboards. File ▸ New from Template ▸ Moodboard, drop pictures onto it and type notes beside them. Control-click a picture and choose Pull Colours ▸ Keep as a Swatch Set: its main colours become a set every colour picker offers — so the palette you collected is the palette you design with.

Type

Choose the Text tool (T) and click, or press Return to type in the middle of the canvas. In the Properties panel set Font, Size, Alignment and Colour; line spacing and tracking (the even spacing of all letters) are in the Text panel.

• Fonts that travel. Three variable font families come with the app — Inter Variable (a sans), Source Serif 4 Variable (a serif) and JetBrains Mono (a monospace) — so a design looks the same on any Mac that opens it. Being variable fonts, their weight (and, for Inter and Source Serif, their optical size) is set with a number rather than picked from a list.
• Case, justification, emphasis. Choose a Case — As Typed, UPPERCASE, lowercase or Title Case — without retyping. Justify to both edges once the text has a box width. ⌘B, ⌘I and ⌘U for bold, italic and underline, on the whole layer or just the words you select; Strike Through for the old price beside the new one.
• Lists. Choose Bullets or Numbers in the Properties panel, and Paragraph spacing for room after each item.
• Type on a path. Select a path and a text layer and choose Path ▸ Put Text on Path to run a line round a curve or a circle.
• Text through linked boxes. Give two or more text boxes a Box height, select them, and choose Layer ▸ Text ▸ Flow Text Through Boxes: one text runs down each column and on to the next, as in a magazine layout.
• Outlines. Right-click a text layer and choose Convert to Outlines to turn letters into shapes — to reshape a logo by its points, or to send it where its font is not installed.

Layers, and keeping a design in order

Group layers (⌘G) so the parts of one thing move together; ungroup with ⇧⌘G. Rename, lock, hide (the eye), reorder by dragging, duplicate (⌘J) and delete from the Layers panel or the Layer menu.

• Layer styles. Right-click ▸ Layer Style ▸ Drop Shadow, Inner Shadow, Stroke or Colour Overlay; Copy Style and Paste Style repeat it on other layers.
• Opacity and blend modes. Lower Opacity to let what is beneath show through; choose Multiply, Screen, Overlay and the rest from Blend to change how a layer's colours mix with those beneath. (Picture ▸ Blend In chooses whether blend modes mix in linear light, for accuracy, or perceptually, as most photo programs do.)
• Effects on one layer. Effects on this layer in the Properties panel adds blurs, sharpening and stylising to that layer alone, in an order you can change.
• Showing a layer inside another. Clip to Layer Below puts a picture inside a shape or inside type. A track matte shows one layer through another, read by its Alpha or its Luma (brightness). Stencils keep what is beneath only where this layer is — or, as a Silhouette, only where it is not.
• Follows. Choose a layer from Follows and this one moves with it — a label that stays with the thing it names.
• Measure, don't guess. Drag an object with the Transform tool and the gaps to its neighbours show in pixels; hold Option and point at another object for the gaps between the two.

Symbols: draw once, use everywhere

Right-click a layer and choose Create Symbol. It becomes a symbol in the Assets panel, and every instance you place follows it: change the symbol and every copy changes.

• An instance can change one of its layers locally — its words, say — and Reset puts that layer back.
• Variants. Right-click a symbol ▸ Add Variant…, name what the variants differ by (State) and this one's value (Hover). A placed button can then be switched between Default, Hover and Pressed from a menu, without placing it again.
• Swap puts another symbol in an instance's place, keeping its words.
• Instance size. Pin the symbol's parts with constraints, then give an instance its own width and height: it stretches properly, pinned parts keeping their places.
• Shared looks. From a layer's Style menu, Share This Look in the Document… defines a look once and keeps it linked wherever it is used; Update to Match This Layer changes it everywhere.

Designers who build interface kits will recognise all of this: it is how a button family stays consistent across a hundred screens.

Layouts that hold together

• Auto Layout. Select a group and set Arrange to a row or a column, with Gap, Padding and alignment. The group rearranges itself as its children change; set its size to Fit Contents or Fixed, and each child's to Fixed or Fill.
• Constraints. For each layer choose how it behaves when the canvas changes size: pinned Left, Right, Left and Right, Centre or Scale across; Top, Bottom, Top and Bottom, Centre or Scale down.
• Guides and grids. Drag guides from the rulers, or Picture ▸ Guides ▸ Add Columns and Rows… for a layout grid with gutters and margins.
• Clones. Layer ▸ Clones repeats a shape in a line, a ring or a grid — a row of stars, a circle of dots.

One design, every size

The square post, the story, the banner and the print version usually mean rebuilding the same design four times. Instead, open Versions (two overlapping rectangles) in the bar above the panes and choose Create Social Versions — one version at each of the usual social sizes — or one size from the feeds, screens, ads and print lists. With constraints set, each version keeps its parts where they belong. A canvas can also be duplicated (Picture ▸ Duplicate Canvas) or resized without scaling what is on it (Picture ▸ Image Size… ▸ Resize the canvas).

Practical extras

• Remove a background. Select a picture layer and click Remove Background (or Layer ▸ Remove Background) to cut out a person, a product or a pet; Restore Background brings it back.
• Replace a picture. Layer ▸ Replace Picture… puts another picture in, fitted to the frame — the fast way to update a template.
• QR codes. Layer ▸ New QR Code…, type the link, choose size, colours and border. Edit it later in the Properties panel and click Update Code.

Making it move

Graphics Core has a timeline too: any property with a stopwatch beside it can be keyframed, so a poster becomes a short animated post or a lower third. The full animation tools are in Anime Core — see 2D and 3D animation.

Exporting a design

• SVG (Picture ▸ Export as SVG…) for a drawing that stays sharp at any size; Web Page (Picture ▸ Export as Web Page) for a page with its text and pictures.
• PDF (Picture ▸ Export as PDF…) with words that can be selected and searched. For print, set the bleed your printer asks for (often 3 mm — artwork extended past the trim so no white edge shows) and turn on crop marks (the lines that show where to cut).
• Chosen layers. Select a logo or an icon and, in the Properties panel's Export section, add sizes: 2x for twice the canvas size, 512w for 512 pixels wide, 300h for 300 high, each with a suffix such as @2x and a format — PNG, JPEG or SVG. Click Export… and choose a folder. This is the set of files an app or a website asks for, in one go.

SVG, PDF and web pages export free, always; pictures export up to HD size without Pro, full size with it. More in every way to export.

Where to go next

Photographs in Photo Core · Animation · Cutting film · The overview

Download Accord Suite — free, for the Mac.