Робимо анімацію руху води в фотошоп

Завдяки урокам на нашому сайті ми вже вміємо створювати воду там, де її раніше не було.
Раджу почитати урок Відображення на воді.
Але цього замало! Будемо вчитися анімувати воду!

спосіб 1
Для початку попрацюємо вручну.
Спробуємо анімувати воду, вже наявну в наявності.
Розмір картинки приблизно 1000х750pix.

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

Робимо 3 копії шару Вода (всього виходить 4).
Тепер будемо малювати карту зміщення для створення руху води.
Відкриваємо новий документ. Його розмір приблизно такий же, як і оригінальне зображення (ширина фотографії скелі, з якої я працювала, приблизно 1000pix - новий документ для карти зміщення 1000х1000pix).

Спочатку створюємо частина хвилі будь-яким зручним для Вас способом (1).
Копіюємо вигин і поступово заповнюємо весь простір документа (2, 3, 4).
За допомогою Трансформації-Перспектива (Transform-Perspective) створюємо обсяг простору (5).

Від чого залежить ступінь спотворення? Від розташування лінії горизонту, від віддаленості об'єктів. В кожному випадку індивідуально. Я зробила спотворення по горизонталі більше 300%.
Обрізаємо документ (CropTool).

Тепер нижню частину хвиль трохи розмиємо (6). Я робила копію шару, розмивала її гауссова розмиванням, додавала маску шару і прибирала ефект розмиття на хвилях у горизонту, а потім прала чіткі хвилі на вихідному шарі в нижній частині. Можна використовувати режим швидкої маски (QuickMaskMode). Накласти чорно-білий градієнт, отримати виділення і його розмити. Робіть так, як Вам зручно. Якщо вийшло кілька шарів - злийте їх разом.
У нас вийшло одна фаза руху хвиль.

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

Обрізаємо документ (CropTool). І зберігаємо кожен шар в окремий файл де-небудь «недалеко» на компі))) в форматі ___. Psd. Всього вийшло 4 psd файлу. Я так їх і назвала: 1, 2, 3, 4.
Повертаємося до копій шару Вода основного робочого документа.
Створюємо виділення одного з шарів (клік по іконці + Ctrl) і застосовуємо фільтр Спотворення-Зміщення (Filter-Distort-Displace).

Розмір вертикальних і горизонтальних зсувів можна міняти - поекспериментуйте.
У вікні вибираємо карту зміщення під номером 1 (знаходимо на комп'ютері місце, де ми зберігали файли і вибираємо потрібний).

Те ж саме з іншими верствами, вибираючи наступну карту зміщення - по черзі: 2, потім 3, потім 4.
Копії шарів з Водою, після застосування фільтра, я так само назвала 1, 2. 3 і 4.
Для анімації все готово!

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

Перед збереженням анімації можна зменшити розмір документа (Image-ImageSize).
Інший варіант: можна використовувати готову карту зміщення (див. Урок Відображення на воді) ...

... і повторити всі маніпуляції зі створення фаз руху води. Тобто: зробити копії шару карти зміщення; збільшити копії по вертикалі з кожним разом все більше (наприклад: основний шар 100% по вертикалі, 1-ша копія - 104%, 2 - 108%, 3 - 112%, ступінь збільшення дивіться за обставинами); обрізати документ; зберегти шари в окремі файли формату ___. psd; застосувати фільтр Зсув до копій шарів Вода з різними картами зміщення; створити анімацію.
Принцип створення анімації той же.

Пропоную спробувати ще один варіант карти зміщення води.
Будемо анімувати іншу картинку. Її розмір 500х500pix.

Збільшуємо розмір документа (Image-CanvasSize), копіюємо основний шар, віддзеркалює по вертикалі, додаємо воду, знижуємо насиченість кольору. Я ще висвітлила центр інструментом Освітлювач (DodgeTool) і кордон між шарами розмила за допомогою маски шару.

Робимо дві копії шару води (всього виходить 3 шари) і створюємо карту зміщення.
Спочатку новий документ (розмір такої ж, як у исходника) з білим фоном.
Тепер застосовуємо фільтр Ескіз-Напівтоновий візерунок (Sketch-Halftone Pattern).

Налаштування підбирайте на власний розсуд.
Потім, до отриманої «зебрі», додаємо перспективу.

Якщо під час налаштування фільтра Ви поставили високий контраст можна розмити хвилі в нижній частині документа.
Зберігаємо файл в форматі ___. Psd.

Повертаємося до копій шарів води основного документа.
Створюємо виділення одного з шарів (клік по іконці + Ctrl).
І застосовуємо фільтр Спотворення-Зміщення (Filter-Distort-Displace), але для кожного шару з різними настройками горизонтального і вертикального розміру зсуву.
Можна так, все залежить від розміру вашого документа.

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

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

Отже, я використовувала картинку без вільного місця для води (1).
Збільшила документ (Image-CanvasSize), зробила дзеркальну копію шару по вертикалі, зменшила непрозорість, додала воду, кадрувати документ (2).
Потім отзеркаліть шар відображення по вертикалі і поєднала кордону води (3).
Зробила дві копії отзеркаленного шару з відображенням і кожен з 3-х шарів опрацювала плагіном (4).

При обробці плагіном різних копій відображення я міняла тільки один параметр (див. Скріншот) Waviness, який задає висоту хвиль: 15. 20 і 25. Шари я так і назвала: 15, 20 і 25.
Робимо видимим верхній оригінальний шар (5) і, за допомогою маски шару, створюємо нерівний край води (6).
Для анімації все готово.

Виходить 4-е кадру та зациклена рух.
1 - шар 15
2 - шар 20
3 - шар 25
4 - шар 20.
Час для всіх кадрів 0,5 сек.
Просто і швидко.

Ще рух листочків можна додати ......... (дві копії основного шару; фільтр пластика; 1 і 3 кадри - основний шар, 2 кадр - перша копія, 4 кадр - друга копія) ... фантазії і досконалість не має меж!

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

спосіб 3
Знайти в інеті і завантажити програму NatureStudio.
Це дуже проста у використанні програма для створення екранних заставок (і не тільки).

Принцип створення коливання хвиль простий: за допомогою маски, виділяється область води (1) і переміщенням повзунків встановлюються потрібні параметри її руху (2). Потім результат зберігається, як файл у форматі ___ .gif.

Чому я згадала про цю програму? Не треба довго возитися над створенням води (програма робить краще і швидше), а отриманий ___. Gif файл імпортувати фотошоп і там додати що-небудь ще цікавеньке. До речі і попередню підготовку для створення анімації зручно проводити в фотошоп для отримання більш правдоподібного ефекту.

Скажу, про всяк випадок, як імпортувати gif файл в Photoshop CS3 і CS4.
1.Меню: File-Import-Video Frames to Layers

2.Откриваем папку з потрібним ___. Gif файлом, але в списку дозволених форматів цього файлу немає, тому пишемо вручну його назву разом з розширенням (приклад: 1.gif). Файл відкрився.

4. Якщо з'являється таке повідомлення - треба встановити QuickTime.
Звичайно ж, вийшла анімацію зберігаємо в форматі .GIF (File-SaveforWebDevices). Якщо необхідно зменшивши документ перед цим.

Ну, на цьому, мабуть, і все!
Удачі в творчому процесі!

Спасибі за корисний урок.
Якщо вихідний файл в JPG форматі, то при збереженні його в GIF виходить
фото дуже низької якості. з випаданням квітів на великих ділянках, тому що GIF формат підтримує тільки 256 кольорів і непридатний для повнокольорових фотографій з мільйонами квітів.
Я спробувала анімувати воду в програмі NatureStudio. Для цього взяла фото, схоже на цю возлегает дамочку.
Анімація вийшла просто класна, а ось дамочка зблякла і посіріла в GIFе.
Хто-небудь стикався з такою ж проблемою? Є рішення? Поділіться, будь ласка. -)))

Дуже хороший урок =) Давно хотів навчитися) Ось така анімація у мене:
s009.radikal.ru/i308/1107/d0/efb4f9218b70.gif

доповнень:
23 370

передплатників:
70 000+

Робіт користувачів:
328 886

Інші наші проекти:

Реєстрація

Реєстрація через пошту