Практична № 13. Створення макета сайту в GIMP | Модуль Графічний дизайн | 10(11) клас | Потієнко

Інформатика : графічний дизайн (вибірковий модуль для учнів 10–11 класів, рівень стандарту) / Потієнко В. О.

Практична робота № 13. Створення макета сайту засобами GIMP.

1. Відкрийте графічний редактор GIMP.
2. Створіть тло сторінки.
а) Виконайте команду ФАЙЛ ⟶ Створити.
б) У вікні, що відкриється, перейдіть у список Шаблони, виберіть необхідний розмір (у пікселях), роздільну здатність залиште селі на дюйм.
3. Заповніть тло градієнтом.
а) Створіть прямокутну область відповідно до розміру зображення - виділіть усе.
б) Виберіть інструмент Градієнт і налаштуйте його параметри доберіть схожі за відтінками кольори заповнення і тла на свій і режим градієнта — лінійний, повтори — немає, установіть прапорець Розмиття.
в) Для створення вертикального градієнта проведіть посередині полотна вертикальну пряму.
4. Створіть заголовок.
а) Виберіть підкоманду Створити у меню Формат.
б) У списку Теми веб-сторінок виберіть тему Піднесене сяйво.
в) Виберіть у списку Заголовок.
г) У вікні, що відкриється, уведіть текст заголовка вебсторінки та налаштуйте інші параметри заголовка (тло заголовка виберіть прозорим чи не прозорим — на свій розсуд); підтвердьте д з’явиться вікно з новим зображенням.
5. Перейдіть до шару Тло та розлінійте його напрямними згідно зі створеним макетом вебсторінки (див. рисунок), щоб візуалізувати структуру сторінки.
а) Прослідкуйте, щоб біля команди Показувати напрямні (меню ВИГЛЯД) стояв прапорець (для зручності можна візуалізувати й сітку установивши прапорець біля команди Показувати сітку).
б) Відповідно до макета за допомогою горизонтальних напрям створіть горизонтальні області для заголовка (Header) та кнопкового меню (для «витягування» напрямних із горизонтальної лінійки; вказівник розмістіть в області лінійки, затисніть ЛКМ та перемістить указівник униз — із ним переміщується й напрямна; відпустіть кнопку — так ви позначите місце розміщення напрямної).
Макет вебсторінки
в) Додайте дві вертикальні напрямні («витягніть» їх із вертикальної лінійки): одну напрямну розмістіть на відстані 150 точок від лівого краю, а другу — на 250 від правого. Так розділимо заголовок на три області для логотипа, тексту заголовка — назви сайту, перемикачів мови.
г) Аналогічно вставте напрямні для решти сторінки.
6. Створіть зображення прапорців, які в подальшому будуть посиланнями для перемикання мови сайту; можна обмежитись українською та англійською мовами.
7. Аналогічно створенню заголовка (див. п. 4) створіть кнопку з текстом: виберіть підкоманду Створити у меню Формат; у списку Теми веб-сторінок виберіть тему й команду Кнопки та налаштуйте вигляд. Кількість кнопок із текстом відповідає кількості сторінок та їх назвам (наприклад, створіть три кнопки з назвами Головна, Сторінка 2, Сторінка 3). З’являться нові вікна із зображеннями кнопок.
8. Аналогічно створенню кнопок створіть зображення лінійки (останньою виберіть команду Лінійки); для відокремлення області заголовка від області меню налаштуйте розмір та колірну гаму лінійки. З’явиться нове вікно із зображенням лінійки — зафарбованої прямокутної ділянки.
9. За потреби створіть маркери або стрілки (вони потрібні для відокремлення, наприклад, пунктів меню або списку основних новин сайту).
10. Розмістіть створені зображення частин сайту на шарі Тло.
а) Оскільки кожний новий елемент створено в окремому вікні як самостійне зображення, скопіюйте зображення у файл із шаром Тло.
б) Об’єднайте шари.
11. Обов’язково збережіть всі створені елементи сайту в окремих файлах (назви вибирайте за призначенням збереженого зображення). Збережіть вигляд сторінки у файлі формату JPEG.
Зробіть висновок за результатами виконання роботи.

Завантажити текст практичного завдання: https://docs.google.com/document/d/11nHfaVYGlehe7yNHFU4C4Zdd9WS-tW5x/edit?usp=sharing&ouid=106477380033440999857&rtpof=true&sd=true

Посилання на посібник (Видавництво "Ранок"): https://www.ranok.com.ua/info-informatika-grafichniy-dizayn-vibirkoviy-modul-dlya-uchniv-1011-klasiv-riven-standartu-29412.html

Завантажити скрипт Теми веб-сторінок: https://drive.google.com/drive/folders/1TjayXA6VVI_-q1sF6bSLfn4dAqm1sBAU?usp=sharing

Підтримати мою роботу: https://donatello.to/TaskInformatics

Підтримати мою роботу на Patreon: https://www.patreon.com/TaskInformatics

Видео Практична № 13. Створення макета сайту в GIMP | Модуль Графічний дизайн | 10(11) клас | Потієнко канала Task Informatics