Rivalry2

HTML Diff

0 added 0 removed

Original 2026-01-01

Modified 2026-02-21

1 <a>#Руководства</a>

2 <ul><li>2 сен 2019</li>

3 <li>0</li>

4 </ul>Нестандартные визуальные эффекты помогут оживить ваш проект и выгодно его презентовать. Рассказываем о Liquid Effects.

5 vlada_maestro / shutterstock

6 Автор статей по дизайну. В веб-дизайн пришёл в 2013 году, осознанно начал заниматься с 2015 года. Параллельно освоил вёрстку. Время от времени публикую переводы на Habr.

7 В этом пошаговом руководстве вы создадите очень интересный и простой в исполненииLiquid Effect, которому при должной фантазии можно найти применение на промосайтах и в презентациях.

8 Порядок работы следующий:

9 <ul><li>Мы сделаем новый проект и подготовим сцену для анимации.</li>

10 <li>Анимируем текст, а также основные элементы окружения.</li>

11 <li>Создадим первый экран сайта для фильма "Чужой" в качестве примера.</li>

12 <li>Применим эффектRoughen Edgesв качестве заключительного этапа.</li>

13 </ul>И вот что получится в итоге:

14 Вот такой капающий текст вы научитесь делатьСделайте новый проект и композицию:File - New - New Project.

15 Создаем новый проектЗатем выберитеNew Composition.

16 Создаем новую композицию LiquidЗадайте параметры в появившемся окне настроек (в процессе работы вы сможете их менять):

17 Frame Rate - количество кадров в секунду, 30.

18 Duration - продолжительность анимации, 5 с.

19 Композицию назовитеLiquid.

20 Настройки для композиции LiquidПосле создания композицииLiquidсделайте еще одну: нажмите правой кнопкой мыши на панели проектов и выберитеNew composition.

21 Создаем вторую композициюAlien, чуть меньшего размера, чемLiquidРазмер композиции будет немного меньшего размера, чем основной.

22 Не забудьте снять флажок с Lock Aspect Ratio, так вы сможете менять пропорции композиции произвольно, длина не будет меняться пропорционально изменению ширины (и наоборот).

23 Настройки для композиции AlienЭту композицию назовитеAlien, она нужна для работы с анимацией текста и создания основы эффекта. Ваша панель проектов должна выглядеть вот так:

24 Так должна выглядеть панель проектовСледующим шагом нужно будет поместить текст в композициюAlienи подготовить основу для эффекта.

25 Перейдите в композицию Alien, выберите на панели инструментовEllipse Toolsи нарисуйте овал, как показано на картинке ниже. Отцентруйте овал по горизонтали с помощью инструментов выравнивания. Основная его часть должна оказаться за пределами видимой части композиции.

26 Мы будем делать эффект в визуальной стилистике "Чужого", поэтому можно выбрать едкий зеленый, например,#1AEA23.

27 Рисуем овал и прячем большую частьОснование, откуда будут выезжать буквы, готово. Теперь создайте текст. Выберите на панели инструментовHorizontal Type Tool.

28 Напишите словоAlien - так, чтобы каждая буква была на своем слое. В дальнейшем это позволит настраивать последовательное появление букв и слизи.

29 Каждая буква - на своем слое Настройки шрифта в примере:Montserrat, Bold, 130 кегль, цвет #1AEA23Чтобы получить равное расстояние между буквами, выделите текстовые слои и воспользуйтесь инструментом выравнивания.

30 Выравниваем межбуквенное расстояниеСледующая задача - расположить получившийся текст по центру композиции. Группировка в этом случае не будет работать, поэтому выберите столбецParent & Link, он предназначен для присоединения одного слоя к другому.

31 Привязка слоев для выравнивания текста по центру композицииВыберите слойIв качестве родительского и привяжите к нему остальные (дочерние) четыре слояA, L, E, N. Любые изменения свойств родительского слоя будут отражаться и на дочерних, но не наоборот.

32 Делаем слой I родительским, остальные привязываем как дочерниеТеперь выберите родительский слой и выровняйте его по центру композиции. Дочерние выровняются тоже.

33 Центрируем текстСледующий шаг - текст нужно перевести в кривые, так как в дальнейшем работать будем с формой.

34 Выберите текстовый слойA, нажмите по нему правой кнопкой мыши и выберите пунктCreate - Create Shapes From Text.

35 Интересный момент - After Effects не удаляет текстовый слой, а просто скрывает его, создавая дополнительно векторный слой на основе текстового, что невероятно удобно при внесении изменений.

36 Повторите процедуру для остальных текстовых слоев. Должно получиться так:

37 Переводим все буквы в кривыеЧтобы текстовые слои не мешали и не занимали место в панели слоев, выберите все текстовые слои и нажмите на иконку в колонкеShy - Hides layer in Timeline. Вот так:

38 Скрываем лишние текстовые слоиТеперь уберите привязку с родительского элемента, она уже не нужна.

39 Убираем связи между объектамиГотово. Теперь можно приступать к созданию основы эффекта.

40 Выберите на панели инструментовRectangle Toolи нарисуйте прямоугольник для буквыA. В будущем он станет той самой вязкой тянущейся жидкостью.

41 Этот прямоугольник в дальнейшем станет каплейВсе свойства слоя применяются относительноAnchor Point - опорной точки объекта. Выделите слой с прямоугольником, затем выберите на панели инструментовAnchor Point Tool.

42 Инструмент Anchor Point Tool по умолчанию находится под основным горизонтальным менюИ перенеситеAnchor Pointна верхнюю границу прямоугольника.

43 Ставим Anchor Point в верхнюю часть прямоугольникаТеперь, когда вы будете применять масштабирование или вращение, объект будет трансформироваться относительно центра верхней границы прямоугольника.

44 Продублируйте слой с прямоугольником, нажавCtrl+D.Два раза нажмите на сам прямоугольник и потяните за боковой центральный маркер, чтобы изменить его ширину. Аналогичным образом можно менять и высоту - через верхний центральный маркер.

45 Копируем прямоугольники - будущие каплиТеперь еще несколько раз продублируйте слой и расположите их, как на скриншоте.

46 Образ становится более узнаваемымТеперь выделите все получившиеся прямоугольники и с помощью колонки Parent привяжите к слоюA.

47 Привязываем будущие капли к слою АЕсли вы будете перемещать слой с буквой, прямоугольники придут в движение вместе с ним.

48 Вот зачем нужно было привязывать прямоугольники к АТеперь нужно сделать так, чтобы при появлении буквы капающая слизь постепенно исчезала. Это можно реализовать с помощью ключевых кадров и свойства слояScale (Масштабирование).

49 Но сначала анимируем буквуA. Выделите слой с буквой и нажмите на клавиатуреP - откроется свойствоPosition. Перейдите на третью секунду таймлайна и поставьте там ключевой кадр: нажмите на иконку секундомера рядом со свойствомPosition. Затем вернитесь на первый кадр и переместите букву вниз за пределы зеленой области.

50 Анимация движения буквы АВыделите оба кадра на панелиTimelineи нажмитеF9 Easy Ease (Сглаживание анимации).Перейдите в Graph Editorи настройте сглаживание, как показано ниже.

51 Настройка сглаживания анимацииНажмите пробел и посмотрите, что получилось.

52 Теперь А плавно выезжает из нижней части изображенияПерейдем непосредственно к анимации жидкости.

53 Выделите все слои с прямоугольниками и нажмите клавишуS: появится свойствоScale. Перейдите на третью секунду на панелиTimelineи нажмите на иконку секундомера рядом со свойствомScale, чтобы поставить ключевой кадр.

54 Далее снимите ограничение по пропорциям у свойстваScale, чтобы можно было менять только одно значение. Выставите значение0%и 100%.

55 Настраиваем масштабПереместитесь на панелиTimelineтуда, где букваAначинает отрываться от зеленого основания, и поставьте там еще один ключевой кадр.

56 Ставим второй ключевой кадр. Дальнейшую анимацию настраиваем так, чтобы переход от этой границы был предсказуемым и достаточно плавнымА значения Scale выставьте, наоборот,100%и 0%.

57 Посмотрите, что получилось. Мы уже приближаемся к финальному результату, но пока все выглядит неестественно: линии появляются и исчезают синхронно, а сама буква при этом сохраняет свои четкие очертания.

58 С буквы А уже течет жидкость, но анимация пока не совсем естественнаяНужно распределить ключевые кадры у слоев с прямоугольниками для свойстваScaleтак, чтобы придать некую хаотичность линиям и создать плавный переход от буквы к капле.

59 Ключевые кадры теперь выглядят вот так:

60 Размечаем ключевые кадры для каждого прямоугольникаРезультат тоже заметен - все выглядит чуть более естественно: тонкие линии, как и положено, исчезают раньше, толстые - позже и стекают дольше.

61 С буквы А уже течет жидкость, правда, пока немного угловатаяТеперь нужно скопировать прямоугольники на оставшиеся буквы, привязать к ним и анимировать.

62 Выделите все имеющиеся прямоугольники и нажмитеCtrl+D - так вы их скопируете. Перенесите слои под слой с буквойL: иерархию слоев всегда нужно сохранять, так вы не запутаетесь, к какой букве относятся линии.

63 Дублированные слои прямоугольников для буквы LТеперь разместите прямоугольники на рабочей области так, чтобы они не выходили за пределы буквы и были разбросаны в случайном порядке, примерно вот так:

64 Размещаем прямоугольники в границах нижней части буквы LПривяжите линии к букве с помощью столбцаParent.

65 Привязываем прямоугольники к букве, чтобы в дальнейшем из нижней части экрана они выезжали вместеТеперь нужно анимировать саму букву. Вторая буква должна появляться чуть позже первой, поэтому и ключевые кадры нужно разместить чуть дальше на Timeline.

66 Переместитесь на третью секунду десятого кадра и поставьте там отметку ключевого кадра. Вернитесь на первую секунду десятого кадра и переместите буквуLвниз за пределы зеленого основания. Не забудьте о том, что нужно немного скорректировать ключевые кадры скопированных слоев: сместите их чуть дальше по таймлайну. Это придаст рандомность появления жидкости и все капли не будут стекать одновременно.

67 Определяем на таймлайне время капель буквы LРезультат:

68 Теперь А и L появляются поочередноСделайте то же самое для оставшихся букв -I, E, N.

69 Краткая схема работы:

70 <ul><li>Копируете слои.</li>

71 <li>Размещаете слои с прямоугольниками под конкретным слоем с буквой, с которой собираетесь работать.</li>

72 <li>Корректируете прямоугольники в рабочей области, подгоняете по ширине буквы.</li>

73 <li>С помощью колонкиParentсвязываете все скопированные прямоугольники со слоем буквы.</li>

74 <li>Анимируете букву, ставя ключевые кадры чуть дальше предыдущей буквы.</li>

75 <li>Помните проF9для ключевых кадров анимации букв, настраиваете при необходимости графикEasy Ease.</li>

76 </ul>Вот что у вас должно получиться:

77 Анимация букв готоваНам осталось несколько важных деталей. Но сначала давайте добавим антураж.

78 Перейдите в композициюLiquidи перенесите на панель слоев композициюAlien.

79 Выравнивание композиции Alien по центруС помощью панелиAlign (Выравнивание), расположите композицию по нижнему краю.

80 Выравнивание композиции Alien по нижнему краюНайдите подходящий фон и создайте сопутствующие элементы, например, как здесь:

81 Окружение готово. Теперь самое интересное.

82 Roughen Edges Effectпоможет создать иллюзию стекающей жидкости, обработает буквы и сделает прямоугольники более мягкими, текучими.

83 Перейдите на панельEffects & Presets,в поисковой строке наберитеRoughen Edgesи перенесите эффект на композициюAlienв рабочей области или на панели слоев.

84 Roughen Edges сделает края более округлымиВ левой части на месте панели проектов появится вкладкаEffect Controls, в которой и настраивается эффект. В его настройках обратите внимание на два параметра -BorderиScale.

85 Во вкладке Effect Controls будем настраивать два параметра: границы и масштабЗначения подбираются исключительно опытным путем - оценивайте эффект с точки зрения его естественности.

86 Подбираем на глаз значения Border и ScaleВ примере Border - 4,9 и Scale - 300.Сцена целиком теперь выглядит вот так:

87 Готовая анимация букв с liquid effect!Получилось довольно атмосферно, можно, конечно, еще поиграть с настройками эффекта, анимацией и цветом, наложить музыку.

88 After Effects дает безграничные возможности для творчества. Сегодня программа как нельзя раньше востребована в вебе: навыки работы в After Effects помогают оформить впечатляющее портфолио или презентовать работу клиенту. А понимание общих принципов и приемов анимации поможет вам освоить еще одну перспективную профессию - моушн-дизайн.

89 <a>Попробуйте бесплатно 4 топовые профессии в дизайнеПройдите бесплатный курс по дизайну. Добавьте 4 крутых кейса в портфолио и решите, в каком направлении развиваться дальше. Пройти курс→</a>