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

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

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