DS. Графический дизайн. Дизайн сайтов

1.

DS
Графический дизайн
Дизайн сайтов

2.

Теория
Повторение
На прошлом уроке:
Сегодня:
3D-дизайн
Знакомство с Figma
Blender
Инструменты
Создание комнаты
Создание элементов
Создание сайта
©2023 ООО «Юмакс». Все права защищены. Любое использование материалов допускается только с письменного согласия компании

3.

Теория
Повторение
1
Какой объект изначально появляется
в рабочем окне Blender?
2
Какие обзоры существуют в Blender?
3
Какие инструменты ручной
трансформации вы знаете?
4
Какие параметры у света есть в
Blender?
4
По каким значениям координат
располагается центр сцены?
©2023 ООО «Юмакс». Все права защищены. Любое использование материалов допускается только с письменного согласия компании

4.

Теория
Повторение
1
Какой объект изначально появляется
в рабочем окне Blender?
2
Какие обзоры существуют в Blender?
3
Какие инструменты ручной
трансформации вы знаете?
4
Какие параметры у света есть в
Blender?
4
По каким значениям координат
располагается центр сцены?
Куб
©2023 ООО «Юмакс». Все права защищены. Любое использование материалов допускается только с письменного согласия компании

5.

Теория
Повторение
1
Какой объект изначально появляется
в рабочем окне Blender?
Куб
2
Какие обзоры существуют в Blender?
Ортогональный и
изометрический
3
Какие инструменты ручной
трансформации вы знаете?
4
Какие параметры у света есть в
Blender?
4
По каким значениям координат
располагается центр сцены?
©2023 ООО «Юмакс». Все права защищены. Любое использование материалов допускается только с письменного согласия компании

6.

Теория
Повторение
1
Какой объект изначально появляется
в рабочем окне Blender?
Куб
2
Какие обзоры существуют в Blender?
Ортогональный и
изометрический
3
Какие инструменты ручной
трансформации вы знаете?
Перемещение, вращение и
масштабирование
4
Какие параметры у света есть в
Blender?
4
По каким значениям координат
располагается центр сцены?
©2023 ООО «Юмакс». Все права защищены. Любое использование материалов допускается только с письменного согласия компании

7.

Теория
Повторение
1
Какой объект изначально появляется
в рабочем окне Blender?
Куб
2
Какие обзоры существуют в Blender?
Ортогональный и
изометрический
3
Какие инструменты ручной
трансформации вы знаете?
Перемещение, вращение и
масштабирование
4
Какие параметры у света есть в
Blender?
Тип,
цвет,
мощность,
диффузия, блик, объем
4
По каким значениям координат
располагается центр сцены?
©2023 ООО «Юмакс». Все права защищены. Любое использование материалов допускается только с письменного согласия компании

8.

Теория
Повторение
1
Какой объект изначально появляется
в рабочем окне Blender?
Куб
2
Какие обзоры существуют в Blender?
Ортогональный и
изометрический
3
Какие инструменты ручной
трансформации вы знаете?
Перемещение, вращение и
масштабирование
4
Какие параметры у света есть в
Blender?
Тип,
цвет,
мощность,
диффузия, блик, объем
4
По каким значениям координат
располагается центр сцены?
0,0
©2023 ООО «Юмакс». Все права защищены. Любое использование материалов допускается только с письменного согласия компании

9.

Теория
Знакомство с приложением
©2023 ООО «Юмакс». Все права защищены. Любое использование материалов допускается только с письменного согласия компании

10.

Обзор приложения
Теория
Figma -
©2023 ООО «Юмакс». Все права защищены. Любое использование материалов допускается только с письменного согласия компании

11.

Теория
Обзор приложения
Figma - онлайн-сервис для разработки
интерфейсов. То есть сервис, позволяющий
создавать ту часть мобильного приложения
или веб-сайта, которую видят пользователи.
©2023 ООО «Юмакс». Все права защищены. Любое использование материалов допускается только с письменного согласия компании

12.

Теория
Обзор приложения
Figma - онлайн-сервис для разработки
интерфейсов. То есть сервис, позволяющий
создавать ту часть мобильного приложения
или веб-сайта, которую видят пользователи.
Элементы интерфейса -
©2023 ООО «Юмакс». Все права защищены. Любое использование материалов допускается только с письменного согласия компании

13.

Теория
Обзор приложения
Figma - онлайн-сервис для разработки
интерфейсов. То есть сервис, позволяющий
создавать ту часть мобильного приложения
или веб-сайта, которую видят пользователи.
Элементы интерфейса - это те его части, с
которыми пользователь может
взаимодействовать.
©2023 ООО «Юмакс». Все права защищены. Любое использование материалов допускается только с письменного согласия компании

14.

Теория
Обзор приложения
В Figma мы можем создать любой элемент и прописать его
функционал. Это удобно и наглядно, ведь результат работы виден
сразу.
©2023 ООО «Юмакс». Все права защищены. Любое использование материалов допускается только с письменного согласия компании

15.

Теория
Обзор приложения
Примеры элементов интерфейса:
Кнопки
©2023 ООО «Юмакс». Все права защищены. Любое использование материалов допускается только с письменного согласия компании

16.

Теория
Обзор приложения
Примеры элементов интерфейса:
Кнопки
Выпадающий список
©2023 ООО «Юмакс». Все права защищены. Любое использование материалов допускается только с письменного согласия компании

17.

Теория
Обзор приложения
Примеры элементов интерфейса:
Кнопки
Выпадающий список
Иконки контактов и социальных сетей
©2023 ООО «Юмакс». Все права защищены. Любое использование материалов допускается только с письменного согласия компании

18.

Теория
Обзор приложения
Примеры элементов интерфейса:
Кнопки
Выпадающий список
Иконки контактов и социальных сетей
Слайдер
©2023 ООО «Юмакс». Все права защищены. Любое использование материалов допускается только с письменного согласия компании

19.

Теория
Обзор приложения
Примеры элементов интерфейса:
Кнопки
Выпадающий список
Иконки контактов и социальных сетей
Слайдер
Навигационное меню
©2023 ООО «Юмакс». Все права защищены. Любое использование материалов допускается только с письменного согласия компании

20.

Теория
Начало работы
©2023 ООО «Юмакс». Все права защищены. Любое использование материалов допускается только с письменного согласия компании

21.

Начало работы
Теория
Рабочие области
Графический редактор
Менеджер файлов
Вкладки менеджера файлов:
Search – для поиска проектов
Recent – последние открытые файлы
Plugins – сборник расширений для ускорения работы
Drufts – создание нового файла
©2023 ООО «Юмакс». Все права защищены. Любое использование материалов допускается только с письменного согласия компании

22.

Теория
Создание страницы сайта
©2023 ООО «Юмакс». Все права защищены. Любое использование материалов допускается только с письменного согласия компании

23.

Теория
Создание страницы сайта
Основные принципы дизайна сайтов
©2023 ООО «Юмакс». Все права защищены. Любое использование материалов допускается только с письменного согласия компании

24.

Теория
Создание страницы сайта
Основные принципы дизайна сайтов
Понятный интерфейс (пользователь должен понимать,
какую функцию несет тот или иной элемент)
©2023 ООО «Юмакс». Все права защищены. Любое использование материалов допускается только с письменного согласия компании

25.

Теория
Создание страницы сайта
Основные принципы дизайна сайтов
Понятный интерфейс (пользователь должен понимать,
какую функцию несет тот или иной элемент)
Удобная навигация (меню сайта должно быть понятным
и читаемым)
©2023 ООО «Юмакс». Все права защищены. Любое использование материалов допускается только с письменного согласия компании

26.

Теория
Создание страницы сайта
Основные принципы дизайна сайтов
Понятный интерфейс (пользователь должен понимать,
какую функцию несет тот или иной элемент)
Удобная навигация (меню сайта должно быть понятным
и читаемым)
Адаптивность (дизайн сайта должен быть адаптирован
как для компьютеров, так и для мобильных устройств)
©2023 ООО «Юмакс». Все права защищены. Любое использование материалов допускается только с письменного согласия компании

27.

Теория
Создание страницы сайта
Языки верстки
CSS
HTML
JavaScript
©2023 ООО «Юмакс». Все права защищены. Любое использование материалов допускается только с письменного согласия компании

28.

Теория
Обзор приложения
План работы:
1. Выбор фрейма и создание рабочей области
©2023 ООО «Юмакс». Все права защищены. Любое использование материалов допускается только с письменного согласия компании

29.

Теория
Обзор приложения
План работы:
1. Выбор фрейма и создание рабочей области
2. Создание фона
©2023 ООО «Юмакс». Все права защищены. Любое использование материалов допускается только с письменного согласия компании

30.

Теория
Обзор приложения
План работы:
1. Выбор фрейма и создание рабочей области
2. Создание фона
3. Название сайта
©2023 ООО «Юмакс». Все права защищены. Любое использование материалов допускается только с письменного согласия компании

31.

Теория
Обзор приложения
План работы:
1. Выбор фрейма и создание рабочей области
2. Создание фона
3. Название сайта
4. Создание кнопок
©2023 ООО «Юмакс». Все права защищены. Любое использование материалов допускается только с письменного согласия компании

32.

Теория
Обзор приложения
План работы:
1. Выбор фрейма и создание рабочей области
2. Создание фона
3. Название сайта
4. Создание кнопок
5. Создание логотипа
©2023 ООО «Юмакс». Все права защищены. Любое использование материалов допускается только с письменного согласия компании

33.

Теория
Создание страницы сайта
Не делайте страницу слишком яркой, чтобы текст
был читаемым, выбирайте светлые тона, если хотите
использовать темные цвета для надписей и
наоборот.
©2023 ООО «Юмакс». Все права защищены. Любое использование материалов допускается только с письменного согласия компании

34.

Задание №
1
Самостоятельное задание
Измените цвет прямоугольника.
Подсказки:
©2023 ООО «Юмакс». Все права защищены. Любое использование материалов допускается только с письменного согласия компании

35.

Задание №
1
Самостоятельное задание
Измените цвет прямоугольника.
Подсказки:
Выберите элемент,
цвет которого
хотите изменить.
©2023 ООО «Юмакс». Все права защищены. Любое использование материалов допускается только с письменного согласия компании

36.

Задание №
1
Самостоятельное задание
Измените цвет прямоугольника.
Подсказки:
Выберите
элемент, цвет
которого хотите
изменить.
Выберите в
правой панели
инструментов
вкладку Fill.
©2023 ООО «Юмакс». Все права защищены. Любое использование материалов допускается только с письменного согласия компании

37.

Задание №
1
Самостоятельное задание
Измените цвет прямоугольника.
Подсказки:
Выберите элемент,
цвет которого
хотите изменить.
Выберите в правой
панели
инструментов
вкладку Fill.
Измените цвет при
помощи палитры
или пипетки.
©2023 ООО «Юмакс». Все права защищены. Любое использование материалов допускается только с письменного согласия компании

38.

Теория
Создание страницы сайта
Не делайте страницу слишком яркой, чтобы текст
был читаемым, выбирайте светлые тона, если хотите
использовать темные цвета для надписей и
наоборот.
Не все шрифты применимы для русского языка, при
создании сайта выбирайте подходящие шрифты или
переводите надписи на английский.
©2023 ООО «Юмакс». Все права защищены. Любое использование материалов допускается только с письменного согласия компании

39.

Теория
Создание кнопок
©2023 ООО «Юмакс». Все права защищены. Любое использование материалов допускается только с письменного согласия компании

40.

Задание №
2
Самостоятельное задание
Создайте 4 прямоугольника одинакового размера и расположите их на
странице. Выберите цвет будущих кнопок и добавьте надписи «О себе» и
«Хобби» на 2 из них.
Результат:
Хобби
О себе
©2023 ООО «Юмакс». Все права защищены. Любое использование материалов допускается только с письменного согласия компании

41.

Теория
Объединение элементов.
Выделите все элементы рисунка, зажав левую кнопку
мыши, а затем нажмите правую кнопку мыши. В
открывшемся меню выберите Group selection или
одновременно нажмите клавиши Ctrl+G.
©2023 ООО «Юмакс». Все права защищены. Любое использование материалов допускается только с письменного согласия компании

42.

Задание №
3
Самостоятельное задание
Создайте логотип для своего сайта, используя готовые фигуры и
инструмент Pen.
Результат:
©2023 ООО «Юмакс». Все права защищены. Любое использование материалов допускается только с письменного согласия компании

43.

ИТОГ
Домашнее задание
Работа над сайтом
Добавьте свое фото на главную страницу
сайта, добавьте надписи на все кнопки,
измените расположение элементов на
странице.
©2023 ООО «Юмакс». Все права защищены. Любое использование материалов допускается только с письменного согласия компании

44.

ИТОГ
1
Что такое интерфейс?
©2023 ООО «Юмакс». Все права защищены. Любое использование материалов допускается только с письменного согласия компании

45.

ИТОГ
1
Что такое интерфейс?
Часть сайта или приложения,
которая видна пользователям.
©2023 ООО «Юмакс». Все права защищены. Любое использование материалов допускается только с письменного согласия компании

46.

ИТОГ
1
Что такое интерфейс?
2
Как добавить изображение или
видео на страницу?
Часть сайта или приложения,
которая видна пользователям.
©2023 ООО «Юмакс». Все права защищены. Любое использование материалов допускается только с письменного согласия компании

47.

ИТОГ
1
Что такое интерфейс?
2 Как добавить изображение или
видео на страницу?
Часть сайта или приложения,
которая видна пользователям.
В списке объектов выбрать
инструмент Place
image/video.
©2023 ООО «Юмакс». Все права защищены. Любое использование материалов допускается только с письменного согласия компании

48.

ИТОГ
1
Что такое интерфейс?
2 Как добавить изображение или
видео на страницу?
3
Часть сайта или приложения,
которая видна пользователям.
В списке объектов выбрать
инструмент Place
image/video.
Как объединить несколько
объектов в один?
©2023 ООО «Юмакс». Все права защищены. Любое использование материалов допускается только с письменного согласия компании

49.

ИТОГ
1
Что такое интерфейс?
Часть сайта или приложения,
которая видна пользователям.
2 Как добавить изображение или
видео на страницу?
В списке объектов выбрать
инструмент Place
image/video.
Как объединить несколько
объектов в один?
Выделить объекты и нажать
Group selection или клавиши
Ctrl+G.
3
©2023 ООО «Юмакс». Все права защищены. Любое использование материалов допускается только с письменного согласия компании

50.

ИТОГ
1
Что такое интерфейс?
Часть сайта или приложения,
которая видна пользователям.
2 Как добавить изображение или
видео на страницу?
В списке объектов выбрать
инструмент Place
image/video.
3
Как объединить несколько
объектов в один?
Выделить объекты и нажать
Group selection или клавиши
Ctrl+G.
4
Как изменить шрифт надписи?
©2023 ООО «Юмакс». Все права защищены. Любое использование материалов допускается только с письменного согласия компании

51.

ИТОГ
1
Что такое интерфейс?
Часть сайта или приложения,
которая видна пользователям.
2 Как добавить изображение или
видео на страницу?
В списке объектов выбрать
инструмент Place
image/video.
3
Как объединить несколько
объектов в один?
Выделить объекты и нажать
Group selection или клавиши
Ctrl+G.
4
Как изменить шрифт надписи?
Выбрать в правом меню
вкладку Text и настроить
параметры.
©2023 ООО «Юмакс». Все права защищены. Любое использование материалов допускается только с письменного согласия компании

52.

ИТОГ
Контрольная работа по Модулю № 1
©2023 ООО «Юмакс». Все права защищены. Любое использование материалов допускается только с письменного согласия компании

53.

ИТОГ
Контрольная работа по Модулю № 1
©2023 ООО «Юмакс». Все права защищены. Любое использование материалов допускается только с письменного согласия компании

54.

ИТОГ
Контрольная работа по Модулю № 1
Повторите следующие темы:
История дизайна и виды
Понятие цвета, шрифта
Растровые и векторные изображения
Приложения (Gimp, Figma, Inkscape)
Основы Python
©2023 ООО «Юмакс». Все права защищены. Любое использование материалов допускается только с письменного согласия компании

55.

ИТОГ
Контрольная работа по Модулю № 1
Повторите следующие темы:
История дизайна и виды
Понятие цвета, шрифта
Растровые и векторные изображения
Приложения (Gimp, Figma, Inkscape)
Основы Python
Удачной подготовки!
©2023 ООО «Юмакс». Все права защищены. Любое использование материалов допускается только с письменного согласия компании

56.

ИТОГ
Подпишись на наш канал
©2023 ООО «Юмакс». Все права защищены. Любое использование материалов допускается только с письменного согласия компании