Make a Dollar Sign in Affinity Designer

Vandelay Design may receive compensation from companies, products, and services covered on our site. For more details, please refer to our Disclosure page.

With Photoshop being the de-facto design software it can be tough knowing if any of the Photoshop alternatives are worthy of your time and attention. Affinity Designer is a great alternative and it's specifically made for UI/UX design and graphic design work. Affinity designer is a non-Adobe graphic design software designed for professionals to craft their creative works.

But most of your existing knowledge (based on Adobe software) will not carry over to Affinity. How do you get started using this program with no prior experience?

This beginner's tutorial will help you to learn Affinity Designer from scratch. If you stick with it and practice on your own you can quickly replace Photoshop or Sketch with Affinity Designer in your digital design workflow. There are tons of creative features included in this software that gives you a real hands-on impression and turn your imaginations into reality without any hurdle.

Affinity Designer: The Basics

Affinity Designer offers a full-featured vector and raster workspace. While Photoshop allows you to open vector files created in Adobe Illustrator or other vector design apps, Photoshop does not allow you the capabilities to design or edit vectors. In this sense, Affinity Designer is essentially a combination of Photoshop and Illustrator.

One of the reasons we think you'll love Affinity Designer is the price. A free trial is available, but the full software costs only $49.99 for Mac or Windows, or just $19.99 for the iPad. It's important to note that this is a one-time payment, not a subscription. You'll purchase and own the software with no need to pay again in the future unless you choose to upgrade.

Many Adobe users dislike the Creative Cloud subscription model, so the pricing alone may convince you to give Affinity Designer a shot.

Getting Started with Affinity Designer

Many ex-Adobe users switched over the Sketch as it gained popularity in recent years. However, this is a Mac-only program that is not available for Windows.

Affinity Designer was originally only available for Mac, however, the Windows version has now been available for a few years. As a result, Affinity quickly became a recognized competitor for Photoshop users.

Affinity also has some other programs available, like Photo and Publisher. For the purposes of this article, we'll be focusing specifically on Designer.

When you first open Affinity Designer you get a GUI much like Photoshop. At the top, you have the main toolbar and along the left-hand side, you have the toolbox.

In the very top-left corner, you'll find three icons called personas. These let you switch between vector design and pixel design within the same interface. You can build projects that support both vector and pixel graphics in the same file.

Along the right-hand side, you'll find many familiar panels for layers, swatches, brushes, and history.

Most of this interface should be fairly intuitive. You can mess around and even check the Affinity help menu to get a brief overview of each tool & panel window.

The Affinity team also has a collection of free tutorials recorded and posted to Vimeo. I would highly recommend studying this entire series to learn the basics from scratch. Their video tutorials are crystal clear and they're all taught by Affinity experts.

If you're really serious about learning Affinity Designer then you should also check out the Affinity Designer Workbook. This hardcover 450-page book of Affinity tips comes straight from the team at Serif with step-by-step guides for every feature.

This book truly is the complete guide to Affinity Designer for beginners. It will answer all your questions and set you on the path to go about creating your own work from scratch. You'll learn all the core skills & tools within Affinity, plus you'll move onto more advanced topics and tutorials as you get further in the book.

And since it's published by the creators of Affinity, you know the material is accurate and the best quality available.

To learn more check out the book page. If you have any questions about it you can reach out to the Affinity staff directly.

Web & Mobile Mockups

Affinity Designer was not always meant for UI/UX work. It was mostly a digital painting & graphic design suite. But version 1.5 came with brand new features that easily compete with Sketch and Photoshop.

Yet, just because you have the tools at your disposal doesn't mean you'll know how to use them. Granted, if you've ever designed a UI mockup then you should know the fundamental process.

There's an entire page on this topic on the Affinity website talking about new features like symbols. These symbols are like repeat objects that can be duplicated across the page, but updated in one location to change every element.

This means if you create buttons or headers in the mockup you can change colors or font styles once to update everything. Other features include custom grids and even resizable features to design mockups for responsive layouts.

There are also some alternative features available that can be used for simple and complex projects to do all the things simply and efficiently.

Here are some great UI-oriented tutorials to get you started:

• Create a Fitness App Design in Affinity Designer
• Affinity Designer & Marvel App – Web Design & Prototype

Vectors & Icon Design

Affinity relies on the same tools for vector design as every other major program, including Adobe Illustrator. You'll find plenty of shape tools that come with properties for the drop shadow, background gradients, and other predefined styles.

But you also have the pen tool which carries over from Adobe programs like Photoshop and Illustrator. Here's a brief intro if you're brand new and I also like this clip if you can tolerate the odd jazz/fusion background music (or just put it on mute).

If you're new to Affinity for graphic design, then the best way to learn is to practice. But there's so much to learn, so it's really best to focus on one particular subject.

For example, icon design is useful for everything from graphic design to web design and motion graphics. Great intro tuts can teach you how to make a flat castle icon and how to create neat retro icons.

But you can go so much further with vector work. Consider this tutorial for a scrolling vector background design. And there's something else for repeating pattern icons which both teach you how to design from scratch.

First, I recommend figuring out exactly what you want to do. Are you more of a print designer? Logo designer? Web/icon designer?

Pick one area and then follow a couple of tutorials on that subject. You'll learn Affinity's interface along the way and by the end, you'll have a real sense of accomplishment having completed a project with Affinity.

Here are some of the best tutorials for icon design and vector graphics with Affinity Designer:

• How to Create a Detailed Katana in Affinity Designer
• How to Create Cinderella's Pumpkin Carriage in Affinity Designer
• Create a Friendly, Futuristic Robot in Affinity Designer
• Design a "Match Three" Game Screen in Affinity Designer
• How to Create a Set of Flat Hiking Icons in Affinity Designer

Each tutorial is completely free and easy to follow. These are very long tutorials so you'll be guided every step of the way. A complete beginner could pick up any of these tutorials and learn a lot about Affinity's workflow.

But if you're more of a visual learner then you'll prefer video tutorials. Here's a small list to get you going:

• Create a Cartoon Character in Affinity Designer
• Create Complex Shapes with the Corner and Pen Tool
• How to Create an App Icon Template

Affinity Resources

Where should you go for support? Where can to find answers to your questions and help you solve problems along the way?

My first and biggest recommendation is the Affinity support forum. There are already thousands of threads solving many common problems with new questions posted every day. You may consider collaborating with other graphic designers who are using this software as well.

But if you hit a wall and just don't know how to move forward then sign up for a free account and feel free to ask. The community is super helpful and there's even a tutorials section if you want more learning resources.

But there are two other communities you can try for Affinity help. The first is Graphic Design Exchange powered by the Stack Exchange network.

GD Exchange isn't as popular as other sites like Stack Overflow. But the GD Exchange community is large enough to help if you post very specific questions. You should take as many screenshots as possible and provide lots of detail to make your questions easy to answer. Help others help you!

Secondly, you might also like the /r/Affinity subreddit, which has grown a lot in the past few years.

As the popularity of the software grows, I have a feeling it'll garner mainstream adoption and a much wider user base. But for now, your best support resource is the Affinity Forum since it's active and full of knowledgeable users.

Moving Forward

If you need a cheaper and simpler Photoshop replacement, Affinity Designer might be the perfect solution. It's surpassing Sketch with better UI design features Windows compatibility. It is a light-weight and inexpensive software that can be used to gain experience before using the more expensive Adobe software packages. This software has been designed as a better alternative for the Adobe software packages and you will be comfortable with all of its basic and essential features.

Use these free tutorials and resources to help you get started with Affinity for digital design. It's one of the best unsung design programs and it's only gaining more momentum.

Jake is a writer and user experience designer on the web. He currently publishes articles related to user experience and user interface design. Find out more on his website or you can follow his updates on Twitter @jakerocheleau

Make a Dollar Sign in Affinity Designer

Source: https://www.vandelaydesign.com/affinity-designer-for-beginners/

Share this post