Как сделать анимированный GIF в фотошопе

Логотипы, веб-сайты и другое …
Логотипы, веб-сайты, обложки книг и многое другое …
Получить дизайн

GIF или «Формат обмена графикой ”- это формат файла сжатого изображения, который позволяет использовать анимацию. Есть много способов создать GIF, но Photoshop работает быстро и легко, со встроенными инструментами для работы с изображениями и анимации.

Как и классическая анимация, анимированный GIF состоит из серии неподвижных изображений воспроизводятся последовательно, чтобы создать иллюзию движения. Найдите GIF в Интернете и перетащите его в Photoshop, и вы увидите отдельные кадры, составляющие анимацию. Эти кадры — это то, что мы собираемся создать в этом уроке, чтобы анимировать GIF рекламного баннера-убийцы.

Узнайте, как я сделал этот GIF! Фотография сделана с помощью Graham Wizardo.

Без лишних слов, вот как создать анимированный GIF в Photoshop.

Содержание
  1. Шаг 1. Установите размеры и разрешение вашего документа Photoshop. —
  2. Размеры
  3. Разрешение
  4. Цветовой режим
  5. Шаг 2: Импортируйте файлы изображений в Photoshop —
  6. Создание GIF из неподвижных изображений
  7. Создание GIF из видео
  8. Шаг 3. Откройте окно временной шкалы —
  9. Шаг 4. Преобразуйте слои в кадры —
  10. Шаг 5: Дублируйте кадры для создания анимации —
  11. Шаг 6: Установите время задержки для каждого кадра —
  12. Шаг 7. Установите количество раз анимация будет повторяться —
  13. Шаг 8: Предварительный просмотр и повторение анимации —
  14. Шаг 9: Экспорт документа Photoshop в виде GIF —
  15. Обрезать размер файла
  16. Уменьшить информацию о цвете
  17. Преобразовать в sRGB
  18. Сохранить
  19. Шаг 10: Поделитесь своим готовым GIF-файлом Photoshop! —
  20. Как создать расширенную анимацию Photoshop
  21. Дополнительная литература по SmashingMag:
  22. Обзор панели временной шкалы
  23. Временная шкала видео
  24. Типы слоев
  25. Свойства слоя
  26. Изучение некоторых новых методов
  27. Использование шаблонных слоев с анимацией смарт-объектов
  28. Встраивание анимации в смарт-объекты
  29. Анимация фильтров
  30. Добавление Стили слоя для анимации смарт-объекта
  31. Изменение анимации с помощью корректирующих слоев
  32. Создание органических эффектов с помощью корректирующих слоев
  33. Собираем все вместе
  34. Создание часов с движущимися стрелками
  35. Создание вращающегося шара
  36. Создание анимации пламени
  37. Заключение по анимации Photoshop
  38. Дополнительная литература
  39. Контрольные списки проектирования интерфейсов (PDF)
  40. Щелкните!
  41. Front-End & UX Workshops, Online

Шаг 1. Установите размеры и разрешение вашего документа Photoshop.

Настройте документ заранее. Даже если ваша единственная цель — создать GIF-файл, которым вы можете поделиться для своих друзей в социальных сетях, если размер ваших фотографий или видео будет определять размер вашего документа, это может сделать файл больше, чем вам нужно, что приведет к низкому качеству. GIF. В общем, для квадратного изображения подходит диапазон 600-800 пикселей.

Настроить размеры, разрешение и цветовой режим вашего документа Photoshop

Размеры

В этом проекте мы работаем с GIF-изображением баннера, который имеет стандартные рекомендации по размеру. Я выбрал макет 720 × 300. Убедитесь, что единицы измерения указаны в пикселях.

Разрешение

Чтобы сохранить размер файла как можно меньшим, достаточно разрешения 150. Я выбрал 300, так как знаю, что мой GIF не будет таким большим. Убедитесь, что ваши единицы измерения находятся в пикселях/дюйм.

Цветовой режим

Наконец, для экрана созданы анимированные GIF-файлы, поэтому установите цветовой режим на цвет RGB. Нажмите Create , чтобы открыть новый документ.

Шаг 2: Импортируйте файлы изображений в Photoshop

Файл> Скрипты> Загрузить файлы в стек…
Выберите «Обзор», найдите свои изображения, выровняйте их, если необходимо, и нажмите «ОК»

Создание GIF из неподвижных изображений

Перейдите в Файл> Скрипты> Загрузить файлы в стек и выберите Кнопка «Обзор» в появившемся окне «Загрузить слои». Это вызывает окно Finder/Explorer, где вы можете просматривать свои файлы и выбирать все, что вам нужно.. Когда вы закончите, нажмите Открыть , а затем OK в следующем окне. Файлы будут импортированы в отдельный документ, из которого вы можете выбрать все слои и перетащить их в свой рабочий документ.

Создание GIF из видео

Если вы конвертируют видео в GIF, перейдите в Файл> Импорт> Видеокадры в слои .

Шаг 3. Откройте окно временной шкалы

Окно> Временная шкала
Настроить окно временной шкалы для покадровой анимации

Перейти в Окно> Временная шкала . Это откроет панель в нижней трети холста. В центре панели щелкните стрелку, чтобы открыть раскрывающееся меню, и выберите Создать анимацию кадра .

Шаг 4. Преобразуйте слои в кадры

Если у вас уже есть неподвижные изображения, щелкните значок меню гамбургера на шкале времени и выберите «Создать кадры из слоев».

Ваш первый кадр будет уже настроен и состоит из всех видимых слоев (это означает, что видимость слоя или значок глаза включены) в вашем документ. Теперь все, что вам нужно сделать, это заполнить временную шкалу несколькими кадрами для имитации движения. Это можно сделать двумя способами: импортировать уже подготовленные кадры или создать анимацию с нуля в Photoshop. В этом разделе будет рассмотрен первый сценарий.

Если вы уже настроили неподвижные последовательные изображения заранее (или работаете с импортированными видеокадрами, см. Шаг 2), щелкните значок меню гамбургера в правом верхнем углу панели «Таймлайн». Выберите Создавать кадры из слоев . Вы увидите, что шкала времени заполняется кадрами из ваших слоев.

Шаг 5: Дублируйте кадры для создания анимации

Под временной шкалой находится панель инструментов, которая содержит (среди прочего) настройку цикла, кнопку предварительного просмотра и кнопку дублирования кадра

Если вы не настроили неподвижные изображения заранее или вам нужно настроить части анимации, созданной на шаге 4, вы можете создать анимацию вручную, кадр за кадром (именно так я сделал свою анимацию). Для этого продублируйте последний кадр на временной шкале (щелкните значок выделенной страницы на панели инструментов под временной шкалой), внесите необходимые изменения в свое изображение и повторите.

Например, моя анимация — это пара солнцезащитных очков, скользящая по глазам объекта.. Для этого я продублировал рамку, переместил солнцезащитные очки на несколько пикселей вниз (сколько пикселей было вопросом проб и ошибок — подробнее об этом позже) и повторял этот процесс до тех пор, пока у меня не было примерно пятнадцати кадров, и солнцезащитные очки оказались там, где я хотел их, что привело к плавной анимации скольжения вниз.

Фотография через graham wizardo.

Шаг 6: Установите время задержки для каждого кадра

Настройку продолжительности можно найти внизу каждого кадра

Вы можете найти таймер задержки внизу каждого кадра (время в секундах со стрелкой раскрывающегося списка рядом с ним).

Щелкните стрелку, чтобы открыть меню, и выберите время, в течение которого кадр будет отображаться на экране.

Вы можете установить продолжительность отдельных кадров или нескольких кадров в один раз, выбрав все нужные кадры и используя раскрывающееся меню для одного из них.

Ti p: Большое количество кадров с короткими задержками является ключом к сглаживанию анимации, тогда как несколько кадров с длинными задержками создают эффект рывков и покадрового движения.

Шаг 7. Установите количество раз анимация будет повторяться

Также на панели инструментов под шкалой времени находится настройка цикла. Вы можете настроить анимацию на цикл «Навсегда», «Один раз» или определенное количество раз.

Шаг 8: Предварительный просмотр и повторение анимации

Кнопка воспроизведения на панели инструментов окна временной шкалы позволяет предварительно просмотреть анимацию. Используйте это, чтобы убедиться, что ваша анимация правдоподобна и ведет себя должным образом. Если это не так, попробуйте поработать с задержкой или добавить больше кадров, пока не получите желаемый результат. И наоборот, это также прекрасное время для экспериментов с удалением как можно большего количества кадров, не нарушая иллюзию движения, чтобы получить файл наименьшего возможного размера.

Шаг 9: Экспорт документа Photoshop в виде GIF

Файл> Экспорт> Сохранить для Интернета (устаревшая версия)…

Прежде всего, не забудьте сохранить рабочий PSD!

Когда вы будете готовы экспортировать окончательный GIF-файл, перейдите в Файл> Экспорт> Сохранить для Интернета (устаревшая версия) . (Примечание: если вы работаете со старой версией Photoshop, скорее всего, это будет «Файл»> «Сохранить для Интернета и устройств»). Это вызовет окно экспорта.

Здесь есть много вариантов, но для наших целей нам понадобится лишь несколько. Сначала убедитесь, что вы установили тип файла GIF в раскрывающемся списке в правом верхнем углу. Остальные параметры, которые я выделил на изображении ниже, необязательны, но полезны для создания облегченного файла. Давайте пройдемся по ним сейчас.

Обрезать размер файла

Ваша главная цель с оставшимися параметрами — уменьшить размер файла, уменьшив количество деталей в вашем GIF без ущерба для качества изображения. Помните, что большой размер файла означает медленное время загрузки, что может быть особенно неприятным для маркетинговых целей, таких как баннерная реклама, когда зритель не искал ваш контент и не ждал, пока он загрузится. Старайтесь оставаться ниже 1 МБ. На большинстве веб-сайтов можно увеличить размер до 5 МБ, но при этом нужно увеличить его. Вы можете увидеть размер вашего файла GIF в нижнем левом углу панели, содержащей изображение для предварительного просмотра.

Эти — это параметр, на который следует обратить внимание в окне «Сохранить для Интернета»

Уменьшить информацию о цвете

Ненужная информация о цвете — самая большая проблема, когда речь идет о большом файле размер. Чтобы сократить его, отрегулируйте общее количество цветов в раскрывающемся списке с надписью «Цвета:» и уменьшите настройку дизеринга (смешение пикселей для создания бесшовного затенения) под ним. Внося изменения, следите за изображением предварительного просмотра вашего GIF-изображения слева, чтобы увидеть, как изменяется разрешение.

Преобразовать в sRGB

sRGB , или «Стандартный RGB», имеет более узкий диапазон цветов, чем «Adobe RGB» по умолчанию, поэтому обязательно установите этот флажок.

Сохранить

После того, как вы Если вы довольны своим разрешением и размером файла, нажмите кнопку «Сохранить» внизу окна. Чтобы убедиться, что все в порядке, вы можете предварительно просмотреть готовый файл GIF, перетащив его в поле URL-адреса браузера.

Готовый GIF-баннер с рекламным баннером. Фотография сделана Graham wizardo.

Шаг 10: Поделитесь своим готовым GIF-файлом Photoshop!

И вот он — готовый GIF-файл, готовый к распространяться по всемирной паутине. Теперь, когда у вас есть навыки создания базовой анимации Photoshop из видео и неподвижных изображений, вы можете дарить почти что угодно!

Хотя этот метод полезен для быстрых веселых GIF-файлов, GIF-файлы для профессиональных целей должны быть намного надежнее, чем моя глупая реклама солнцезащитных очков. Изучить программное обеспечение несложно, но сама анимация — сложная форма искусства, требующая практики и опыта. Когда вы будете готовы к созданию игры в формате GIF, убедитесь, что вы работаете с профессионалом.

Ищете профессиональную помощь в создании анимация?
Работайте с одним из наших талантливых дизайнеров!
Обзор дизайнеров

Эта статья была первоначально написана Ребеккой Крегер и опубликована в 2013 году. Она была обновлена новая информация и примеры.



Как создать расширенную анимацию Photoshop

заголовок>

Хотя анимация в Photoshop не является новой концепцией, она определенно прошла долгий путь за последние несколько лет: Панель «Таймлайн» была переработана, добавлены видеослои, а также появилась возможность создавать анимацию по ключевым кадрам. Эти дополнения действительно улучшили игру Photoshop. Несмотря на то, что Photoshop все еще далек от возможности создавать высококачественные и кинематографические анимации таких программ, как After Effects, у него все еще достаточно мощности для создания сложной анимации. — что особенно полезно, если вы не хотите тратить время на изучение нового приложения.

Пока анимация в Photoshop — это не новая концепция, она определенно прошла долгий путь за последние несколько лет: панель «Временная шкала» была переработана, добавлены видеослои, а также возможность создавать анимацию по ключевым кадрам. Эти дополнения действительно улучшили возможности Photoshop.

Хотя Photoshop все еще далек от возможности создавать высококачественные и кинематографические анимации таких программ, как After Effects, он все же обладает достаточной мощностью для создания сложной анимации , что особенно полезно, если вы не хотите тратить время на изучение нового приложения.

В этой статье я расскажу о нескольких дополнительных методы, которые помогут вам создавать сложные анимации . Мы рассмотрим панель временной шкалы и различные свойства, которые можно анимировать. Мы также рассмотрим роли, которые корректирующие слои, фильтры и смарт-объекты могут иметь в анимации (и как объединить все три для получения потрясающих эффектов). Поскольку темы и методы в этой статье являются расширенными, ожидается средний уровень знаний Photoshop.

Дополнительная литература по SmashingMag:

  • Функциональная анимация В UX-дизайне
  • Бесплатные инструменты Photoshop для веб-дизайнеров
  • Лучший способ создания дизайна для Retina в Photoshop
  • Практические методы создания анимации

Обзор панели временной шкалы

Открытие панели временной шкалы («Окно» → «Временная шкала») позволяет вам для выбора между двумя типами шкалы времени: видео и кадром. Временная шкала кадров предназначена для покадровой анимации и может быть очень ограниченной. Обычно он работает путем преобразования слоев на панели «Слои» в отдельные кадры. Я не буду вдаваться в подробности об этой временной шкале; Я хочу сосредоточиться на временной шкале видео.

В Photoshop есть две временные шкалы, из которых вы можете выбрать. (Просмотреть большую версию)

Временная шкала видео

Временная шкала видео позволяет использовать анимацию по ключевым кадрам. — это процесс анимации, в котором вы определяете ключевые точки анимации на временной шкале, а Photoshop интерпретирует промежуточные кадры для создания связной анимации. Давайте продолжим и создадим очень простую анимацию, чтобы увидеть, как это работает.

На панели временной шкалы видео отображается слой (1) со свойствами слоя (2). На временной шкале отображается индикатор текущего времени (3) и существующие ключевые кадры (4). (см. большую версию)

Как вы, наверное, заметили на изображении выше, шкала времени видео показывает представление слоев на панели «Слои». слой на шкале времени имеет раскрывающуюся панель, в которой отображаются свойства слоя (это свойства, которые можно анимировать). Чтобы анимировать свойство слоя, просто щелкните значок секундомера, который включает анимацию по ключевым кадрам. Обратите внимание, что ключевой кадр автоматически помещается в индикатор текущего времени.

Значок секундомера был выбрано для свойства «Позиция». На шкалу времени автоматически добавляется ключевой кадр. (Просмотреть большую версию)

Переместите индикатор текущего времени в другую точку на временной шкале и переместите слой. И снова к временной шкале будет автоматически добавлен другой ключевой кадр.

При перемещении слоя автоматически добавляется ключевой кадр в положении индикатора текущего времени на шкале времени. (Просмотреть большую версию)

Воспроизведение анимации показывает, как объект на холсте перемещается из одной позиции в другую.

Photoshop автоматически создает анимацию между ключевыми кадрами.

Типы слоев

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

стандартный (пиксельный) слой — это слой, содержащий пиксели Информация. Это самый распространенный (и самый простой) слой в Photoshop. Свойства слоя включают:

  • положение,
  • непрозрачность,
  • стили.


Стандартный слой на шкале времени с открытыми свойствами слоя.

Добавление маски слоя или векторной маски к любому слою приведет к появлению дополнительных свойств, специфичных для этой маски. Свойства слоя, которые добавляются к существующим свойствам слоя, включают:

  • положение слоя или векторной маски
  • включение слоя или векторной маски


Слой с маской слоя на шкале времени.

Слой с векторной маской на временной шкале.

слой-фигура содержит фигуру (будь то из одного из инструменты формы или инструмент Перо) или сегмент линии. Поскольку фигуры и сегменты линии построены с использованием информации векторной маски, эти свойства маски будут отображаться в дополнение к другим свойствам слоя. Свойства слоя включают:

  • положение,
  • непрозрачность,
  • стили,
  • положение векторной маски,
  • включение векторной маски.


Слой формы в временная шкала с открытыми свойствами слоя.

текстовый слой содержит редактируемый текст. Если текст был растеризован, то этот слой больше не будет текстовым слоем, это будет стандартный слой с информацией о пикселях. Свойства слоя включают:

  • преобразование,
  • непрозрачность,
  • стили,
  • текст warp.


Текстовый слой на временной шкале с свойства слоя открыты.

смарт-объект может содержать любой один или комбинацию вышеуказанных типов слоя. Смарт-объект действует как оболочка для любого слоя, сохраняя исходный слой при использовании нового набора свойств. К этим свойствам относятся:

  • преобразование,
  • непрозрачность,
  • стили.


Текстовый слой на временной шкале с открытыми свойствами слоя.

Предупреждение при использовании смарт-объектов. Поскольку смарт-объект сохраняет исходное качество слоя или набора слоев, которые он содержит, его можно масштабировать и масштабировать без потери качества. Однако его нельзя масштабировать больше размера исходного слоя, который он содержит. Это приведет к потере качества смарт-объекта.

На этом этапе я хочу упомянуть два других типа слоя — видеослой и трехмерный слой. Оба этих слоя полностью отличаются от других упомянутых типов слоев. Видеослой на самом деле представляет собой группу слоев, которая содержит собственный набор свойств, а трехмерный слой — помимо уникального набора свойств — управляется в среде, полностью отдельной от других слоев, что увеличивает уровень сложности. Из-за уникальности этих двух типов слоев я не буду здесь вдаваться в подробности. Вы можете увидеть, как оба слоя представлены на временной шкале ниже:


Группа видеослоя на шкале времени с открытыми свойствами слоя.

3D-слой на временной шкале с открытыми свойствами слоя.

Я призываю вас изучить эти два типы слоев самостоятельно. В оставшейся части этой статьи я сосредоточусь только на традиционных типах слоев, исключая видео и 3D.

Свойства слоя

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

Свойство Position позволяет перемещаться по осям X и Y. Управляйте положением объекта с помощью инструмента «Перемещение».

Для свойства Position объекта был задан ключевой кадр, позволяющий перемещать мяч назад и вперед по оси x.

Opacity позволяет вы можете задать непрозрачность слоя по ключевым кадрам. Элемент управления «Непрозрачность» находится в Панель «Слои».

Непрозрачность объекта была установлена ​​на 100% и 0% по ключевым кадрам для создания затухающей анимации.

Style позволяет вам создавать ключевые кадры для стилей слоя. Для доступа к стилям слоя дважды щелкните слой на панели «Слои».

Стили слоя объекта (Bevel & Emboss, Color Overlay и Drop Shadow) были все ключевые кадры для создания пульсирующей анимации.

маска слоя или положение векторной маски ключевые кадры по осям x и y каждой маски. Лучше всего работает, когда маска не связана со слоем.

Позиция маски определяется ключевыми кадрами для перемещения по слою, открывая фоновый слой.

Также возможно включение или отключение слоя или векторной маски . Чтобы включить или отключить маску слоя, перейдите в «Слой» → «Маска слоя» и выберите «Включить» или «Отключить». Для векторных масок перейдите в «Слой» → «Векторная маска». Кроме того, вы можете «Shift + щелкнуть» по маске на панели «Слои», чтобы включить или выключить.

Маска включается по ключевым кадрам, а затем отключается после на короткое время, вызывая раскрытие.

Свойство Text Warp , характерное для текстовых слоев, позволяет создавать ключевые кадры для любой деформации текста, применяемой к текстовому слою. Вы можете получить доступ к списку эффектов деформации текста, выбрав «Тип» → «Деформация текста».

Деформация флага была применена к тексту и вставлена ​​в ключевой кадр. создать анимацию деформации.

Свойство Transform позволяет преобразовать ключевые кадры в слой. Доступ к различным преобразованиям (например, «Поворот» и «Масштаб») можно получить, выбрав «Правка» → «Преобразовать» или нажав Control + T для входа в режим свободного преобразования.

Масштаб и вращение объекта настроены по ключевым кадрам для создания вращающейся звезды, которая растет и сжимается..

Изучение некоторых новых методов

В этом следующем разделе мы объединим то, что мы узнали выше, для изучения некоторых новых методов анимации. Мы также узнаем, как управлять анимацией с помощью корректирующих слоев и фильтров, как создавать сложное движение путем наложения анимаций и даже как создавать органические эффекты.

Использование шаблонных слоев с анимацией смарт-объектов

Поскольку смарт-объекты могут содержать несколько слоев, мы можем создавать временные слои, которые действуют как шаблоны, чтобы помочь нам создавать более сложные анимации. Например, в приведенной ниже анимации я создал красную точку, которая движется по кругу. Обычно это сложно создать, и для этого потребуется много ключевых кадров. Со смарт-объектами мы можем использовать шаблоны слоев, чтобы упростить процесс. Посмотрим, как это делается:

Красная точка, движущаяся по кругу.

В сцене ниже я создал два слоя: один с красной точкой с надписью «Точка», а другой с большим серым кружком с надписью «Форма шаблона». Я добавил решетки к большому серому кругу, чтобы лучше продемонстрировать движение.

Шаг 1 : Сцена, состоящая из двух слоев, красной точки и большого серого круга. (Просмотреть большую версию)

Для начала я выделю оба слоя и конвертирую их в смарт-объект. Это можно сделать, щелкнув правой кнопкой мыши один из выбранных слоев и выбрав «Преобразовать в смарт-объект» во всплывающем списке.

Шаг 2: Преобразуйте слои в смарт-объект. (Просмотреть большую версию)

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

Шаг 3: Оба слоя вращаются как один.

Теперь, когда наша анимация работает, нам нужно удалить форму шаблона. Для этого дважды щелкните значок смарт-объекта на панели «Слои», чтобы отредактировать его. Когда смарт-объект открыт, мы можем скрыть слой «Форма шаблона».

Шаг 4: Скройте слой «Форма шаблона». (Просмотреть большую версию)

Все, что нам нужно сделать, это сохранить документ смарт-объекта и вернуться к нашему исходному документу. Мы видим, что наша красная точка движется по кругу без серой формы на заднем плане.

Красная точка, движущаяся по кругу.

Встраивание анимации в смарт-объекты

Как я уже упоминал, смарт-объекты могут состоять из любого типа (или нескольких типов) слоев, включая слои, которые уже содержат анимацию с ключевыми кадрами. Способность смарт-объекта удерживать анимированные слои упрощает создание сложных движений, таких как показанное ниже. Давайте посмотрим, как это делается.

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

В сцене ниже я уже установил простой анимация желтой точки, вращающейся на синем фоне.

Шаг 1: желтая точка, вращающаяся на холсте.

Далее , Я перейду на панель «Слои», щелкните правой кнопкой мыши слой «Точка» и выберите «Преобразовать в смарт-объект».

Шаг 2. Преобразуйте слой с желтой точкой в ​​смарт-объект. (См. Большую версию)

Теперь, когда это новый слой смарт-объекта, мы можем добавить к нему новый набор ключевых кадров. В сцене ниже я добавил набор ключевых кадров для анимации смарт-объекта вверх и вниз. При воспроизведении анимации мы можем видеть оба набора ключевых кадров в действии, создавая эффект отскока.

Шаг 3. Новые ключевые кадры создают эффект отскока.

Давайте продолжим. Преобразуйте этот слой смарт-объекта в другой смарт-объект. Это даст нам новый смарт-объект для редактирования. Затем мы добавим преобразование к этому смарт-объекту. Перейдите в «Правка» → «Свободное преобразование» и настройте ручки так, чтобы смарт-объект отображался в перспективе.

Шаг 4: Преобразуйте анимацию. (Просмотреть большую версию)

Теперь, когда вы воспроизводите анимацию, она будет анимироваться внутри искаженного смарт-объекта.

Анимация воспроизводится внутри преобразования.

Анимация фильтров

Теперь, когда мы узнали, как встраивать анимацию внутри смарт-объектов, мы можем использовать ту же технику для анимации фильтров. Если мы добавим фильтр к смарт-объекту, содержащему анимированный слой, результатом будет анимация, которая проигрывается через фильтр. Давайте посмотрим, как это работает.

В сцене ниже я уже настроил простую анимацию внутри смарт-объекта, которая показывает точку, движущуюся по красному фону.

Шаг 1: Анимация смарт-объекта, когда желтая точка движется по красному фону.

Поскольку наша анимация уже находится в смарт-объекте, я могу добавить фильтровать прямо к нему. В этом случае я перейду к «Фильтр» → «Искажение» → «Вращение».

Шаг 2: Применение фильтра Twirl к анимации смарт-объекта. (Просмотреть большую версию)

Когда я просматриваю анимацию, я вижу, что происходят некоторые интересные вещи. Фильтр применен к самому смарт-объекту, а не к пикселям его содержимого. Таким образом, движение анимированных пикселей через фильтр имеет уникальный эффект.

Анимация фильтра Twirl.

Добавление Стили слоя для анимации смарт-объекта

Стили слоя можно применять к анимированным слоям так же, как и к обычным слоям. Они также полезны и в других отношениях. Я покажу вам, что я имею в виду.

В сцене ниже у меня уже есть смарт-объект, содержащий простую анимацию точки, движущейся по белому фону.

Шаг 1. Простая анимация смарт-объекта.

Моя цель — применить стиль слоя Bevel & Emboss к точке. Однако, если я попытаюсь применить стиль слоя к смарт-объекту на этом этапе, это повлияет на весь смарт-объект, белый фон и все остальное.

Шаг 2: стили слоя применяются ко всему изображению в целом.

Чтобы исправить это, мне нужно удалить белый фон. Ранее я упоминал, что мы можем редактировать смарт-объект, чтобы скрыть лишние слои. В этом примере я хочу продемонстрировать другой метод.

Пока существует хороший тональный контраст между слоями, мы можем использовать параметры «Наложить, если» на панели «Стили слоя» для удаления фона. Дважды щелкните слой смарт-объекта, чтобы открыть панель «Стили слоя», и отрегулируйте ползунок «Наложить если» → «Этот слой», пока фон не исчезнет.

Совет: удерживая нажатой кнопку Параметр разделяет ползунки, обеспечивая более плавный переход.

Шаг 3: Отрегулируйте ползунки «Смешать, если». (Просмотреть большую версию)

Чтобы завершить этот метод, щелкните правой кнопкой мыши слой на панели «Слои» и выберите «Преобразовать в смарт-объект». Это создаст новый смарт-объект, который сохранит только что сделанные нами изменения.

Шаг 4: преобразовать в смарт-объект. (Просмотреть большую версию)

Теперь, когда мы добавляем набор стилей слоя к нашей анимации, эффект будет применяться только к объекту.

В анимацию смарт-объекта были добавлены стили слоя.

Изменение анимации с помощью корректирующих слоев

Корректирующие слои действуют так же, как и анимированные слои. так же, как и с обычными слоями. Пока корректирующий слой находится над слоем, содержащим анимированные ключевые кадры, анимация унаследует корректировки. Имея это в виду, мы можем использовать корректирующие слои для создания действительно уникальных эффектов. Давайте рассмотрим это.

В сцене ниже я установил простую анимацию в оттенках серого с двумя точками, одна над другой.

Шаг 1: Анимация двух точек в оттенках серого.

Поскольку вся сцена была создана в оттенках серого, я буду использовать корректирующий слой карты градиента, чтобы ввести цвет. После добавления корректирующего слоя я могу использовать панель «Свойства» для следующих настроек.

Шаг 2. Настройки для корректирующего слоя карты градиента (см. большую версию)

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

Анимация окрашена корректирующим слоем.

Создание органических эффектов с помощью корректирующих слоев

Теперь, когда мы изучили несколько методов создания анимации, я хочу объединить некоторые из них, чтобы создать видимый органический эффект. ниже.

Эффект органической анимации.

Давайте узнаем, как это делается. Для начала я создал еще одну простую анимацию с двумя слоями, один над другим. Единственное отличие состоит в том, что оба слоя были размыты.

Шаг 1. Размытая точка анимирована поверх другого.

Теперь мы Добавим корректирующий слой Levels. Используйте панель «Свойства», чтобы добавить ползунки тени и выделения, пока края объектов не станут четкими.

Шаг 2: Редактирование корректирующего слоя уровней. (Просмотреть большую версию)

Воспроизведение анимации даст нам уникальный органический эффект.

Эффект органической анимации.

Собираем все вместе

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

Создание часов с движущимися стрелками

В этом руководстве мы будем использовать техника слоя шаблона, чтобы оживить вращающиеся стрелки часов. Мы также будем использовать стили слоя с анимированными элементами, чтобы добавить глубины объектам в нашей сцене. Вот что мы будем создавать:

Анимация стрелок часов.

Сцена начинается с двух новых слои: один содержит форму минутной стрелки (красный), а другой — наш объект-шаблон (серый).

Шаг 1: Два новых слоя: минутная стрелка и слой шаблона. (Просмотреть большую версию)

Как мы узнали ранее, мы преобразуем эти два слоя в смарт-объект и анимируем вращение.

Шаг 2. Слои, объединенные в смарт-объект, анимируются как один.

Чтобы заблокировать анимацию, преобразуйте слои в другой смарт-объект. Это позволит нам преобразовать ( Control + T ) смарт-объект так, чтобы он выглядел в перспективе, как показано на изображении ниже.

Шаг 3: Анимация преобразуется в перспективу.

Затем нам нужно вернуться к исходному смарт-объекту и скрыть слой шаблона. Когда мы сохраняем и вернемся к нашему рабочему документу, мы должны увидеть, как наша минутная стрелка вращается без слоя шаблона.

Шаг 4: Анимация со скрытым слоем шаблона.

Добавление стиля слоя Drop Shadow с настройкой «Spread» на 100% имитирует некоторую глубину.

Шаг 5: Drop Shadow имитирует края часовой стрелки.

Повторяя эти шаги, мы можем создать часовую стрелку. (Я скорректировал время, чтобы оно соответствовало анимации часовой стрелки.)

Шаг 6: Анимация часовой и минутной стрелок.

Наконец, мы можем создать оставшуюся часть часов, используя традиционные методы Photoshop. В результате получаются часы, которые анимируются в перспективе.

Анимация стрелок часов.

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

Создание вращающегося шара

В этом уроке мы будем применять фильтры к анимированным смарт-объектам, чтобы создать новый эффект. Вот что мы будем создавать:

Анимация вращающегося глобуса.

Ниже представлено базовое изображение, которое мы будем использовать. Обратите внимание, что он повторяется. Это важно, потому что это поможет нам создать зацикленную анимацию на следующем этапе.

Шаг 1: Изображение повторяющейся графики, которая будет анимирована. (Просмотреть большую версию)

Я создал новый квадратный документ и добавил графику карты мира в качестве нового слоя. Я пошел дальше и анимировал свойство Position, чтобы карта мира перемещалась по сцене. Он был рассчитан на цикл, когда он начинается заново.

Шаг 2: Простая анимация цикла.

Затем преобразуйте этот слой в смарт-объект.

Шаг 3. Преобразование простой анимации в смарт-объект. (Просмотреть большую версию)

Прежде чем мы сделаем что-нибудь еще, я хочу показать вам, что происходит со слоем. Если я перейду в «Вид» → «Показать» → «Края слоев», мы увидим ограничивающую рамку слоя во время его анимации. Это будет важно при добавлении фильтров. Также обратите внимание, что наша анимация зацикливается без проблем.

Шаг 4: границы слоя видимы во время анимации.

На этом этапе наши сцена все еще не готова для добавления фильтра. Но давайте выясним, почему — мы добавим фильтр Spherize, чтобы увидеть, что происходит. Когда фильтр добавлен, мы видим, что он не применяется в пределах нашего холста; скорее, он применяется непосредственно ко всему слою. В результате получается искаженная карта, которая движется по холсту. Также обратите внимание, как это нарушает цикл, который мы видели на предыдущем шаге. Это не тот эффект, который нам нужен.

Шаг 5. Фильтр применяется к границам слоя.

Теперь мы знаем, что нам нужно еще немного поработать, чтобы фильтр применился правильно. Чтобы убедиться, что фильтр применяется только к границам холста, нам нужно создать маску слоя. Сначала перейдите в «Выбрать» → «Все», чтобы выделить весь холст. Затем щелкните значок «Добавить маску слоя» на панели «Слои». Теперь у нас должна быть маска слоя, примененная к нашему слою.

Шаг 6: Новая маска слоя добавлен. (См. Большую версию)

Преобразуйте этот слой в новый смарт-объект. Наш получившийся слой смарт-объекта теперь будет анимироваться в пределах холста. Если мы снова добавим фильтр Spherize, мы увидим, что он применяется правильно при воспроизведении анимации. Продолжайте и добавьте фильтр Spherize второй раз, чтобы усилить его эффект.

Шаг 7. Фильтр применен к границам холста.

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

Шаг 8: Слой-маска скрывает все, что находится за пределами формы глобуса.

В завершение, теперь вы можете добавить стили слоя непосредственно к анимации смарт-объекта для украшения.

Анимация вращающегося глобуса.

В этом руководстве мы узнали, как использовать смарт-объекты для содержания анимированных слоев, к которым мы затем добавляем эффекты, такие как фильтры, слой маски и стили слоя. Надеюсь, этот урок показал вам, как легко создавать сложные эффекты с помощью анимированных слоев в Photoshop.

Создание анимации пламени

В этом уроке мы Используйте несколько корректирующих слоев и фильтров с анимацией смарт-объектов, чтобы создать поистине уникальный эффект пламени. Вот как будет выглядеть наша финальная анимация.

Анимация пламени с использованием органической техники.

Для начала мы нужно создать очень высокую сцену. В этом случае у меня есть сцена размером примерно 500 × 10 000 пикселей. На новом слое я нарисовал очень грубую линию с помощью инструмента «Кисть».


Шаг 1: высокая белая линия с мягкими краями

Затем создайте новую сцену размером 500 × 500 пикселей с черным фоном. Перенесите только что созданную высокую линию в эту новую сцену и создайте простую анимацию прокрутки.

Шаг 2: Простая анимация строки прокрутки.

Добавьте новую маску слоя в форме перевернутой слезинки к анимированному слою. Убедитесь, что края маски мягкие. В результате будет видна часть линии, проходящей через маску.

Шаг 3 : Пунктирная линия представляет форму маски слоя. (Просмотреть большую версию)

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

Шаг 4: Простая анимация с маской слоя.

Затем добавьте корректирующий слой уровней. На панели «Свойства» переместите два внешних ползунка внутрь, пока края пламени не станут четкими. Воспроизведение анимации покажет нам более плавное пламя.

Шаг 5: корректирующий слой уточняет форму.

На этом этапе , мы можем еще больше сгладить пламя. Сначала преобразуйте все слои в другой смарт-объект. Затем сделайте размытие слоя и повторите корректирующий слой уровней..

Шаг 6: размытие смарт-объекта и последующее повторение слоя настройки уровней создает более плавное движение.

Есть несколько способов ввести цвет. Я хочу показать один способ, который хорошо сработал для меня. Создайте новый слой и используйте инструмент «Кисть», чтобы нарисовать синий (на основе) и желтый (вверху) блики на пламени. Изменение режима наложения этого слоя на «Hard Mix» даст нам несколько ярких цветных полос.

Шаг 7: Использование режимов наложения для добавления цвета.

Поскольку переходы между цветами слишком резкие, нам нужно их смягчить. Для этого снова выберите все слои ( Alt + Control + A ) и преобразуйте их в другой смарт-объект. Теперь мы можем добавить фильтр «Размытие в движении», чтобы лучше смешивать цвета.

Шаг 8: Добавление размытия в движении смешивает цвета.

Почти готово! Поскольку этот объект является смарт-объектом, мы можем рассматривать его как обычный слой и использовать простые техники композиции фотографий, чтобы добавить его к другой фотографии. На последнем изображении показано, как пламя танцует на зажигалке.

Анимация пламени с использованием органической техники.

В этом уроке мы научились использовать несколько корректирующих слоев и смарт-фильтров, накладывая смарт-объекты на смарт-объекты для создания и улучшения органического эффекта в Photoshop.

Заключение по анимации Photoshop

К настоящему времени вы должны быть знакомы со всеми распространенными типами слоев и с тем, как можно анимировать каждое из их свойств. Кроме того, теперь мы знаем, что Photoshop хорошо оборудован для создания потрясающих анимаций . Мы изучили, как использовать смарт-объекты для расширения возможностей анимации, выступая в качестве шаблонов или позволяя складывать несколько анимаций. Мы также увидели, как улучшить нашу анимацию с помощью фильтров и стилей слоев. Мы даже научились создавать некоторые новые — и, казалось бы, невозможные эффекты (для Photoshop) — с помощью корректирующего слоя уровней. Наконец, мы собрали все вместе, чтобы создать безупречную анимацию.

Приемы, представленные в этой статье, демонстрируют, как Photoshop может быть надежным инструментом для создания анимации. Всегда будут приложения, предназначенные для создания анимации. Однако владение другим программным обеспечением или даже обучение не всегда возможно. Вместо этого вы можете оставаться в программе, с которой вам удобно , и при этом создавать эффекты, которые когда-то считались невозможными в Photoshop.

Дополнительная литература

  • Texture Trickster, Stephen Petrany Дополнительные уроки и приемы по анимации в моем блоге
  • Анимация в Adobe Photoshop, Tuts + Серия руководств по анимации
(ml, al)

Контрольные списки проектирования интерфейсов (PDF)

100 практических карточек для решения общих задач проектирования интерфейсов.

Щелкните!

Руководство по увеличению конверсии и увеличению продаж.

Front-End & UX Workshops, Online

С практическими выводами, интерактивными упражнениями, записями и дружескими вопросами и ответами.

Оцените статью
logicle.ru
Добавить комментарий