Учебники 📚 » Презентации » Другие презентации » Урок-практикум "Создание карточки товара с помощью figma.com"

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

Урок-практикум "Создание карточки товара с помощью figma.com" - Класс учебник | Академический школьный учебник скачать | Сайт школьных книг учебников uchebniki.org.ua
Смотреть онлайн
Поделиться с друзьями:
Урок-практикум "Создание карточки товара с помощью figma.com":
Cкачать презентацию: Урок-практикум "Создание карточки товара с помощью figma.com"

Презентация для классов "Урок-практикум "Создание карточки товара с помощью figma.com"" онлайн бесплатно на сайте электронных школьных презентаций uchebniki.org.ua

Создание карточки товара с помощью figma.com<br>Урок-практикум<br>Автор: Бобылева Е.А., МБОУ «СОШ №1
1 слайд

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

figma.com<br>
2 слайд

figma.com

New design file<br>
3 слайд

New design file

Дизайн карточки товара <br>
4 слайд

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

Создание фона из двух частей<br>
5 слайд

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

Stroke – обводка (нажать на минус)<br>
6 слайд

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

Нажать на + Fill (заливка) и выбрать нужный оттенок<br>
7 слайд

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

Будем делать градиент<br>
8 слайд

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

Вбиваем код первого цвета С7Е8С7<br>
9 слайд

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

Вводим код второго цвета E7EBBA и поставить 100%<br>
10 слайд

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

Выбрать инструмент прямоугольник и нарисовать <br>
11 слайд

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

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

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

Установить первый цвет E9DED8<br>
13 слайд

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

Второй цвет B0847B 100%<br>
14 слайд

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

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

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

Добавим на фон рисунок листьев<br>
16 слайд

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

Растягиваем рисунок и меняем режим наложения на Мultiply<br>
17 слайд

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

Уменьшаем и ставим 10% в Fill<br>
18 слайд

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

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

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

Переворачиваем и уменьшаем<br>
20 слайд

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

Рисуем прямоугольник 400х175, цвет A5837B<br>
21 слайд

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

Делаем скругление углов 15<br>
22 слайд

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

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

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

Уменьшаем и выставляем в прямоугольник<br>
24 слайд

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

Продублировать логотип и сделать маску<br>
25 слайд

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

У верхнего изменить цвет<br>
26 слайд

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

С помощью инструмента Текст, размер 45<br>
27 слайд

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

Передвинуть и изменить цвет <br>
28 слайд

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

Добавляем текст (bold 90, medium 45)<br>
29 слайд

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

Выделим с помощью окружности<br>
30 слайд

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

Продублируем окружность<br>
31 слайд

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

Выделим обе окружности и вырежем внутренность<br>
32 слайд

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

Добавляем рисунок упаковки товара<br>
33 слайд

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

И размещаем внутри<br>
34 слайд

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

Дублируем нашу упаковки и щелкаем по ней правой кнопкой мыши<br>
35 слайд

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

36 слайд

Рисуем сверху прямоугольник<br>
37 слайд

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

Накладываем на прямоугольник заливку<br>
38 слайд

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

Создаем эффект отражения<br>
39 слайд

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

40 слайд

Добавляем второй объект<br>
41 слайд

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

42 слайд

Подчеркнем капсулу с помощью тени<br>
43 слайд

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

44 слайд

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

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

46 слайд

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

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

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

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

49 слайд

50 слайд

51 слайд

Переносим капсулу на передний план<br>
52 слайд

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

53 слайд

54 слайд

Добавляем текст в окружность<br>
55 слайд

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

Добавляем стакан с кофе<br>
56 слайд

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

Аналогично коробки делаем тень<br>
57 слайд

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

Добавляем и размещаем кофейные зёрна<br>
58 слайд

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

Самостоятельно сделать карточку №2<br>
59 слайд

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

Используемые ресурсы<br>https://www.youtube.com/watch?v=symeB2o8FzE <br>
60 слайд

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

Отзывы на uchebniki.org.ua "Урок-практикум "Создание карточки товара с помощью figma.com"" (0)
Оставить отзыв
Прокомментировать
Регистрация
Вход
Авторизация