Как сохранить в gif в фотошопе: Как сделать гифку из видео в Фотошопе, GIF с помощью Photoshop

Содержание

Как сделать гифку в фотошопе?

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

В этом руководстве по созданию анимированных GIF-файлов я использую Photoshop версии Creative Cloud 2015.

Ниже приведен пример анимированного GIF-изображения, которое можно создать, используя данное руководство:

Если у вас уже есть изображения …

Сохраните нужные изображения в отдельную папку. Чтобы загрузить их в Photoshop, нажмите Файл> Сценарии> Загрузить файлы в стек.

Затем нажмите кнопку «Обзор» и выберите файлы, которые хотите использовать в создаваемом GIF-изображении. Нажмите «ОК».

После этого Photoshop создаст отдельный слой для каждого добавленного изображения. Далее перейдите к шагу 2.

Если у вас еще нет набора изображений …

Создайте каждый кадр анимированного GIF-изображения в виде отдельного слоя. Чтобы добавить новый слой, выберите Слой> Создать> Слой.

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

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

Профессиональный совет: Если хотите объединить слои так, чтобы они отображались в GIF-изображении в одном кадре, включите видимость для слоев, нажав на «глаз» слева от названия каждого нужного слоя. Затем нажмите Shift + Command + Option + E (Mac) или Shift + Ctrl + Alt + E (Windows). Photoshop создаст новый слой, содержащий объединенный контент, его также необходимо будет переименовать.

Чтобы открыть окно «Временная шкала», перейдите в верхнее меню и выберите Окно> Шкала времени. Она позволяет задействовать различные слои в разные периоды времени, тем самым превращая статическое изображение в GIF-анимацию.

В нижней части экрана появится окно «Шкала времени». Вот как оно выглядит:

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

Теперь окно «Шкала времени» должно выглядеть примерно так:

Сначала выберите все слои, перейдя в главное меню, а затем в Выбрать> Все слои. Затем кликните по иконке меню, расположенной справа от временной шкалы.

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

В результате каждый слой будет использован как кадр GIF-изображения.

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

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

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

Затем выберите тип GIF-файла, который вы хотите сохранить. Число рядом с обозначением GIF определяет, насколько точно цвета GIF-изображения будут соотноситься с оригинальными JPEG или PNG изображениями. Согласно документации Adobe, более высокий процент сглаживания дает большее количество цветов и большую детализацию. Но это увеличивает размер итогового файла.

Нажмите «Сохранить», чтобы сохранить созданный GIF-файл на компьютере. Теперь можно использовать это GIF-изображение в маркетинговых мероприятиях.

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

Pinterest был первым, кто позволил использовал анимированные GIF-файлы, затем за ним последовал Twitter. А к лету 2015 года к ним присоединился Facebook. Затем Instagram изменил формат работы с Boomerang, который теперь позволяет пользователям снимать и делиться своими GIF-изображениями. На любом из этих социальных ресурсов анимированные GIF-файлы могут стать отличным способом выделиться из общей массы.

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

Используйте GIF-изображения, демонстрируя товары, и анонсируя события. Ниже приведено GIF-изображение из рекламной кампании магазина женской одежды Ann Taylor LOFT. Они создали красивый эффект, похожий на дрожание, чтобы заинтриговать получателей электронных писем и заставить их «развернуть» свой подарок.

Например, вот простой, анимированный GIF-файл, созданный маркетологом Джинни Минео, который объясняет, что такое призыв к действию, размещенный в постах блога:

И, наконец, одна из наших самых любимых гифок: анимированное GIF-изображение из поста с рецептами домашней кулинарии.

Как вы будете использовать GIF-изображения в маркетинге? Расскажите об этом в комментариях.

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

Данная публикация является переводом статьи «How to Make an Animated GIF in Photoshop [Tutorial]» , подготовленная редакцией проекта.

Как сохранить гифку в Фотошопе

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

Если Вас интересуют другие варианты сохранения анимации, то рекомендуем прочитать вот эту статью:

Урок: Как сохранить видео в Фотошопе

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

Урок: Создаем простую анимацию в Фотошопе

Сохранение GIF

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

Окно состоит из двух частей: блока предпросмотра

и блока настроек.

Блок предпросмотра

Выбор количества вариантов просмотра выбирается в верхней части блока.

В зависимости от потребностей, можно выбрать нужную настройку.

Изображение в каждом окне, кроме оригинала, настраивается отдельно. Это сделано для того, чтобы можно было выбрать оптимальный вариант.

В левой верхней части блока находится небольшой набор инструментов. Мы будем пользоваться только «Рукой» и «Масштабом».

При помощи «Руки» можно перемещать изображение внутри выбранного окна. Выбор также производится данным инструментом. «Масштаб» выполняет одноименное действие. Приближать и удалять картинку можно и кнопками в нижней части блока.

Чуть ниже находится кнопка с надписью «Просмотр». Она открывает выбранный вариант в браузере по умолчанию.

В окне обозревателя, кроме набора параметров, мы можем также получить HTML код гифки.

Блок настроек

В данном блоке происходит настройка параметров изображения, рассмотрим его подробнее.

Цветовая схема. Данная настройка определяет, какая таблица индексированных цветов будет применена к изображению при оптимизации.
- Перцепционная, а попросту «схема восприятия». При ее применении Фотошоп создает таблицу цветов, руководствуясь текущими оттенками изображения. По мнению разработчиков, эта таблица максимально приближена к тому, как человеческий глаз видит цвета. Плюс – наиболее приближенное к оригиналу изображение, цвета максимально сохранены.
- Селективная схема похожа на предыдущую, но в ней преимущественно используются цвета, относящиеся к безопасным для web. Здесь также сделан упор на отображение оттенков, приближенных к исходным.
- Адаптивная. В данном случае таблица создается из цветов, которые чаще встречаются в изображении.
- Ограниченная. Состоит из 77 цветов, часть образцов которых заменены белым цветом в виде точки (зерна).
- Заказная. При выборе этой схемы появляется возможность создать собственную палитру.
- Черно-белое. В этой таблице используются только два цвета (черный и белый), также с использованием зернистости.
- В градациях серого. Здесь применяются различные 84 уровня оттенков серого цвета.
- MacOS и Windows. Данные таблицы составляются на основании особенностей отображения картинок в браузерах под управлением этих операционных систем.
Вот несколько примеров применения схем.
Как видим, первые три образца имеют вполне приемлемое качество. Несмотря на то, что визуально они почти не отличаются друг от друга, на разных изображениях эти схемы будут работать по-разному.
Максимальное количество цветов в цветовой таблице.
Количество оттенков в изображении напрямую влияет на его вес, а соответственно и на скорость загрузки в браузере. Чаще всего применяется значение 128, поскольку такая настройка почти не влияет на качество, при этом уменьшая вес гифки.
Web-цвета. Данная настройка устанавливает допуск, с которым оттенки преобразуются в эквивалентные из безопасной Web-палитры. Вес файла определяется значением, выставляемым ползунком: значение выше – файл меньше. При настройке Web-цветов не стоит также забывать и о качестве.

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

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

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

Для наилучшего понимания процесса настройки сохранения гифки в Фотошопе, необходимо попрактиковаться.

Практика

Цель оптимизации изображений для интернета – максимальное снижение веса файла при сохранении качества.

После обработки картинки переходим в меню «Файл – Сохранить для Web».
Выставляем режим просмотра «4 варианта».
Далее нужно один из вариантов сделать максимально похожим на оригинал. Пусть это будет картинка справа от исходника. Делается это для того, чтобы оценить размер файла при максимальном качестве.
Настройки параметров следующие:
- Цветовая схема «Селективная».
- «Цвета» – 265.
- «Дизеринг» – «Случайное», 100 %.
- Убираем галку напротив параметра «Чересстрочное», поскольку конечный объем изображения будет довольно маленьким.
- «Web-цвета» и «Потери» – ноль.
Сравним полученный результат с оригиналом. В нижней части окна с образцом мы можем видеть текущий размер гифки и скорость ее загрузки при указанной скорости интернета.
Переходим на картинку ниже только что настроенной. Попробуем ее оптимизировать.
- Схему оставляем без изменений.
- Количество цветов уменьшаем до 128.
- Значение «Дизеринга» снижаем до 90%.
- Web-цвета не трогаем, так как в данном случае это нам не поможет сохранить качество.
Размер гифки снизился с 36,59 КБ до 26,85 КБ.
Поскольку на картинке уже присутствует некоторая зернистость и небольшие дефекты, попробуем увеличить «Потери». Данный параметр определяет допустимый уровень потери данных при сжатии GIF. Меняем значение на 8.
Нам удалось еще уменьшить объем файла, при этом немного потеряв в качестве. Гифка теперь весит 25,9 килобайт.
Итого, мы смогли снизить размер картинки примерно на 10 КБ, что составляет более 30%. Весьма неплохой результат.
Дальнейшие действия весьма просты. Нажимаем на кнопку «Сохранить».
Выбираем место для сохранения, даем название гифке, и снова жмем «Сохранить».
Обратите внимание, что существует возможность вместе с GIF создать и HTML документ, в который будет встроена наша картинка. Для этого лучше выбрать пустую папку.
В результате получим страницу и папку с изображением.

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

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

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

Помогла ли вам эта статья?

ДА НЕТ

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

Гифки везде. Некогда скромное анимированное изображение — теперь неофициальный язык сети

, GIF-файлы — это самый быстрый способ выразить эмоции в Twitter, и вы можете тратить часы на их просмотр.

на Reddit и Facebook.

Существует множество мест, где можно найти GIF-файлы, в том числе специальные сервисы, такие как Giphy, и вы даже можете приобрести клавиатуру для iOS

и клавиатуры Android

что искать их по мере ввода.

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

Сделать GIF из видео

Одна из наиболее распространенных причин создания GIF — это получение видеоклипа, которым вы хотите поделиться в Интернете. В Photoshop очень легко конвертировать видео в GIF.

Начните с перехода к Файл> Импорт> Видеокадры в слои. Вам не нужно сначала создавать новый файл. Выберите ваше видео и нажмите открыто.

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

Помните, что чем больше видео вы импортируете, тем больше будет ваш конечный GIF.

Если вы импортируете большой клип, выберите Ограничение каждые 2 кадра (или более) — это простой способ уменьшения размера без чрезмерного влияния на качество.

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

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

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

Как сохранить GIF в фотошопе

Идти к Файл> Экспорт> Сохранить для Web (Legacy). В открывшемся окне установите формат в GIF, Цвета до 256, и уменьшить Размер изображения к чему-то меньшему, чтобы уменьшить общий размер файла.

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

Наконец, ударил Сохранить создать свой GIF.

Вручную создать GIF из неподвижных изображений

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

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

Если вы уже сделали изображения для анимации, импортируйте их, перейдя в Файл> Сценарии> Загрузка файлов в стек. Нажмите Просматривать, затем выберите все нужные изображения и нажмите Хорошо. Каждое изображение будет помещено на свой отдельный слой в том же файле.
Если вы еще не сделали изображения, сделайте это сейчас. Помните, что каждая часть анимации должна идти на своем собственном слое.

Теперь вы готовы сделать анимацию.

Анимируй свой GIF

Вот как это работает. Когда вы вручную создаете кадр в анимации, каждый слой в вашем изображении, который установлен на видимый будет включен в этот кадр. Слои установлены в скрытый не будут включены в кадр.

Для первого кадра вам может потребоваться установить фоновый слой на Видимый, а на всех остальных слоях — Скрытый. Затем во втором кадре вы можете сделать видимым второй слой, а затем третий слой в третьем кадре и так далее. Это станет ясно, как только вы начнете.

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

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

Повторяйте этот процесс, пока вы не добавите все необходимые кадры в GIF.

Заканчивать

Чтобы закончить, установите Задержка кадра — это, по сути, частота кадров. Нажмите на первый кадр, затем нажмите на последний кадр, нажав Shift. Теперь нажмите стрелку раскрывающегося списка под одним из кадров и выберите задержку. Без задержки означает, что анимация будет проходить быстро, в то время как определенное количество секунд означает, что каждый кадр будет оставаться на экране в течение этого промежутка времени.

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

Теперь нажмите Играть кнопка в нижней части экрана, чтобы просмотреть ваш GIF. Вы должны увидеть что-то вроде этого:

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

Когда вы довольны, вы можете перейти к разделу «Сохранение GIF». Или читайте дальше, чтобы улучшить анимацию.

Продвинутые анимации с твиннингом

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

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

Сначала выберите первый кадр и нажмите Tween кнопка на панели инструментов в нижней части панели временной шкалы.

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

Теперь повторите процесс для других оригинальных кадров, которые вы создали. Когда вы получите последний, который вы можете установить Твин с в Первый кадр. Это помогает создать плавный переход к началу цикла GIF.

Ударь Играть кнопка для предварительного просмотра эффекта.

Сохранение вашего GIF

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

Идти к Файл> Экспорт> Сохранить для Web (Legacy). В открывшемся диалоговом окне убедитесь, что для формата установлено значение GIF, а для параметра «Цвета» установлено значение 256 (это обеспечивает максимальное качество).

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

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

Наконец, нажмите Сохранить чтобы сохранить свой GIF.

Другие способы сделать гифки

Создание GIF-файлов в Photoshop очень просто. Но что, если у вас нет фотошопа? Это не значит, что вы должны быть опущены. Ознакомьтесь с нашими руководствами по созданию GIF-файлов, когда у вас нет навыков

и о том, как сделать GIF из видео на YouTube

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

Вы использовали Photoshop для создания GIF-файлов? Какие еще инструменты вы используете? поделитесь своими мыслями и рекомендациями в комментариях ниже.

Создание gif анимации в photoshop cs6. Как сделать Gif-анимацию в Фотошопе

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

Это значит, что Photoshop не создаёт анимацию сам, а только организует покадровое представление заранее подготовленных картинок, и выводит их в конечный формат. Количество кадров в готовой анимации gif может быть любым, но чем больше их количество, тем больше будет размер файла. Поэтому, всегда нужно стремиться свести количество кадров к минимуму. Однако, чем больше кадров будет отражено в секунде анимации, тем плавнее она получится. Обычно не стоит увеличивать количество кадров в секунде свыше 30, потому что человеческий глаз не способен различать большее количество кадров в секунду. Даже в фильмах и видео используют от 24 кадров в секунду.

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

При выборе количества кадров в секунду анимации все зависит от того, что будет изображено в анимации, и от её цели.

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

Это очень полезно тогда, когда нужно задержать определённый кадр подольше, например, с текстом, не увеличивая веса gif файла. Обычно в простой анимированной картинке всего может быть до 10 кадров, чаще около 4-6.

Задавая время показа различных кадров, анимация из 4 кадров может длиться от долей секунды до минуты и дольше. Но следует учитывать, что слишком длинных анимаций тоже стоит избегать — анимация это не видео ролик, некоторые браузеры не дожидаются конца анимации, и начинают воспроизводить её с начала, при мгновенной потере gif изображения с экрана.

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

Анимацию так же не стоит делать в высоком разрешении, это вызовет дополнительную нагрузку на браузеры или телефоны, и, скорее всего, просто замедлит скорость её воспроизведения. В зависимости от целей анимации, рекомендуемое разрешение может быть до 100 — 150 пикселей в ширину или высоту. При этом, чем меньше высота анимации, тем больше может быть его ширина, и наоборот. К примеру, разрешение кадра 400X50 пикселей это допустимое разрешение, а 400X150 это уже многовато, и подойдёт только для особенных целей.

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

Общие рекомендации в параметрах gif анимации для общих целей (аватарки, юзербары, подписи и.т.п.)

Вес — не более 400KB, лучше 150KB — 200KB.
Разрешение — в сумме не более 30000 пикселей (сумма это умножение высоты на ширину, например, 400X50 = 20000).
Время полного воспроизведения — не более 15 секунд.
Количество кадров может быть любым, если при этом вес gif файла или время анимации не превысит указанные выше рекомендации, обычно — чем меньше, тем лучше.
Количество кадров в секунду — не более 30, в зависимости от необходимости.

Создание анимации Photoshop.

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

В нашем примере мы используем сразу все варианты. Будем делать анимацию для подписи «Аватар».

Готовый вариант:

Создание:

Для начала, найдём исходные картинки для создание анимации:

Теперь создадим новый файл в Photoshop. Ширину указываем 400, высоту 50. Цветовой режим — 8 бит.

Теперь активируем окно «Анимация». Окно > Анимация. Внизу появится специальная область для работы с анимацией.

На ней изображены все кадры, которые есть в анимации, в последовательности. Пока там только один кадр, длительность 0 секунд, но мы всегда можем добавить новые. Кадры всегда можно переставлять местами, пока картинка не сохранится в формате gif.

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

Следует учесть, что характеристика слоя для первого кадра распространяются на все кадры анимации. Это значит, что, например, если вы измените цвет текста для десятого кадра анимации, он изменится только на десятом кадре, а если на первом, то сразу на всех кадрах анимации.

Зальем цветом холст. Выбираем инструмент «Заливка» (по умолчанию, буква G), и цвет #3a55a4, и заливаем холст.

Добавим на холст исходные картинки (Файл > Поместить, или их можно просто перетащить с папки), и изменим их размер.

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

Не стоит забывать периодически сохранять работу, чтобы не потерять сделанные изменения. Сохранять рабочий файл Photoshop можно в формате PSD. (по умолчанию).

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

Отобразим и переместим слой animatsiya1 к левому краю холста. Для этого выберем нужный слой (animatsiya1), затем: Редактирование > трансформирование > отразить по горизонтали. Затем просто передвинем слой.

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

Текст — это тоже отдельный слой. Первый кадр анимации готов. Создадим второй кадр. Точнее, создадим копию первого кадра. Для этого, нажмём на знак листа в области анимации.

Второй кадр выбирается автоматически, но мы можем выбирать любой кадр, с которым хотим работать.

Для второго кадра мы скроем первый слой animatsiya1, и сделаем видимым слой animatsiya2. Так же, наложим эффект на слой с текстом, и перекрасим его в другой цвет. Дважды нажмём на слой «AVATAR», стили > наложение цвета, и жмем на маленькое окошко с цветом. Укажем цвет #8fbeff.

В итоге, вот как теперь выглядит второй кадр.

Хотя Photoshop и не создаёт анимацию сам, но он может делать промежуточные кадры. Добавим 5 промежуточных кадров между нашими двумя. Для этого, нужно выбрать «Создание промежуточных кадров», левее от кнопки «Дублировать кадр» в области анимации. Но прежде нужно выделить два кадра, между которыми будут создаваться промежуточные кадры. Выбирать несколько кадров сразу, можно зажав клавишу Shift.

Добавим 5 кадров.

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

Нужно установить время отображения кадров. Сейчас все кадры не имеют времени отображения — 0 секунд.

Время отображения кадров можно устанавливать массово — при выборе нескольких кадров, или отдельно для каждого. Установим время отображения с 1 по 6 кадр 0,1 сек., а 7 кадр 1 сек. Для этого нужно нажать на стрелку рядом с временем отображения кадра.

Готово! Лента кадров анимации готова. Её можно просмотреть прямо в Photoshop, нажав на стрелку Play в области анимации.

Формат нужно установить — Gif. Все остальные настройки влияют на качество gif анимации, и на её исходный вес. Если анимация получается слишком тяжелая, можно снизить количество цветов до 128, например, или сразу оптимизировать анимацию по желаемому размеру файла. Для этого нужно нажать на пиктограмму с тремя полосками вверху справа, выбрать «оптимизировать по размеру файла», и ввести исходный вес. Анимация сама оптимизируется под необходимый вес с минимально возможными потерями качества.

Конечно, это самый простой пример создания gif анимации в Photoshop, но он показывает основы — как создаётся анимация. Поэкспериментировав, вы сможете делать более качественные, детальные и красивые анимации, но принцип их создания одинаков.

3. Ищем свою папку с подготовленными фото и кликаем левой кнопкой мыши на первую фотографию, зажимаем клавишу Shift, и кликаем по последней, тогда они выделяются все. Жмем ОТКРЫТЬ.

4. В вашем фотошопе открываются все фотографии. Начинаем создавать слои, которые нам понадобятся для анимации или создания gif картинки . Я открыла специально широкую фотографию. И она будет 1-ым слоем.

Чтобы преобразовать фото в слой, кликаем по нему два раза левой кнопкой мыши.

5. Чтобы создать второй слой, нам нужно кликнуть по иконке, на которую показывает стрелка. На втором слое мы будем располагать другую фотографию.

6. Топаем в наши фотографии, которые открыты рядом с первой, и выбираем узкую фотографию. Напоминаю, что это необязательно… С одинаковыми фотографиями легче работать. Итак, находим нужную фотографию, идем в меню — выделение — выделить ВСЕ.

7. После этого вокруг картинки начнут бегать маленькие тире, это и есть выделение. Теперь идем в меню — редактирование — скопировать.

8. Возвращаемся к нашей первой фотографии, которая уже со слоями, идем в меню — редактирование — вставить. И наша узенькая фотка вставляется на новый слой. Но она не может оставаться такой узкой. Нам нужно добавить фон под нее. Для этого кликаем по иконке (1), перетаскиваем слой под узкое фото, затем пипеткой (2) подбираем любой понравившийся вам цвет, кликнув курсором по фото. Я выбрала светло-зеленый. И заливаем новый слой, для чего мы активизируем инструмент заливка (3) и потом кликаем левой кнопкой мыши по рабочему полю фотографии. Обратите внимание, что в этот момент активным должен быть новый прозрачный фон. Активные слои выделяются синим цветом. После ваших действий прозрачный слой окрасится.

9. Теперь нам надо объединить два слоя (узкую фотографию и фон). Наступаем левой кнопко мыши на первый слой. Зажимаем клавишу Shift и кликаем по второму слою. Они выделились синим цветом. Идем в меню — слои — объединить слои.

10. Получаем такую картинку.

11. Повторяем пункты 6 — 10 моего урока, чтобы создать слой с еще одной узкой фотографией. Он у меня слой 2. И создаем еще один новый прозрачный слой для размещения там последней широкой фотографии (слой 3).

12. Для этого выполняем пункты урока 6, 7, 8. Все. Готово. Слои для нашей gif картинки мы создали.

13. Можно начинать анимирование и с вашими слоями, но я решила создать подложку под нашу картинку. Для этого топаем в меню — изображение — размер холста. Увеличиваем наш холст на 50 пк по ширине и высоте. Жмем ОК.

14. У нас получилось вот так.

15. Создаем новый слой (у меня слой 4), перетаскивам его в самый низ под все фотографии, вы можете сделать подложку того же цвета, что и фон в ваших узких фотографиях. Я выбрала цвет подложки немного темнее.

Оформляете вашу подложку любым способом. Надеюсь, что вы знаете, как выставляются параметры слоя, но если нет, то это просто. Наступаете на нужный слой и кликаете по нему дважды левой кнопкой мыши и у вас открывается окно с параметрами вашего слоя, а там отдельно открываете каждый отдельный параметр и вы применяете или изменяете его настройки. Я применила эффект в параметрах слоя Внутренняя тень и Внутреннее свечение с параметром слоя Умножение… Цвет тени немного темнее тона подложки. Но здесь я не берусь навязывать вам мое мнение. У вас есть свое видение. Пробуйте, меняйте настройки. Это не страшно. Всегда можно вернуться к первоначальному результату, для чего идете в меню — редактирование — вернуться назад.

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

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

17. Перетаскиваем слой с логотипом на самый верх, как у меня. При необходимости увеличиваем логотип до нужного размера, для чего идем в меню — редактирование — масштабирование. С зажатой клавишей Shift растягиваем или уменьшаем логотип. Активируем инструмент «перемещение» (самый верхний инструмент со стрелкой и + в панели инструментов) и перемещаем логотип на нужное место.

Все подготовлено с созданию анимации.

17. В самом первом кадре анимации у вас должна быть открыта видимость со слоем подложки, первый слой с вашей фотографией (в моем случае слой 0) и логотип (позиция 1). Для хорошего просмотра вашей фотографии устанавливаем время задержки 5 сек (позиция 2). После определения времени задержки и установки его в первом кадре, все последующие кадры будут с заданным временем 1 кадра, т.е. 5 сек в моем случае. Для создания второго кадра жмем на иконку, показанную на позиции 3.

18. Во втором кадре меняем видимость слоя с первой картинки на вторую, так же, как показано на моем скрине.

Приветствую вас друзья! Иногда я встречаю вопрос, можно ли сделать анимацию в фотошопе? Так вот, в этом уроке я покажу что это возможно, и что это совсем не сложно. После этого вы поймете, что совсем не обязательно скачивать и ставить себе программки, если вам вдруг понадобиться сделать анимированный банер или другую какую-нибудь анимацию. И поверьте, это совсем просто. В качестве примера, давайте сделаем свой простенький прелоадер или как правильно указади в комментариях – троббер (throbber). И так, за дело!

Откройте фотошоп, и создайте файл размер 9х9 пикселей.

Зумом увеличим наш маленький квадрат по максимуму (клавиша Z). Увеличить можно несколькими способами. Первое – правым кликом на рисунке из выпадающего меню, выбираем Fit on screen. Второе, просто щелкаем несколько раз до тех пор пока изобращение не увеличится до максимального значения, и третье, самое простое на мой взгляд, нажав в левом верхнем углу полотна и удерживая левую кнопку мыши, проводим ее вниз и вправо пока не пересечем наш квадратик.

Теперь самое главное что нам понадобится для создания GIF-анимации, это рабочее пространство с нужными инструментами. Идем в меню Window -> Workspace -> Video. Должно получится что-то вроде как на скриншоте, но могут быть и отличия. Нас будет интересовать панель анимации внизу.

Внизу мы как раз и можем увидеть выделенный наш первый кадр анимации.

Теперь нарисуем карандашом (B) влевом нижнем углу допустим оранжевым цветом квадратик 3х3 пикселя.

Дублируем наш слой (хватаем и перетаскиваем наш слой на иконку создания нового слоя.

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

Снова дублируем верхний слой и передвигаем квадратик вверх вправо. Затем еще один дубль с переивжением квадратика влево вверх. Должно получится так:

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

В принципе наша анимация почти готова. Нажав на значок Plays animation можно увидеть что у нас получается. Теперь добавим немножко плавности за счет промежуточных кадров. Для этого выделяем первый и второй кадр (зажав клавижу Ctrl) и щелкаем по значку на котором нарисованы шарики -Tweens. Жмем Ок.

Проделвыем тоже самое с кадрами 2-3, 3-4, 4-1.

Теперь выделяем все наши кадры и на любом кадре выбираем понравившееся вам время перехода между кадрами. Допустим 0.1 сек.

Проверьте что ваша анимации зациклена:

Вот и все. Осталось сохранить наш баннер в формате gif, для этого в фотошопе надо пройти в меню файл и выбрать пункт меню “сохранить для Web и устройств” (Save for Web & Devices) или, что удобнее, нажать комбинацию клавиш Ctrl+Shift+Alt+S. В диалоговом окне выбираем формат Gif. Тут можно поиграться с настройками, которые влияют на качество и размер получаемого Gif файла. После сохранения нашей Gif-анимации как файл с расширением Gif, наслаждаемся нашим собственным прелоудером! Можно например в итоге получить такие вот красивые Loading Preloader ы:

Просмотреть Gif банер, который мы сделали в фотошопе в наше время можно наверное любой программой для просмотра графики, самые распространенные из которых это IrfanView, XNView, FastStone Image Viewer и многие другие.

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

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

Инструкция

Создайте в Adobe Photoshop документ, на основе которого будет сформирована gif-анимация. Нажмите Ctrl+N или выберите пункт «Open…» раздела File главного меню. Введите параметры документа в появившемся диалоге и нажмите OK. Если основу кадров анимации будет составлять какое-либо изображение, нарисуйте его или вставьте из внешнего файла.

Добавьте в документе новые слои. Их количество должно быть равно числу кадров анимации (или ключевых кадров, если переходы между ними планируется сгенерировать автоматически). Дублируйте текущий слой, выбирая в меню Layer и «Duplicate Layer…», если в основе кадров должно лежать созданное ранее изображение. Либо добавляйте пустые слои, нажимая клавиши Ctrl+Shift+N.

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

Активируйте рабочее пространство для управления анимацией. В главном меню выберите пункты Window, Workspace, Video and Film, нажмите кнопку Yes в окне запроса. После этого состав меню изменится и отобразится панель Animation.

Добавьте кадры анимации. В панели Animation нажимайте на кнопку Duplicates selected frames. Делайте это до тех пор, пока количество отображаемых кадров не станет равно числу слоев, созданных на втором шаге.

Сопоставьте слои кадрам. Выделите элемент с номером 1 в панели Animation, кликнув по нему мышью. В панели Layers отключите видимость всех слоев, кроме того, который должен отображаться на первом кадре. Последовательно проделайте аналогичные действия для всех слоев и элементов, отображаемых в панели Animation.

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

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

импорт картинок в гифку;
настройки GIF анимации в Adobe Photoshop;
экспорт / сохранение в GIF формат или видео.

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

Процесс занял буквально минут 5-10. Тут важно просто внимательно выполнять все шаги. В конце поста найдете англоязычный видеоурок по данной теме.

Добавление изображений GIF анимации в Photoshop

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

В центре данной панели есть выпадающий список, где нужно выбрать вариант «Create Frame Animation» и кликнуть по кнопке. В результате этого действия Timeline немного преобразится, и вы должны увидеть в качестве первого кадра картинку из самого верхнего слоя.

На следующем шаге выделяете все слои в проекте (кликаете по ним удерживая клавишу Ctrl). После этого открываете контекстное меню в правом верхнем углу окна Timeline и по выбираете «Make Frames From Layers».

Из всех видимых и выделенных слоев Adobe Photoshop создаст кадры анимированного GIF. В результате увидите их в панели Timeline.

Настройки GIF анимации в Фотошопе

Здесь вам нужно будет указать 2 вещи: продолжительность отображения разных кадров + число повторений гифки. Начнем с первого. Под каждым объектом-картинкой в Timeline найдете время показа и стрелочку вниз. Кликаете по ним и во всплывающем меню выбираете длительность карда.

Элементам можно указывать разное время либо задать параметр одновременно для нескольких из них (совместное выделение как и в слоях — с помощью Ctrl).

Чтобы «зациклить» GIF в Фотошопе при создании анимации выбираете значение Forever в соответствующей настройке как показано на скриншоте ниже.

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

Сохранение GIF анимации в Фотошоп

В финальной части нашего руководства рассмотрим как правильно сохранить GIF анимацию в Фотошопе. Для этой цели используется знакомый всем инструмент Save for Web, однако в последних версиях Adobe Photoshop СС он располагается в новом месте меню (File — Export). К счастью горячая клавиша Alt + Shift + Ctrl + S все еще работает.

В открывшемся окне настроек надо выбрать формат GIF, а также убедиться, что настройка Looping Options установлена в Forever. В нижнем правом углу окна есть возможность запустить созданный вами анимированный GIF в Photoshop для предпросмотра.

Если все функционирует так, как нужно, кликаете Save и сохраняете файл на локальном компьютере. Чтобы проверить работоспособность GIF требуется открывать его в браузере, т.к. встроенный просмотрщик Windows анимацию не проигрывает.

Кстати вы также легко можете экспортировать ваш проект в видео формат. Порядок действий аналогичный как при сохранении GIF анимации, но в Фотошоп меню выбираете пункт File — Export — Render Video.

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

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

Если у вас остались еще какие-то вопросы о том как сделать GIF анимацию в Фотошопе или есть дополнения, пишите в комментариях.

Как создать Gif анимацию в Фотошоп / Creativo.one

Задумывались ли вы, как создаются анимированные GIF-файлы? Автор урока предлагает вам за одну ночь освоить некоторые секреты анимации с помощью этого урока. Так же вы научитесь использовать Шкалу времени (Timeline) , которая доступна в версии Photoshop CS6. А теперь начнём!

Результат урока.

Шаг 1

Создайте новый документ (Ctrl + N) с размерами файла 800 х 500 пикселей. Залейте фон любым цветом, который вы хотите. Теперь идём в меню Слои – Стиль слоя – Наложение градиента (Layer> Layer Styles> Gradient Overlay). Примените следующие настройки: Стиль Радиальный (Radial), цвета от чёрного (# 000000) к синему (# 54799b), который будет использоваться в центре.

Шаг 2

Создайте новый слой и назовите его Noise Layer. Выберите инструмент Заливка (Paint Bucket Tool) и залейте созданный слой тёмным цветом (# 231f20). Оставьте активным слой Noise Layer и идите в меню Фильтр – Шум – Добавить шум (Filter> Noise> Add Noise). В диалоговом окне настроек фильтра поставьте такие значения: Эффект (Amount) 3%, распределение Равномерное (Uniform) и нажмите ОК.

Шаг 3

Нажмите комбинацию клавиш (Ctrl + U) и в появившемся диалоговом окне настроек коррекции введите значения Насыщенности (Saturation) 100%: Измените этому слою режим наложения на Мягкий свет (Soft Light).

Примечание переводчика: для того чтобы добиться такого цвета как у автора на скриншоте, можно при коррекции Цветовой тон / Насыщенность (Hue/Saturation) значение Цветового тона (Hue) поставить на – 140.

Шаг 4

Добавьте любой текст, который вы хотите. Здесь мы будем использовать текст логотипа сайта 123RF. В стилях слоя используйте Обводку (Stroke). Значения размера обводки выберите по своим предпочтениям.

Примечание переводчика: На скрине автора уже растрированный текст вместе со стилем Обводка. Чтобы у вас получилось так же, после того как применили обводку, уберите Заливку (Fill) слоя с текстом на 0%, преобразуйте этот слой в смарт объект, а затем растрируйте его.

Шаг 5

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

Тиснение (Bevel & Emboss)

Внутренняя тень (Inner Shadow)

Внутреннее свечение (Inner Glow)

Наложение цвета (Color Overlay)

Внешнее свечение (Outer Glow)

Тень (Drop Shadow)

Шаг 6

Как только вы закончите создавать световые эффекты с помощью стилей слоя, перейдите в палитру слоёв и уменьшите этому слою значение Заливки (Fill) на 0%.

Шаг 7

Дублируйте слой, который вы создали в шаге 5 и отключите этой копии все стили слоя. Настройте теперь стили так:

Внутренняя тень (Inner Shadow)

Внутреннее свечение (Inner Glow)

Шаг 8

Ниже результат после того как вы применили стили слоя.

Шаг 9

Теперь мы создадим движущиеся световые пятнышки. Создайте 5 слоев поверх существующих, и переименуйте их как 1,2,3, R и F. Если у вас свой текст создайте слои в соответствии с вашими буквами. Сгруппируйте эти слои в папку, которой дайте название Light Spots и смените режим наложения на Осветление основы (Color Dodge).

Активируйте инструмент Кисть (Brush Tool), выберите мягкую кисточку, установите Непрозрачность (Opacity) на 95% и белым цветом нарисуйте пятнышки поверх текста. Для каждой буквы отдельное световое пятно на своём слое. Ниже на скриншоте вы можете рассмотреть, как слои выглядят у автора в палитре слоёв.

Шаг 10

Теперь идём в меню Окно – Шкала времени (Window > Timeline). Вы заметите, что ваши слои уже построены в этой палитре в левой её части. Выделите каждый из пяти слоёв со световыми пятнами, которые находятся в группе Light Spots и убедитесь что индикатор текущего времени (голубой слайдер) стоит на нулевом кадре. Теперь на каждом слое в группе, при его активности, нажмите на опцию Позиция (Position), чтобы создать ключевой кадр.

Примечание переводчика: Для того чтобы активировать шкалу времени, нажмите кнопку Создать временную шкалу для видео (Create Video Timeline) и все ваши слои загрузятся в шкалу времени. Выделен в ней будет тот же слой или группа, что и в палитре слоёв.

Шаг 11

Установите индикатор текущего времени (голубой слайдер) на отметке 01:00 F и переместите слои со световыми пятнами по траектории их движения относительно контура буквы.

Шаг 12

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

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

Шаг 13

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

Шаг 14

Как только все будет готово, перейдите в меню Файл — Сохранить для Web (File > Save for Web) и примените настройки, как показано на скриншоте. После этого нажмите кнопку Сохранить (Save) и сохраните анимацию в формате GIF.

Селективное (Selective)
Случайное (Diffusion)
Постоянно (Forever)

Шаг 15

Вот и готова наша очень крутая анимашка с движущимися световыми пятнышками. Автор желает вам успехов и достижения уровня профи J

Автор: clair123rf

Источник: 123rf.com

Как сделать анимацию в фотошопе.

импорт картинок в гифку;
настройки GIF анимации в Adobe Photoshop;
экспорт / сохранение в GIF формат или видео.

Добавление изображений GIF анимации в Photoshop

Настройки GIF анимации в Фотошопе

Сохранение GIF анимации в Фотошоп

Важное примечание. Если вам нужно быстро создать простейшую Анимацию из нескольких кадров в Фотошопе, перейдите на урок — .

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

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

Многие советовали мне переходить на другие программы (например, TVP Animation Pro ), но я, не желая подстраиваться под новые интерфейсы других программ, решила делать всё в Фотошопе.

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

Я затрону две темы: короткие анимации и длинные. Не стоит пролистывать неинтересный вам тип анимаций: там может быть информация, которая вам пригодится для анимаций нужного вам типа.

Короткие анимации – это анимированные аватарки, смайлики и т.д.

Длинные анимации – это мультфильмы, видео и т.п.

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

Важное дополнение

Многие спрашивают: «Почему моя анимация такая дёрганная, мой персонаж/объект быстро/медленно двигается?»
Отвечаю: ваш персонаж/объект двигается быстро , потому что вы нарисовали мало кадров.

Ваш персонаж/объект двигается медленно , потому что вы нарисовали много кадров.

Ваш персонаж/объект дёргается, потому что вы не проследили за предыдущим движением и нарисовали следующее, которое не согласованно с предыдущим.

Запомните: в одной секунде 24 кадра!

Поэтому, когда вы соберётесь создавать свою анимацию, помните: 24 кадра = 1 секунда, 24 кадра = 1 секунда. Никогда не забывайте об этой очень важной детали.

Короткие анимации

Я думаю, вы часто сталкивались с анимациями на аватарках, с анимированными смайликами.
Некоторые смайлики сделаны во Flash’e , но свои я рисую в Фотошопе. Не стоит думать, что такие короткие анимации делать легко. С одной стороны – да, они небольшие по размеру, но с другой – пока отрисуешь эти 15 —30 кадров, замаешься (а представьте, если вы хотите создать трёхминутный клип, то вам придётся делать 4320 кадров!).

Что вы должны помнить и знать?

Допустим, вы захотели нарисовать себе на аватарку девушку с развевающимися от ветра волосами. Значит:

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

Примерно так это показано на схеме:

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

И, наконец, слабый ветерок аккуратно приподнимает и опускает волосы.

Слабый ветер:

Средний ветер:

Сильный ветер:

Всё то же самое относится к ткани и одежде — они будут вести себя примерно так же, как и волосы.

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

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

Таких примеров можно привести огромнейшую кучу, но лучше посмотреть:

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

Небольшое дополнение

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

Поймите, что без этого ваша анимация будет мёртвой, ужасной и некрасивой!

Лучше поработайте над ней и никогда не спешите.

Длинные анимации

Ооо, вот тут-то и начинается всё самое интересное!

Частенько ли вы, смотря мультики или аниме, восхищались анимацией и завидовали тем, кто умеет их делать? Все эти прекрасные сцены, пластика движений и мн. др.? Я честно признаюсь — да. Каждый раз, когда я что-то смотрю, я пытаюсь понять, как же аниматоры с этим работали? Как они всё это создавали?

Но, в силу того, что я не знаю, в каких они работают программах, я пытаюсь понять весь процесс, используя механизмы Photoshop-a.

И знаете, я ведь нахожу ответы на все свои вопросы!

Но давайте будем разбирать всё по порядку.

Процесс создания длинной анимации

1. Изначально нам нужна ИДЕЯ

Например, вы решили сделать небольшой клип, в котором будут танцевать несколько девушек.

Если вы матёрый художник-аниматор, вы можете в своём клипе «заставить танцевать» от 3 и более девушек.

Но в начале своего пути аниматора лучше ограничиться одной-двумя.

2. Теперь вам необходимо составить раскадровку по сценам (РПС)

Что это такое, и с чем её едят?

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

Ладно, когда их не так много. Но когда мы делаем целый клип их может быть больше 30 штук!
Поэтому умные дяденьки и тётеньки аниматоры пользуются такой прекрасной штукой, похожей на расчерченную книжечку.

В ней они изображают сцены.

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

Очень удобно и то, что можно делать сбоку описания, а то, бывает, нарисуешь, потом через некоторое время посмотришь, и не поймёшь — что это я тут изобразила?

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

3. Теперь вам нужно придумать фон, концепт персонажей и движения

Движения рисуем в книжечке РПС.

Если у вас не одна сцена в клипе, то придётся рисовать несколько разных фонов. Рисуйте их в отдельных файлах.
И запомните одну вещь — фон не появляется из ничего. Так что если вы хотите, чтобы камера как бы отъезжала вбок, то фон там тоже должен быть. т.е. придётся рисовать фон по длине (или по ширине, а может и по тому, и по другому) больше.

Затем вы продумываете внешний вид вашего персонажа и начинаете создавать анимацию.

От теории переходим к практике

Давайте вот с этого момента вы немного подумаете над ИДЕЕЙ и, вообще, над пунктом «Процесс создания анимации». К чему это я? К тому, что сейчас вам будет нужен подопытный кролик, которого вы будете заставлять двигаться. Мы не будем делать клип, в котором 4320 кадров. Лучше всего и легче всего будет понять, как создать покадровую анимацию по 24 —72 -кадровой анимации.

Что ж, начнём!

1. Создаём новый документ. Для своей анимации я взяла небольшой размер – 400 x 500 px.

2. Теперь, если у вас нет внизу слева окна «Анимация », смотрим наверх, открываем вкладку «Окно » — «Анимация ».*

* — В примерах используется русифицированная версия Photoshop CS2 .

На скриншоте выше мы видим окно анимации в котором есть первый кадр, ниже него небольшая панель, на которой расположены кнопки:

Всегда/однажды — выбрав «Всегда» вы зациклите анимацию. Если вы выберете «Однажды», анимация будет проигрываться только один раз. (Оба варианта анимаций в моём уроке есть: зацикленная — где показан принцип ДПД, воспроизводимая один раз — где показана смена сцен).

Выберите первый кадр — возвращает нас к самому началу.

Выбирает предыдущий кадр — не будем звать Кэпа. (=

Играет анимацию/Останавливает анимацию — Play/Stop.

Выбирает следующие кадры — следующий кадр. Ваш Кэп!

Tweens кадры анимации — с помощью этой кнопки мы можем добавить плавные переходы между двумя кадрами посредством добавления новых.

Дублирует выбранные кадры — не совсем верное название… Лучше бы было «Добавление нового кадра».

Удаляет выбранные кадры — корзина.

3. Теперь мы можем начинать рисовать. для этого созданный ранее вами фон поставьте на Background (Задний план / Фон).

4. Затем создайте новый слой (Ctrl+Shift+Alt+N) и нарисуйте на нём своего персонажа.

4. Теперь начинается самое трудное: нам нужно нарисовать мно-о-ого раз подряд одного и того же персонажа в разных позах.

Создаём новый кадр, и… Тут есть два варианта:

А) Либо вы начинаете каждый раз рисовать своего персонажа заново, либо..

Б) Копируете предыдущий слой и изменяете его (дорисовываете-стираете, а не пользуетесь трансформацией! Такой инструмент вам будет нужен редко, потом напишу, когда).

Поднатаскавшись в анимации вы сможете безболезненно пользоваться обоими вариантами. (Можете попробовать каждый из них в отдельном документе).

Вариант А:

1. Мы нарисовали наш первый кадр.

2. Чтобы видеть, как изменять следующий, мы уменьшаем прозрачность слоя примерно до 30% и создаём новый слой, на котором уже рисуем кролика для второго кадра.

3. Дорисовываем второй кадр и отключаем видимость у предыдущего, первого слоя.

Вариант Б:

1. Создаем кадр с персонажем и делаем этот слой невидимым.

2. Затем дублируем его (Ctrl+J), перетащив слой на кнопочку «Создать новый слой» левее корзины.

3. Теперь делаем второй слой видимым и начинаем его изменять.

Таким образом, дублируя предыдущие слой, вы создаёте новые кадры и изменяете именно их, а не один и тот же.

5. Сидим, рисуем кадров 10 —15 …

6. И смотрим, что получилось.

Получился бегущий кролик.

Причём ни одна его часть не скопирована: каждый кадр нарисован заново.

Смотрите сами:

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

Почти конец

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

И, после того, как мы сохранили нашу gif -анимацию как видео файл формата .avi , например, можно смело идти в Киностудию Windows Live .
Там уже делайте с вашим клипом всё, что душе угодно.

А затем вы можете загрузить свой клип на youtube.com и наслаждаться проделанной работой.

Всем БОЛЬШОЕ СПАСИБО за внимание, с вами была Lero-art. Извините меня за косноязычие, странность изложений и другие огрехи в уроке, если таковые есть. Все они от того, что мысли путаются, а слова не складываются в предложения…

Но, надеюсь, вы почерпнули для себя что-то новое и интересное!

Результат урока.

Шаг 1

Создайте новый документ (Ctrl + N ) с размерами файла 800 х 500 пикселей. Залейте фон любым цветом, который вы хотите. Теперь идём в меню Слои — Стиль слоя — Наложение градиента (Layer> Layer Styles> Gradient Overlay). Примените следующие настройки: Стиль Радиальный (Radial), цвета от чёрного (# 000000) к синему (# 54799b), который будет использоваться в центре.

Шаг 2

Создайте новый слой и назовите его Noise Layer . Выберите инструмент Заливка (Paint Bucket Tool) и залейте созданный слой тёмным цветом (# 231f20). Оставьте активным слой Noise Layer и идите в меню Фильтр — Шум — Добавить шум (Filter> Noise> Add Noise). В диалоговом окне настроек фильтра поставьте такие значения: Эффект (Amount) 3%, распределение Равномерное (Uniform) и нажмите ОК.

Шаг 3

Шаг 4

Примечание переводчика: На скрине автора уже растрированный текст вместе со стилем Обводка. Чтобы у вас получилось так же, после того как применили обводку, уберите Заливку (Fill ) слоя с текстом на 0%, преобразуйте этот слой в смарт объект, а затем растрируйте его.

Шаг 5

Тиснение (Bevel & Emboss)

Внутренняя тень (Inner Shadow)

Внутреннее свечение (Inner Glow)

Наложение цвета (Color Overlay)

Внешнее свечение (Outer Glow)

Тень (Drop Shadow)

Шаг 6

Шаг 7

Внутренняя тень (Inner Shadow)

Внутреннее свечение (Inner Glow)

Шаг 8

Ниже результат после того как вы применили стили слоя.

Шаг 9

Шаг 10

Теперь идём в меню Окно — Шкала времени (Window > Timeline). Вы заметите, что ваши слои уже построены в этой палитре в левой её части. Выделите каждый из пяти слоёв со световыми пятнами, которые находятся в группе Light Spots и убедитесь что индикатор текущего времени (голубой слайдер) стоит на нулевом кадре. Теперь на каждом слое в группе, при его активности, нажмите на опцию Позиция (Position), чтобы создать ключевой кадр.

Шаг 11

Установитеиндикатор текущего времени (голубой слайдер) на отметке 01:00 F и переместите слои со световыми пятнами по траектории их движения относительно контура буквы.

Шаг 12

Очень часто в сети встречаются смешные или печальные вырезки из видео. Они циркулируют из комментария в комментарий, дополняя интересный пост или кратко характеризуя ситуацию. Любой момент, который вас заинтересовал вас в фильме, сериале или видео с YouTube, можно переделать в Gif-анимацию. Для этого достаточно только иметь Фотошоп версии CS3 или новее. Более старые версии не поддерживают работу с анимацией. Для наиболее комфортной работы рекомендуется пользоваться Photoshop CS5, CS6, CC 2014 или новее.

В первую очередь нужно скачать то видео, фрагмент из которого необходимо сделать анимацией. Будет лучше, если вы предварительно вырежете нужные несколько секунд из всей записи. Однако это можно сделать и средствами самого Фотошопа. Важно помнить, что программа поддерживает только определенные форматы видео: *.mov, *.mpeg, *.mpg, *.avi и *.mp4.

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

В верхнем меню найти раздел «Файл».
Кликнуть на него и в выпадающем меню навести курсор на строку «Импортировать».
В появившемся справа разделе меню кликнуть на «Кадры видео в слои…».
Возможно, программа немного подвиснет. Не надо её торопить. Должно открыться новое окно, в котором необходимо отыскать файл с фрагментом видео, и выбрать его.

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

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

Галочка в окне «оставить каждый * кадры» удалит из записи каждый кадр, порядковый номер которого будет указан. Это сделает анимацию более «лёгкой», но за счёт прерывистости.

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

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

Чтобы продублировать какие-либо слои, нужно нажать на них правой кнопкой мыши и найти строку «Создать дубликат слоя».

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

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

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

Отдельно под каждым кадром есть цифры и стрелочка. Если нажать на стрелочку, появится выпадающее меню, в котором можно задать задержку конкретного кадра. Таким образом можно замедлить или чуть-чуть ускорить отдельные фрагменты полученной Gif. А чтобы выделить всю анимацию сразу, выберите самый первый ее кадр, переместитесь к последнему и с зажатой клавишей Shift кликните на него. Не отпуская Shift, измените скорость последнего кадра. Вслед за ним этот параметр поменяется и у всех предыдущих.

После окончательной настройки всех параметров анимации её необходимо сохранить. Выберите раздел меню «Файл», а в нем найдите «Сохранить для Web…».

Откроется новое окно, в котором необходимо настроить параметры для сохранения созданной вами Gif-ки. Обязательно нужно выставить формат сохранения «Gif», иначе это будет уже не анимация.

Здесь же можно настроить конечные размеры анимации (ширина и высота), количество используемых в ней цветов и просмотреть, что в итоге получилось. Если всё устраивает – необходимо нажать на кнопку «Сохранить…». После этого осталось только выбрать, куда и под каким именем сохранить готовый файл.

Здравствуйте, читатели моего блога!

Вот как и обещал, уроки фотошоп продолжаются!

Сегодня мы обсудим такой вопрос: «Как создать анимацию в фотошопе?» . Я попробуй дать вам подробную инструкцию по созданию анимации. А в конце предоставлю небольшой видеоурок…

Как сделать анимацию в фотошопе : что она под собой подразумевает и сложно ли это?

Делать анимацию в фотошопе довольно просто, если знать как ее делать=) Но а если честно, то попробовав один раз, вы все будете делать с закрытыми глазами… Именно в этой статье, под моим четким руководством вы научитесь делать анимацию без каких либо проблем!

Анимация, мы станем настоящими аниматорами?

Наша анимация — это плавное появление надписи, которое мы будем делать с помощью инструмента Анимация в фотошопе, именно этим мы и займемся. Сегодня вы сможете побывать в роли начинающего аниматора=)

Ну что начнем?

Для начала определимся, что нам нужно! А нужен нам фотошоп: не важно какая версия. Можете воспользоваться версией, которой пользуюсь я, скачать можете !

Открываем программу фотошоп и выводим вкладку анимация на рабочую среду: Окно — Анимация . В моей версии программы эта вкладка называется Шкала времени , поэтому я делаю так (ставим галочку ):

В итоге у вас появится вот такая панель внизу:

P.S. Я ее немного обрезал…

Ну а теперь с помощью вкладок Файл — Создать… , или нажатием на клавиши CTRL+N — создаем новый файл. Выставляем размеры, жмем ок и пишем наш текст, с которого будем делать анимацию. У меня вот что получилось:

P.S. Это я немного с деформацией поигралс я=)

Этот кадр автоматом стает в нашу Шкалу времени , ставим его на скорость 0,1 сек и с помощью Создание копии выделенных кадров создаем еще 10 (это зависит от того как вы будете выставлять прозрачность — дальше посмотрите и все поймете ):

P.S. Это уже готовая картинка.

На первом кадре отключаем картинку (нажмите на вторую картинку и в слоях отключите видимость слоя — надпись, и данную картинку перетяните на первое место ). В итоге, у меня 10 кадров со скоростью по 0,1 сек, а последний (11 кадр ) — 1 сек.

На второй картинке текст должен быть включен, меняем только прозрачность: в слоях правой кнопкой мыши делаем клик по слою с надписью, выбираем вкладку — Параметры наложения…

В Основные параметры — Непрозр. ставим 10%. Такие действия повторяем с каждым кадром, увеличивая прозрачность: второй — 20 %, третий — 30% и т.д., пока не дойдем до 100% — финальный кадр (именно из-за того как вы будете использовать прозрачность зависит количество кадров ).

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

Остальные кнопки Шкалы времени я не объясняю: думаю, кнопка play и другие вам знакомы… (чтобы просмотреть, что за кнопка перед вами — просто наведите курсором мыши на нее и у вас перед глазами появится надпись с обозначением )

Как сохранить анимацию в фотошопе?

Выбираем формат Gif (он там уже автоматом стоит) и жмем Сохранить… (выбираем путь сохранения, к примеру — рабочий стол ), Все анимация сохранилась=)

P.S. С анимации можно убрать фон — удалив слой «Фон» (но у меня он сливается с шаблоном)

Я думаю, тут и без видеоурока все понятно… Но все равно, как и обещал, вот смотрите:

На сегодня все, пока!

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

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

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

Узнайте, как я сделал этот GIF! Фото с помощью graham wizardo.

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

Содержание статьи

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

—

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

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

Размеры

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

Разрешение

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Фото с помощью graham wizardo.

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

— Настройка длительности находится в нижней части каждого кадра

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

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

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

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

Шаг 7: Установите количество циклов анимации

—

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

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

—

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

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

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

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

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

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

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

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

Это параметр, на который следует обратить внимание при сохранении. Для веб-окна

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

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

Конвертировать в sRGB

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

Сохранить

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

Мой готовый баннер с рекламой GIF. Фото через Грэма Волшебника.

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

—

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

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

Ищете профессиональную помощь в создании анимации?

Работайте с одним из наших талантливых дизайнеров!

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

Как создать GIF в Photoshop и экспортировать его для публикации

Идет загрузка.

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

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

Хотя создание GIF-файлов может показаться трудным делом, если вы выполните следующие действия в Adobe Photoshop CC 2020, вы будете на правильном пути к созданию пользовательских GIF-файлов за считанные минуты.

Ознакомьтесь с продуктами, упомянутыми в этой статье:

Adobe Photoshop (от $ 239.88 в Adobe)

MacBook Pro (от 1299,99 долларов в самой выгодной покупке)

Lenovo IdeaPad 130 (от 299,99 долларов в лучшей покупке)

Как создать GIF в Photoshop

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

Когда ваши изображения будут готовы, возьмите свой ПК или Mac и откройте Adobe Photoshop CC 2020.

1. Перейдите на вкладку «Окно» на главной панели задач и выберите «Временная шкала». При выборе слева появится галочка.

2. Затем нажмите «Файл» на той же верхней панели задач и прокрутите вниз до «Сценарии».

3. Выберите «Загрузить файлы в стек…»

4. В появившемся новом окне с заголовком «Загрузить слои» нажмите «Обзор…»

Не беспокойтесь о порядке загрузки ваших файлов.Вы можете изменить это позже. Эмма Уитман / Business Insider

5. Выберите изображения — опять же, их должно быть несколько — которые вы хотите использовать для создания анимированного GIF. Удерживайте клавишу «Shift», чтобы выбрать несколько изображений. Затем нажмите «Открыть».

6. Если у вас не было под рукой штатива при постановке снимков в формате GIF, коснитесь «Попытка автоматического выравнивания исходных изображений» перед выходом из «Загрузить слои», нажав «ОК».»

7. Photoshop начнет процесс создания слоя для каждого загруженного изображения. Вы можете найти их на панели» Слои «в правом нижнем углу.

Убедитесь, что вы выбрали «Временную шкалу» в разделе «Окно» на первом этапе, иначе вы не сможете получить доступ к необходимой панели.Эмма Уитман / Business Insider

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

9. Затем вы развернете так называемое «всплывающее меню» панели «Таймлайн».«Меню состоит из четырех горизонтальных линий, и вы найдете его в правом верхнем углу панели. Щелкните меню и выберите« Создать кадры из слоев ». Все загруженные вами слои теперь появятся на панели« Таймлайн ».

Вам просто нужно одно изображение — неважно какое — появиться на временной шкале, чтобы создать рамки для всех слоев.Эмма Уитман / Business Insider

10. Убедитесь, что кадры, ранее называвшиеся «слоями», расположены в том порядке, в котором они должны располагаться при воспроизведении GIF. Просто перетащите значки в желаемом порядке.

11. Когда вас устраивает порядок кадров, выберите все кадры, удерживая клавишу Shift и нажав первый и последний кадры.

12. Теперь, когда все кадры выделены, перейдите к любому кадру и щелкните V-образный символ внизу. Вы увидите «0 сек». слева от него. Выберите в меню 0,1 секунды. Если вы хотите, чтобы пауза в каждом кадре вашего GIF-файла была более продолжительной, выберите значение больше 0,1 секунды.

Я предпочитаю GIF с короткой задержкой между кадрами, поэтому выбрал 0.1 секунда, самый быстрый из доступных. Эмма Уитман / Business Insider

13. Вы можете установить цикл зацикливания GIF на «Навсегда» или ограничить анимацию воспроизведением определенное количество раз. Вы увидите эти параметры чуть ниже рамок на нижней панели инструментов.

14. Теперь ваш GIF готов для предварительного просмотра. Слова «Воспроизведение анимации» появятся при наведении курсора на кнопку воспроизведения на нижней панели инструментов.

15. Как только вы будете довольны тем, как выглядит ваш GIF, сохраните его. Нажмите «Файл» в верхней строке меню, «Экспорт» во всплывающем меню, а затем «Сохранить для Интернета (устаревшая версия)».

16. При необходимости измените размер, затем нажмите «Сохранить…» и назовите свой GIF. Снова нажмите «Сохранить».

Несмотря на то, что они довольно эффективны, после создания GIF-файлы занимают значительно больше места не только потому, что они представляют собой несколько изображений, но и потому, что рендеринг анимации добавляет кучи данных.Эмма Уитман / Business Insider

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

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

Короткая анимация. Часто причудливый вид комнатных растений подкупил меня идеей поместить их в анимированный формат GIF. Эмма Уитман / Business Insider

анимации — Как сохранить файл анимированного GIF с помощью Photoshop?

анимация — как сохранить файл анимированного GIF с помощью Photoshop? — Обмен стеками графического дизайна

Сеть обмена стеками

Сеть Stack Exchange состоит из 178 сообществ вопросов и ответов, включая Stack Overflow, крупнейшее и пользующееся наибольшим доверием онлайн-сообщество, где разработчики могут учиться, делиться своими знаниями и строить свою карьеру.

Посетить Stack Exchange

0
+0
Авторизоваться Подписаться

Graphic Design Stack Exchange — это сайт вопросов и ответов для профессионалов, студентов и энтузиастов графического дизайна.Регистрация займет всего минуту.

Зарегистрируйтесь, чтобы присоединиться к этому сообществу

Кто угодно может задать вопрос

Кто угодно может ответить

Лучшие ответы голосуются и поднимаются наверх

Спросил 8 лет, 2 мес назад

Просмотрено 353к раз

Я делаю .gif в Photoshop CS5. При сохранении этой анимации я использовал шаги = Файл> Сохранить для Интернета и устройств> Предустановка = GIF 128 Dithered> GIF> Сохранить . После сохранения файла .gif анимация не отображается. Так что не так с процедурой?

Создан 06 июл.

пуджапуджа

53933 золотых знака55 серебряных знаков88 бронзовых знаков

Файл должен иметь временную шкалу или последовательность кадров.( Окно> Временная шкала )
Вам необходимо установить параметры анимации в диалоговом окне «Сохранить для Интернета»:

Кроме того, можно иметь быструю анимацию и не видеть ее изначально из-за скорости и продолжительности, если для параметра «Сохранить для Интернета» установлено значение «один раз». Возможно, вам потребуется перезагрузить страницу / изображение, чтобы увидеть анимацию.

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

Создан 23 авг.

СкоттСкотт

189k1919 золотых знаков256256 серебряных знаков510510 бронзовых знаков

Попробуйте продублировать эти предустановки в «Custom».Попробуйте также изменить путь, по которому сохраняется файл, чтобы проверить, работает ли это.

Создан 06 июл.

Очень активный вопрос . Заработайте 10 репутации (не считая бонуса ассоциации), чтобы ответить на этот вопрос.Требование репутации помогает защитить этот вопрос от спама и отсутствия ответов. Graphic Design Stack Exchange лучше всего работает с включенным JavaScript

Ваша конфиденциальность

Нажимая «Принять все файлы cookie», вы соглашаетесь с тем, что Stack Exchange может хранить файлы cookie на вашем устройстве и раскрывать информацию в соответствии с нашей Политикой в отношении файлов cookie.

Принимать все файлы cookie Настроить параметры

Как создать анимированный GIF в Photoshop

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

Дизайн анимации

Запустите Photoshop (CS6 Extended или любую версию CC) и выберите «Файл»> «Создать». В появившемся диалоговом окне введите ширину и высоту анимации (скажем, 300 × 250 пикселей). Введите 72 для разрешения, установите в меню «Цветовой режим» значение «RGB» и выберите «sRGB» в меню «Цветовой профиль».

sRGB — это стандартное цветовое пространство для Интернета, поэтому проектирование в этом пространстве позволяет избежать изменения цвета при сохранении файла.

Затем создайте контент, используя слои. Чтобы добавить изображения в документ, выберите «Файл»> «Поместить внедренное» («Файл»> «Поместить» в более ранних версиях). Photoshop окружает изображение маркерами изменения размера; Удерживая Shift, перетащите любой угловой маркер, чтобы изменить размер изображения, а затем нажмите Return. Повторите для каждого изображения. Обязательно включите слой для брендинга (скажем, ваш логотип) и слой с «призывом к действию» (скажем, «нажмите здесь, чтобы получить скидку 50% на первое посещение»).Последний дает вашей аудитории какое-то действие и позволяет оценить успешность объявления. Как только ваш контент будет готов, отключите значки видимости слоя (обведены) для всего, кроме того, что вы хотите видеть в первом кадре.

На этой панели «Слои» отображается все содержимое анимации. Как видите, видны только слои для первого кадра.

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

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

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

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

Вы также можете добавить плавный переход между кадрами, который называется анимацией. Для этого активируйте кадр, который вы хотите перейти в следующий (скажем, кадр с «призывом к действию»), и нажмите кнопку «Анимация» (она выглядит как диагональный ряд квадратов и находится слева от дублирующей кнопки). В появившемся диалоговом окне укажите в Photoshop, какой кадр следует использовать для анимации активного кадра (здесь был использован следующий кадр), и введите количество кадров затухания, которое вы хотите добавить, в поле «Кадры для добавления».Нажмите OK, и Photoshop добавит новые кадры (обведены).

Чем больше кадров вы добавите, тем больше будет размер файла, поэтому будьте осторожны!

Настроить воспроизведение

Используйте меню задержки кадров под каждым кадром, чтобы контролировать, как долго он будет отображаться. Держите кадры брендинга и призыва к действию на экране достаточно долго, чтобы их можно было прочитать (скажем, две секунды), и ускоряйте анимацию кадров (0,5 секунды). Затем щелкните меню параметров цикла (обведено) и выберите 3, чтобы анимация повторилась три раза.Нажмите кнопку «Воспроизвести» (также обведенную), чтобы просмотреть свою работу.

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

Когда вы закончите, выберите «Оптимизировать анимацию» во всплывающем меню панели «Таймлайн» (обведено). В появившемся диалоговом окне оставьте оба параметра включенными: Bounding Box тщательно обрезает каждый кадр до его содержимого, а Redundant Pixel Removal делает неизменные пиксели прозрачными в последующих кадрах).Выберите «Файл»> «Сохранить как» и выберите Photoshop в меню «Формат», чтобы сохранить слои для последующего редактирования.

Оптимизация анимации позволяет уменьшить размер файла.

Экспорт файла

Выберите «Файл»> «Сохранить для Интернета» в Photoshop CS6 Extended или «Файл»> «Экспорт»> «Сохранить для Интернета в CC» и выберите «GIF» в меню формата в правом верхнем углу (обведено). Если вы включили в анимацию фотографии с градиентами, установите в меню Dither значение Diffusion и поэкспериментируйте с настройкой количества справа (также обведено кружком).Если в вашей анимации нет полноцветных фотографий, попробуйте уменьшить значение в поле «Цвета», чтобы уменьшить размер файла. Используйте раздел «Анимация» в правом нижнем углу (обведен кружком), чтобы предварительно просмотреть фрагмент перед его сохранением.

Взгляните на мощное диалоговое окно «Сохранить для Интернета».

Полученный в результате GIF-файл будет воспроизводиться в любом веб-браузере: используйте команду браузера «Файл»> «Открыть» или перетащите GIF-изображение в окно браузера. Вы также можете предварительно просмотреть его с помощью QuickLook: просто щелкните имя файла и нажмите клавишу пробела на клавиатуре.

Как сохранить анимированный GIF в Photoshop 2020? — Mvorganizing.org

Как сохранить анимированный GIF в Photoshop 2020?

Экспорт анимированного GIF: выберите «Файл» — «Экспорт», «Сохранить для Интернета» (устаревшая версия). Выберите формат GIF в правом верхнем углу диалогового окна «Сохранить для Интернета». Убедитесь, что для параметра Looping Options установлено значение «Forever» в правом нижнем углу, нажмите «Сохранить» и выберите место. Вот и все!

Как сохранить анимированные изображения?

Сохранение анимированных GIF-файлов на свой компьютер

Щелкните правой кнопкой мыши анимированный GIF, который хотите загрузить.
Выберите «Сохранить изображение как».
Выберите место, где вы хотите сохранить изображение, сохраняя формат файла как. gif.
Нажмите «Сохранить».

Как извлечь изображение из анимированного GIF?

Чтобы извлечь кадры, щелкните правой кнопкой мыши изображение в формате GIF и выберите параметр «Извлечь кадры». Откроется новое окно. Там используйте ползунок, чтобы установить диапазон для кадров. Наконец, используйте кнопку «Извлечь кадры», а затем вы можете выбрать папку вывода и формат для сохранения кадров как изображений.

Как визуализировать GIF в Photoshop?

Как создать анимированный GIF в Photoshop

Шаг 1. Загрузите изображения в Photoshop.
Шаг 2: Откройте окно временной шкалы.
Шаг 3. В окне временной шкалы нажмите «Создать анимацию кадра».
Шаг 4: Создайте новый слой для каждого нового кадра.
Шаг 5: Откройте тот же значок меню справа и выберите «Создать кадры из слоев».

Можно еще анимировать в фотошопе?

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

Вышла ли Adobe Animate 2021?

Создайте свою первую анимацию за пять минут — Adobe Animate 2021 уже доступен! Да, это Adobe Animate!

Сколько стоит Adobe Animate в месяц?

Получите Animate как часть Adobe Creative Cloud всего за 20,99 долларов США в месяц. Получите Animate как часть Adobe Creative Cloud всего за 20 долларов США.99 / мес. Анимируйте что угодно. Создавайте интерактивные анимации для игр, телешоу и Интернета.

Как создать GIF в Photoshop

гифок повсюду. Вы можете найти их во всех самых популярных блогах, таких как BuzzFeed, Reddit, Tumblr, и почти везде, куда бы вы ни посмотрели. GIF-файлы делают пост немного интереснее и позволяют много говорить о чем-то, фактически не используя слов … вместо этого остроумный GIF-файл со знаменитостью, закатывающей глаза, или что-то подобное.

Итак, когда я делал рецепт этих великолепных шоколадных блинов, я сделал несколько снимков, чтобы попытаться получить «денежный» снимок сахарной пудры, падающей на блины.Я сделал снимок, но у меня было еще около 25 дополнительных фотографий сахарной пудры, падающей на блины. Вместо того, чтобы просто удалить их, я решил сделать GIF и поделиться им со своими прекрасными читателями.

Теперь, когда я знаю, как сделать GIF в фотошопе, я решил поделиться им со всеми вами! Затем я поделюсь бонусом о том, как преобразовать этот GIF в видео, чтобы вы могли поделиться им в Instagram … поскольку Instagram еще не поддерживает GIF. Глупый инстаграм.

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

Разве это не волшебно? Ха-ха … идем дальше.

Этот GIF состоит из 14 изображений, но вы действительно можете использовать их столько, сколько захотите. Я бы не рекомендовал меньше 4–5 для подобного GIF. Итак, приступим!

Шаг 1. Подготовьте изображения

Убедитесь, что все изображения, которые вы хотите использовать, отредактированы и сохранены в формате фотографии, т.е.е., PNG или JPEG. При желании вы также можете сохранить их в отдельной папке. Я положил свой в папку «Сделать GIF».

Знаю, умница.

Шаг 2. Импортируйте фотографии в Photoshop

Откройте Photoshop и выберите Файл >> Сценарии >> Загрузить изображения в стек.

В открывшемся диалоговом окне вы можете выбрать «Использовать: Файлы» или «Использовать: Папку» в зависимости от того, сохранены ли ваши изображения в отдельной папке или нет. Для этого мы будем использовать папку из-за моего удобного денди папка «Создать GIF» и нажать кнопку «Обзор».Выберите папку и нажмите «Открыть», и все файлы в папке будут импортированы в диалоговое окно:

В качестве альтернативы, просмотр файлов и их выбор все сделают то же самое.

Затем просто нажмите ОК, и Photoshop импортирует все ваши изображения в один файл с каждым изображением в виде отдельного слоя, например:

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

Шаг 3. Создайте GIF

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

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

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

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

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

Теперь, когда у нас есть все изображения в кадрах анимации, вы можете продолжить и щелкнуть маленькую стрелку под каждым изображением и выбрать задержку между каждым из них.Для этого я выбрал 0,5 секунды, но вы можете выбрать любой из имеющихся вариантов или добавить настраиваемую продолжительность, выбрав «Другое…»

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

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

Шаг 4. Сохраните GIF

Это последний шаг в создании GIF, и лучший способ его сохранить — выбрать Файл >> Экспорт >> Сохранить для Интернета …

Во всплывающем окне выберите формат «GIF», а затем в поле прямо над ним нажмите «[Безымянный]» и выберите «GIF 128 Dithered». Затем нажмите «Сохранить» и сохраните его в соответствующей папке.

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

Готово!

Теперь мы хотим взять этот GIF и создать видео для Instagram, верно? Я имею в виду, почему бы не показать IG World вашу прекрасную гифку с падающей сахарной пудрой на блины или наливанием вина для приготовления сангрии ?? Поскольку у нас уже есть GIF, который все еще открыт в Photoshop, все, что нужно, — это еще 2 шага, чтобы создать видео для Instagram.

Шаг 5. Обрежьте GIF

Поскольку IG — это в основном квадратные изображения и видео, нам нужно сначала обрезать наш GIF до квадрата … если ваш GIF уже не является квадратом, вы можете просто пропустить этот шаг.

Шаг 6: Сохраните видео

После кадрирования изображения перейдите в Файл >> Экспорт >> Рендеринг видео, и откроется новое диалоговое окно для настроек видео. Назовите свой файл и выберите папку, в которую вы хотите сохранить его, и вы можете оставить все остальные настройки по умолчанию. Затем нажмите «Render»

Готово!

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

Я надеюсь, что этот пост помог вам в создании GIF, а затем видео из этого GIF для Instagram! Если это так, пожалуйста, поделитесь, используя любую из кнопок общего доступа ниже, и обязательно ознакомьтесь с другими моими советами и приемами, щелкнув вкладку

ресурсов вверху страницы!

Как сделать анимированный GIF в Photoshop (быстро и легко!)

Есть потрясающая сцена из любимого сериала или фильма, которую вы хотите воссоздать в виде анимированного GIF-файла? В этом уроке вы точно узнаете, как создать анимированный GIF в Photoshop — это настолько быстро и легко, что даже новичок сможет следовать за ним!

Создать новый документ

Чтобы начать процесс обучения созданию анимированного GIF в Photoshop, нажмите кнопку Create new .

На панели Preset Details () установите для ширины , и высоты , нужные размеры. Установите разрешение на 72 пикселей / дюйм , чтобы он был удобен для работы в Интернете.

В разделе Advanced Options установите для цветового профиля значение sRGB IE61966-2.1 .

Затем нажмите кнопку Create .

Импорт видео

Чтобы импортировать видео, выберите File > Place Embedded , найдите видеофайл на своем компьютере и нажмите кнопку Place .

Это помещает ваше видео в окно документа.

Преобразуйте видео по размеру холста.

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

Затем щелкните значок галочки , чтобы зафиксировать изменения.

Используйте панель временной шкалы для обрезки видео

Выберите Window > Timeline .

Щелкните значок меню в раскрывающемся списке и выберите Создать временную шкалу видео .

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

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

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

Как только это будет установлено, щелкните и перетащите край видеослоя к Playhead , пока он не встанет на место.

Щелкните и перетащите видеослой к начальной точке 00 .

Еще раз используйте Playhead для прокрутки по временной шкале видео, чтобы установить конец видео.

Затем, , щелкните и перетащите противоположный край видео в направлении Playhead , пока он не встанет на место.

Вы можете нажать кнопку «Воспроизвести» для предварительного просмотра вашего клипа.

Циклический просмотр видео

Щелкните значок Параметры > Циклическое воспроизведение .

Затем нажмите кнопку Play , чтобы установить бесконечный цикл видео.

Экспорт слоя видео Photoshop как анимированного GIF

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

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

На правой панели установите для формата файла значение GIF, , и значение по умолчанию должно быть подходящим.

Проверьте размер изображения и убедитесь, что он имеет подходящие размеры.

В разделе Animation установите Looping Options на Forever .

Просмотрите GIF, нажав кнопку воспроизведения .

Когда вы будете готовы, просто нажмите кнопку Сохранить , назовите файл и нажмите кнопку Сохранить , чтобы завершить создание GIF!

Моя новая серия видео на Adobe

Если вы его пропустили, Adobe и Photoshop Training Channel объединились для серии из 6 частей, которая знакомит пользователей Photoshop с Adobe Illustrator и Premiere Pro!

Он охватывает 3 видео для Adobe Illustrator: создание логотипа, создание масштабируемых текстов и дизайн визитной карточки!

Для Adobe Premiere вы узнаете, как корректировать цвета, анимировать графику и даже изменять размер видео для публикации в социальных сетях!

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

Итак, нажмите здесь, чтобы начать обучение!

Как легко создать анимированный GIF в Photoshop

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

Оглавление [Скрыть] [Показать]

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

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

Выживание формата файлов изображений GIF достойно восхищения. В основном используемые для уродливых страниц MySpace и раздражающей анимированной баннерной рекламы, анимированные GIF-файлы были очень популярны в 1990-х и начале 2000-х годов.В то время GIF не был признанным типом файлов. Это был символ плохого дизайна, и многие люди предсказывали и даже надеялись, что такие технологии, как Adobe Flash и HTML5, раз и навсегда убьют GIF.

Этот старый формат файлов не только сохранился, но и процветает. Анимированные GIF-файлы — отличный способ привлечь внимание онлайн-аудитории и привнести дополнительный элемент возбуждения в ваш контент.

Создание анимированных GIF-файлов с помощью Adobe Photoshop или альтернативы Photoshop

Существует множество веб-сайтов и приложений, которые помогут вам создавать анимированные GIF-файлы.Среди моих любимых — GIF Brewery (Mac) и GIPHY. Многие из этих сервисов даже позволяют загружать видеоклипы и конвертировать их в GIF. Если вы не знакомы с Adobe Photoshop , попробуйте воспользоваться одной из этих служб.

Изучить Photoshop непросто, но если вы разбираетесь в Adobe Photoshop и хотите создать анимированный GIF-файл, то это руководство для вас. Это руководство было создано с использованием Adobe Photoshop 2020 версии Creative Cloud. Если у вас другая версия Photoshop, не волнуйтесь.Основные шаги создания анимированного GIF-изображения в Photoshop будут аналогичны другим версиям приложения.

Создайте свое многослойное изображение в Photoshop

Окно слоев Photoshop

Имея в виду грубую раскадровку, создайте свой проект изображения в многослойном файле Photoshop. В этом примере я анимирую логотип MethodShop. Вы можете создавать папки для каждого кадра или просто скомпоновать все необработанные слои, выбор за вами. Не забудьте назвать свои анимированные слои в формате GIF в Photoshop! Это значительно упростит процесс анимации.

Открыть окно временной шкалы

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

Создание анимации кадра

Окно временной шкалы Photoshop

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

Окно> Временная шкала> Создать анимацию кадра

Создание нового кадра для каждого кадра в анимации GIF

Добавить новый кадр

Расположите слои для первого кадра и затем щелкните значок «Создать кадр». Расставьте сцену и создайте рамку, затем повторите. Каждый раз, когда вы это делаете, будет создаваться снимок многоуровневого файла. Продолжайте создавать рамки для своего анимированного GIF, пока не закончите.

Окно> Временная шкала> Создать рамку

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

Окно> Временная шкала> Создание кадров из слоев

Регулировка длительности задержки кадра

Длительность кадра

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

Хотите ли вы зацикленный GIF?

Настройки цикла GIF

Вы хотите, чтобы ваш GIF зацикливался? В нижней части панели инструментов временной шкалы есть опция, где вы можете выбрать, сколько раз вы хотите, чтобы анимированный GIF повторялся. Выберите «Навсегда», если хотите, чтобы изображение повторялось бесконечно. Если вы создаете анимированный баннер в формате GIF, выберите 3 раза для цикла. Большинство рекламных сетей требуют, чтобы объявления в формате GIF повторялись не более 3 раз или длились не более 30 секунд.

Нажмите «Воспроизвести» и просмотрите свой анимированный GIF

Предварительный просмотр анимированного GIF

Протестируйте свой анимированный GIF в Photoshop, нажав значок «Воспроизвести».Вернитесь и внесите изменения, выбрав рамку, которую вы хотите изменить. Затем просмотрите еще раз, пока не будете довольны.

Сохранение проекта Photoshop в формате GIF

Если вы еще этого не сделали, сейчас самое время сохранить анимированный GIF в Photoshop. Вы можете сохранить редактируемый файл в формате PSD или в формате TIF со слоями. Оба этих типа файлов сохранят данные покадровой анимации.

Экспорт вашего анимированного GIF

Сохранить для Интернета

Довольны ли вы своей анимационной последовательностью? Давайте экспортируем его как файл анимации GIF, используя параметр «Сохранить для Интернета».

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

Настройте параметры экспорта файла GIF

Параметры экспорта GIF в Adobe Photoshop

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

Тип файла: Вы должны выбрать GIF, а не JPG, WBMP или PNG. Если вы не выберете GIF, вы получите неподвижное изображение, которое не анимируется.
Цветовая палитра: Вы, вероятно, получите наилучшие результаты с адаптивной или перцепционной цветовой палитрой, но вы можете попробовать поэкспериментировать с другими вариантами.
Дизеринг: Если в вашей анимации много градиентов, выберите «Диффузия», «Узор» или «Шум» в качестве одного из вариантов дизеринга.Это попытается создать эффект градиента с помощью точек. Но если ваш GIF сплошной цвет, выберите «Без дизеринга».
Цвета: Самый важный параметр на этом экране — количество цветов. Использование большего количества цветов увеличит размер вашего файла. Меньше значит меньше. Постарайтесь, чтобы это число было как можно меньше. Использование меньшего количества цветов уменьшит размер файла.
Web Snap: Простой способ уменьшить размер файла — ограничить цвета файла стандартными веб-цветами. Постарайтесь получить как можно более высокий процент веб-привязок, чтобы ваше изображение не выглядело как дерьмо.
Анимация: Не делайте все настройки файла на основе одного кадра анимации. Переключайтесь между кадрами, пока вы экспериментируете со своими настройками.

Сохраните анимацию GIF

Иконка Methodshop с анимацией «масштабирования»

Вот и все! Вы только что создали анимированный GIF в Photoshop! Последний шаг — нажать кнопку «Сохранить» в правом нижнем углу экрана. Это сохранит ваш анимированный GIF-файл на вашем компьютере. Откройте свой GIF в веб-браузере и проверьте его.Затем, если необходимо, вернитесь и внесите какие-либо корректировки.

Где использовать после создания анимированного GIF-изображения в Photoshop?

Поздравляю! Вы только что создали анимированный GIF в Photoshop. Вот некоторые из мест, где вы можете использовать свой GIF:

Социальные сети: Социальные сети, включая Facebook, Pinterest и Twitter, принимают файлы в формате GIF. Первоначально они этого не сделали, но все начали принимать GIF-файлы в 2015 году.
Презентации: Вы также можете использовать свой GIF в презентациях с помощью Microsoft PowerPoint или Google Slides.
Электронные письма: Вы не можете включать мультимедийное содержание, например видео, в электронное письмо. Но вы можете использовать GIF. Добавление GIF-файлов в информационные бюллетени становится очень популярной тактикой.
Веб-сайтов: Вы можете использовать GIF-файлы, чтобы оживить сообщения в блоге. Вот пример.
Реклама: Баннеры в формате GIF, хотя и не так популярны, как объявления HTML5, все еще очень распространены в Интернете. Во многих рекламных сетях есть ограничения на рекламу в формате GIF. В общем, вы должны стараться, чтобы ваши баннерные объявления в формате GIF не превышали 150 КБ, а ваши анимации — менее 30 секунд с максимальным циклом 3x.

История формата файла GIF

GIF является аббревиатурой от Graphics Interchange Format . Формат файлов изображений GIF был создан компанией CompuServe, предоставляющей услуги коммутируемого доступа в Интернет, в 1987 году. Хотя GIF-файлы могут выглядеть не такими чистыми или маленькими, как файлы JPG, GIF-файлы имеют два основных преимущества перед другими веб-совместимыми типами файлов изображений: прозрачность и анимация.