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

1.

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

2.

figma.com

3.

New design file

4.

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

5.

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

6.

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

7.

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

8.

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

9.

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

10.

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

11.

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

12.

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

13.

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

14.

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

15.

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

16.

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

17.

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

18.

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

19.

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

20.

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

21.

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

22.

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

23.

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

24.

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

25.

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

26.

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

27.

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

28.

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

29.

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

30.

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

31.

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

32.

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

33.

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

34.

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

35.

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

36.

37.

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

38.

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

39.

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

40.

41.

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

42.

43.

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

44.

45.

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

46.

47.

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

48.

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

49.

50.

51.

52.

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

53.

54.

55.

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

56.

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

57.

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

58.

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

59.

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