Подготовка графических материалов для включения в графический, пользовательский интерфейс

1.

ГОСУДАРСТВЕННОЕ БЮДЖЕТНОЕ ОБРАЗОВАТЕЛЬНОЕ
УЧРЕЖДЕНИЕ СРЕДНЕГО ПРОФЕССИОНАЛЬНОГО ОБРАЗОВАНИЯ
"ЛУГАНСКИЙ КОЛЛЕДЖ ИНФОРМАЦИОННЫХ ТЕХНОЛОГИЙ И
ПРЕДПРИНИМАТЕЛЬСТВА"
Презентация
На тему “Подготовка графических материалов для включения в
графический, пользовательский интерфейс”
ПОДГОТОВИЛ
СТУДЕНТ 2-ГО КУРСА, ГР. 203
БАЕВ МАКСИМ
ПРОВЕРИЛА
ЧИСТЯКОВА НАТАЛЬЯ АЛЕКСАНДРОВНА
Луганская Народная Республика
2024

2.

1. ТИТУЛЬНЫЙ ЛИСТ
ПЛАН
2.ПЛАН
3.ЧТО ТАКОЕ ПОДГОТОВКА ГРАФИЧЕСКИХ МАТЕРИАЛОВ ДЛЯ
ВКЛЮЧЕНИЯ В ГРАФИЧЕСКИЙ ПОЛЬЗОВАТЕЛЬСКИЙ ИНТЕРФЕЙС
4. ПОДБОР ТЕХНИЧЕСКИХ ПАРАМЕТРОВ ИНТЕРФЕЙСНОЙ ГРАФИКИ
ДЛЯ ЗАДАННОГО СТИЛЯ И ТРЕБОВАНИЙ К ГРАФИЧЕСКОМУ
ПОЛЬЗОВАТЕЛЬСКОМУ ИНТЕРФЕЙСУ
5. ПОДГОТАВЛИВАТЬ ГРАФИЧЕСКИЕ МАТЕРИАЛЫ В ПРОГРАММАХ
ПОДГОТОВКИ РАСТРОВЫХ И ВЕКТОРНЫХ ИЗОБРАЖЕНИЙ
5.1. РАСТРОВЫЕ РЕДАКТОРЫ
5.2. ВЕКТОРНЫЕ РЕДАКТОРЫ
6. ОСНОВЫ ВЕРСТКИ С ИСПОЛЬЗОВАНИЕМ ЯЗЫКОВ РАЗМЕТКИ,
ОПИСАНИЯ СТИЛЕЙ, ПРОГРАММИРОВАНИЯ С ИСПОЛЬЗОВАНИЕМ
СЦЕНАРНЫХ ЯЗЫКОВ, ТЕХНИЧЕСКИЕ ТРЕБОВАНИЯ К ИНТЕРФЕЙСНОЙ
ГРАФИКЕ, ТЕХНИКИ И МЕТОДИКИ ПОДГОТОВКИ ГРАФИЧЕСКИХ
МАТЕРИАЛОВ.
6.1. ОСНОВЫ ВЕРСТКИ С ИСПОЛЬЗОВАНИЕМ ЯЗЫКОВ РАЗМЕТКИ И ОПИСАНИЯ СТИЛЕЙ
6.2 ОСНОВЫ ПРОГРАММИРОВАНИЯ С ИСПОЛЬЗОВАНИЕМ СЦЕНАРНЫХ
ЯЗЫКОВ
6.3 ТЕХНИЧЕСКИЕ ТРЕБОВАНИЯ К ИНТЕРФЕЙСНОЙ ГРАФИКЕ
6.4. ТЕХНИКИ И МЕТОДИКИ ПОДГОТОВКИ ГРАФИЧЕСКИХ МАТЕРИАЛОВ
7. ОБРАБАТЫВАТЬ ГРАФИЧЕСКИЕ МАТЕРИАЛЫ ДЛЯ ВКЛЮЧЕНИЯ В
ВЕРСТКУ ИЛИ ПРОГРАММНЫЙ КОД В ТРЕБУЕМЫХ РАЗРЕШЕНИЯХ
8. ОЦЕНКА СОВОКУПНОСТИ ГРАФИЧЕСКИХ ЭЛЕМЕНТОВ ОФОРМЛЕНИЯ
ГРАФИЧЕСКОГО ПОЛЬЗОВАТЕЛЬСКОГО ИНТЕРФЕЙСА НА
СООТВЕТСТВИЕ ТЕХНИЧЕСКИМ ТРЕБОВАНИЯМ
9. ОБРАБОТКА ГРАФИЧЕСКИХ МАТЕРИАЛОВ ДЛЯ ВКЛЮЧЕНИЯ В
ВЁРСТКУ ИЛИ ПРОГРАММНЫЙ КОД В ТРЕБУЕМЫХ РАЗРЕШЕНИЯХ
10.Трудовые действия, связанные с подбором технических параметров интерфейсной графики,
обработкой графических материалов и оценкой соответствия техническим требованиям
11. Необходимые умения
12. Примеры подготовки графических материалов для включения в графический пользовательский
интерфейс
13. Графический редактор Figma

3.

ПОДГОТОВКА ГРАФИЧЕСКИХ МАТЕРИАЛОВ ДЛЯ ВКЛЮЧЕНИЯ В
ГРАФИЧЕСКИЙ ПОЛЬЗОВАТЕЛЬСКИЙ ИНТЕРФЕЙС
• Подготовка графических материалов для
включения в графический пользовательский
интерфейс — это трудовая функция, которая
включает в себя подбор технических
параметров интерфейсной графики для
заданного стиля и требований к интерфейсу, а
также обработку графических материалов для
включения в вёрстку или программный код в
требуемых разрешениях.

4.

ПОДБОР ТЕХНИЧЕСКИХ ПАРАМЕТРОВ ИНТЕРФЕЙСНОЙ ГРАФИКИ ДЛЯ
ЗАДАННОГО СТИЛЯ И ТРЕБОВАНИЙ К ГРАФИЧЕСКОМУ
ПОЛЬЗОВАТЕЛЬСКОМУ ИНТЕРФЕЙСУ
• - Подготавливать графические материалы в программах подготовки растровых и векторных
изображений.
• - Знать основы верстки с использованием языков разметки, описания стилей,
программирования с использованием сценарных языков, технические требования к
интерфейсной графике, техники и методики подготовки графических материалов.

5.

ПОДГОТАВЛИВАТЬ ГРАФИЧЕСКИЕ МАТЕРИАЛЫ В ПРОГРАММАХ
ПОДГОТОВКИ РАСТРОВЫХ И ВЕКТОРНЫХ ИЗОБРАЖЕНИЙ
• Несмотря на свою схожесть при взгляде
издалека, отличия между растровыми и
векторными изображениями легко заметны
невооружённому глазу при достаточном
увеличении. Растровая графика основана на
множестве пикселей, в то время как векторная
использует опорные точки и кривые. Для тех,
кто работает с визуальным контентом, крайне
важно понимать особенности обоих форматов.

6.

РАСТРОВЫЕ РЕДАКТОРЫ
Растровые редакторы —
это специализированные программы
для создания и обработки растровых
изображений, то есть графики,
которая в память компьютера
записывается как набор точек, а не
как совокупность формул
геометрических фигур.
Основные форматы для хранения
растровых изображений включают
JPEG для фотографий, PNG для
изображений с прозрачностью и TIFF
для профессиональной полиграфии.
Например, Paint, Photoshop,
CorelPhotoPaint. Они используются
для работы с фотографиями и
графикой высокого качества.

7.

ВЕКТОРНЫЕ ГРАФИЧЕСКИЕ РЕДАКТОРЫ
Векторные изображения состоят из
отдельных графических объектов —
примитивов, которые представляют собой
линии, различные геометрические фигуры,
фигуры-символы, фрагменты текста.
Каждый редактор предлагает свой набор
графических примитивов.
Векторные редакторы используются для
создания разметки страниц, типографики,
логотипов, художественных иллюстраций
(например, мультипликация, клип-арт,
сложные геометрические шаблоны),
технических иллюстраций, создания
диаграмм и составления блок-схем.
Некоторые примеры векторных редакторов:
CorelDRAW, Adobe Illustrator, Xara Designer

8.

ОСНОВЫ ВЕРСТКИ С ИСПОЛЬЗОВАНИЕМ ЯЗЫКОВ РАЗМЕТКИ, ОПИСАНИЯ СТИЛЕЙ,
ПРОГРАММИРОВАНИЯ С ИСПОЛЬЗОВАНИЕМ СЦЕНАРНЫХ ЯЗЫКОВ, ТЕХНИЧЕСКИЕ
ТРЕБОВАНИЯ К ИНТЕРФЕЙСНОЙ ГРАФИКЕ, ТЕХНИКИ И МЕТОДИКИ ПОДГОТОВКИ
ГРАФИЧЕСКИХ МАТЕРИАЛОВ.
- основы верстки с использованием языков разметки и
описания стилей;
- основы программирования с использованием
сценарных языков;
- технические требования к интерфейсной графике;
- техники и методики подготовки графических
материалов.

9.

ОСНОВЫ ВЕРСТКИ С ИСПОЛЬЗОВАНИЕМ ЯЗЫКОВ РАЗМЕТКИ И
ОПИСАНИЯ СТИЛЕЙ
Основы вёрстки с использованием языков разметки и
описания стилей включают следующие аспекты:
HTML. Язык разметки, который определяет структуру
и содержимое сайта, задаёт местоположение каждого
элемента. Основу HTML составляют теги — это
единицы разметки, которые сообщают браузеру, как
отображать содержимое документа. Некоторые
основные теги: <html> (корневой элемент), <head>
(метаинформация о документе), <title> (заголовок
страницы), <body> (основной контент страницы).
CSS. Язык описания внешнего представления
элементов, задающий конкретные значения размера,
цвета и формы. С помощью CSS можно изменять стили
текста, цвета, размеры, расположение элементов, а
также добавлять анимацию и эффекты перехода

10.

ОСНОВЫ ПРОГРАММИРОВАНИЯ С ИСПОЛЬЗОВАНИЕМ СЦЕНАРНЫХ ЯЗЫКОВ
Основы программирования с использованием сценарных языков включают
понимание того, что сценарии в программировании — это разновидности
компьютерных программ, которые написаны на привычном простом языке и
автоматически выполняют практические задачи.
Некоторые особенности сценарных языков:
- Интерпретируются, а не компилируются — переводятся на машинный язык
во время запуска, а не предварительно.
- Типизация обычно динамическая: тип данных может в любой момент
меняться и не определяться во время компиляции.
- Более высокоуровневые: больше понятны человеку, чем компьютеру.
Некоторые популярные сценарные языки:
- JavaScript. Используется для создания веб- или мобильных приложений,
инструментов командной строки, сетевых приложений реального времени.
- Python. Разработчики используют скрипты Python для автоматизации
ежедневных задач, создания отчётов, обеспечения безопасности и т. д.
- R. В основном используется для статистических вычислений и графики.

11.

ТЕХНИЧЕСКИЕ ТРЕБОВАНИЯ К ИНТЕРФЕЙСНОЙ ГРАФИКЕ
Некоторые технические требования к интерфейсной графике:
- Оптимизация под различные разрешения экрана. Крупные
элементы интерфейса (блоки меню, кнопки или иконки)
должны заполнять экран полностью, чтобы их было хорошо
видно даже при маленьком разрешении.
- Анатомическое расположение элементов. Оно должно быть
таким, чтобы элементами было удобно управлять с помощью
одной руки, а пальцы не промахивались мимо кнопки.
- Соответствие требованиям целевых операционных систем и
платформ. Это касается пиктограмм и элементов управления.
- Использование правил перспективы, колористики,
композиции, светотени и изображения объёма.
- Формализация общих принципов оформления интерфейса
(цвета, шрифты, пропорции).

12.

ТЕХНИКИ И МЕТОДИКИ ПОДГОТОВКИ ГРАФИЧЕСКИХ МАТЕРИАЛОВ
Некоторые техники и методики подготовки графических материалов для
интерфейса:
- Подбор технических параметров интерфейсной графики для заданного
стиля и требований к графическому пользовательскому интерфейсу.
- Обработка графических материалов для включения в вёрстку или
программный код в требуемых разрешениях.
- Создание графических документов в программах подготовки векторных
изображений.
- Рисование анимационных последовательностей и раскадровки.
- Подбор графических метафор, максимально точно соответствующих
назначению разрабатываемого элемента управления.
- Разработка дизайна модальных окон, слайдеров, паралакс-эффектов,
диаграмм, таблиц, маршрутов, маркеров.
- Рисование графических подсказок, фонов, простых персонажей, карт
товаров.
Также при подготовке графических материалов важно учитывать правила
перспективы, колористики, композиции, светотени и изображения объёма.

13.

ОБРАБАТЫВАТЬ ГРАФИЧЕСКИЕ МАТЕРИАЛЫ ДЛЯ ВКЛЮЧЕНИЯ В
ВЕРСТКУ ИЛИ ПРОГРАММНЫЙ КОД В ТРЕБУЕМЫХ РАЗРЕШЕНИЯХ
Обработка графических материалов для включения в
вёрстку или программный код в требуемых
разрешениях входит в трудовую функцию «Подготовка
графических материалов для включения в интерфейс»
профессионального стандарта «Специалист по дизайну
графических и пользовательских интерфейсов».
Также в рамках этой функции нужно уметь
оптимизировать интерфейсную графику под различные
разрешения экрана.

14.

ОЦЕНКА СОВОКУПНОСТИ ГРАФИЧЕСКИХ ЭЛЕМЕНТОВ ОФОРМЛЕНИЯ
ГРАФИЧЕСКОГО ПОЛЬЗОВАТЕЛЬСКОГО ИНТЕРФЕЙСА НА
СООТВЕТСТВИЕ ТЕХНИЧЕСКИМ ТРЕБОВАНИЯМ
Оценка совокупности графических элементов оформления графического пользовательского
интерфейса на соответствие техническим требованиям — это одна из трудовых функций,
описанных в профстандарте 06.025 «Специалист по дизайну графических пользовательских
интерфейсов».
- Некоторые аспекты, которые нужно проверить при такой оценке:
- Элементы интерфейса. Корректность отображения и работы всех элементов интерфейса, таких как
кнопки, текстовые поля, чекбоксы, меню и т. д..
- Функциональность. Корректность работы всех кнопок и ссылок, соответствие их действий
ожидаемым результатам.
- Соответствие стандартам. Соответствие интерфейса стандартам и рекомендациям, например,
стилям оформления, правилам доступности и т. д..
- Удобство использования. Оценка удобства использования интерфейса с точки зрения пользователя,
включая интуитивность, логичность и простоту взаимодействия.
Также при оценке нужно убедиться, что все элементы интерфейса расположены логично и
гармонично, не вызывая у пользователя затруднений при взаимодействии.

15.

ОБРАБОТКА ГРАФИЧЕСКИХ МАТЕРИАЛОВ ДЛЯ ВКЛЮЧЕНИЯ В
ВЁРСТКУ ИЛИ ПРОГРАММНЫЙ КОД В ТРЕБУЕМЫХ РАЗРЕШЕНИЯХ
• Обработка графических материалов для включения в вёрстку или программный код в
требуемых разрешениях входит в трудовую функцию «Подготовка графических материалов для
включения в интерфейс» профессионального стандарта «Специалист по дизайну графических
и пользовательских интерфейсов». 14
• Также в рамках этой функции необходимо оптимизировать интерфейсную графику под
различные разрешения экрана.

16.

ТРУДОВЫЕ ДЕЙСТВИЯ, СВЯЗАННЫЕ С ПОДБОРОМ ТЕХНИЧЕСКИХ
ПАРАМЕТРОВ ИНТЕРФЕЙСНОЙ ГРАФИКИ, ОБРАБОТКОЙ ГРАФИЧЕСКИХ
МАТЕРИАЛОВ И ОЦЕНКОЙ СООТВЕТСТВИЯ ТЕХНИЧЕСКИМ ТРЕБОВАНИЯМ
Трудовые действия, связанные с подбором технических параметров интерфейсной
графики, обработкой графических материалов и оценкой соответствия техническим
требованиям, входят в трудовую функцию «Подготовка графических материалов для
включения в графический пользовательский интерфейс» (код A/02.3).
Некоторые из этих действий:
- Подбор технических параметров интерфейсной графики для заданного стиля и
требований к графическому пользовательскому интерфейсу;
- Обработка графических материалов для включения в вёрстку или программный код в
требуемых разрешениях;
- Оценка совокупности графических элементов оформления графического
пользовательского интерфейса на соответствие техническим требованиям

17.

НЕОБХОДИМЫЕ УМЕНИЯ
Необходимые умения для подготовки графических материалов в программах подготовки
растровых и векторных изображений согласно профессиональному стандарту «Специалист по
дизайну графических пользовательских интерфейсов»:
- Создавать графические документы в программах подготовки растровых изображений;
- Создавать графические документы в программах подготовки векторных изображений.

18.

ПРИМЕРЫ ПОДГОТОВКИ ГРАФИЧЕСКИХ МАТЕРИАЛОВ ДЛЯ
ВКЛЮЧЕНИЯ В ГРАФИЧЕСКИЙ ПОЛЬЗОВАТЕЛЬСКИЙ ИНТЕРФЕЙС
- Создание иконок и пиктограмм для сайта или приложения. Например, разработка иконок в
заданном стиле веб-ресурса или приложения, создание иконок приложений под различные
платформы.
- Разработка инфографики. Например, создание тематической
инфографики для электронной публикации.
- Рисование графических подсказок и другой интерфейсной графики. Разработка дизайна
модальных окон, слайдеров, паралакс-эффектов, диаграмм, таблиц, маршрутов, маркеров.

19.

ГРАФИЧЕСКИЙ РЕДАКТОР FIGMA
Графический редактор Figma позволяет создавать дизайн-макеты и прототипы сайтов
и приложений.
Некоторые возможности программы:
- Прототипы. В Figma удобно делать прототип страниц со структурой расположения
отдельных блоков, изображений, кнопок, меню и т. д.. Отрисованные страницы сайта
можно связать между собой, адаптировать их к разрешениям разных устройств.
- Интерфейсы. Программа позволяет отрисовать все иконки, формы, кнопки,
раскрывающиеся блоки и анимировать их.
- Векторные изображения. Векторные изображения можно экспортировать,
импортировать и рисовать самостоятельно.
-Презентации. Их можно посмотреть прямо в программе или скачать себе на
устройство.
- Юзабилити-тест. В Figma можно протестировать прототип до его передачи
разработчикам. Это позволяет сразу исправить критические ошибки, проверить
удобство использования страниц и кнопок.
- Логотипы. В Figma можно создавать не только иконки и кнопки, но и полноценные
логотипы.

20.

СПИСОК ЛИТЕРАТУРЫ
• https://yandex.ru
• https://yandex.ru/images
• https://www.figma.com
• https://classinform.ru/profstandarty/06.025-spetcialist-po-dizainu-graficheskikh-i-polzovatelskikhinterfeisov.html
• https://habr.com/ru/articles/208966/
• https://mailfit.com/blog/sozdanie-rastrovoj-i-vektornoj-grafiki-osnovnye-instrumenty
• https://www.mogok.ru/sveden/files/rif/MDK.02.02_PODGOTOVKA_GRAFICHESKIX_MATERIA
LOV_DLYA_VKLYUCHENIYA_V_GRAFICHESKII_POLYZOVATELYSKII_INTERFEIS_.pdf
• https://infourok.ru/prezentaciya-na-temu-graficheskiy-interfeys-polzovatelya-3052187.html

21.

СПАСИБО ЗА ВНИМАНИЕ