Навыки дизайна в Фигме, в том числе по работе с векторными изображениями, я получала на курсе от Бек Five по созданию карточек для маркетплейсов. Это были практические уроки по созданию инфографики, о чем я вкратце рассказывала в одной из прошлых статей.
Именно под руководством наставника получилось научиться всем основным особенностям работы в Фигме. На курсе Бека я получила действительно много, и поэтому сейчас есть возможность понимать и на повторять на практике и другие уроки по Figma, разного уровня сложности.
Сложилось уверенное понимание, что чем больше практики в этой программе, тем проще и интереснее в ней становится работать. Первые недели долго привыкала ко всем инструментам Figma. А теперь хочется узнавать всё больше и наращивать профессиональные навыки работы в этой программе.
Поэтому я беру некоторые дополнительные уроки по Фигме и повторяю их по шагам. Это практичный и доступный каждому путь научиться сначала создавать по примеру, а потом, накопив опыт и знания, прийти к созданию собственного дизайна.
Пошаговый урок по созданию векторной картинки в Figma
Данная статья поможет сложить общее представление об уроке (что внутри и что надо делать), а также разложить для себя всё по полочкам и лучше его усвоить. Что особенно важно тем, кто только начинает осваивать редактор Figma и из-за этого каждый шаг дается с трудом.
Сегодня я взяла для примера урок Нины (ютуб-канал “Полутораметровый дизайнер”). Она подробно объясняет каждый шаг, что облегчает работу по созданию векторной картинки.
Изначально рисунок кажется довольно сложным для исполнения. Он с различными повторяющимися узорами, многоцветный и с первого взгляда невозможно понять как его сделать.
Но благодаря подсказкам не только автора видео, но и самой Фигмы (направляющим, точным числам размеров и градусов углов) создается впечатление, что по инструкции собираешь конструктор. Только в данном случае получаешь дополнительные навыки дизайна в мощном по своим возможностям онлайн-редакторе.
Основные этапы создания векторной картинки в Фигме
- Создание из кругов основного элемента картинки.
- Дублирование элемента и объединение дубликатов в одно векторное изображение.
- Работа с группами.
- Работа с наложениями.
- Создание подложки под картинку для сохранения цвета всех слоев при изменении фона..
- Создание фона для фрейма.
Скриншоты урока, по которым можно примерно понять последовательность действий в уроке.
Рекомендации перед просмотром урока
При повторении урока на практике надо быть очень внимательным, потому что каждое слово имеет важное значение. Ведь если ошибешься на каком-то этапе, конечная картинка не будет такой красивой как хотелось бы и понадобится начать заново, чтобы получить желаемый результат.
У меня так и получилось. Примерно на середине видео, я сбилась и перестала понимать последовательность работы и пришлось начать всё заново. Десятки нюансов, которые важно делать в определенной последовательности вынуждают работать максимально сконцентрировано.
- Сначала просто посмотрите урок без повторения, чтобы получить общее представление о ходе работы.
- Внимательно повторяйте каждый шаг. В уроке много тонкостей и пропустив даже небольшой шаг дальше идти не будет иметь смысла, т.к. “свернете не туда”.
- Выделите на урок достаточно времени. В зависимости от вашего опыта работы в Фигме на повторение "от и до" понадобится примерно 1-2 часа.
- Повторите или хотя бы пересмотрите урок через какое-то время, чтобы освежить в памяти и закрепить полученные навыки.
Что применяется в уроке
Горячие клавиши
| Названия горячих клавиш | Действие горячих клавиш |
|---|---|
| F | Создать фрейм |
| O | Создать эллипс (круг) |
| Alt + H | Выровнять элемент по горизонтальной линии |
| Alt + V | Выровнять элемент по вертикальной линии |
| Alt | Продублировать объект |
| Shift (при изменении размера элемента) | Пропорциональное увеличение/уменьшение |
| Alt + Shift | Продублировать объект и перетащить его в одной плоскости с оригиналом |
| Ctrl + E | Объединить несколько векторных элементов в один |
| B | Выбрать инструмент “Заливка” |
| Ctrl + X | Вырезать объект |
| Ctrl + V | Вставить объект |
| Enter | Включить/выключить режим редактирования векторных объектов |
| Shift (при повороте элемента) | Повернуть объект на 15 градусов |
| Shift + H | Отразить объект по горизонтали |
| Shift + V | Отразить объект по вертикали |
| Ctrl + G | Создать одну группу из нескольких объектов/групп |
| Ctrl + Alt + M | Создать маску |
Инструменты Фигмы
Урок насыщен применением разных инструментов редактора Figma:
- режимы наложения,
- направляющие,
- градиенты,
- заливка,
- обводка,
- векторное редактирование,
- заливка векторного объекта,
- эффект тени,
- маска.
Плагин Noise
Noise - плагин для создания эффекта шума на картинке. Страница плагина в сообществе Фигмы: ссылка. Как его установить рассказывается в самом начале урока.
Что получилось сделать по уроку
Эта картинка интересна тем, что она может иметь много вариантов как по цветовым решениям, так и по узору, в зависимости от стадии готовности, на которой вы её сохраните.
Т.е. её можно сохранять много раз ещё до её окончательной готовности по уроку и она будет смотреться по-разному, но при этом гармонично. Вот, например, такие варианты получились до полного завершения всех шагов урока:
Как в Фигме сохранять промежуточные этапы работы
Одна из особенностей Фигмы в том, что в ней удобно делать дубликаты фрейма с проделанной работой, т.е фиксировать для себя разные варианты дизайна.
Таким образом можно спокойно делать любые изменения в дубликате и при этом иметь возможность в любой момент вернуться на несколько шагов назад и продолжить работу.
Чтобы создать такой дубликат, надо выделить фрейм и нажать CTRL+ D. В этом случае вы сможете сделать разные варианты этой картинки на разных этапах проекта, сохранять их и продолжать работу дальше.
Основные выводы
Создать векторное изображение в Фигме по данном в уроке инструкции возможно, но в видео много тонкостей на каждом этапе, поэтому как минимум один раз стоит повторить всё точно по шагам урока. А уже потом можно будет проявить креативность, создав что-то новое на основе полученных знаний.
Не знаю возможно ли с этим уроком справиться тому, кто совсем не знаком с Фигмой, но автор сделала урок достаточно понятным. На мой взгляд он получился удачным: выстроен логично, подан в размеренном темпе и его интересно повторять. Не говоря уже о самой итоговой картинке, которая выглядит очень даже эффектно.
Также важно отметить то, что если однажды в Фигме вами что-то было сделано, то последовательность шагов и общее понимание того как создается тот или иной элемент дизайна останется с вами и почти гарантированно пригодится и в будущем.
Поэтому каждый такой повторенный в Фигме урок позволит накапливать разные дизайнерские решения, что повлияет не только на качество, но и на скорость вашей работы.
А главное, навыки создания векторных изображений пригодятся для разных работ: дизайн сайтов и мобильных приложений, инфографика карточек товара, рисование логотипов и др.
На этом пока всё. Надеюсь вам было интересно и полезно. Желаю вам удачи и успехов!
Оставить комментарий