Урок-практикум "Создание карточки товара с помощью figma.com"

Создание карточки товара с помощью figma.com
Урок-практикум
Автор: Бобылева Е.А., МБОУ «СОШ №146 г.Челябинска»

figma.com

New design file

Дизайн карточки товара

Создание фона из двух частей

Stroke – обводка (нажать на минус)

Нажать на + Fill (заливка) и выбрать нужный оттенок

Будем делать градиент

Вбиваем код первого цвета С7Е8С7

Вводим код второго цвета E7EBBA и поставить 100%

Выбрать инструмент прямоугольник и нарисовать

Выбрать Заливку (Fill), установить линейную заливку (Linear)

Установить первый цвет E9DED8

Второй цвет B0847B 100%

Сместить точку градиента вниз и Поместить фигуры внутрь фрейма

Добавим на фон рисунок листьев

Растягиваем рисунок и меняем режим наложения на Мultiply

Уменьшаем и ставим 10% в Fill

Дублируем и ставим в правый верхний угол (клавиша Alt)

Переворачиваем и уменьшаем

Рисуем прямоугольник 400х175, цвет A5837B

Делаем скругление углов 15

Добавляем логотип File-Place Image (щелкаем вне фрейма)

Уменьшаем и выставляем в прямоугольник

Продублировать логотип и сделать маску

У верхнего изменить цвет

С помощью инструмента Текст, размер 45

Передвинуть и изменить цвет

Добавляем текст (bold 90, medium 45)

Выделим с помощью окружности

Продублируем окружность

Выделим обе окружности и вырежем внутренность

Добавляем рисунок упаковки товара

И размещаем внутри

Дублируем нашу упаковки и щелкаем по ней правой кнопкой мыши

Рисуем сверху прямоугольник

Накладываем на прямоугольник заливку

Создаем эффект отражения

Добавляем второй объект

Подчеркнем капсулу с помощью тени

Те же действия делаем с упаковкой

Дублируем окружность и задаем 494х494

В верхнюю окружность добавляем рисунок

Переносим капсулу на передний план

Добавляем текст в окружность

Добавляем стакан с кофе

Аналогично коробки делаем тень

Добавляем и размещаем кофейные зёрна

Самостоятельно сделать карточку №2

Используемые ресурсы
https://www.youtube.com/watch?v=symeB2o8FzE