Фигма с нуля. От основ к первым макетам
Словом — курс для всех не_дизайнеров, которым нужно делать баннеры, обложки, аватарки. Все, что вы изучите, вы сможете использовать сразу же в своей работе.
Почему Фигма? Это современный графический редактор с широкими возможностями. Весь функционал бесплатно доступен онлайн. Это значит: не нужно покупать подписку, не нужно пиратить, не нужно мощной техники, не нужно скачивать изображения — чтобы показать коллегам, или заказчику, можно отправить ссылку.
Что можно делать в Фигме: работать с векторными объектами – сделать логотип, или красивые модные элементы, работать одновременно с несколькими фреймами – можно сделать макеты сразу в нескольких размерах.
Вы освоите инструменты и возможности Фигмы и научитесь интересным дизайнерским приемам, которые сможете применить в макетах для своих проектов.
На курсе вы научитесь:
работать со слоями
настраивать шаблоны
применять автоматизацию для создания дизайна в Фигме
создавать объекты
делать сложные градиенты
делать файлы PNG с прозрачным фоном
делать интересные трехмерные эффекты
вставлять внутрь объектов и надписей фотографии
делать тени для надписей и объектов
нарезать изображения для карусели и бесконечной ленты Инстаграм
После курса:
✔Запишете в резюме знание графического редактора Фигма.
✔В портфолио положите макеты, сделанные во время курса.
✔Сделаете посты для социальных сетей.
Вопросы:
Я новичок, у меня получится? Этот курс рассчитан на новичков. Во время урока делаю медленно, комментирую все действия, называю инструменты и горячие клавиши. В первом модуле разбираю все инструменты по отдельности, чтобы во втором модуле получилось делать сложные штуки.
Почему Фигма? Это новый бесплатный графический редактор. Быстро набирает популярность у дизайнеров и веб-дизайнеров. Можно установить приложение на компьютер, а можно работать онлайн. В Фигме можно делать любые макеты — от баннеров, до дизайна сайта и приложений. Чтобы работать в Фигме, не нужен мощный комп, достаточно интернета!
Я не_дизайнер, этот курс мне будет полезен? Этот курс был специально придуман для смм-щиков, таргетологов, маркетологов. В курсе рассказываю, как быстро, а лучше одновременно, делать дизайн для соцсетей – баннеры, обложки, аватарки, инста-пазл, карусель, карточки для ВК.
Сколько времени понадобится на прохождение курса? Уроки короткие — длятся от 5 до 15 минут. Выполнение задания урока занимает от 15 до 30 мин.
Я еще ни разу не делал дизайна, я справлюсь? Начать делать дизайн с Фигмы — хороший старт. Это профессиональный редактор, в котором можно быстро сделать элементарный макет, например, фото с надписью, и есть возможности для сложного, навороченного дизайна. Осваивать Фигму — значит работать на перспективу.
Начало работы и основные инструменты
Адрес сервиса Фигма: https://www.figma.com/
Страница скачивания: https://www.figma.com/downloads/
Практика и дизайнерские приёмы
Что делать, если скачали пиктограмму, но ее цвет вам не подходит? Или нужно изменить цвета в другом векторном объекте, например в логотипе? Перекрашивайте в Фигме.
www.flaticon.com - сервис с бесплатными иконками в формате png, svg, psd, eps
cloudconvert.com - сервис, в котором можно конвертировать файл из одного формата в другой
Как из квадратного баннера сделать обложку для ВК? За несколько минут можно сделать это в Фигме. А если нужно каждый день делать один креатив в нескольких форматах? Тогда мы настроим автоматизированный шаблон для разных размеров. Достаточно будет в одном фрейме поменять элемент В уроке учимся менять формат и настраиваем автоматизированный шаблон. Как это работает? - Когда изменяем элемент в одном макете, он тут же меняется во всем шаблоне.
Инструменты:
Компоненты - Components
Ограничения - Constraints
Горячие клавиши:
чтобы выделить фрейм, а не элемент, нажмите курсором на имя фрейма
скопировать фрейм - выделить фрейм, потянуть, удерживая ALT.
скопировать фрейм - shift alt
Совет для новичков: если не получается, пересмотрите еще раз видео, выслушайте объяснение. Скорее всего, при повторении упустили важную деталь.
https://unsplash.com/ - фотосток
Интересный модный способ привлечь внимание к макету. Выглядит очень по-дизайнерски, а сделать его в Фигме очень просто! Этим способом можно пользоваться, если нужно вырезать человека, спикера. На уроке также сделаем наклейку — объект с тенью под ней. И посмотрим, как можно обработать фото в Фигме.
Инструменты:
Перо — Pen
Маска — Use ask mask
Эффекты — Effects
Горячие клавиши:
объеденить в группу ctrl G
копировать shift alt
Совет новичку: главное — не тянуть, а нажимать. Пробуйте так и этак, понаблюдайте за тем, как ведет себя инструмент. Если не справляетесь с инструментом — пересмотрите урок 1 модуля «Кривые и смешивание».
Сделаем привлекающую внимание аватарку - будто голова вылезает из интерфейса. Тренируемся делать маски. Где еще можно использовать этот прием? Везде, где нужно что-то разместить внутри чего-то.
Инструменты:
Маска - Use ask mask
Обрезать изображение - Crop Image
Круг - Ellips
Cсылки:
https://unsplash.com/ - фотосток
https://remove.bg/ru - сервис, который удаляет фон с фотографии
Разместить надпись в глубине фотографии. Наложить тени.
Инстументы:
Масшабирование — Scale
Перо — Pen
Эффекты — Effects Layer Blur
Маска — Use ask mask
Убавить яркость фотографии — Exposure
Горячие клавиши:
Scale — K
Прозрачность 50% — 5
Непрозрачность 100% — 0
Уменьшить или увеличить масштаб — удерживая сtrl, крутить колесико мышки
Объеденить в группу — сtrl+G
Скопировать — удерживая alt, тащить элемент
Дублировать сtrl+D
Совет для новичка: чтобы все получилось, пером нужно обязательно замкнуть линию. Встаньте на последнюю точку и протяните линию до первой точки.
