Урок "Веб-дизайн. Створення анімованого банера для веб-сторінок"

Клас: 11. 

Тема: Веб-дизайн. Створення анімованого банера для веб-сторінок.

Мета уроку:

•      навчальна: сформувати в учнів знання про принципи побудови та види веб-банерів; навчити алгоритму роботи з генеративними моделями ШІ (Adobe Firefly) на основі референсів; опанувати техніку створення покадрової анімації у редакторі Photopea;

•      розвивальна: розвивати алгоритмічне та візуальне мислення через проектування промптів; сприяти розвитку естетичного смаку та навичок дизайну;

•      виховна: виховувати відповідальне ставлення до авторського права та цифрової етики; формувати навички професійної взаємодії при виконанні соціально значущих замовлень для громади ліцею.  Тип уроку: комбінований урок з використанням проєктних технологій. ПЗ: ChatGPT, Adobe Firefly, Photopea.com.

І. БЖД та вступне слово.

Повторення правил безпеки в комп'ютерному класі.

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

Ваші інструменти:

ü  ChatGPT: ваш копірайтер (генерує ідеї та промпти).

ü  Adobe Firefly: ваш цифровий художник (стилізує реальність).

ü  Photopea: ваша анімаційна студія (вдихає життя в картинку).

Завдання-виклик: сьогодні ми не просто вчимося створювати та анімувати, ми створюємо обличчя нашого ліцею для веб-простору. Готові банери ми будемо розміщувати на онлайн-дошку (для голосування та аналізу), а повністю анімований банер розміщуємо на власний сайт/блог. 

ІІ. Розглядаємо.

Що таке банер?

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

Три «золоті правила» успішного банера:

•      лаконічність: мінімум тексту — максимум сенсу. У користувача є лише 1-2 секунди, щоб вхопити суть.

•      акцент на бренді: логотип ліцею та фірмові кольори мають бути впізнаваними.  заклик до дії: текст, що спонукає: "Заходь!", "Вітаємо!", "Приєднуйся!".

Обговорення.

-     Які банери в Інтернеті вас дратують, а на які хочеться натиснути?

-     Введення поняття "Стоп-кадр": як змусити користувача зупинити погляд на сайті ліцею.  Аналіз форматів: якій формат (горизонтальний/вертикальний) підходить для нашого сайту?

Разом з учнями складаємо правила складання банеру:

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

Воно створює емоцію;

•      текст: має бути контрастним до фону. Ми використовуємо анімацію, щоб текст «з'являвся», не перекриваючи красу ілюстрації;

•      баланс: не перевантажуйте банер деталями. ШІ (Adobe Firefly) може згенерувати багато дрібниць, тому наше завдання — вибрати варіант, де є місце для тексту.

ІІІ. Практична частина (алгоритм роботи)

1.      Скласти запит, який збереже архітектуру ліцею, але додасть йому стилю (акварель, кіберпанк або софт-ілюстрація) за допомогою ChatGPT:

 

2.      Генерація основи (Adobe Firefly):

•       завантаження реального фото ліцею як референту;

•       використання промпту для стилізації (використовуємо наш згенерований промт);

•       додавання символічних елементів (наприклад, лелека як символ ліцею):

 

3.      Покроковий алгоритм у Photopea для створення простого банера – зображення та відповідного тексту.

Базовий рівень:

3.1.  Обираємо макет банера/завантажуємо його до програми:

 

3.2.  створюємо текст: увімкнути інструмент "Текст" (T) та написати першу частину вітання, наприклад, це може бути привітання, назва закладу….:

 

З текстом працюємо аналогічно, як і в текстовому редакторі: обираємо колір, розмір… І можна навіть використати деформацію тексту:

 

3.3.  перейменування шарів (з текстом) – для того, щоб програма розуміла, що це кадр з анімацією – _a_:

 

Аналогічно створюємо шари з відповідним текстом та перейменовуємо їх:

3.4.  Зберігаємо як анімацію: 

 

         Просунутий рівень.

3.5.  Спробуйте добавити, у вигляді анімації, герб нашого села – наприклад, він плавно з’являється на нашому банері. Для цього використаємо прозорість шарів.

Налаштування прозорості:

•      для першого (найнижчого) шару герба встановіть Opacity (Непрозорість) на 10%;

•      для другого — 30%;

•      для третього — 60%; 

•      для четвертого — 80%;

•      для останнього — 100%.

 

 

 

 

 

 

 

 

 

 

 

ІV. Аналіз результатів

•      порівняння: як ШІ зберіг архітектурні особливості ліцею, додавши художньої цінності;

•      онлайн-дошка (Padlet): виставляємо банери на голосування та для аналізу;  розміщуємо готовий банер на власний сайт/блог. Критерії оцінки:

ü  Впізнаваність: чи впізнали ліцей після ШІ-обробки?

ü  Динаміка: чи не заважає анімація читанню тексту?

ü  Естетика: чи хочеться клікнути на такий банер?