Thursday, June 24, 2021

A to Z of Affinity Designer: Tips, Tricks, and Hacks!

A to Z of Affinity Designer: Tips, Tricks, and Hacks!

I’m going to come right out and say it: Affinity Designer is the best overall graphics application package on the market right now.

In this A to Z of Affinity Designer, I'm going to back up that statement by showing you 26 of its standout features, unique strengths, useful tools, and tips & tricks.

And as I do, I'm also going to show you some of the awesome assets you can use with Affinity Designer from the massive collection at Envato Elements. You’ll see brushes, stock photos, vector graphics, logos, T-shirt designs... and that’s just scratching the surface of what’s included in a single monthly subscription.

What You Will Learn

In this article I’m going to pack in as many Affinity Designer tips and tricks as possible in a short space of time. The topics will include:

  • How to change the background color in Affinity Designer
  • Affinity Designer brushes, both raster and vector
  • Affinity Designer Layer panel: fast clipping and adjustment layer targeting
  • Affinity Designer templates for rapid project starts
  • Affinity Designer T-shirt design capabilities

We’re going to see a whole bunch of cool features, so without further ado, let’s jump in!

And if you’d rather watch than read, check out the video version on our Envato Tuts+ YouTube Channel:

A is for Artboards

Affinity Designer allows you to create multiple artboards, which are independent sub-canvases within your document. On desktop, you can access the Artboard tool from the Tools panel, and on iPad you can activate it from the Document menu.

Additionally, if you're wondering how to change the background color in Affinity Designer, using artboards is actually the correct way. After creating an artboard, you can select it and then change its background color as you would with any other shape.

B is for Brushes From Photoshop

You can easily take any set of Photoshop brushes and turn them into Affinity Designer brushes. That includes all of the 600+ brush sets in the collection you get access to when you join Envato Elements.

Just go to the Pixel Persona, then the Brushes panel. Click in the top-right corner to open the menu, click Import Brushes, and then browse for and select your brush files.

These raster brushes can be used to create awesome Affinity Designer art, such as pencil sketching, traditional painterly styles, comic-style inking, texturing, you name it.

C is for Continuous Export

You can file this one under "awesome Affinity Designer tips and tricks":

In the Export Persona, you can create image slices and then set them to be continuously exported as you work on your design.

This means if you're integrating your image exports into an external project, like a website or game, you can just design away, and any time you check on your project, your images will always be in their latest state.

D is for Dual Image Type Editing

Affinity Designer‘s Vector Persona and Pixel Persona combination means you get pro-level raster editing and vector editing in the same unified application. So not only can you do both types of graphics without switching software, but you can do both in the same designs.

Vector sphere with raster texture

For example, you can create your main shapes as vectors, then use Affinity Designer to add texture to those shapes using the kinds of raster brushes we mentioned a moment ago.

Bonus trivia: Serif’s goal of creating an affinity between multiple methods of graphic design is the reason they chose the name “Affinity”.

E is for Embedding External Designs

You can take one Affinity Designer document and embed it into another one, as many times as you like. When you make changes to the embedded document, you'll see the instances in the main document update in real time.

This functionality can largely fill the non-destructive editing role that smart objects play in Photoshop. It allows you to make all kinds of edits while preserving the original image, and making it easy to replace with a new one.

Pictured: Abstract Responsive Mockup by QalebStudio. Stock images “Healthy Breakfast” and “Shortbread Cookies”.

F is for Freehand Line Stabilizing

In the case of both Affinity Designer drawing and Affinity Designer vector art, the excellent freehand "window" and "rope" stabilization tools can be incredibly helpful. They are available on the pencil and brush tools in the Vector Persona, as well as on the brush, eraser, and pixel tools in the Pixel Persona.

The rope stabilizer is great if you want your lines to have sharp corners, while the window stabilizer creates smooth corners. You can also combine these stabilizers with pen pressure for high levels of freehand drawing control.

G is for Grid Gloriousness

Affinity Designer has an outstanding grid management system. You can create ten different types of grids, including square, isometric, oblique, triangular, plus a bunch of others.

In particular it has the most advanced isometric grid system currently available in any vector application, because you can activate the Edit in Plane and Fit to Plane options and then use all the usual shape drawing tools directly in isometric perspective, as though you were working in 3D.

H is for History Branches

As well as having history that can be saved into the document so it’s included if you share the file, Affinity Designer’s history also includes “branches”. If you go back a few steps in your history and start making changes, a new branch will be created in your History panel.

At that branch, you’ll then have two different possible histories, and you can click the branch icon and toggle between one history and another at any time. This way, if you want to go back and try something different, you can do so without losing the work that you've already created up to that point.

I is for Import Adobe Files

Affinity Designer has the best PSD import of any graphics program I’ve used to date. It's the only application I've seen that can import with 100% accuracy, consistently, regardless of the content of the original file. You can also very effectively import Illustrator AI, EPS, and SVG files into Designer.

Accurately imported PSD

So if you’ve been mulling over the perks of Affinity Designer vs. Illustrator, you don't necessarily have to choose between the two. That’s because you can always import your files from Illustrator into Designer and work on them in both programs.

And let's say you’re browsing Envato Elements looking for an Affinity Designer logo. The robust and accurate importing of multiple file formats means you have a lot of options available, in addition to the logos specifically made for Designer.

Pictured: Panda Samurai logo by Blankids

J is for Control-J to Power Duplicate

Power duplication lets you quickly create several duplicates of an object with progressive transforms and rotations applied.

For example, you could quickly create a grid of repeating tile graphics by duplicating an initial tile and offsetting it to the side, then repeatedly hitting Control-J. Every duplicate will repeat that same initial offset, forming a row.

You can then select that whole row, duplicate it, offset it downwards, and again hit Control-J repeatedly to create as many rows as you like.

The same thing can also be done with rotation to do things like creating a flower illustration, for example.

K is for Keyboard Customization on Desktop and iPad

The iPad version of Affinity Designer has full keyboard support, and all the keyboard shortcuts on both it and the desktop version can be fully customized.

Both versions have hotkeys for every tool, and they can be set uniquely in each of the personas, or you can use the same hotkeys across similar tools such as the vector brush vs. the pixel brush.

L is for Layer Panel Drag and Drop

The Affinity Designer Layers panel makes it really easy to set up clipping shapes or to target adjustment layers, just by dragging and dropping layers into the right place.

For easy clipping setup, just drag and drop a layer or group onto the layer you want to use as a clipping shape.

To target an adjustment layer, drag and drop it onto the layer or group you want the adjustment to affect.

M is for Mobile Design

The Affinity Designer iPad version has almost complete feature parity with the desktop version. I personally now use it more than l do the desktop version.

With the addition of the Apple Pencil into the mix, it also gives you the advantages of drawing directly on the screen, plus touch-based interactions such as two-finger tap to undo, pinch to zoom, using a finger to physically smudge with the smudge tool, and so on.

The experience can be even better if you're using Affinity Designer on iPad Pro, with its large display and additional system resources.

N is for Noise That Scales

If you want to know how Affinity Designer can add texture, one of the most accessible and versatile ways is through the vector-friendly noise tool that can be used as a part of setting fill colors.

All you have to do is set the Noise slider to whatever amount you like, and a grain-style texture will be added to your shape.

This noise will recalculate itself and scale to whatever level you zoom, making it an outstanding way to add texture to your vector shapes.

O is for Opacity Gradients With the Transparency Tool

Grab the Transparency Tool and just drag it over any shape to instantly add a fade-out effect.

What this does behind the scenes is automatically create a layer with a black-to-white gradient, then set it as a layer mask so you end up with an opacity gradient.

And because this tool creates a gradient, you can then edit that gradient to fully control the transparency, change the position and strength of the stops, and switch the shape of the gradient to elliptical, radial, or conical.

P is for Palettes From Colour Chords

Affinity Designer palettes can be automatically generated using color harmonies.

Go to the Swatches panel and create a new document palette, then add a base color swatch to it. Right-click the new swatch, select Create Colour Chord, and then choose the type of color harmony you want to use to generate colors—for example, complementary, triadic, tints, shades, or tones.

The number of new swatches added to the palette will depend on the color harmony you choose.

Q is for Quick Start With Templates

Affinity Designer templates are easy to create. In any document, at any time, go to File > Export as Template and follow the prompts.

From then on, you can make a quick start on similar documents by choosing from your collection of previously exported templates when starting a new document.

The new document will pick up exactly where the template left off at the time it was exported.

R is for Real-Time Preview

In Affinity Designer, you get previews of blend modes, color selections, masking brushes and so on in real time.

This means you don't have to sit through the tedious process of testing, undoing, and testing again. You see exactly what results you're going to get before you commit.

S is for Stroke Styles

In Affinity Designer, dotted lines are easy to create—just apply the Dash Line Style to a shape’s stroke, tweak the dash parameters, and you're done.

It's equally fast to apply the application's other stroke styles too, such as vector brush-based lines and arrows.

T is for T-Shirt Designs

If you're wondering whether or not Affinity Designer T-shirt design is a thing, the answer is yes. I've used it myself for some POD printed designs, and both the process and results were great.

Affinity Designer easily imported the PSD design template files I needed to use. It was smooth and effective to design in at the required size, and it supported the CMYK color format that's necessary for print.

Don’t forget, if you want to get a head start, you can always grab a T-shirt graphic template from Envato Elements and import it into Affinity Designer as the basis for your own design.

 Pictured: T-shirt Designs Retro Collection by JeksonJS

U is for UI Design

When you're first learning how to use Affinity Designer, you might not initially realize, but it’s actually a very capable UI design tool—one of the few (or maybe the only one) that can be purchased for a flat fee and used on both desktop and mobile.

It has artboards, as we mentioned earlier, but it also has other key UI design features like layout constraints, typography controls, synchronized symbols, an asset library, and even a collection of ready-made drag-and-drop UI assets built right in.

V is for Vector Brushes

One of the unique aspects of Affinity Designer art is actually driven by Affinity Designer brushes. No, not the raster, Photoshop-compatible brushes we talked about earlier. Rather, Affinity’s own scalable, flexible, vector-based brushes.

Grab any vector-based brush and paint away as if you were working in raster, but then maintain the ability to scale without quality loss, and adjust the placement of your strokes at any time.

W is for Workspace Presets

As from Affinity Designer 1.9, you can create your own workspace presets, a.k.a. studio presets.

Set up your workspace with the studio panels you want to show, positioned where you like, and then go to View > Studio Presets > Add Presets and give your preset a name.

You can then load that preset any time you like to restore your saved workspace layout.

X is for X-Ray Vision

Go to View > View Mode > Split View, and then set one of the side's views to Outline mode.

This gives you X-ray vision of your document whenever you drag the separator back and forth.

Y is for Your Own Asset Libraries

We saw earlier how Affinity Designer ships with an asset library of UI elements. Well, you can also create your own asset libraries just like this, so you can make graphics once and then reuse them by dragging and dropping onto your canvas. You can share these libraries between documents and even with other people.

Open the Assets studio panel, create a new category, and then create a sub-category and start adding items to it. Do this by selecting a graphic you've made, clicking the top-right dropdown inside an asset sub-category, and choosing Add from Selection.

Z is for Zooming 1,000,000%

Affinity Designer has a capacity for zooming with speed and fidelity that at this point is first in class. Start zooming and effectively keep going as long as you like, because it's highly unlikely you're ever going to hit that one million percent zoom limit.

And no, that's not a dare.

Wrapping Up

So that’s the A to Z of Affinity Designer: 26 of the coolest features, tips, and tricks I know about the software.

Since its initial beta back in 2014, Designer has become my go-to graphics application. I’ve bought it for every platform on which it exists, and I’d happily do it all again. If you haven’t tried it yet, do yourself a favor and give the free trial a go.

And get yourself stocked up with a great big stack of graphics and brushes and other assets to use in it over at Envato Elements.


No comments:

Post a Comment