Урок №23 Векторний графічний редактор. Комбінування та налаштування гр

8 клас

computer science

«Навчальна книга — Богдан»

тема 23-24

Векторний графічний редактор. Комбінування та налаштування графічних примітивів. Робота з векторними контурами. Текст та типографіка у векторному графічному редакторі. Ефекти та фільтри.

Ве́кторна графіка — створення зображення в комп'ютерній графіці з сукупності геометричних примітивів — точок, ліній, кривих, тобто об'єктів, які можна описати математичними виразами.

Не втрачає якості при масштабуванні. Наприклад, логотип можна збільшувати без втрати чіткості. Використовується для створення іконок, логотипів, ілюстрацій, а також дизайнів сайтів.

Приклади програм для векторної графіки: Canva, Figma, Adobe Illustrator, CorelDRAW.

Графічні примітиви — це базові форми, з яких складаються векторні зображення: лінії, прямокутники, кола, еліпси, багатокутники.

У Canva графічні примітиви можна знайти у вкладці Елементи:Фігури (квадрати, кола). Лінії (прямі, хвилясті, пунктирні). Іконки (багатокутники, стрілки).

Робота з векторними контурами

Контур — це лінія, яка визначає форму об’єкта.

Редагування контуру:Змінюйте товщину лінії. Обирайте колір і стиль лінії (суцільна, пунктирна, хвиляста).

У Canva можна змінювати контури фігур у меню налаштувань елемента:Обведення: Додайте рамку до фігури, виберіть її товщину та колір. Кути: Зробіть кути гострими або заокругленими.

Типографіка — це мистецтво роботи з текстом, яке включає вибір шрифтів, їх розмір, колір і розташування.

Розмір: Виділіть заголовки більшим розміром, підзаголовки — середнім, текст — меншим.

Шрифт: Вибирайте стиль, що відповідає темі дизайну (наприклад, строгий для офіційних сайтів, декоративний для творчих проєктів).

Колір: Використовуйте контрастний колір для читабельності.

У Canva доступні інструменти для: Вирівнювання тексту (по центру, ліворуч, праворуч). Додавання ефектів до тексту (тіні, обведення, прозорість).

Правильна типографіка допомагає тексту бути зрозумілим, читабельним та візуально привабливим.

Колір тексту

Читабельність

Розмір

Використовуйте контрастні кольори для кращої видимості.Наприклад, темний текст на світлому фоні або білий текст на темному фоні.

Уникайте надто декоративних шрифтів для великих обсягів тексту — їх складно читати.Для заголовків можна використовувати більш сміливі й декоративні шрифти.

Заголовки — великі (20-36 pt).Основний текст — середній (14-18 pt). Примітки або підписи — маленький (10-12 pt).

Використання різних шрифтів або їхніх варіацій (жирний, курсивний, тонкий) допомагає виділити важливі частини тексту.

Шрифт формує перше враження користувача про сайт.Наприклад, строгий шрифт із засічками підходить для юридичних сайтів, а рукописний — для творчих блогів. Не використовуйте більше 2-3 шрифтів у одному дизайні.

Розташування тексту

Інтервали між літерами (кернінг)

Міжрядковий інтервал (leading)

Вирівнюйте текст залежно від композиції:По центру для формального вигляду. По лівому краю для традиційного тексту. По правому краю — для декоративних композицій.

Це відстань між рядками тексту.Рекомендації: Зменшуйте інтервал для заголовків. Збільшуйте для основного тексту, щоб полегшити читання.

Відстань між літерами впливає на читабельність.У Canva можна збільшити або зменшити інтервали в меню налаштувань тексту (Spacing).

Головне завдання тексту — бути зрозумілим і легко читабельним.

Шрифтові пари — це поєднання двох або більше шрифтів, які гармонійно працюють разом, роблячи текст у дизайні структурованим, зрозумілим і візуально привабливим.

Контраст

Узгодженість стилю

Варіативність розміру

Мінімалізм

Один шрифт із варіаціями

Поради для роботи з текстом у UI/UX-дизайні

Текст має коректно відображатися на різних екранах (комп’ютери, планшети, смартфони).

Завжди думайте про користувача

Розташування

Короткі абзаци

Додавайте візуальні акценти

Сервіси для підбору шрифтових пар

Google Fonts

Безкоштовна бібліотека шрифтів із готовими прикладами пар. Дозволяє тестувати текст у реальному часі.

Ефекти та фільтри

Прозорість

Тіні

Використовується для створення напівпрозорого фону, акцентів або додавання шарів до дизайну.Наприклад, зробіть текст видимим на яскравому зображенні, додавши прозорий білий прямокутник позаду.

Додає об’єм та робить елементи помітнішими. Наприклад, використовуйте тіні для кнопок, щоб створити ефект натискання.

Свічення

Обведення

Підкреслює текст або фігури, додаючи сяючий ефект. Наприклад, використовуйте для створення магічного або сучасного вигляду.

Створює чітку межу навколо тексту або фігури для виділення. Наприклад, обведення використовується для заголовків, щоб зробити їх більш помітними.

Ефекти та фільтри

Яскравість

Фільтри

Робить зображення світлішим або темнішим, залежно від потреб дизайну. Наприклад, збільшіть яскравість, щоб додати життєрадісності.

Змінює вигляд зображень за допомогою кольорових ефектів. Наприклад, "Сепія" додає ретро-стиль, а "Чорно-білий" підкреслює мінімалізм.

Розмиття

Контраст

Підсилює різницю між світлими та темними елементами на зображенні. Наприклад, покращує читабельність тексту на складному фоні.

Робить зображення нечітким, щоб використовувати його як фон або акцентувати увагу на інших елементах. Наприклад, розмиття заднього фону для виділення тексту.

Дякую за увагу!