Similar presentations:
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 ООО «Юмакс». Все права защищены. Любое использование материалов допускается только с письменного согласия компании