Урок 4

1.

Урок 4. FIGMA. РАБОТА С
ИЗОБРАЖЕНИЕМ. СОЗДАНИЕ
ПАТТЕРНА

2.

ПОВТОРЕНИЕ
2

3.

Повторение
Сегодня материал темы «Figma.
Интерфейс. Работа с текстом» мы
повторим с помощью игры! Для
этого вам понадобиться только
ваш смартфон. Готовы? Поехали!
3

4.

Как пройдет
наше занятие
1 Узнаем, как работать с изображениями
2 Разберем, что такое Коллаж
3 Попробуем создать коллаж в Figma
4 Узнаем, что такое Паттерн
Выполним практические работы по
5 созданию коллажа и паттерна
4

5.

РАБОТА С
ИЗОБРАЖЕНИЕМ.
ЧТО ТАКОЕ КОЛЛАЖ
5

6.

РАБОТА С
ИЗОБРАЖЕНИЯМИ
Как вы думаете, что делает
сайт ярким и
запоминающимся?
Если на сайте будет один
текст, как вы его будете
воспринимать?
6

7.

РАБОТА С
ИЗОБРАЖЕНИЯМИ
Для чего необходимы
изображения на сайте?
Они играют ключевую роль в
представлении интерфейса и
макета. Улучшают дизайн и
помогают захватить внимание
пользователей. Помогают
сложные идеи объяснить легким
путем. Ну и очень важны для
бренда. Вовлекают
пользователей.
7

8.

КАК РАБОТАТЬ С
ИЗОБРАЖЕНИЯМИ?
1. Импорт изображений. Перетаскивание файлов прямо на холст
или использование команды File > Place image.
2. Редактирование изображений. Обрезка, маскирование,
настройка прозрачности, наложение эффектов, тени, размытие.
3. Замена изображений. Быстрая замена изображений через
правую панель параметров.
4. Управление ресурсами. Изображения автоматически
сохраняются в проекте и доступны другим участникам команды
8

9.

ИМПОРТ
ИЗОБРАЖЕНИЙ
Давайте разберем подробнее
работу с основными функциями.
Как вставить и сохранить
изображение?
1. Перетаскивание
2. Через меню
3. Копирование вставка
9

10.

ИМПОРТ
ИЗОБРАЖЕНИЙ
1. Перетаскивание
Перетащите
изображение с
вашего компьютера
прямо на холст
Figma.
10

11.

ИМПОРТ
ИЗОБРАЖЕНИЙ
2.
Через меню
Выберите File > Place
image и выберите
файл изображения в
проводнике.
11

12.

ИМПОРТ
ИЗОБРАЖЕНИЙ
3. Копирование и
вставка
Скопируйте
изображение из
другого приложения и
вставьте его в Figma с
помощью Ctrl + V или
Cmd + V на Mac.
7

13.

ИМПОРТ
ИЗОБРАЖЕНИЙ
В Фигме фото
вставляется как shape, а
не как отдельный объект.
По сути мы заливаем
изображением фрейм —
прямоугольник. Поэтому,
мы можем изменить
заполнение фрейма
параметрами Fill, Fit,
Crop, Tile
13

14.

Сохранение
изображений
Экспорт конкретного элемента:
1. Выберите изображение или фрейм.
2. Нажмите Export в правой панели.
3. Выберите формат (PNG, JPEG, SVG и
т.д.) и нажмите Export.
Экспорт всей страницы:
1. Выделите весь фрейм или область.
2. Используйте аналогичную функцию
Export.
3. Это позволит сохранять изображения
для дальнейшего использования.
14

15.

ОСНОВНЫЕ ИНСТРУМЕНТЫ
Параметры фрейма. С включенным параметром Fill,
изображение заполняет весь фрейм. При этом сложно
соблюсти его пропорции и картинка может обрезаться.
15

16.

ОСНОВНЫЕ
ИНСТРУМЕНТЫ
С включенным
параметром Fit,
изображение
отображается во
фрейме полностью.
Если пропорции
фрейма не совпадают с
пропорциями
картинки, в нём
появится пустое
пространство.
16

17.

ОСНОВНЫЕ
ИНСТРУМЕНТЫ
С включенным
параметром
Crop, можно
приблизить
нужный
ракурс
изображения,
обрезав
«лишние»
части.
17

18.

ОСНОВНЫЕ
ИНСТРУМЕНТЫ
С включенным
параметром Tile,
вы сможете
создать паттерн
или узор.
18

19.

ОСНОВНЫЕ
ИНСТРУМЕНТЫ
Регулируйте в Фигме
цвета, яркость
изображения,
контраст,
насыщенность,
яркость отдельных
участков фото.
7

20.

ОСНОВНЫЕ
ИНСТРУМЕНТЫ
Чтобы добавить
изображению градиент,
используйте знак «+» в
панели свойств.
Выберите стиль
градиента: Linear
(Линейный), Radial
(Радиальный), Angular
(Угловой) или Diamond
(Ромбовидный).
20

21.

Сохранение
изображений
Используйте дополнительные
настройки цвета и изменяйте
положение градиента, чтобы
добиться нужного эффекта
изображения.
Вы можете добавлять цвета или
другие фотографии к изображению
с инструментом «смешивание
слоёв». Например, чтобы попасть в
фирменный стиль сайта или
добавить фотографии
индивидуальности.
21

22.

ОСНОВНЫЕ
ИНСТРУМЕНТЫ
Вы можете применять векторные
объекты к фотографиям и
использовать их как маски.
Чтобы сделать маску в Фигме,
создайте объект, перенесите
слой ниже фотографии.
Выделите оба слоя и выберите
панель Object → Use as mask
(горячие клавиши для Windows:
Ctrl + Alt + M, для Mac OS: Cmd +
Opt + M).
Шаг 1.
22

23.

ОСНОВНЫЕ
ИНСТРУМЕНТЫ
Шаг 2.
23

24.

ОСНОВНЫЕ
ИНСТРУМЕНТЫ
Шаг 3.
24

25.

ОСНОВНЫЕ
ИНСТРУМЕНТЫ
Фигма позволяет
работать с заливкой
фреймов и текстовых
слоёв. Инструменты
заливки находятся в
левой панели
свойств. Вы можете
выбрать цвет,
прозрачность,
указать конкретные
значения цвета.
25

26.

ОСНОВНЫЕ
ИНСТРУМЕНТЫ
В Фигме шесть типов заливки: сплошной цвет
(Solid), линейный градиент (Linear),
радиальный градиент (Radial), угловой
градиент (Angular), радиальный с четырьмя
лучами (Diamond), изображение (Image). По
умолчанию для объекта выбран режим
ровной заливки Solid.
Переключитесь на Linear — градиент с осью,
вдоль которой изменяется цвет. По
умолчанию он с двумя точками, одна из
которых прозрачная. Добавьте цвета
ползунком или укажите значение цвета в поле
Hex-кода.
7

27.

ОСНОВНЫЕ
ИНСТРУМЕНТЫ
У линейного градиента есть
третья неприметная ручка.
Если зажать Alt (Opt) и
потянуть за неё, цветовой
переход отрисовывается
перпендикулярно ей.
Вы можете менять
расположение крайних точек
градиента. Двигая ползунки,
вы можете настроить угол
поворота градиента и скорость
перехода от одного цвета к
другому.
27

28.

ОСНОВНЫЕ
ИНСТРУМЕНТЫ
Добавьте объектам
заливки с разными
градиентами и
сочетайте фигуры
друг с другом. Вы
можете использовать
Layer — режим
наложения,
накладывать их друг
на друга для
интересного
решения.
28

29.

ЧТО ТАКОЕ КОЛЛАЖ?
Коллаж — это
художественная
композиция, созданная из
различных изображений,
текстов и других
материалов, размещенных
вместе на одном полотне
или в цифровом формате.
29

30.

ДЛЯ ЧЕГО НУЖНЫ?
1. Выгодно выделяются в ленте на фоне фотографий:
фотографии могут повторяться, а с коллажами такого не
происходит.
2. Коллажи могут повысить CTR публикации: это показатель,
который отражает процент пользователей, кликнувших на
ссылку или изображение в публикации.
3. Визуальное повествование: рассказывают историю или идею
через объединение различных элементов.
4. Творческое выражение: позволяют экспериментировать с
формами, текстурами и стилями.
5. Представление концепций: Упрощают сложные идеи и делают
их более наглядными.
30

31. КАК СДЕЛАТЬ КОЛЛАЖ?

1. Перед началом работы
перечитайте текст и обратите
внимание на заголовки и
подзаголовки
Выделите главные моменты: тему,
важные фишки, детали. Подумайте,
какие ассоциации у вас возникают.
Например, вы пишете текст об
изучении английского в период
самоизоляции.
31

32.

КАК СДЕЛАТЬ
КОЛЛАЖ?
2. Не используйте
много мелких
деталей
Причина такая же,
как и при подборе
фото: чем больше
мелких деталей на
изображении, тем с
большей
вероятностью оно
превратится в
цветную мешанину.
32

33.

КАК СДЕЛАТЬ
КОЛЛАЖ?
3. Ставьте главный
объект (или объекты) по
центру
В этом случае коллаж будет
нормально кадрироваться и
хорошо встанет на обложку,
все нужные объекты будут
видны и не окажутся за
рамками.
33

34.

КАК СДЕЛАТЬ
КОЛЛАЖ?
4. Грамотно
выбирайте фон
Его можно заливать
одним цветом,
градиентом или
другим
изображением.
34

35.

ДЛЯ ЧЕГО НУЖНЫ?
5. Не
стесняйтесь
немного сходить
с ума
Это нормально, в
коллажах такое
вполне
допустимо.
35

36.

ОСНОВНЫЕ
ИНСТРУМЕНТЫ
6. Всегда
проверяйте, как
картинка встанет
на обложку
Попробуйте сделать
черновик и
проверить, как
будут вставать
изображения.
7

37.

ПРАКТИЧЕСКАЯ
РАБОТА
3
7

38.

СОЗДАНИЕ КОЛЛАЖА
Самостоятельная работа
Задание: Создать
В Fifma коллаж с
поездом
38

39.

ПЕРЕРЫВ
39

40.

ЧТО ТАКОЕ
ПАТТЕРН
4
0

41.

ЧТО ТАКОЕ ПАТТЕРН?
Паттерн - это
повторяющийся
дизайнерский элемент или
набор элементов, который
используется для создания
текстур или фонов.
Паттерны помогают
поддерживать
стилистическое единство и
добавлять визуальный
интерес к макетам.
41

42.

ДЛЯ ЧЕГО НУЖНЫ
ПАТТЕРНЫ?
Паттерны в Figma
используются для
добавления текстур и
глубины в дизайн,
создания визуальной
консистентности и
усиления эстетического
восприятия. Они помогают
подчеркнуть стиль проекта
и сделать интерфейс более
привлекательным.
42

43.

ПАТТЕРН В FIGMA
Вот пример паттерна в
африканском стиле.
43

44.

СОЗДАНИЕ
ПАТТЕРНОВ
Чтобы создать паттерн в Figma:
1. Создайте элемент: Например, квадрат или
круг.
2. Сгруппируйте элементы: Если нужно
использовать несколько фигур.
3. Выделите группу и используйте функцию
"Повторяющийся узор" (Tile): Это можно
сделать, обернув элементы в рамку и установив
повторение.
4. Настройте расстояние и выравнивание:
Регулируйте отступы и интервалы между
элементами.
44

45. ВИДЫ ПАТТЕРНОВ

Паттерны могут быть различных видов:
1. Геометрические: Квадраты, круги,
треугольники.
2. Органические: Волны, линии,
абстракции.
3. Орнаментальные: Узоры,
напоминающие вязь.
4. Фотографические: Повторяющиеся
элементы изображений.
5. Текстурные: Имитация материалов,
таких как дерево или ткань.
45

46.

ПРАКТИЧЕСКАЯ
РАБОТА
46

47.

Стилизация текста
Самостоятельная работа
Задание: Создать
по инструкции
эффект волны в
Figma
47

48.

Стилизация текста
Самостоятельная работа
Задание: Создать
по инструкции
парящие эллипсы
48

49.

Вот и все! Ваш проект готов.
Молодцы!
49

50.

ИТОГИ ЗАНЯТИЯ
50

51.

КАК ПРОШЛО ЗАНЯТИЕ?
Выбери цвет, который соответсвует твоему настроению сегодня
на занятии
51

52.

ДО ВСТРЕЧИ!
52