- Web Design In Affinity Designer Tutorial
- Web Design In Affinity Designer Software
- Web Design In Affinity Designers
- Affinity Publisher Web Design
- Web Design In Affinity Designer Program
- Web Design In Affinity Designer Project
Affinity Designer is a vector or raster app. It’s a competitor to Adobe’s Illustrator and allows you to design various elements for print or digital publication.
- Affinity Designer is a powerful program that allows you to create and combine both raster and vector graphics. This A to Z list breaks down all the tools.
- Affinity Publisher is professional-level design software from Serif, which includes a growing portfolio of creative tools. Affinity Publisher, which offers many of the same features as Adobe InDesign, is fast and light and works in Mac and Windows environments.
- Browse the latest Affinity Designer Web Design Tutorials by Envato Tuts+ - all online and free! What are you learning today? Unlimited Wordpress themes, plugins. Affinity Designer is a powerful program that allows you to create and combine both raster and vector graphics.
It’s part of the Affinity package of design tools made by Serif. Use it to do anything from making a business card to mock up an app. Affinity Designer is made for Mac iOS, Windows, and the iPad.
Affinity Designer for UI and Web Design. From Affinity Premium. Affinity Designer has quickly built a formidable reputation as the fastest, smoothest, most precise professional graphic design app available. A coveted Apple Design Award, and thousands of 5 star customer reviews on the Mac App Store are testament to that.
Here, we’ve collected some of the best for everyone from beginners to more seasoned pros, a mix of video and written tutorials. It’s a great place to start for upskilling with your first steps in Affinity Designer!
Affinity Designer UI Overview
If you are new to Affinity Designer or just want an overview of the tool and what it looks like before making a purchase, this UI overview is the place to start. The video lasts less than 5 minutes and walks through the user interface, highlighting a few key elements of the software.
Affinity Designer: The File Menu
Another beginner tutorial, this video takes you through the file menu and looks at each option and how to use it. Rory Townsend, who made the video, also has similar video tutorials with each of the other menu options to help you really get a good hold on all the things you can do with Affinity Designer and where each individual tool or option is located in the menu.
Affinity Designer: 10 Basics
This is the ultimate getting started video guide for Affinity Designer, with all the basics in one video. You’ll learn how to get started with a new document, use premade and custom shapes, work with colors, see how layers work, combine shapes, work with vectors and the vector brush and pen tools, add text to a file, and save and export. It’s all in an easy to follow video and you can get all this information in less than 20 minutes. Plus, the video host Jesse Showalter, has plenty of energy so this tutorial anything but boring.
Affinity Designer Basic Logo Design
Affinity Designer is a tool that allows you to work with vector or raster images. That means you can create logos that can be scaled for any use with the software. In this tutorial, you walk through all the steps to create a simple vector logo using tools in Affinity Designer.
How to Create a Flat Vector Illustration in Affinity Designer
Because of vector functionality, Affinity Designer can also be used to create illustrations. This tutorial takes you through the steps to create a flat illustration, such as the example above, that you can apply to full-scale illustrations, logo, or icon design. The tutorial includes step-by-step instructions and plenty of screenshots that you can use to follow along on your own.
Using the Layers Panel
Using layers and groups is a powerful function that can help keep files organized and a lot easier to manage. Using them in Affinity Designer is fairly easy. Learn everything you need to know about layers and groups in this short video from the makers of the software.
How to Create an Icon in Affinity Designer
Icon design is something almost everyone comes across at some point. Affinity Designer is the perfect tool for creating all manner of icons. This tutorial takes you through the process step-by-step, and even includes some bonus information such as how to choose the right size when designing an icon and how to use various tools. Every step includes screenshots to make understanding easy.
Symbols in Affinity Designer
Using symbols as linked objects allow you to edit one element and it impacts everything in the design. (This is an awesome feature.) This tutorial shows you how to use symbols as intelligent linked objects for great global editing capability. (Learn this pro trick in less than 5 minutes!)
Using Text Effects
Text manipulations can be somewhat controversial. Purists say you should never mess with a typeface, but sometimes you have to use certain effects to make it work for your project. This Affinity Design tutorial shows you how to do just that. You’ll get an introduction to text effect manipulations in this easy to follow video.
How to Create Patterns in Affinity Designer
Patterns have a lot of practical use from website backgrounds to the main artwork for a poster or brochure. From subtle repeating shapes to something a little bolder, there are a few different ways to create a pattern in Affinity Designer. This tutorial explores three options. Note there are a lot of steps here, but the instructions and screenshots are easy to follow. Don’t let the depth of the lesson intimidate you.
Affinity Designer for iPad
The recording of a live session provides an overview of everything you need to use Affinity Designer effectively on an iPad. You’ll get an overview of tools and the software as well as creating specific things (a playing card, book cover, and poster) using tablet-based tools. The tutorial lasts over an hour and is comprehensive.
Pen Tool Masking in Affinity Designer
Use the Pen tool in Affinity Designer to create a dynamic mask of a selection of an image and apply modifications. This is a cool feature that can take some time to learn and this tutorial gives you a jumpstart.
Shapes Around a Curved Line in Affinity Designer
In less than 5 minutes, you can apply shapes to a curved line. You’ll learn how to create a brush from a shape and use that to apply to any shape or size of curved line. The tutorial explains this function clearly and shows how to apply this highly functional feature.
Advanced Color Features in Affinity Designer
You can create, save, and store colors and fills in Affinity Designer. This is great for palettes that will be reused so you don’t have to manually renter color mixes every time. Using these advanced color features is easy to learn if you know the tricks offered in this video tutorial.
Everything You Need to Know About Affinity Designer Brushes
Brushes can help speed workflows and allow you to create custom stroke styles. This tutorial shows you how to use the tool including basics of the brushes panel, how to set up vector or raster brushes, how to create your own brushes, how to install brush packs, and how to use brushes from Photoshop or Illustrator.
Affinity Designer Point Transform Tool
Use the point transform tool to change the look of a geometric shape in Affinity Designer. Clang for mac os x. This tool lets you change shapes and alters the look of objects.
Advanced Axonometric Grid Setup
An axonometric grid shows a three-dimensional object at a skewed angle so you can see multiple sides in the illustration. Affinity Designer allows you to set up an axonometric grid for projects. This tutorial takes you through creating the custom setup.
Affinity Designer Templates
We're covering the basics of Affinity Designer, helpful tutorials, comparisons with other apps, and the best templates and assets to use.
Here’s how you can setup layout grids, 960 grids, 12-column grids, or any variation that you prefer for web design on Affinity Designer.
Affinity designer is one of my favourite and go-to tools for web design, especially for static web mockups. Once you get the hang of how to use all their available tools, you can go about with your mockups really efficiently.
Affinity has the ability to easily set up 12-column grids, or any other setups your prefer, with snapping capabilities. This helps you to intuitively keep your designs and layouts consistent throughout the page.
Which is the Best Way to Set Up a Grid?
There are 2 obvious ways to go about creating the layout grid.
The first way is using the Grids and Axis Manager, the other way is using the Guide Manager.
For the purpose of web design, I have chosen to use the Guide Manager over the Grid and Axis Manager for these 3 big reasons:
- It does not create subdivision lines like how the Grid and Axis Manager does.
- It does not snap on to any inner divisions (because there’s none) or horizontal rows, like how the Grid and Axis Manager does, it only snaps to the vertical columns.
- The grid setup is based on absolute positioning, making it really easy to work with any canvas size without doing any calculations, where as the Grid and Axis Manager works on relative positioning, which means you have to do some calculations to center-align your grids based on your canvas size.
The Grid and Axis Manager is definitely a handy tool when it come to many other workflows, but the Guide Manager is by far the better choice for designing web page layouts.
Web Design In Affinity Designer Tutorial
Here’s How to Set Up the Grid
What we are working with is specifically called column guides.
This can be accessed by going to your Affinity Designer toolbar on the top and clicking on view, followed by Guides Manager under the dropdown.
Your Guide Manager window will pop up, and you will see Column Guides on the right half. You will just have to fill in the settings according to your needs.
Web Design In Affinity Designer Software
For this example, I will be working a a 1280px wide canvas. I want to set up a 12-column grid, with 30px spacing between each grid, and 140px of margins on my left and right. A very typical setup I use. And here are the steps:
- Under column, I will fill that to 12.
- I will set the rows to 1, because I do not want to create rows.
- Gutter, which is the spacing between my columns will be set to 30px.
- Set the color of your choice.
- Under the margins section, input 140px to left and right.
Your column grid will then be created. It may not show yet because we have not toggle it on, but for now we can go ahead and close the Guide Manager. This is just a one-time setup for your project, meaning you can adjust the length of your artboard, and the grid will just go on continuously with your artboard.
For good measure, you could also create a vertical guide that will be placed in the center of your canvas. I do this because center-aligning is common in web design, so it’s faster to have a visual marker right there when I need it.
Web Design In Affinity Designers
How to Display and Hide the Grid
Affinity Publisher Web Design
Go to your toolbar and click on View.
Under the dropdown, click to enable/disable Show Column Guides. This will show or hide your main grid. Toggle it on whenever you are working on your layout, and off when you want to take a look at your design by itself.
How to Display and Hide the Center Vertical Guide
Under the dropdown, click to enable/disable Show Guides. This will toggle a blue vertical line that will run in the middle of your canvas.
How to Enable Snapping to Your Grid
While creating and arranging your layouts, snapping should be turned on and configured properly to make sure your work is aligned pixel-perfectly to your grid.
Toggling the snapping can be done by clicking on the magnet icon Unibeast for mac lion. somewhere at the top of your screen.
Web Design In Affinity Designer Program
But you should configure it first by clicking on the dropdown button on the right of the icon, then tick the checkbox that says “Only snap to visible objects” and “Snap to guides”. Alternatively, you could also use the “Page layouts” preset, which will work well for snapping onto the grids that we have created.
Interested in Affinity Designer?
Web Design In Affinity Designer Project
Get yourself a copy Affinity Designer, or their entire suite of professional and versatile designing tools, available for macOS, Windows and iPad (for certain programs only), here at : https://affinity.serif.com/en-gb/