Photoshop в gif: Создание GIF-анимации в Photoshop | Руководства по Adobe 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-анимации из видео в Photoshop

Для работы инструмента импорта видео в Adobe Photoshop CS3 необходимо установить Quick Time Player версии 7.1 или выше.

Для импорта кадров из видео нажмите «Файл > Импортировать > Кадры видео в слои…» и выберите файл на компьютере.

Если во время импорта вы получите сообщение о том, что формат не поддерживается, видео нужно будет конвертировать в «.mp4» формат. Рекомендую воспользоваться бесплатным конвертером Handbrake. В нем можно сразу вырезать нужный фрагмент видео, чтобы не конвертировать весь файл. Если вы используете Photoshop CS3, после конвертирования поменяйте расширение «.mp4» на «.mov».

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

Если вы используете Photoshop CS3, установите ползунок в начало фрагмента, зажмите клавишу «Shift» и перетяните ползунок в конец желаемого фрагмента.

Если же у вас установлен Photoshop CS6, черными ползунками укажите начало и конец фрагмента.

Поставьте галочку напротив «Оставить каждый» и укажите частоту выборки кадров видео. Пример: если видео с частотой 30 кадров/сек, а вы ввели значение «5», то частота кадров анимации будет 30 / 5 = 6 кадров в секунду, то есть чем больше число, тем реже кадры (тем меньше размер анимации).

Включите шкалу времени, нажав команду меню «Окно > Анимация» в Photoshop CS3 или «Окно > Шкала времени» в Photoshop CS6.

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

Нажмите «Файл > Сохранить для Web…» (Photoshop CS6) или «Файл > Сохранить для Web и устройств…» (Photoshop CS3). Выберите формат «GIF». По желанию, можете уменьшить или увеличить размер картинки, изменив значения в пикселях или в процентах от исходного размера.

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

Опубликовано в Windows

Отправить другу:

Открываем видео и GIF-анимацию в Фотошопе, для версий CS3, CS4, CS5

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

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

Инсталлируем эти две программы обычным способом.

Вот интерфейс этого замечательного конвертера:

Открываем программу. Кликаем Файл—>Открыть, выбираем файл. В главном окне программы надо выбрать следующие настройки:

• Формат — AVI DV PAL
• Цветокоррекция и Фильтрация — Desabled
• Кодирование видео — DV-Video
• Кодирование звука — пофиг

И клик по кнопке «Кодировать». Программа предложит выбрать папку сохранения, выбираем её, ОК. Получаем файл с кодеком dvsd DVC/DV Video в контейнере DV Type 2 AVI Multipart OpenDML AVI. С вероятностью в 90% Фотошоп скушает видео с такими параметрами.

Переходим к следующей проблеме. Это объём файла. Дело в том, что Фотошоп при открытии видео в слои использует оперативную память компа. Если у Вас х64, тогда вопросов нет, можно ставить плитки до 128Гб. Но по разным причинам, народ не может перейти на х64 и грустно сидит на х86, не потому, что влом переходить или не позволяет религия, а по другим, совершенно объективным причинам. Например, автор этих строк, при всём его высоком стремлении к прекрасному и новому, не использует х64 из-за отсутствия для оного варезных плагинов к 3ds max. Однако мы отвлеклись.

Естественно, что для задач, выполняемых с помощью Фотошопа, длинные видео не требуются, а надо то всего максимум несколько десятков кадров. Но ведь их надо каким-нибудь образом вырезать. Нормальные видеоредакторы типа Adobe Premiere Pro требуют знаний и опыта работы, а также отнимают значительный ресурс у оперативки и процессора. Про то, что они платные(и стоят немерено), я говорить просто стесняюсь. Короче, для редкого использования с такими программами связываться смысла нет. Простые редакторы типа штатного Movie Maker позвольте не комментировать.

Зато существует прекрасная лёгкая программа VirtualDub, правда, с одним недостатком. Работает она с очень ограниченным наборов кодеков в AVI. И тут то опять вспоминаем про конвертер XviD4PSP. С настройками, указанными выше, видео подойдёт и к нему. Выбираем нужные куски видео, вырезаем, сохраняем, Фотошопом открываем. Можно поступить и по другому, сохранить отдельные кадры видео с помощью VirtualDub, а затем собрать из них анимашку в Фотошопе. Например, сложить поучившиеся файлы в одну папку и открыть их пакетно в Фотошоп в одном документе на разных слоях, но, как правило, это занимает больше времени, но, в любом случае, без конвертера XviD4PSP нам не обойтись.

Как сделать GIF в Adobe Photoshop

GIF-файлы есть везде. Некогда скромное анимированное изображение теперь стало неофициальным языком Интернета. GIF-файлы – это самый быстрый способ выразить эмоции в Twitter, и вы можете часами смотреть их на Reddit и Facebook.

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

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

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

Начните с перехода к File> Import> Video Frames to Layers . Вам не нужно сначала создавать новый файл. Выберите свое видео и нажмите « Открыть» .

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

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

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

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

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

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

Как экспортировать GIF в Photoshop

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

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

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

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

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

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

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

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

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

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

Вот как это работает:

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

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

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

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

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

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

Установите частоту кадров и создайте зацикленный GIF

В завершение установите задержку кадров – это, по сути, частота кадров. Щелкните первый кадр, затем щелкните последний кадр, удерживая нажатой клавишу «Shift» .

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

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

Теперь нажмите кнопку « Воспроизвести» в нижней части экрана, чтобы просмотреть свой GIF. Теперь вы должны увидеть свой анимированный GIF в действии.

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

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

Расширенная анимация с анимацией

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

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

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

Сначала выберите первый кадр и нажмите кнопку « Анимация» на панели инструментов в нижней части панели «Таймлайн».

В открывшемся диалоговом окне установите для параметра Tween with значение Next Frame , а Frames to Add – количество переходных кадров, которое вы хотите. Более высокое число означает более плавный, но более медленный эффект. Нажмите ОК, чтобы сгенерировать новые кадры.

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

Нажмите кнопку Play , чтобы просмотреть эффект.

Экспорт GIF в Photoshop

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

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

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

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

Создание и редактирование GIF-файлов в Photoshop

Создать GIF в Photoshop довольно просто, и это стоит того, потому что это дает вам полный контроль над результатом.

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

Связанный

Как сделать анимированный 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 году. Она была обновлена ​​новой информацией и примерами.

Как сделать анимацию в Фотошопе CS6 и CC

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

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

Содержание: “Как сделать анимацию в Фотошопе”

Создаем холст и подготавливаем слои к работе.

1. Для начала работы нам потребуется создать новый документ. Открываем Фотошоп и нажимаем на вкладку “Файл”. В открывшемся меню нужно выбрать “Создать новый документ”.

2. Перед нами откроется диалоговое окно, в котором можно указать все необходимые параметры документа. Указываем название, размер и прочие атрибуты, после чего кликаем на «ОК». Этот урок у нас проходит в Photoshop CC, но с CS6 и другими версиями будет мало различий.

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

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

Создаем анимацию

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

1. Для работы потребуется вывести инструменты по работе с анимационными картинками. Для этого переходим в верхнему меню на вкладку «Окно». Там вы увидите пункты «Движение» или “Шкала времени” – вот она-то нам и нужно.

   Шкала времени должна отобразиться. Если ее по-прежнему нет, не стоит переживать. Посмотрите посередине, там будет кнопка «Отобразить кадры», нажмите на нее.

2. Теперь смотрим, сколько у нас прорисовано кадров/слоев и добавляем нужное количество. Для этого воспользуйтесь кнопкой «Добавить кадр».

3. Далее, работаем с каждым кадром поочередно. Требуется изменить параметры видимости слоев. Оставив видимым только нужный на конкретном кадре слой.

4. Затем выставляем значение “кол-во секунд”, которое будет выделятся на каждый кадр при запуске анимации. В нашем случае мы еще заменим “однократно” на “постоянно”, чтобы анимация была зациклена:

5. Вот собственно и все, анимированная картинка готова. Результат своего творчества можно посмотреть, нажав на «Запуск воспроизведения анимации» (кнопка “Play”).

   Если все устраивает, остается лишь сохранить документ в формате *.gif.

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

Надеемся вам все было понятно. Если нет, то пишите об этом в комментариях и наш специалист обязательно вам ответит и разберется в вопросе.

До встречи в следующих уроках по Фотошопу.

Создание Gif анимации в фотошопе cs5. — Фотошоп

Создание Gif анимации в фотошопе cs5.

Подробности

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

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

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

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

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

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

Отредактировав расположение глаз и рта выделяем все слои и щелкнув правой кнопкой мыши выбираем: Объединить слои.

Теперь у нас получился один слой с изображением смайлика. Переименовываем его в 1 и копируем.

Скопированный слой будем считать новым кадром нашей анимации. Для того чтобы смайлик у нас получился прыгающим сдвигаем его немного вниз и слегка сплющиваем применив: Свободную трансформацию Ctrl+t.

Называем его 2 и создаем еще несколько копий слоев и редактируем их. В итоге получаем следующее.

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

Теперь непосредственно приступим к созданию анимации.

Нажимаем вкладку Окно и выбираем Анимация.

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

Теперь мы видим первый кадр нашего анимационного изображения.

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

Копируем кадр, нажав на кнопку создания нового кадра.

Редактируем видимость слоев второго кадра.

И так далее создаем все кадры нашей анимации.

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

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

В итоге мы получили вот такой милый смайлик.

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

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

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

Узнайте, как я сделал этот GIF! Фото через Graham Wizardo.

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

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

–

.

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

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

Размеры

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

Разрешение

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

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

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

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

–

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

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

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

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

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

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

–

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

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

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

–

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

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

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

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

–

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

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

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

Фото через Graham Wizardo.

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

—

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

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

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

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

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

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

–

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

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

–

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

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

–

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

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

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

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

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

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

На эти настройки следует обратить внимание в окне «Сохранить для Интернета».

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

.

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

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

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

Сохранить

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

Моя готовая баннерная реклама GIF. Фото через Graham Wizardo.

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

–

И вот он — готовый 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-файла? В этом уроке вы точно узнаете, как создать анимированный 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 , пока он не встанет на место.

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

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

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

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

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

Выберите File > Export > Save for Web (Legacy) .

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

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

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

В разделе Анимация установите Параметры цикла с на Навсегда .

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

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

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

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

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

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

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

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

анимации — Как преобразовать видеофайл в анимированный GIF в Photoshop?

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

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

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

Посетить Stack Exchange

2. 0

3. +0

6. Авторизоваться
   Зарегистрироваться

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

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

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

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

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

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

Просмотрено
722k раз

Я пытался преобразовать MP4 в анимированный GIF для ответа здесь.

Я попытался открыть файл непосредственно в Photoshop, а затем щелкнул меню временной шкалы и выбрал оба варианта:

Но ни один из них не работал. Казалось, они просто сведут его в единое изображение.

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

Цай

39.2k1111 золотых знаков6969 серебряных знаков160160 бронзовых знаков

Создан 31 янв.

ДомДом

8,16888 золотых знаков4242 серебряных знака8686 бронзовых знаков

0

Преобразование видеофайла в структуру, совместимую с форматом анимированного файла GIF

1. Откройте Photoshop, не открывая видеофайл.

2. Перейдите в File → Import → Video Frames to Layers .

3. Убедитесь, что в появившихся параметрах установлен флажок «Сделать анимацию кадра».

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

Сохранение / вывод анимированного GIF из созданных кадров

1. Перейдите в Файл → Сохранить для Интернета… (или File → Export → Save for Web (Legacy) … в более новых версиях)

2. Выберите один из вариантов GIF в меню предустановок или выберите вариант GIF в раскрывающемся списке под предустановками и настройте параметры в соответствии с вашими потребностями.

3. Щелкните «Сохранить», дайте ему имя и наслаждайтесь.

Цай

39.2k1111 золотых знаков6969 серебряных знаков160160 бронзовых знаков

Создан 31 янв.

ДомДом

8,16888 золотых знаков4242 серебряных знака8686 бронзовых знаков

7

Очень активный вопрос .Заработайте 10 репутации, чтобы ответить на этот вопрос. Требование репутации помогает защитить этот вопрос от спама и отсутствия ответов.

Graphic Design Stack Exchange лучше всего работает с включенным JavaScript

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

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

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

Настроить параметры

Как создать 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, вам необходимо получить доступ к временной шкале анимации, поэтому перейдите наверх и щелкните «Окно >> Временная шкала».Вы увидите новый открытый фрейм в нижней части окна с небольшим квадратом посередине с надписью «Create Frame Animation». Если он этого не говорит, щелкните небольшое раскрывающееся меню рядом с ним и выберите «Создать анимацию кадра».

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

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

После того, как вы щелкнете по нему, ничего не произойдет, просто когда вы добавите в анимацию, все импортированные вами слои будут использоваться как новые кадры для 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

Эта история является частью группы историй, называемых

Недостаточно иметь отличные новые устройства, приложения и игры — вы также должны знать, как ими пользоваться.Здесь, в The Verge, мы предлагаем пошаговые инструкции для опытных и новых пользователей, которые работают с приложениями, службами, телефонами, ноутбуками и другими инструментами в Интернете, macOS, Windows, Chrome OS, iOS и Android. От простых инструкций по установке и использованию новых устройств до малоизвестных стратегий использования скрытых функций и лучших методов увеличения мощности или хранилища — мы вернули вам ваши технологии.

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

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

GIF от Дами Ли

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

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

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

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

Когда вы довольны скоростью анимации, самое время сохранить ваш GIF! Перейдите в Файл -> Экспорт -> Сохранить для Интернета. Убедитесь, что для параметров цикла установлено значение «Навсегда» как на шкале времени, так и на экране экспорта. Кроме того, помните об ограничениях размера файла социальных платформ, которым вы планируете поделиться им.Хорошее практическое правило — хранить файлы размером менее 5 МБ, чтобы ими можно было делиться где угодно. Удачи!

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

Ура, больше анимированных GIF-файлов!

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

У вас нет Photoshop, но есть адрес электронной почты? Загрузите бесплатную пробную версию! Я использую Photoshop CC, но действия должны быть аналогичны предыдущим версиям.

Начнем с создания анимированного GIF из видео.

Шаг 1. Настройте рабочее пространство

Итак, вы открыли Photoshop. Что теперь?

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

Теперь перейдите к File> Import> Video Frames to Layers. Появится другое окно, в котором вы сможете выбрать видео из ваших собственных файлов.В этом примере я использовал конфетти-пушечную дуэль Джордин и Лорен — обычная среда в офисе VIEO.

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

Шаг 2. Выберите видеоклип

После того, как вы выберете видео из файлов, Photoshop предложит выбрать диапазон видео, который вы хотите импортировать . Вы можете импортировать все видео целиком, выбрать из диапазона или ограничить каждые X кадров.

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

Чтобы выбрать диапазон используемых кадров, перетащите скобки под предварительным просмотром, чтобы они охватили клип, который вы хотите использовать . Параметр «Ограничить каждые [X] кадров» позволяет вам настроить, насколько изменчивым будет GIF. Чем больше количество кадров вы выберете, тем резче будет видео.

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

Шаг 3. Отредактируйте видеоклип

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

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

Внизу, , все ваши кадры появятся на шкале времени . Не видите свой график? Перейдите в «Окно» в строке меню и выберите «Временная шкала». Это покажет покадровый просмотр в нижней части окна Photoshop.

Здесь вы можете удалить кадры, чтобы обрезать клип.Исходный клип, который я выбрал на предыдущем шаге, произвел более 100 кадров, что слишком много. Я просто выбрал кадры, которые мне не нужны, удалил их (нажмите маленькую кнопку мусорного ведра на временной шкале) и в итоге получил около 20 кадров.

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

Для предварительного просмотра GIF щелкните значок воспроизведения под шкалой времени.

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

Довольны своим потрясающим анимированным GIF? Теперь вы готовы к экономии. Я обрезал свое и уменьшил размер изображения, так как мне не нужно было, чтобы оно было огромным. Перейдите в меню «Файл «> «Экспорт»> «Сохранить для Интернета «.

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

Результат: наименее смертоносная дуэль в истории

Теперь давайте создадим анимированный GIF из серии неподвижных изображений.

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

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

Шаг 1. Настройте рабочее пространство

Итак, этот шаг аналогичен шагу в видеоуроке выше. Открыв Photoshop, убедитесь, что вы находитесь в своем рабочем пространстве для движения. В верхнем меню перейдите к File> Scripts> Load Files into Stack .

Шаг 2. Загрузите фотографии

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

Шаг 3. Создайте свои рамки

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

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

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

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

Шаг 4. Отредактируйте кадры

Итак, теперь, когда у вас есть эти рамки, что вы будете делать? Вы редактируете! Как и в видеоуроке выше, вы можете редактировать отдельные слои или группу в целом .

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

Для предварительного просмотра GIF щелкните значок воспроизведения под шкалой времени.

Шаг 5. Пора сохранять GIF!

Довольны ли вы своим GIF-файлом? Большой! Пора экономить.

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

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

Результат: красочный гость, проверяющий Ноксвилл!

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