We will get our hands dirty and explore all the tools and techniques professional web designers use to design a website inside Affinity Designer. That includes: Building wireframes and grids – the building blocks of every website. Using assets to make the design process ultra-fast. Davies Media Design is a top GIMP resource, Darktable resource, and Inkscape resource creating educational content for photographers and graphic designers around the world. We offer free tutorials on YouTube and affordable courses on a variety of platforms. How to design modern websites in Affinity Designer - A web design and Affinity Designer feast. We are a culture of creatives from all walks of life united by our commitment to the meaningfully aesthetic. Because this belief permeates our lives, it also defines our work.
[Udemy] Fundamentals of Affinity DesignerГод выпуска: 2018
Производитель: Udemy
Автор: Gregory W.
Сайт производителя
: https://www.udemy.com/basics-of-affinity-designer/Продолжительность: 02:39
Тип раздаваемого материала: Видеоурок
Язык: Английский
Уровень
: BeginnerОписание: Description
Affinity Designer is the new, affordable design software that can replace other overpriced Adobe design software.
In this course you will learn how the Affinity Designer user interface works, where all its features are, and learn about the dramatic improvements you'll get versus Adobe software.
Affinity Assets Collection
Ideal for graphic designers, web designers, and artists on a budget, Affinity Designer is an incredible useful tool and a great alternative to Adobe.This course will teach you the various tools of this software through hands-on examples, as you learn to manipulate images, design logos and icons, create graphic illustrations, and much more.
By course's end, you'll have a good understand of using Affinity Designer where you'll be ready to use it for your next project.
Who is the target audience?
Designers
Anyone interested in learning Affinity Designer
Содержание
Introduction 03:51Introduction 03:51
Basics 01:36:57
Getting started 07:59
Personas 08:37
Customization, order and arrange 03:56
Transforms 04:22
Align 05:30
Snapping 09:10
Operations 06:45
Draw persona 13:53
Pixel persona 10:03
Brushes and editing 10:28
Viewing and customizing guides and grids 07:03
Preferences 09:11
Studio Panel Basics 58:28
Studio panel 05:24
Layer types 06:37
Layer masking and ordering 08:41
Layer adjustments 13:13
Effects and styles 09:38
Color panel and swatches 08:56
Global colors and pantone 05:59
Формат видео: MP4
Видео: AVC, 1280x720, 16:9, 30.000 fps, 48.1 kb/s ~ 80.7 kb/s
Аудио: AAC, 48.0 KHz, 64.0 Kbps, 2 channels
| t_5595998.torrent | ||
|---|---|---|
| Torrent: | Registered · [ 2018-08-04 23:06 ] · 5b138403d7a737d19d2e1dbbb0ed2c2aa0839146 | 29 KB |
| Status: | √checked | |
| Completed: | 1 times | |
| Size: | 168 MB | |
| Rating: | (Votes: 0) | |
| Say thanks: | 0 | |
| Похожие темы | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
|
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.
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.
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.
How to Display and Hide the Grid
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
Affinity Web Design Company
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 somewhere at the top of your screen.
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?
Affinity Web Design Solutions
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/