Створення елементів для веб-сторінок. Розроблення дизайну та створення листівки в середовищі растрового графічного редактора за допомогою інструментів малювання.

Практичне завдання: Створення листівки та елементів для веб-сторінки.Створення елементів для веб-сторінки

Мета:

Навчити учнів працювати в растровому графічному редакторі (Adobe Photoshop, GIMP), опанувати корекцію кольору, створення елементів для веб-сторінок і розробку дизайну листівки.

Частина 1: Створення листівки

Крок 1: Створення нового документа

1. Відкрийте Adobe Photoshop або GIMP.

2. Натисніть Файл → Створити (File → New)

3. Встановіть розміри документа:

   • Ширина: 1200 пікселів

   • Висота: 800 пікселів

   • Роздільна здатність: 300 dpi (для якісного друку)

   • Фон: Білий або прозорий

4. Натисніть ОК

Крок 2: Додавання фону

1. Виберіть інструмент "Градієнт" (Gradient Tool) у панелі інструментів.

2. Натисніть на кольоровий квадрат у нижній частині панелі інструментів та оберіть два кольори для градієнта (наприклад, синій та білий).

3. Проведіть мишею по полотну, щоб створити плавний перехід кольорів.

Альтернативний варіант:

• Використайте готове зображення як фон.

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

• Масштабуйте зображення за допомогою Ctrl + T (Cmd + T на Mac).

Крок 3: Додавання основного зображення

1. Відкрийте зображення, яке хочете додати (наприклад, ялинку, подарунок, квіти).

2. Використайте інструмент "Швидке виділення" (Quick Selection Tool) або "Чарівна паличка" (Magic Wand Tool), щоб виділити об'єкт.

3. Натисніть Ctrl + C (Cmd + C на Mac), потім вставте зображення у свій документ (Ctrl + V).

4. Масштабуйте та розмістіть зображення за допомогою Ctrl + T.

Крок 4: Корекція кольору

1. Виберіть шар із зображенням.

2. Перейдіть у меню Зображення → Корекція → Рівні (Image → Adjustments → Levels).

   • Перемістіть повзунки, щоб змінити контрастність і яскравість.

3. Перейдіть у Зображення → Корекція → Насиченість (Hue/Saturation).

   • Змінюйте повзунки для отримання бажаних кольорів.

Крок 5: Додавання тексту

1. Виберіть інструмент "Текст" (Type Tool, клавіша T).

2. Натисніть на робочу область і напишіть текст (наприклад, "З Новим роком!").

3. Виберіть шрифт, колір та розмір у верхній панелі інструментів.

4. Додайте ефекти:

   • Натисніть Шари → Стиль шару (Layer → Layer Style)

   • Оберіть Тінь (Drop Shadow) або Обведення (Stroke).

Крок 6: Додавання декоративних елементів

1. Інструмент "Кисть" (Brush Tool, клавіша B)

   • Виберіть м'яку кисть та білий колір.

   • Намалюйте світлові ефекти або сніжинки.

2. Інструмент "Фігури" (Shapes)

   • Намалюйте зірки, стрічки, кульки.

   • Налаштуйте їхній колір та розташування.

Крок 7: Завершення роботи

1. Переконайтеся, що всі елементи гармонійно розташовані.

2. Збережіть роботу:

   • PSD (для подальшого редагування).

   • PNG або JPEG (для друку).
     

   • Завантажте файл до уроку

Частина 2: Створення елементів для веб-сторінки

Крок 8: Створення банера

1. Файл → Новий документ

   • Розмір: 1200 × 400 px (або адаптивний під сайт).

2. Використайте елементи з листівки:

   • Копіюйте фон, текст або ілюстрації.

3. Додайте текст:

   • "Завантажити вітальну листівку!"

4. Оптимізуйте розмір файлу:

   • Файл → Зберегти для вебу (Save for Web, Ctrl+Shift+Alt+S)

   • Виберіть формат JPEG (висока якість, але стиснутий розмір).

Крок 9: Створення кнопки

1. Файл → Новий документ

   • Розмір: 300 × 100 px.

2. Виберіть інструмент "Прямокутник із закругленими кутами" (Rounded Rectangle Tool).

3. Оберіть градієнтний колір.

4. Додайте текст "Завантажити" (інструмент Текст).

5. Додайте тінь: Шари → Стиль шару → Тінь.

6. Збережіть як PNG (із прозорим фоном).

Крок 10: Створення іконок

1. Файл → Новий документ

   • Розмір: 100 × 100 px.

2. Намалюйте прості іконки (наприклад, подарунок або дзвіночок).

3. Додайте контур та тінь для об’ємності.

4. Збережіть у форматі PNG.
   
   ЗАвантажити файл до уроку

Фінальний етап: Завершення проєкту

1. Переконайтеся, що всі зображення готові до використання.

2. Завантажте файли в папку, підготуйте для презентації.

3. Використайте веб-банер та кнопки для публікації в соцмережах або на сайті.

Результат:

✅ Листівка у форматі PNG/JPEG
✅ Банер для веб-сторінки
✅ Кнопка для завантаження
✅ Іконки для сайту

Додаткове завдання:

Створити анімований банер у GIF-форматі, використовуючи Кадри анімації (Timeline Animation) в Photoshop.