Центр професійного розвитку
педагогічних працівників
Вінницької міської ради

Події

Докладно про...

Події

Докладно про...

19

/04/24

15:30

Майстер-клас

Шар (російською  "Слой", англійською "Layer ") - глобально важливе поняття як для звичайного образотворчого мистецтва (передній, задній, середній план картини, створення ефекту об'єму  на площині і.т.д.) так і для комп'ютерних графічних  технологій (концепція шару, дипетчер шарів, властивості шарів, видимість шарів тощо). На прикладі пакету графічних  інструментів MS Office ми розібрали ці концепції.

Для початку ми  відкриємо нову презентацію PowerPoint (з таким же успіхом ми могли б відкрити новий документ MS Word, нову публікацію MS Publisher або нову таблицю MS Excel: в усіх застосунках пакету MS Office графічні пакети ідентичні)  та  почергово вставимо на чистий слайд  синій овал, червоний скруглений прямокутник та зелену зірку. Зрозуміло, що зелена зірка буде в найвищому шарі бо вона з'вилась останньою - це логічно. Але інколи фігури не перетинаються і побачити наявно хто вище, а хто нижче важко. Тому існує дипетчер об'єктів (в MS Office він називається "Область виділення" ). в якому ми можемо побачити назв всіх фігур  у вигляді списку в я кому вища фігура знаходиться вище по списку. Див.малюнок нижче.

Тепер ми можемо перетаскуванням цих назв (які, в свою чергу, ще можна змінювати) вище або нижче, змінювати порядок фігур по висоті. Так на представленому вище малюнку ми перенесли мишкою синій овал у верхній шар малюнку. 

Дуже корисна можливість  налаштування видимості шару. Вона необхідна тоді, коли верхні шари перекривають нижні, створюючи при цьому "сліпі зони". Наприклад на малюгнку нижче ми сховали  синій овал натиснувши на символ "ока" поруч з назвою фігури в списку диспетчера об'єктів.

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

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

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

Далі ми ознайомилися з ефектами, які можна застосувати до графічних об'єктів. Серед них: 

Тінь, дзеркальне відображення, підсвітку країв, згладження країв, рельєф країв та повороти фігури із затосуванням перспективи або готові комбінації раніше перечислених ефектів. Приємно відмітити, що можна застосовувати всі ці ефекти одночасно (нажаль,  не можна  повторювати той самий ефект кілька разів для одного об'єкта). На малюнку нижче ви бачите тінь "кинуту" на зелену зірку та  синій овал  з жовтою підсвіткою, зглаженим контуром та тінню.

В другій частині заняття ми знайомились із легендарною, без перебільшення, програмою - растровим редактором Photo Shop від корпорпції Adobe. Вона позиціонується як професійна в галузі роботи з растровою графікою, постійно оновлюється, володіє  величезним  арсеналом можливостей, має потужне комюніті (тобто, в інтернеті багато спільнот користувачів, тематичних форумів, відео-уроків, підручників, лайфхаків присвячених фотошопу тощо.) Таким чином, при бажанні, ви завжди зможете самостійно оволодіти нею.

На початку ми розглянули її інтерфейс. Нічого незвичного. Ліворуч панелі основних інструментів, зверху горизонтальне випадне  меню, праворуч також розгорнуті панелі інструментів, внизу стрічка стану.  Див мал. нижче. Починаємо з того, що створюємо новий шар ("фоновий шар"). Він як правило матиме один, за вибором, з стандартних форматів (наприклад, А4) і буде білого або іншого за вибором кольору або навіть прозорим.

На цьому тлі ми можемо щось намалювати інструментом "пензль". При цьому пензль може мати різні структури і нагадувати як дійсно пензль, так і перо фломастера, олівець, аеробалончик, слід від губки або навіть відбиток кленового листочка (вибір патерна за вами)

Натиском на відповідну кнопку народжуємо новий шар і малюємо на ньому. Зрозуміло, що він буде зверху над першим. Але праворуч ми бачимо диспетчер шарів. За допомогою того ж перетаскування ми можемо змінювати порядок шарів, що очевидно.

Кожне растрове зображення - об'єкт ми можемо довільно деформувати, повертати, масштабувати. Також, ми маємо величезний набір ефектів (тут вони називаються "стилями шару"), що можна застосувати до них . Перечисляти зараз їх марно. Вам варто ознайомитись з ними особисто. На малюнку нижче ми застосували до  жовтого шару (об'єкту) стиль "Тиснення". Так об'єкт ніби отримує бокову поверхню і перетворюється у медальйон. 

Далі ми розібрали цікаву вправу, яка, як на наш погляд, найкраще демонструє потужність  Adobe Photoshop. Уявімо жіночий портрет у якому є багато мілких деталей зачіски (кучері), До того ж колір волося малоконтрасний на сірому тлі. Як все це якісно обрізати, щоб можна було портрет вставити на нове тло?

Алгоритм роботи наступний.

  • Вставимо оригінальну світлину  в новий шар  Photo Shop.

  • Використаємо розбивку RGB  (трьох базових кольорів) зображення на  канали. Обираємо синій канал (на малюнку замість синього ми бачимо відтінки чорного), тому що в ньому кучері найбільш контрасні на  світлому тлі.

  • Дублюємоь цей канал в новий шар.

  • Використаємо інструмент "Рівні" (комбінація клавіш [Ctrl] + [L]). Рухаємо повзунки на графіку так, щоб отримати максимально котнтрасну картинку (темне робимо темнішим, світле світлішим)

  • Виділяємо чорний об'єкт клацнувши на ньому курсором та тримаючи при цьому клавішу Ctrl

  • Переходимо зі вкладки "Канали"  назад  у вкладку "Шари". Накладемо маску на  основний  шар. Виділення згідно якого буде створено маску беремо з підготовленого намами в попередньому кроці  ч/б  зображення. Для цього тиснемо на відповідну кнопку. (Оскільки попередньо був виділений чорний об`єкт, то він і буде використаний для побудови маски)
  • Як бачимо Зображення дівчини та її волосся були затемнені маскою. Це вийшло тому, що чорний колір маски перекриває, а білий пропускає зображення знизу. Тому інвертуємо дану ч/б маску (тобто, чорне і біле міняємо місцями). Для цього клацаємо на маску мишкою (виділяємо її), комбінацією клавіш  [Ctrl] + [I]  інвертуємо її і бачимо результат - дівчина майже вирізалась зі тла. Є, правда, незначні вади. Бліки світла на обличчі та руці, якісь залишки тла тощо. 

  • Почистити маску можна зосередившись на ній. Для цього клацнемо на масці затиснувши на клавіатурі клавішу Alt. Бачимо ч/б негативну маску. Беремо інструмент пензль. Обираємо тип пензля та білий колір - чистимо тіло від темних пікселів. Навпвки чорним пензлем чистимо тло. Отримуємо ультимативно ч/б маску

  • Тепер повернемося на оригінальний шар і бачимо ідеальну картинку. Але якщо підставити під це зображення якийсь контрасний однотонно зафарбований шар, то зразу стане ясно що не все так просто. Навколо зачіски світиться біле сяйво - галло. Як його позбутися?

  • Тут застосуємо знайомий вже нам кліпінг. Для цього, створюємо зверху над основним  шаром новий прозорий. Поміщаємо курсор по середині між двома шарами та тиснемо клавішу ...

Розглянемо приклади редагування міксування зображення "ручним" способом в (Adobe Photoshop) та з використанням сайту штучного інтелекту (BasedLabs AI Face Swapper,).

 

1. Етапи роботи в Adobe Photoshop:

- Відкриваємо програму та завантажуємо два зображення - один шар це шаблон для, а другий - це власне зображення

- Обираємо інструмент ласо та виділяємо своє обличчя та натисаємо комбінацію Ctrl+J

- Комбінація Ctrl+T виділяє виділений об'єкт, який ми переносимо на інший шар (на фото зліва). Робимо прозорість в діапазоні 60-70 відсотків

- Виставляємо своє обличчя відповідно оригінального шару і повертаємо прозорість прозорість на 100 відсотків

- Затискаємо Ctrl клікаємо на верхній шар із своїм зображенням, щоб побачити виділення шару

- Переводимо діяльність на верхній ряд інструментів вгорі обираємо такий алгоритм: SELECT - MODIFY - CONTRAST (обираємо 5 pxs) та клікаємо ОК. Переходимо на нижній шар (супермена), клікаючи по ньому, та видаляємо кнопкою DEL силует контурів верхного шару. Якщо контур під час видалення не видно - вимикаємо перегляд верхнього шару і ми побачимо чи правильно виконали цей етап він має бути такий, як на фото.

- Затискаємо кнопку Shift та клікаємо на два шари, щоб їх об'єднати 

- Переходимо вгорі в інструмент EDIT - обираємо - Auto Blend Layers та обираємо метод Panorama і клікаємо ОК.

  

- Кінцевий результат

2. Етапи роботи на платформі BasedLabs (BasedLabs AI Face Swapper)

- Для роботи обираємо основне фото на власне фото

- Заходимо на сайт через обліковий запис (gmail)

- Обираємо інструмент (Base Image) натискаємо на Change Image обираю фото супермена

-  Переходимо в (Target Image) та натискаємо на Change Image обираю своє зображення обличчя

- Натискаю Swap Face Instanty

- Результат завантажую натискаючи на слово вгорі фото Download, клікаю правою кнопкою миші та обираю "зберегти картинку як" та вказую шлях для зберігання.

 

Для обробки фото, зокрема ретушування шкіри використовуємо такі етапи та інструменти:

- Завантажуємо зображення

та створюємо дублікат шару комбінацією клавіш Ctrl+ або правим кліком миші наводимо на зображення, яке знаходиться з правої  сторони, та  з випадаючого меню обираємо інструмент - Dublicate Layer

- Виставляємо функцію Hard Light натискаючи на Normal  (для дуже проблемних фото можна обрати Vivid Light) та створюємо інверсію натискаємо комбінацією Ctrl +I  

- На панелі інструментів угорі обираємо таку послідовність Filter - Other - Hight Pass (діапазон радіуса 10 - 40pxs, який має бути таким, щоб було розмиття проблемних місць )

 - Наступний інструмент розмивання Гауса в такій послідовності Filter - Blur - Gausian Blur (0.1 - 3 pxs)

- Два попередні маніпуляції мають бути з верхнім шаром. Далі затискаючи Ctrl клікаємо на маску внизу та інвертуємо в чорний колір (правою кнопкою клікаємо по масці обираємо Rasrerize Vector Mask )

- Пензлик беремо білого кольору та обираємо місця які потрібно ретушувати

- Якщо підбір фільтрів щодо пікселізації був вірний - результат виправлення пензликом буде такий

 

Засобами графічних редакторів типу Adobe Photoshop, або MS Office створити зображення  з використанням кількох шарів. Тобто,  зображеня повинне складатись з інших зображень, що накладаються одне на одне.

В якості зображень ви можете використовувати:

  • вирізані по контуру портрети людей, або груп людей, дерева, будинки, транспортні засоби тощо (зверніть увагу на якість обробки граничних областей у випадку наявності мілких деталей, як то: кучеряве або розпущене волосся,  мілке листя, гілки тощо)
  • намальвані від руки кольорові області або  геометричні фігури 
  • довільні зображення взяті з інших джерел, як то: інтернет, скани друкованих світлин, фото з камер тощо,
  • Тексти

Використовуємо прозорість шарів та ефект кліпінгу, тобто вставка одного шару в контури іншого шару, Також можна спробувати засобами растрових редакторів  виправити вади шкіри, вставити лице одної людини  замість іншої, тощо. (подробиці у відео).

Готові роботи висилаємо  за адресою  metiska64@gmail.com

Бажаємо  творчих успіхів!

Матеріали заходу
Фотозвіт
Для професійних спільнот

Растрові редактори - це програми або інструменти, які використовуються для редагування та обробки растрових зображень. Растрові зображення складаються з пікселів, іноді їх ще називають "бітовими" зображеннями. У таких зображеннях кожен піксель має свої власні характеристики, такі як колір, яскравість і насиченість.

Растрові редактори мають можливість виконувати різноманітні операції з растровими зображеннями, включаючи:

  1. Коригування кольору і освітлення: Зміна колірної палітри, налаштування яскравості, контрасту та інших параметрів зображення.
  2. Видалення дефектів та ретушування: Усунення плям, подряпин, а також ретушування зображень для поліпшення їх зовнішнього вигляду.
  3. Обрізка та масштабування: Зміна розміру та пропорцій зображення, вирізання частини зображення, що не потрібні.
  4. Додавання тексту і графічних елементів: Вставка тексту, логотипів, малюнків та інших графічних об'єктів до зображення.

Комунальна установа
Центр професійного розвитку
педагогічних працівників
Вінницької міської ради

21050, м.Вінниця, вул. Мури,4
Тел: +38(0432) 67-32-53
E-mail: zprppvmr@galaxy.vn.ua,
cprpp.vin@gmail.com

Комунальна установа
Центр професійного розвитку
педагогічних працівників
Вінницької міської ради

21050, м.Вінниця, вул. Мури,4
Тел: +38(0432) 67-32-53
E-mail: zprppvmr@galaxy.vn.ua,
cprpp.vin@gmail.com

Створено на AVE.cms v3.28. Хостинг LIKT. Дизайн: хххххххххххх. Верстка: Мельник Тарас. Фото: Василь Медяний

ЦП КУ "ЦПРПП ВМР" - Вінниця - 2021

Категорії сайту
Актуально
Корисні покликання

Комунальна установа
Центр професійного розвитку
педагогічних працівників
Вінницької міської ради

21050, м.Вінниця, вул. Мури,4
Тел: +38(0432) 67-32-53
E-mail: zprppvmr@galaxy.vn.ua,
cprpp.vin@gmail.com

Комунальна установа
Центр професійного розвитку
педагогічних працівників
Вінницької міської ради

21050, м.Вінниця, вул. Мури,4
Тел: +38(0432) 67-32-53
E-mail: zprppvmr@galaxy.vn.ua,
cprpp.vin@gmail.com




Створено на AVE.cms v3.28 Хостинг LIKT
Дизайн: хххххххххххх Верстка: Мельник Тарас
Фото: Василь Медяний

ЦП КУ "ЦПРПП ВМР"
Вінниця - 2021

Про нас   
Календар подій   
Напрямки роботи   
Підвищення кваліфікації   
Професійні спільноти   
Дошкільна освіта   
Початкова школа   
Середня та старша школа   
Виховна робота   
Психологічна служба