Завдання 1. "Стильний мінімалізм: Створення фавікона"

Мета: Зрозуміти різницю між форматами та навчитися працювати з надмалими форматами (піксель-артом).

• Інструмент: Pixilart або Favicon.io.

• Легенда: Уяви, що ти створюєш власний бренд або блог. Тобі потрібно розробити фавікон — ту саму маленьку іконку, що відображається на вкладці браузера.

• Твоя задача:

  1. Створити малюнок розміром 32x32 пікселі.

  2. Використати лише 2-3 контрастні кольори (щоб на маленькому екрані було зрозуміло, що зображено).

  3. Зберегти результат у форматі .png або .ico.

• Питання на засипку: Чому для фавікона не варто використовувати формат JPEG?

Завдання 2. "Магія векторів: Логотип у стилі Google"

Мета: Освоїти основи векторної графіки (криві, шари, геометричні примітиви).

• Інструмент: Vectr або Figma.

• Легенда: Тобі замовили логотип для нового стартапу "EcoWave". Він має бути сучасним, масштабованим (векторним) і виглядати чітко на будь-якому екрані.

• Твоя задача:

  1. Використовуючи лише прості фігури (кола, квадрати) та інструмент "Перо" (Pen tool), створи абстрактну хвилю або листок.

  2. Навчися групувати об'єкти та змінювати їхній колір за допомогою HEX-кодів (наприклад, #2ecc71 для зеленого).

  3. Експортуй файл у форматі SVG.

• Чому це важливо: Спробуй збільшити свій логотип у 10 разів у редакторі. Чи змінилася якість?

Завдання 3. "Оптимізатор: Битва за швидкість завантаження"

Мета: Навчитися балансувати між якістю зображення та його вагою (важливо для SEO та швидкості сайтів).

• Інструмент: Squoosh.app (сервіс від Google для стискання).

• Легенда: Ти верстаєш головну сторінку сайту. У тебе є круте фото високої якості (наприклад, з Unsplash), але воно важить 5 МБ. Сайт вантажиться вічність!

• Твоя задача:

  1. Завантаж будь-яке якісне фото у Squoosh.

  2. Порівняй різні методи стиснення: WebP, MozJPEG та OxiPNG.

  3. Знайди "золоту середину": стисни фото так, щоб воно важило менше 200 КБ, але візуально не перетворилося на "кашу" з пікселів.

• Результат: Зроби скриншот порівняння "До" та "Після" з показниками розміру файлу у відсотках.

Таблиця форматів для довідки

Щоб тобі було легше орієнтуватися під час виконання, підготував шпаргалку: