Заповнений водою скляний текст поєднує прозорість і рух для вражаючого ефекту. Ідеально підходить для цифрових проектів, таких як рекламні банери або графіка для соціальних мереж, ви можете створити і анімувати цей ефект у Photoshop. Використовуючи стилі шарів, маски та анімацію на часовій шкалі, ваш текст привертатиме увагу завдяки реалістичному заповненню водою та плавному руху. У цьому уроці я крок за кроком покажу вам, як створити анімований текст на склі, заповнений водою. Давайте почнемо і втілимо ваш текст у життя!
1. новий документ
Почнемо зі створення нового документа розміром 2090 x 1000 пікселів.
Потім перейдемо на сайт sxc.hu, щоб знайти наше фонове зображення. Ми просто вводимо наступний номер зображення в маску пошуку: 1327434.
Потім ми натискаємо на зображення і перетягуємо його в наш документ Photoshop.
Можливо, нам доведеться трохи збільшити масштаб зображення (Ctrl+T ), щоб воно помістилося на нашому робочому полі.
2. створюємо текст
Тепер ми пишемо текст, на якому хочемо створити ефект. Ми використовуємо колір #dbdbdb, розмір 300 Px і шрифт "FutonCondensed" жирним шрифтом. Інший жирний шрифт також підійде. Нам просто потрібно багато місця, щоб вода чітко виділялася.
Дублюємо текстовий шар і перейменовуємо обидва шари. Нижній називаємо "bottom", а верхній - "top".
3. Ефекти шару для "нижнього" шару
Двічі клацніть на "нижньому" шарі і додайте наступні стилі шару:
- Падаюча тінь:
| Колір | #707070 |
| Кут | 120°, деактивуйте "Глобальне світло" |
| Відстань | 1 Px |
| Розмір | 10 Px |
- Тінь всередину:
| Кут | Вимкнути "Глобальне світло" |
| Відстань | 0 Px |
| Розмір | 10 Px |
| Контур | Завантажте контур "Water 1", натиснувши на стрілку поруч із контуром, а потім на маленьку стрілку праворуч, потім на Завантажити контури і виберіть "water-1.shc". |
- Згладжений край і рельєф:
| Розмір | 10 Px |
| Розмиття | 3 Px |
| Затінення | 120°, деактивувати "Глобальне світло", висота 11° |
| Контур | Завантажте контур "Вода 2", натиснувши на стрілку поруч із контуром, а потім на маленьку стрілку праворуч, потім на " Завантажити контури " і виберіть "water-2.shc". |
Проміжний результат:
- Згладжений край і рельєфний контур:
| Згладжений | Встановіть прапорець |
| Контур | Завантажте контур "Вода 3", натиснувши на стрілку поруч із контуром, а потім на маленьку стрілку праворуч, потім на Завантажити контури і виберіть "вода-3.shc". |
| Діапазон | 100% |
Проміжний результат (попередньо шар "top" має бути вимкнений):
Встановлюємо непрозорість "верхнього" шару на 0%, щоб згодом було видно лише ефекти шару.
Потім двічі клацніть на "верхньому" текстовому шарі трохи правіше і встановіть наступні ефекти шару:
- Тінь всередину:
| Кут | Деактивуйте "Глобальне світло" |
| Відстань | 0 Px |
| Розмір | 7 Px |
| Плавний | Поставте галочку |
| Контур | Завантажте контур "Water 4", натиснувши на стрілку поруч із контуром, а потім на маленьку стрілку праворуч, потім на Завантажити контури і виберіть "water-4.shc". |
Проміжний результат:
- Згладжений край і рельєф:
| Розмір | 12 Px (пізніше ви можете поекспериментувати з 24 Px для ще більшої пластичності) |
| Розмиття | 2 Px |
| Затінення: | Деактивуйте 120° "Глобальне світло", висота 16° |
| Контур | Завантажте контур "Water 5", натиснувши на стрілку поруч із контуром, потім на маленьку стрілку праворуч, потім на Завантажити контури і виберіть "water-5.shc". |
Проміжний результат:
- Згладжений край і рельєфний контур:
| Контур | Завантажте контур "Water 6", клацнувши на стрілку поруч із контуром, потім на маленьку стрілку праворуч, потім на Завантажити контури і виберіть "water-6.shc". |
| Діапазон | 100% |
Проміжний результат:
5. залийте текст водою
Тепер візьмемо інструмент "Прямокутник"...
... і малюємо прямокутну фігуру, яка покриває нижню половину тексту.
Колір має бути #4594ab. Цей новий шар має бути розташований між двома текстовими шарами "знизу" і "зверху".
6. встановлюємо перші опорні точки
Тепер візьмемо інструмент "Додати опорну точку"...
... і встановлюємо опорні точки на зовнішніх краях кожного символу.
7. створити хвилю
Після цього ми встановлюємо більше опорних точок всередині символів.
Використовуючи інструмент прямого виділення, ми трохи переміщуємо їх вгору і вниз, щоб створити хвилю. Якщо точок занадто багато, ми можемо видалити їх ще раз за допомогою інструмента видалення опорних точок.
Проміжний результат:
8. видаляємо контури
Далі ми растеризуємо шар з прямокутником , тому спочатку дублюємо його, приховуємо нижній шар, потім клацаємо правою кнопкою миші на копії і вибираємо " Растеризувати шар" (Rasterise layer) .
Натискаємо клавішу Ctrl і, утримуючи її, натискаємо на іконку в палітрі шарів "нижнього" текстового шару, щоб створити виділення навколо тексту.
Потім натискаємо Ctrl+Shift+I, щоб інвертувати виділення, знову виділяємо копію фігури води і натискаємо Del. Після цього приховуємо нижній шар з фігурою води.
9. додаємо ефекти шару для води
Двічі клацніть на шарі води, щоб застосувати ефекти шару, які нададуть воді текстуру справжньої води.
- Падаюча тінь:
| Режим змішування | Множення, #4494ab |
| Деактивуємо загальне світло | Деактивувати |
| Інтервал | 3 Px |
| Захоплення | 12 % |
| Розмір заливки | 3 Px |
Проміжний результат:
- Тінь всередину:
| Спосіб заливки | Множення, #4494ab |
| Кут | -75° |
| Відстань | 0 Px |
| Розмір | 16 Px |
Проміжний результат:
- Згладжений край і рельєф:
| Розмір | 9 Px |
| Розмиття | 3 Px |
| Кут | 120°, деактивувати "Глобальне світло", висота 42° |
| Контур | Завантажте контур "Вода 7", натиснувши на стрілку поруч із контуром, а потім на маленьку стрілку праворуч, потім на " Завантажити контури " і виберіть "water-7.shc" |
| Режим глибини | Кольорове пост-експонування, #4295ac |
Проміжний результат:
Наступні налаштування створюють текстуру води:
- Структура:
| Візерунок | 9 Px |
| Масштаб | 101 % |
| Глибина | +356 % |
- Глянець
| Метод заливки | Помножити, #4293aa |
| розмір | 10 Px |
| Контур | форма широкого конуса, див. нижче. |
Проміжний результат:
Тепер вода трохи темна, тому ми додамо кольорове накладення. А щоб світліший колір не виглядав занадто пласким, ми також змінимо метод заливки. Специфікації такі:
- Кольорове накладення:
| Режим змішування | Жорстке світло, #24bce1 |
Проміжний результат:
- Накладення градієнта:
| Режим накладання | М'яке світло |
Проміжний результат:
Проміжний результат збільшений:
Щоб зробити решту тексту схожою на скляну банку, а не просто сірою, ми просто перейдемо до "нижнього" шару і встановимо непрозорість на 0%.
Остаточний результат:
10 варіантів: Зміна відтінку синього
Тут я хотів би показати вам, що ще можна зробити з текстом за допомогою декількох невеликих оптимізацій. Серед іншого, ми можемо змінити синій тон води, додавши до палітри шарів коригувальний шар Hue/Saturation (Відтінок/Насиченість )...,
перемістіть його на наш шар з фігурою води і створіть обтравочну маску, утримуючи клавішу Alt і клацнувши так, щоб ефекти впливали лише на цей нижній шар.
Ви можете надати воді трохи більшої глибини, трохи відрегулювавши повзунки.
11 Варіації: Анімація води
Інший варіант - продублювати шар води (спочатку застосуйте обтравочну маску, клацнувши на ній знову з клавішами Alt+ ), а потім двічі клацніть на пунктах "Згладити край" і "Рельєф", щоб отримати доступ до налаштувань стилю шару.
Потім перейдіть до Structure (Структура ) і змініть глибину до 280 %. Це трохи змінить рух води.
Потім ми знову дублюємо шар води, щоб змінити структуру вдруге...
... і встановлюємо значення глибини на 470 %.
Далі ми переходимо до Вікно>Анімація, щоб викликати панель анімації.
Потім натискаємо на наступний символ внизу, щоб отримати доступ до перегляду кадру:
Тепер клацніть двічі на іконку, показану нижче, щоб створити ще 2 кадри.
Потім вибираємо перший кадр, натиснувши на нього:
Потім ми приховуємо два нижніх шари води. Лише верхній з маскою має бути видимим.
Потім натискаємо на другий кадр внизу, приховуємо верхній і нижній шари води і показуємо лише середній. Додаємо коригувальний шар "Відтінок-насиченість".
Тепер робимо те ж саме з третім кадром, щоб було видно лише нижній шар води. Потім виділяємо всі 3 кадри і встановлюємо секунди на 0,2.
Зліва натисніть на трикутник поруч з пунктом Once (Один раз) і виберіть Unlimited (Необмежено ), щоб анімація не відтворювалася лише один раз, а повторювалася знову і знову.
Натисніть на кнопку відтворення, щоб побачити, як рухається вода. Тепер ми можемо зберегти це як GIF-файл, перейшовши до Файл>Зберегти для Інтернету і пристроїв.
Там ми вибираємо GIF і натискаємо Зберегти.
Щоб переглянути все це, краще перетягнути файл у браузер. Там він буде відтворений.
Отже, ми готові. Сподіваюся, вам сподобався цей воркшоп. Нижче ви можете побачити наш анімований кінцевий результат:
