курси програмування для дітей безкоштовно

01. Шари у Photoshop (Layers)

Layers: Шари у Photoshop

На уроці ми дізнаємось як працюють шари у Photoshop. Ми створимо справжнього фруктового монстра, з багатьох шарів і розберемо форматування зображень.

Фруктовий монстр у Photopea | Дизайн для дітей

Photopea – що ти таке?

Photopea — це вебредактор для растрової графіки, який розробив українець Іван Куцкір. Він використовується для редагування зображень, ілюстрацій, вебдизайну або конвертації між різними форматами зображення. Цей редактор має в собі основні функції Photoshop, але є безкоштовним, а значить дасть нам чудову можливість опанувати основи роботи з растровою графікою.

Photopea

Векторна і растрова графіка

Растрова графіка — це як мозаїка з маленьких плиток (пікселів). Уявіть собі фотографію: якщо ви сильно її збільшите, вона стане “розмитою” або піксельованою, тому що складається з окремих маленьких точок (пікселів). Растрові зображення — це як малюнок із цеглинок “Лего”. Кожна цеглинка — це піксель. Прикладом растрової графіки є фото або зображення в форматах JPEG, PNG.

Різниця між векторною та растровою графікою | ITfuture

Векторна графіка — це малюнок, зроблений за допомогою інструкцій. Уявіть собі, що ви малюєте за допомогою геометричних фігур і ліній, які описуються математичними формулами. Якщо збільшити векторне зображення, воно залишиться чітким, бо воно будується з ліній, які завжди масштабуються без втрати якості. Приклад векторної графіки — це логотипи або ілюстрації у форматах SVG, AI.

Різниця між векторною та растровою графікою | ITfuture

Photoshop та Photopea краще працюють з растровою графікою. Але це не означає, що ця програма не розуміє векторні зображення. Втім на наших заняттях ми будемо створювати саме растрові зображення.

Векторна та растрова графіка Дизайн для дітей ITfuture

Налаштовуємо Photopea

Зайдіть на сайт з програмою: https://www.photopea.com/.

Спершу налаштуємо мову. В нашому курсі всі команди будуть даватись англійською, бо раз запам’ятавши назви меню і компонентів англійською, ви не матимете проблем з невірним перекладом. Та й англійська для ІТ – супер важливо. (Заодно підтягнемо знання з english-у.)

Тому обирайте меню More/Language/English. 😎

Як переключити мову у Photopea

Як працює меню Шари у Photoshop

Завантажте проєкт з гугл диска : ГУГЛ ДИСК З ФАЙЛАМИ. Зайдіть на перший урок і завантажте файл-заготовку. Там також є папка з окремими картинками, але поки вона не знадобиться.

1: Відкрийте скачаний файл File/Open. Ви побачите білий лист (поки що так і треба).

2: Ми будемо працювати з Шарами, а для того треба буде відкрити відповідне меню. Оберіть Window/Layers.

Як включити панель шарів layers у Photopea | Дизайн у Photopea для дітей | ITfuture

Меню Layers з’явиться справа. В ньому буде багато шарів з різними фруктами.

Шари Layers  | Дизайн у Photopea для дітей | ITfuture

3: Натисніть на квадратик поряд з піктограмкою фрукта. З’явиться зображення ока і ви побачите фрукт на білому полі. Око відповідає за видимість шару.

Це означає, що всі фрукти для нашого монстра вже є, вони розташовані на різних Шарах і поки відключені. Включіть кілька з них і подивитися, які фрукти з’являться.

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

ось так все починалося…

Фруктовий монстрик. Початок |  Шари Layers | Дизайн у Photopea для дітей

І такий красунчик вийшов у мене. А у вас ?

Створюємо фруктового монстра |  Шари Layers | Дизайн у Photopea для дітей

Робота з шарами

Порядок шарів: наше меню показує порядок шарів. Щоб змінити порядок шарів просто перенесіть картинку з шаром вище або нижче в меню.
Копіювати шар: натисніть правою кнопкою на шар і оберіть Duplicate Layer. Також працюють гарячі клавіші Ctrl+C та Ctrl+V, якщо ви стоїте на потрібному шарі.
Видалити шар: натисніть правою кнопкою на шар і оберіть Delete.

Трансформація картинки: розмір, поворот

Перемістити картинку: просто посуньте картинку у полі.
Змінити розмір: щоб змінити розмір натисніть Alt + Ctrl + T (якщо у вас Windows) або ж Option + Cmd + T (якщо Mac). Також можна зайти в меню Edit/Transform/Scale. Завершуємо зміну розміру натисканням Enter.
Повернути: під час зміни розміру виведіть курсор трохи за рамку, з’явиться стрілка з поворотом. Зажав мишку і рухаючи її можна почати повертати об’єкт. Також можна зайти в меню Edit/Transform/Rotate.
Відобразити по горизонталі чи вертикалі (віддзеркалити): в меню Edit/Transform/Flip Horizontally або Edit/Transform/Flip Vertically.

Масштаб

Наблизити або віддалити зображення: скористайся гарячими клавішами: Ctrl + “+” (Windows) або Cmd + “+” (Mac) — щоб наблизити.Ctrl + “-“ (Windows) або Cmd + “-“ (Mac) — щоб віддалити. Або Ctrl+Space – наблизити і Ctrl+Alt+Space – віддалити. (Space це пробіл)
Щоб посунути зображення: тримаючи натиснутою клавішу Space, натисніть на зображенні мишкою і утримуйте натискання перемішуючи курсор.


Історія

Дуже корисно вивести меню Історія. В ньому будуть по черзі видно всі кроки, які ви робили з зображенням. Якщо захочете відмінити якусь з команд, просто перемістіться на відповідний крок. Щоб відобразити це меню виберіть Window/ History.


Як зберегти проєкт у Photoshop

Кожен проєкт у Photoshop ми будемо зберігати двічі: як файл Photoshop, який можна буде відрити і він міститиме історію, шари і все ефекти і як картинку (картинку не можна буде редагувати). Це дуже важливо, бо файл проєкту psd дозволить продовжити роботу або виправити помилки пізніше. А картинка незмінна. Тож, нам треба обидва.

Щоб зберегти файл PSD: перейдіть у меню File/ Save as PSD. Оберіть назву й папку та натисніть Save. Надалі можете натискати просто Save, щоб додати нові зміни.

Щоб зберегти картинку: перейдіть у меню File/ Export as/ PNG або File/ Export as/ JPG. Перший формат підтримує картинки без фону, в другому ж фон обов’язковий.

Відео з поясненням англійською

Уроки програмування для дітей ускладнені завдання level up

Level UP! Шари у Photoshop

1: Додайте фото з інтернету до свого фруктового монстрика. Це може бути додаткова картинка з фруктом, овочем або щось інше. Шукайте картинки без фону (бо ми ще не навчилися прибирати фон). Картинки без фону можна вибрати через Google, якщо при пошуку вибрати Інструменти/Колір/Прозорі.

Готові створювати нові креативні дизайни? Тоді переходьте до нових уроків!

Залишити коментар

Ваша e-mail адреса не оприлюднюватиметься. Обов’язкові поля позначені *