Головна › Освіта › Як зробити пазл із фотографії? Урок Photoshop

Як зробити пазл із фотографії? Урок Photoshop

Шановні колеги! Дорогі друзі! Ми з вами працюємо в школі, у саду в такий час, коли паперовою ілюстрацією мало кого зацікавиш. Сучасні діти із задоволенням грають у комп'ютерні ігри, мають планшети. Зважаючи на своїх учнів, вони дуже люблять інтерактивні презентації, із задоволенням працюють на інтерактивній дошці. І я вже не думаю сучасного уроку без цих технічних засобів. Дуже багато презентацій я створюю сама, не тому, що вже створені погані, ні. Просто люблю все робити сама. І мої малюки з великим задоволенням складають пазли, урок математики, російської мови, літературного читання. Все залежить від ілюстрації, від завдань та анімації, яку ви додасте.

Я пропоную вашій увазі майстер-клас, який допоможе вам будь-яку ілюстрацію перетворити на пазл. Повірте, цим ви урізноманітнюєте свій урок, внесете до нього елемент цікавості, наочності та проблемності, тому що дитині треба буде скласти пазл, щоб отримати відповідь на поставлене запитання, закріпити наявні знання. А іноді просто й відпочити. І так сьогодні ми з вами спробуємо створити презентацію - пазл на основі листівки

І в нас вийде такий пазл

Для роботи нам знадобляться шаблони пазлів. Я можу вам надати їх, якщо у вас їх немає.
Приступаємо до роботи.
1. Відкриваємо програму для створення презентацій Power Point, відкриваємо слайд, вибирає Макет - порожній слайд

2. Нам потрібна сітка, тому відкриваємо вкладку Виді вибираємо Сітка, лінійка.

3. Наступний крок: натискаємо праву кнопку миші, вибираємо Формат фону.

4. Вибираємо Малюнок-Файл

5. Натиснувши кнопку- Файл, вибираємо малюнок, який ви підготували та який буде пазлом.
(Я приготувала на Робочому столі листівку)

6. Давимо кнопку Вставити.Малюнок з'являється на слайді презентації

7. Зараз нам треба малюнок накрити прямокутником, щоб він не відображався на слайді.
Для цього вибираємо Вставка - Фігури- Прямокутник.

8. Розтягуємо його на весь слайд, таким чином закриваючи зображення на ньому.

9. Вибираємо Формат фігури-Заливка – білий колір. Змінюємо колір прямокутника на білому.

10. Забираємо межі малюнка. Там же Формат малюнка-Контур фігури-Немає контуру

11. Настав час вставити шаблон пазла. Він має бути приготовлений заздалегідь. Відкриваємо шаблон, правою кнопкою миші - Копіювати

12. Вставляємо шаблон у Презентацію- Вставити

13. Слайд має виглядати так

14. Зараз ми за межі шаблону розтягуємо його до розмірів слайдів.

15. Тепер натискаємо правою кнопкою миші, вибираємо - Групувати - Розгрупувати

16. Знову натискаємо праву кнопку миші, вибираємо Формат об'єкту.

17. У вкладці, що випала, вибираємо Заливка фону. Вам має бути видно наш малюнок, а на ньому контури пазла.

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

Майже пазл готовий, тільки його частини, пазли, згруповані. Залишається розгрупувати їх і ви можете працювати з пазлом, що вийшов, на свій розсуд: додавати анімацію, щоб пазли по клацанню миші з'являлися на слайді при правильній відповіді на запитання, яке ви підготуєте: це можуть бути загадки, числові вислови, правила, словникова робота - що завгодно , за вашим бажанням.
Я хочу показати як додати анімацію до пазла. ви це можете робити по-своєму, обравши анімацію на свій смак.
І так
19. Розгруповуємо (права кнопка Групувати - Розгрупувати), щоб налаштувати анімацію.

Тепер частинки пазла рухливі.

20. Вибираємо Анімація - Налаштування анімації

21. Тепер треба виділити весь пазл Додати ефект

Я вибрала - Вхід-Виліт. Ви можете вибрати будь-хто.
Ця анімація буде у всіх шматочків пазла. Але для роботи з пазлом нам необхідно, щоб частини пазла з'являлися поступово по одному в ході виконання будь-яких завдань. Тому ми обираємо
Початок ефекту – після попереднього.

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

У мене 9, тому я дублюю слайд 9 разів

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

Я залишила 1. А решту з першого слайду всі частини пазла треба видалити.
Тепер переходимо до другого слайду: один шматочок пазла є, ви повинні вибратище один. Він може бути обраний будь-хто. Я взяла наступний. З нього теж знімається анімація, а інші частини видаляються. Тепер у вас на слайді 2 пазли.

Подібне необхідно зробити з рештою сімома частинками пазла.

Все, ваша презентація – пазл готова. Ваші дітки будуть у захваті! Додайте завдання та радуйте дітей.

Відкриваємо фотографію у Photoshop, і, перше, що нам потрібно зробити, це створити копію фонового шару цієї фотографії, щоб завжди мати під рукою незайманий змінами оригінал. Для цього треба лише натиснути комбінацію клавіш Ctrl+J. Якщо тепер ми подивимося в панель шарів, то побачимо в ній два наявні шари, фон та копію:

Хорошим тоном при роботі у Photoshop вважається надання шарам назв із описовими іменами. Імена шарів, що дають інформацію про шар, можуть бути не настільки важливими, коли ви працюєте не більше, ніж з кількома шарами, але не рідко бувають ситуації, коли в одному документі Photoshop використовуються 50, 100 і більше шарів, і якщо всі ваші шари мають назви типу "Layer 1", "Шар 56" або "Шар 83 Копія 4", то ви відчуватимете деякі труднощі.

Для зображення розміром 900 на 600 пікселів я застосував такі настройки:

Текстура (Texture) - Puzzle
Масштаб (Scaling) – 100%
Рельєф (Relief) - 9
Світло (Light) - Вгорі праворуч (Top Right)

Параметри показані на зображенні:

Натисніть OK, щоб застосувати фільтр. Ось як тепер виглядає мій робочий документ:

Основний ефект головоломки завершено, але давайте підемо далі і видалимо деякі з елементів, начебто пазл ще знаходиться на стадії розробки. Для цього нам знадобиться інструмент "Перо" (Pen Tool):

З допомогою "Пера" ми зробимо виділення навколо окремих частин головоломки, т.к. саме "Пером" найлегше побудувати криволінійні контури, набагато зручніше, ніж наприклад, інструментами групи "Лассо" (Lasso Tool або Polygonal Lasso Tool).

Виберіть окремий пазл і побудуйте навколо нього такий контур, використовуйте "Перо" в режимі "Контур" (Paths):

Після того, як ви закінчили створювати контур, перетворіть його на виділену область, натиснувши Ctrl + Enter:

Тепер виріжемо виділення на новий шар (зауважте, не скопіюємо, а виріжемо), для цього натискаємо комбінацію Ctrl+Shift+J. Панель шарів тепер виглядає так, зверніть увагу, на шарі "Pussle" з'явилася біла ділянка, це вирізаний сегмент:

Виділимо ще один довільний сегмент і просто видалимо його, натиснувши клавішу Delete:

Приберемо виділення, натиснувши Ctrl+D.

Таким чином, можна видалити або перемістити кілька пазлів головоломки.

І для завершення ефекту зробимо межу головоломки/ окреслену краями пазлів. Для цього за допомогою "Пера" окресліть всю картинку, як показано на малюнку. Межі контуру погано видно на скріншоті, тому я обвів контур помаранчевою лінією:

Перетворіть контур на виділення (Ctrl+Enter), інвертуйте виділену область (Ctrl+Shift+I) і видаліть зайве (Delete). В результаті у Вас вийде приблизно таке зображення:

Тепер залишилося лише змінити тло до смаку. Я застосував до шару "Background color" стандартний стиль шару "Накладення візерунка" (Pattern Overlay) з візерунком із стартового комплекту Photoshop та масштабом 50%.

Ну і для надання обсягу додамо шару "Puzzle" стиль шару "Тінь".

Крім того, мені довелося підчистити артефакти на крах шару Puzzle за допомогою
маски шару.

Ось що в мене вийшло в результаті:

У цьому уроці ми розглянемо простий спосіб створення пазла з фотографії Photoshop. Корисно знати, що Photoshop має спеціальний фільтр Texturizer з безкоштовною текстурою, створеною спеціально для цих цілей. У нашому уроці ми користуватимемося інструментом Pen Tool.

Ми будемо обробляти цю фотографію:

Оригінальний знімок

А ось як він виглядатиме у вигляді пазла:

Фотографія після створення спецефекту

Давайте почнемо!

Крок 1: Створюємо копію шару Background

Відкривши фотографію у Photoshop, насамперед створимо копію шару Background, в якому зараз знаходиться наш знімок. на Наразі, Це єдиний шар. Створивши його копію, ми зможемо робити будь-які дії, не завдаючи шкоди оригіналу, який зберігатиметься у шарі Background, до якого можна буде повернутися за необхідності. Найпростіший спосібзробити копію - натиснути Ctrl+J (Win)/Command+J (Mac). Після цього на панелі шарів у нас з'явився другий шар. Шар Background з оригіналом знаходиться внизу, а копія, автоматично названа Layer 1, розташовується вище:

Панель шарів із новим шаром «Layer 1» над шаром Background.

Крок 2: Назвемо новий шар Puzzle.

При роботі у Photoshop вам не завадить звичка давати шарам імена, що говорять. Поки у вас всього кілька шарів, це може здаватися не особливо потрібним, але іноді в роботі накопичується 50-100 шарів або навіть більше, тому якщо всі вони будуть називатися «Шар 1», «Шар 56», «Шар 83 Копія 4» Ви можете заплутатися. Оскільки в «Layer 1» ми створюватимемо пазл, то, клацнувши прямо на ім'я шару, назвемо його «Puzzle»:

Змінюємо назву шару з Layer 1 на Puzzle

Натисніть клавішу Enter (Win) /Return (Mac), щоб ввести нове ім'я.

Крок 3: Під шаром Puzzle додаємо новий порожній шар

Тепер додамо під шаром Puzzle новий шар (він буде розміщуватися між Puzzle і Background). У теперішній моменту панелі шарів вибрано шар «Puzzle». Про це говорить його синє підсвічування. Зазвичай при додаванні нового шару в Photoshop він автоматично розташовується над виділеним шаром, тому якщо клацнути по іконці New Layer, яка знаходиться в нижній частині панелі шарів, зараз, то новий шар виявиться вище шару Puzzle. Натисніть іконку New Layer, утримуючи Alt (Win) / Option (Mac):

Кнопки Ctrl/Command дають команду додавати новий шар під тим, який активний зараз. Новий порожній шар відобразився на панелі шарів. Він знову отримав назву Layer 1 і розташовується між Puzzle і Background layer:

Між Puzzle і Background з'явився новий порожній шар

Крок 4: Заллємо новий шар чорним кольором

Цей шар стане фоном для нашого спецефекту, і як колір фону ми поставимо чорний. Принаймні найближчим часом. Іншими словами, заллємо шар чорним кольором. У Photoshop для цього є спеціальна команда, яка називається Fill. Її можна знайти у меню Edit у верхній частині екрана. Відкривши його, виберіть Fill:

Відобразиться діалогове вікно Fill. У опції Contents у верхній частині цього вікна виберіть чорний колір (Black) і натисніть OK, воно закриється.

Поки ви не бачите змін, тому що шар Puzzle в даний момент приховує з вигляду все інше, але на мініатюрі шару Layer 1 в панелі шарів видно, що він тепер залитий чорним кольором:

Мініатюра шару "Layer 1" залита чорним

Назвемо новий шар "Background color"

Крок 5: Знову переходимо в шар Puzzle

Тепер ми візьмемося малюванням самого пазла, але для цього потрібно вибрати відповідний шар. У нас зараз активний шар «Background color», а потрібен «Puzzle», так що клацніть на його назві в панелі шарів:

Виберіть «Puzzle» у панелі шарів

Тепер ми готові створити пазл!

Крок 6: Відкриваємо діалогове вікно Texturizer

Як ми вже сказали на початку уроку, завдяки наявності у Photoshop спеціальної текстури нам практично нічого не доведеться робити. Хоча ця текстура вже є на вашому жорсткому диску, у Photoshop вона ще не завантажена принаймні за замовчуванням. Нам доведеться зробити це самим, але спочатку потрібно відкрити фільтр Photoshop Texturizer, для чого в меню Filter у верхній частині екрана виберіть Texture, а потім Texturizer:

Відкриваємо Filter > Texture > Texturizer

Крок 7: Завантажуємо текстуру Puzzle

Відкриється велике діалогове вікно Texturizer: ліворуч буде вікно попереднього перегляду, а праворуч опції фільтра. Треба завантажити текстуру Puzzle, яка з'явилася у вас на жорсткому диску при установці Photoshop. Для цього натисніть на стрілочку праворуч від віконця вибору текстури – з'явиться меню з єдиною опцією: Load Texture (завантаження текстури). Виберіть її:

Натискаємо на стрілочку праворуч від віконця вибору текстури та вибираємо опцію «Load Texture»

Відкриється діалогове вікно Load Texture, де можна вибрати текстуру. Потрібна нам текстура Puzzle знаходиться в директорії Photoshop - там, куди ви його встановлювали. На PC (Windows) за промовчанням це диск C. Відкрийте його, потім - папку Program Files. У ній ви знайдете папку Adobe, а в ній – папку Photoshop. Конкретна назва папки залежить від вашої версії Photoshop. Якщо ви працюєте у Photoshop CS3, встановивши його в стандартну папку, то папка з програмою буде знаходитися за адресою C:\Program files\Adobe\Photoshop CS3.

Якщо у вас Mac, все трохи простіше. Папка Photoshop знаходиться на жорсткому диску директорії Applications. Але, знову ж таки, конкретна назвапапки залежить від версії Photoshop.

Знайдіть та відкрийте цю папку. У ній є папка Presets. Відкрийте її та знайдіть папку Textures. У ній перебувають усі встановлені текстури Photoshop. Вибір досить великий, але для нашого спецефекту знадобиться лише текстура Puzzle. Клацніть на ній і завантажте, натиснувши кнопку Load.

Крок 8: Налаштовуємо опції текстури

Після завантаження текстури Puzzle в опції Texture діалогового вікна Texturizer має бути вибрано Puzzle. Якщо цього з якоїсь причини не сталося, виберіть текстуру Puzzle зі списку. Потім, орієнтуючись на вікно попереднього перегляду, розташованого зліва, відредагуйте опції текстури. Налаштування в першу чергу залежать від оригінальної фотографії та бажаного розміру шматочків пазла. Ми хочемо зробити елементи пазла якнайбільше, так що опцію Scaling збільшимо до 200%. Опція Relief, що знаходиться нижче, визначає рельєфність шматочків пазла. Встановимо значення 6. Знову ж таки, ви можете зробити і по-іншому. І, нарешті, опція Light, що визначає розташування джерела світла на вашому паззлі. Виберемо правий верхній кут (Top Right):

Коли ви натиснете OK, діалогове вікно закриється, і на вашій фотографії з'явиться текстура. Ось що вийшло у нас:

Головне ми зробили, але пропонуємо прибрати кілька елементів, щоб здавалося, ніби збирання ще в процесі.

Крок 9: Вибираємо інструмент Pen Tool

Ми дійшли до тієї частини уроку, в якій важливо вміння користуватися інструментом Pen Tool у Photoshop. Це пов'язано з тим, що нам доведеться обводити окремі шматочки пазла, а вони дуже рельєфні. Можна спробувати виділити їх за допомогою іншого інструменту, наприклад Lasso Tool або Polygonal Lasso Tool, але виглядати це буде, швидше за все, недбало. А інструмент Pen Tool спеціально призначений для малювання кривих ліній, і результат буде набагато кращим.

Якщо ви вже добре освоїли Pen Tool, то цей урок не представить вам праці, оскільки зрозумівши, як працює цей інструмент, працювати з ним дуже просто. Перш ніж скористатися інструментом Pen Tool, його потрібно вибрати, так що візьміть його з панелі інструментів, або просто натисніть букву P на клавіатурі:

Крок 10: У панелі опцій вибираємо "Paths"

Вибравши інструмент Pen Tool, перевірте, чи вибрано в панелі опцій у верхній частині екрана опція Paths, оскільки ми малюватимемо контур, а не векторну фігуру і не фігуру на основі пікселів:

У панелі опцій вибираємо "Paths"

Крок 11: Обводимо контур навколо якогось шматочка пазла

За допомогою Pen Tool обведемо будь-який шматочок пазла. Ми ніби виріжемо його з картинки, створивши відчуття, ніби він завис у повітрі над картинкою і ось-ось стане на місце. Вибирайте будь-який шматочок. Візьмемо той, що знаходиться над правим оком хлопчика (для глядача він ліворуч). Обводьте його, додаючи опорні точки та маркери напряму, доки не отримаєте цілий контур. Можна збільшити масштаб, натиснувши Ctrl + пробіл (Win) / Command + пропуск (Mac) - тимчасово активізується інструмент Zoom Tool, і, зробивши кілька клацань по шматочку, ви можете збільшити його до зручного розміру. Можливо, на скріншоті контур видно не надто добре, тому ми обведемо його кружечком:

Крок 12: Перетворюємо контур на виділення

Намалювавши контур навколо одного шматочка, натисніть Ctrl+Enter (Win)/Command+Return (Mac). Тепер суцільний контур перетворився на контур виділення:

Крок 13: Переносимо виділений шматочок в окремий шар

Виріжемо виділений шматочок пазла з шару Puzzle і перенесемо його в окремий шар, після чого на його місці в шарі Puzzle залишиться дірка. У панелі шарів досі має бути обраний шар Puzzle. У меню Layer у верхній частині екрана виберіть New та Layer via Cut:

Виділення вирізається з шару Puzzle і переноситься у власний шар, який з'явився в панелі шарів над Puzzle. Шматок тепер знаходиться у верхньому шарі, який Photoshop знову назвав "Layer 1". Ми дамо йому нове ім'я - First puzzle piece:

Обведений шматочок пазла тепер знаходиться в окремому шарі над шаром «Puzzle»

Крок 14: Переміщуємо та повертаємо шматочок пазла за допомогою Free Transform

Розташуємо шматочок пазла так, ніби він ось-ось стане на місце. Запустіть інструмент Photoshop Free Transform, натиснувши Ctrl+T (Win) / Command+T (Mac), і навколо шматка пазла з'явиться прямокутник із маніпуляторами. Клацнувши зовні прямокутника, поверніть його. Потім натисніть усередині прямокутника та за допомогою миші перемістіть його в інше місце. Оскільки глядачеві має залишатися зрозуміло, де цьому шматочку місце, не повертайте його надто сильно і не відсувайте надто далеко.

Зверніть увагу, що ділянка, де цей шматочок знаходився раніше, тепер залита чорною. Це пов'язано з тим, що ми проробили в шарі Puzzle дірку, крізь яку проступає чорний шар Background color:

Завершивши роботу, натисніть Enter (Win) / Return (Mac), щоб прийняти зміни та вийти з Free Transform.

Крок 15: Додаємо тінь

Щоб вирізаний шматочок виглядав об'ємнішим і здавалося, що він ширяє в повітрі над пазлом, можна додати тінь. Натисніть на іконку Layer Style в нижній частині панелі шарів і виберіть зі списку варіант Drop Shadow:

У списку стилів шарів вибираємо "Drop Shadow"

Відкриється діалогове вікно Layer Style, опції Drop Shadow знаходяться у середній колонці. Зменшимо значення Opacity для тіні приблизно до 60%, щоб вона була не надто темною. Заберіть галочку перед Use Global Light та встановіть кут (Angle) 120°. Збільште показник Distance приблизно до 16 пікселів, і Size теж приблизно до 16 пікселів. Як завжди, у кожному конкретному випадку ці показники можуть змінюватись:

Закінчивши, натисніть OK, і діалогове вікно Layer Style закриється. Ось як виглядає наша фотографія після того, як ми зробили тінь:

Крок 16: Знову переходимо в шар Puzzle

Один шматочок ми вирізали і як би вийняли його з пазла. Інший пропоную прибрати повністю. У нас має бути обраний шар «Puzzle» - клацніть на його назві в панелі шарів:

Вибираємо шар «Puzzle»

Крок 17: За допомогою Pen Tool малюємо контур навколо іншого шматочка пазла

Так само обведіть інструментом Pen Tool ще один шматочок на вибір:

Крок 18: Перетворюємо контур на виділення

Як і минулого разу, натискаємо «Ctrl+Enter» (Win) / «Command+Return» (Mac) і робимо з контуру виділення:

Крок 19: Видаляємо виділену ділянку

Цей шматочок пазла ми просто видалимо, натиснувши Delete на клавіатурі. Шматок зникне, а в шарі Puzzle утворюється ще одна дірка, крізь яку видно чорний колір фону:

Щоб усунути контур виділення, натисніть Ctrl+D (Win) / Command+D (Mac). Ось що вийшло у нас після видалення одного шматочка:

Видаліть ще кілька шматочків або залишивши їх парити над фотографією (Кроки 11-15), або ж прибравши їх повністю (Кроки 16-19). Вирізаючи чи видаляючи кожен новий шматочок, завжди повертайтеся до шару «Puzzle».

Так виглядає наш пазл без кількох деталей:

Крок 20: Обводимо контур по краю пазла (за бажанням)

Останні кроки виконувати не обов'язково, але ми хочемо зробити цікаву рамку, прибравши шматочки пазла, що потрапили на межу кадру. Якщо у вас є бажання зробити також, потрібно за допомогою Pen Tool намалювати нерозривний контур на межі тих елементів, які проходять по межі кадру, як у мене. Оскільки на скріншоті такий контур видно не дуже добре, виділимо його жовтим кольором:

Крок 21: Перетворюємо контур на виділення

Закінчивши, натискаємо Ctrl+Enter (Win) / Command+Return (Mac) і робимо з контуру виділення:

Натиснувши Ctrl+Enter (Win) / Command+Return (Mac) ми зробили з контуру виділення

Крок 22: Інвертуємо виділення

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

Тепер виділено всі шматочки, що лежать по краю:

Крок 23: Вилучаємо краї

Тепер у нас виділені ті елементи пазла, що проходять краєм. Переконавшись, що в панелі шарів виділено шар Puzzle, видаліть їх за допомогою кнопки Delete. Щоб усунути контур виділення, натисніть Ctrl+D (Win) / Command+D (Mac).

Якщо вам здається, що біле тло буде краще чорного, виберіть шар «Background color» і в меню Edit у верхній частині екрана виберіть Fill. Відкриється діалогове вікно. У меню Contents замість чорного кольору виберіть білий (White) і закрийте вікно, натиснувши ОК.

Щоб змінити колір фону на білий, відкриваємо шар «Background color» і вибираємо команду Fill в меню Edit, а у вікні вибираємо White в опції Contents

Фон стає білим:

Крок 24: Додамо тінь від усього пззла (за бажанням)

Це потрібно лише в тому випадку, якщо ви змінили колір фону з чорного на білий. Пропонуємо додати легку тінь від пазла. Якщо фон у вас залишився чорним, тінь на ньому не буде видно, тому цей крок можна пропустити. Щоб зробити тінь, в панелі шарів вибираємо Puzzle, потім клацаємо по іконці Layer Style, яка знаходиться в нижній частині панелі шарів, і в списку вибираємо Drop Shadow:

Переходимо в шар Puzzle, натискаємо на іконку Layer Styles і вибираємо Drop Shadow

Знову відкриється діалогове вікно Layer Style, де опції Drop Shadow знаходяться у середній колонці. Opacity знижуємо до 60%, щоб тінь була не дуже яскравою, прибираємо галочку перед Use Global Light, а значення Angle задаємо 120 °. Інші опції можна залишити, як є: