1
Урок 2
ЦВЕТ В FIGMA
Заливка, обводка, прозрачность и градиенты
Сегодня разберёмся, как работает цвет в Figma, и создадим собственную цветовую версию композиции.
FillHEXStrokeGradient
Вспоминаем прошлый урок
СНАЧАЛА ВСПОМНИМ
Проверим, что осталось в памяти после прошлого занятия.
Вопрос 1 из 4Верных ответов: 0
Тест завершён
Повторяем формы
СОБИРАЕМ ОСНОВУ
Повтори основные формы логотипа в Figma.
- геометрические фигуры;
- изменение размера;
- скругление углов;
- копирование объектов;
- расположение объектов относительно друг друга.
Цветную абстрактную часть оригинального логотипа сейчас не повторяем.
Fill
FILL - ЗАЛИВКА
Fill определяет, чем заполнена фигура. Это может быть один цвет или градиент. Цвет можно выбрать визуально или задать точно с помощью HEX-кода.
2
Градиент
Что такое HEX
У ЦВЕТА ЕСТЬ КОД
HEX-код - это точная запись цвета. Он начинается со знака #, после которого идут шесть символов.
#FFFFFF
Белый
#000000
Чёрный
HEX-коды не нужно запоминать. Они нужны для того, чтобы точно использовать один и тот же цвет.
Угадай цвет
Кто первым найдёт этот цвет в Figma?
Введите HEX-код и попробуйте описать получившийся цвет до того, как откроете ответ.
#FF5733#3366FF#00CC66Как можно описать цвет
ЦВЕТ БЫВАЕТ РАЗНЫМ
Оттенок
Какой это цвет: красный, синий, зелёный, фиолетовый…
Насыщенность
Насколько цвет насыщен пигментом: от приглушённого к чистому и интенсивному. Светлота при этом не меняется.
Яркость
Насколько цвет светлый или тёмный.
Тёплые и холодные цвета
ТЁПЛЫЕ ИЛИ ХОЛОДНЫЕ?
Цвет может менять настроение изображения. Тёплые оттенки напоминают солнце, огонь и тепло. Холодные - воду, лёд, небо и прохладу.
Тёплая
Холодная
Попробуй сделать тренировочный прямоугольник сначала в тёплой, а затем в холодной гамме.
Stroke
ОБВОДКА
Stroke добавляет линию по контуру фигуры. У обводки можно менять цвет и толщину.
Без Stroke
Со Stroke
Прозрачность
НАЛОЖЕНИЕ
Прозрачность позволяет видеть объекты, расположенные под фигурой. Попробуй наложить две фигуры друг на друга и изменить прозрачность верхней.
Градиенты
ПЛАВНЫЙ ПЕРЕХОД ЦВЕТОВ
Градиент - это плавный переход между цветами.
Solid
Один цвет.
Linear
Линейный градиент.
Radial
Радиальный градиент.
Возвращаемся к тренировочному прямоугольнику
Сделай обычную одноцветную заливку.
Замени её линейным градиентом.
Измени направление градиента.
Попробуй радиальный градиент.
Сделай тёплый вариант.
Сделай холодный вариант.
Самостоятельная работа
ТЕПЕРЬ ТВОЯ ВЕРСИЯ
Тренировочный прямоугольник больше не нужен. Создай вместо него собственную абстрактную композицию из геометрических фигур.
Можно использовать круги, прямоугольники, квадраты, треугольники, линии и другие уже знакомые фигуры. Расположи сверху треугольник Play. Получится твоя собственная версия цветной композиции.
Требования к работе
Отмечено: 0 из 4