Практична робота

Створення графічних елементів для веб-сторінок в Canva Pro

Тема: Розробка UI-елементів (інтерфейсу) для сайту та збереження графіки з прозорим фоном.
Інструментарій: Canva (обліковий запис Pro / Education).
Мета: Навчитися створювати унікальні елементи веб-дизайну (кнопки, іконки, логотип), використовувати інструменти видалення фону та правильно експортувати файли для веб-розробки.

Завдання

Уявіть, що ви веб-дизайнер, який розробляє стиль для нового сайту (тематику оберіть самостійно: інтернет-магазин ігор, блог про подорожі, сайт школи, кав'ярня тощо).
Вам необхідно створити 10-12 елементів та зберегти їх у форматі PNG без заднього фону.

Список обов'язкових елементів (разом 10-12 шт.):

1. Логотип сайту (1 шт).

2. Кнопки навігації (наприклад: "Головна", "Про нас", "Контакти") (3-4 шт).

3. Кнопка дії (CTA) (наприклад: "Купити", "Підписатися", "Замовити") (1 шт).

4. Іконки соцмереж або переваг, стилізовані під ваш дизайн (3-4 шт).

5. Декоративні елементи або фото товару/об'єкта без фону (2 шт).

Хід роботи (Покрокова інструкція)

Крок 1. Підготовка робочого простору

1. Зайдіть у свій акаунт Canva Pro.

2. Натисніть кнопку "Створити дизайн" (Create a design).

3. Оберіть "Налаштовуваний розмір" (Custom size).

4. Введіть розмір 500 x 500 пікселів. Це зручний квадратний формат для іконок та кнопок. Натисніть "Створити".

Крок 2. Створення елементів (Дизайн)

Щоб не створювати 12 окремих файлів, ми будемо використовувати сторінки в одному проекті.

1. Створіть Логотип (Сторінка 1):

   • Використовуйте вкладку "Елементи" (Elements) та "Текст" (Text).

   • Скомбінуйте фігуру та назву вашого сайту.

2. Створіть Кнопки (Сторінки 2-5):

   • Натисніть кнопку "+ Додати сторінку" внизу.

   • Додайте прямокутник або овал (вкладка "Елементи" -> "Лінії та фігури").

   • Змініть колір фігури на фірмовий.

   • Зверху напишіть текст (наприклад, "Головна"). Вирівняйте його по центру.

3. Створіть Іконки (Сторінки 6-9):

   • Знайдіть відповідні графічні об'єкти в "Елементах" (наприклад, значок Instagram, телефон, кошик).

   • Перефарбуйте їх у кольори вашого сайту, щоб вони виглядали в єдиному стилі.

4. Робота з фото (Сторінки 10-11):

   • Завантажте фото (або оберіть у вкладці "Фото"), яке підходить вашій темі (наприклад, чашка кави або ноутбук).

   • Застосування ефекту: Виділіть фото -> натисніть "Редагувати фото" (Edit photo) -> оберіть інструмент "Видалення фону" (BG Remover). Це функція Canva Pro.

   • Тепер у вас є об'єкт на білому полотні, але без "рідного" фону картинки.

Крок 3. Перейменування сторінок (Важливо для порядку)

Над кожною сторінкою (робочою областю) є поле для нотаток або назви (зазвичай там написано "Сторінка 1", "Сторінка 2").

• Напишіть назви англійською мовою (латиницею), щоб файли коректно збереглися: logo, btn_home, btn_about, icon_fb, img_product тощо.

Крок 4. Збереження з прозорим фоном (Експорт)

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

1. Натисніть кнопку "Поділитися" (Share) у верхньому правому куті.

2. Оберіть "Завантажити" (Download).

3. Тип файлу: оберіть PNG (тільки цей формат підтримує прозорість для веб).

4. Поставте галочку навпроти пункту "Прозорий фон" (Transparent background). Позначено значком корони Pro.

5. У пункті "Виберіть сторінки" переконайтеся, що обрано "Всі сторінки" (All pages).

6. Натисніть "Завантажити".

Крок 5. Робота з файлами

1. Canva завантажить ваші файли у вигляді ZIP-архіву (оскільки файлів багато).

2. Знайдіть завантажений архів у папці "Завантаження" (Downloads) на комп'ютері.

3. Натисніть правою кнопкою миші на архів -> "Видобути все..." (Extract all).

4. Створіть на робочому столі (або в місці, вказаному вчителем) папку з назвою: Інформатика - Урок 15.

5. Перемістіть розпаковані 10-12 зображень у цю папку.