Файлы в формате GIF повсюду. Некогда скромные анимированные изображения теперь являются неофициальным языком интернета. GIF анимация – это самый быстрый способ выразить эмоции в Twitter, а ещё мы можем тратить часы на её просмотр пролистывая ленту новостей в VK, Facebook или Одноклассниках.

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

Примечание: Во всех примерах из этой статьи я использую Photoshop CC 2017.

Для начала необходимо запустить Photoshop, перейти в “Файл” > “Импортировать” > “Кадры видео в слои” и выбрать необходимую видеозапись.

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

Примечание: Имейте в виду, что чем больше видео, которое вы импортируете, тем больше будет ваш GIF. Также, если вы импортируете слишком длинную видеозапись, выбор «Оставить каждый 2 Кадры» (или больше) – это простой способ уменьшить размер, не слишком сильно влияя на качество.

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

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

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

В итоге должно получиться что-то вроде этого:

Создание GIF анимации из серии статических изображений

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

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

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

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

Анимирование статических изображений

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

Для создания первого кадра сделайте самый первый слой видимым, а все остальные отключите. Затем, создавая второй кадр, сделайте второй слой видимым, а затем третий слой в третьем кадре и так далее. Когда вы начнете, всё станет понятнее.

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

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

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

Завершение

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

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

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

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

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

Усовершенствование анимации путём добавления промежуточных кадров

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

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

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

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

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

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

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

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

Создание 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 в фотошопе — 2019-2020

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Экспортировать файл

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

Вот, могущественное диалоговое окно Save for Web.

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

Как создать гифку в Photoshop

Как создать гифку из видео в Photoshop

1. Откройте видеофайл в Adobe Photoshop. Заранее обрежьте его до нужного размера. Лучше всего загружать популярные форматы, например, AVI, MP4, MOV и прочие. После того, как загрузили, вы можете отредактировать видео на шкале времени, например, обрезать или задать цикличность.

2. Далее важно правильно сохранить видео. Кликните на пункт «Файл». Там найдите «Экспортировать» -> «Сохранить для Web».

3. В появившемся окне задаем правильные настройки. В пункте «Набор» выберите параметр «с дизерингом». Дизеринг помогает улучшать качество цвета, при этом делая гифку легче.

Также выберите настройку для параметра «Цвета». Если ваша гифка черно-белая или не обладает яркими цветами, то можно уменьшить количество цветов, гифка будет занимать меньше места на диске. В нашем случае видео обладает большим количеством цветов, поэтому выбираем настройку «128».

4. Нажимаем кнопку «Сохранить» и выбираем место для хранения. Гифка готова.

Как создать гифку из картинок в Photoshop

Сделать GIF-анимацию из серии снимков немного трудозатратнее, чем из видео, но и в этом нет ничего сложного.

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

2. В появившемся окне выберите настройку «Использовать» — > «Файлы». Кликните на «Обзор» и загрузите фотографии в том порядке, в котором они должны оказаться в гифке. Для удобства заранее можно пронумеровать файлы с изображениями.

3. После того, как изображения загрузились, кликните на пункт главного меню «Окно». Там поставьте галочку напротив «Шкалы времени».

4. Посередине появившейся панели выставите «Создать анимацию кадра».

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

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

7. После этого нужно сохранить результат тем же способом, каким мы сохраняли гифку, сделанную из видео. Кликнете на пункт «Файл». Там найдите «Экспортировать» -> «Сохранить для Web». Выполните настройки, о которых мы рассказывали в первой части статьи. Не забудьте о пунктах «Набор» и «Цвета». В конце нажмите на «Сохранить». Гифка из фотографий готова.

Другие полезные советы для работы в Adobe Photoshop:

Видео: CHIP

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

Анимированные GIF-файлы полезны для придания изображениям большего объема и повествования. Вы можете создавать анимированные GIF-файлы в Photoshop из видеофайлов, фотографий и иллюстрированных изображений.

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

Ознакомьтесь с нашими советами о том, как создать анимированный gif в Photoshop.

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

1. В верхней строке меню перейдите в Окно , затем выберите Временная шкала .
2. В опции Create Timeline выберите Create Video Timeline .
3. В меню Window выберите Timeline

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

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

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

Если при создании анимированного GIF в Photoshop воспроизведение кажется слишком медленным или быстрым, отрегулируйте Timeline Frame Rate . Это доступно в расширяемом меню Timeline (верхний правый угол). Регулировка частоты кадров шкалы времени изменит количество кадров в секунду (fps), которое будет проходить ваш анимированный файл GIF.

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

Чтобы создать анимированный GIF в Photoshop с плавными переходами, вам нужно включить луковые оболочки. Onion-skinning позволяет видеть сразу несколько ключевых кадров.

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

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

Создание анимированного GIF-изображения в Photoshop с уже имеющимися изображениями — это немного другой процесс.

1. Перейти к Файл
2. Выбрать Сценарии
3. Выбрать Загрузить файлы в стек

Этот метод создания анимированного GIF в Photoshop загружает все отдельные изображения на один холст в виде отдельных слоев.Каждый слой представляет собой рамку.

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

В отличие от использования Video Timeline , Frame Animation выстраивает ваши изображения в последовательном порядке. Это также помогает организовать и визуализировать вашу последовательность кадр за кадром.

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

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

Правильная синхронизация каждого кадра важна для создания следующего великолепного анимированного GIF в Photoshop.

Используйте Tween для создания анимированного GIF в Photoshop

Чтобы создать анимированный GIF в Photoshop без опции «Луковая кожа», вы можете использовать Tween.Этот параметр недоступен, если для Timeline задано значение Frame Animation , но вместо этого можно использовать Tween .

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

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

Если вы используете видеофайл в Photoshop, есть разные способы создать анимированный GIF в Photoshop.

Перейдите к файлу , затем выберите Импортировать кадры видео и в слои . Это разделит видеокадры на отдельные слои Photoshop. В зависимости от вашего проекта или предпочтений откройте Video Timeline или Frame Animation .

Чтобы разделить каждый кадр вручную, откройте файл в Video Timeline .

Когда ваши кадры будут готовы, самое время сохранить файл в формате GIF. Перейдите к File , Export , затем Save for Web .

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

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

Лучшее руководство в Photoshop для создания красивого GIF-файла

Gif: Эндрю Лишевски (Gizmodo)

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

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

Источник видео

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

Photoshop не поддерживает столько форматов видеофайлов, сколько медиаплеер, как VLC, но он может импортировать некоторые из наиболее популярных форматов, таких как MP4, MOV, VOB и даже AVI, если вы работаете в Windows. Перенести видео с популярных сайтов обмена на рабочий стол не так уж и сложно; существует множество веб-сайтов, которые могут загружать для вас видеофайлы с YouTube, Vimeo, Twitter, Facebook и Instagram, но вам нужно будет спросить у Google, где их найти.

При поиске видео важно помнить о том, чтобы не слишком увлекаться разрешением. GIF, созданный из видео 4K, безусловно, будет выглядеть великолепно, но для импорта видео в Photoshop требуется много системных ресурсов, потому что вы, по сути, открываете сотни фотографий одновременно. Чтобы максимально увеличить объем оперативной памяти вашего компьютера и поцарапать диски, ваша система может начать работать медленной и вялой. Как правило, старайтесь брать видео, размер которых немного превышает размер готового GIF-файла.Для Gizmodo файлы GIF, используемые в историях, обычно имеют ширину 800 пикселей, поэтому идеально начинать с исходного материала размером не более 1280 на 720 пикселей (72oP). Это также дает вам немного больше места для обрезки материала, если вы хотите, чтобы GIF фокусировался на чем-то конкретном.

G / O Media может получить комиссию

Импорт отснятого материала в Photoshop

Есть несколько способов превратить видео в GIF, но Импорт> Видеокадры в слои … самый простой. Скриншот: Эндрю Лисжевски (Gizmodo)

Вы захотите пропустить стандартный диалог Photoshop «Файл> Открыть» и вместо этого перейти к опции File> Import> Video Frames to Layers .После того, как вы выбрали поддерживаемый видеофайл, который находится где-то на вашем компьютере, Photoshop откроет диалоговое окно «Импорт видео в слои », в котором вы можете ограничить объем клипа, который вы хотите импортировать и с которым работать.

Элементы управления обрезкой в ​​Photoshop являются базовыми и иногда медленными, поэтому не беспокойтесь об импорте только того клипа, который вам нужен. Скриншот: Эндрю Лисжевски (Gizmodo)

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

Ограничение количества импортируемых кадров может помочь уменьшить размер файла GIF. Скриншот: Эндрю Лисжевски (Gizmodo)

В левой части диалогового окна Import Video To Layers вы захотите оставить Make Frame Анимация всегда включена, и вы захотите использовать параметр Selected Range Only в разделе Range To Import вместо From Beginning To End .(Это также изменится автоматически, как только вы отрегулируете точки входа и выхода под предварительным просмотром клипа.) Также рекомендуется изменить параметр Limit To Every # Frames . Уменьшение количества кадров в GIF-анимации может помочь сохранить небольшой размер файла, но также для сохранения плавности анимации вы должны установить это значение на Limit To Every 2 Frames в большинстве случаев, что просто указывает Photoshop импортировать только каждый второй кадр. из видео.

Увеличение этого числа до трех или более приводит к тому, что видео выглядят прерывистыми при воспроизведении GIF, но бывают случаи, когда вы можете захотеть пойти намного больше, чем два, например, при импорте видео с замедленной съемкой в… Каждые 10 кадров для ускорения отснятого материала. Более высокое число также можно использовать для ускорения замедленной замедленной съемки, что приводит к более короткому и меньшему GIF. Иногда вам захочется поэкспериментировать с этим числом, чтобы получить желаемые результаты, или сохранить небольшой размер GIF, который будет легко загружать, что может потребовать повторного импорта.

Регулировка времени анимации

Если у вас есть 60-секундный клип и вы удалили половину кадров, результаты будут воспроизведены всего за 30 секунд, и любое движение будет отображаться в два раза быстрее.Поэтому при использовании параметра Limit To Every 2 Frames для импорта отснятого материала вам придется настроить время каждого кадра анимации GIF, чтобы это компенсировать.

Формат GIF позволяет указать время для каждого кадра в анимации, но при преобразовании видео в GIF вам нужно обеспечить воспроизведение каждого кадра с одинаковой скоростью. Скриншот: Эндрю Лисжевски (Gizmodo)

После Импортируя отснятый материал, Photoshop автоматически сгенерирует набор слоев изображений и временную шкалу, где каждый кадр будет размещен по горизонтали в виде серии миниатюр.Под каждым кадром находится число, которое показывает, как долго он будет удерживаться в секундах, прежде чем GIF воспроизведет следующий кадр. В этом примере каждый кадр отображается в течение 0,04 секунды, но поскольку была импортирована только половина кадров исходного клипа, это время необходимо удвоить, чтобы отснятый материал снова воспроизводился с нормальной скоростью. Щелчок по индикатору времени каждого кадра вызывает небольшое меню, позволяющее выбрать из ряда предустановок или ввести пользовательское значение с помощью Other… вариант. В этом случае изменение времени каждого кадра на 0,08 секунды заставит все воспроизводиться правильно. Если бы мы вместо этого импортировали … Каждые 3 кадра , нам нужно было бы изменить это значение на 0,12 секунды для компенсации и так далее.

Чтобы облегчить себе жизнь, вы также можете использовать клавиши Shift или Command / CTRL для выбора нескольких кадров на шкале времени и одновременного изменения их времени. Эти настройки также можно использовать для изменения скорости воспроизведения (для имитации замедленной съемки или замедленной съемки), или вы даже можете удерживать определенный кадр в течение нескольких секунд для дополнительного акцента.Каждый кадр GIF не обязательно воспроизводится с одинаковой скоростью.

Редактирование клипов

Окно временной шкалы Photoshop предоставляет простой способ редактирования и обрезки отснятого материала после его импорта. Снимок экрана: Эндрю Лисжевски (Gizmodo)

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

Кадры можно переставлять по одному, или вы можете выбрать несколько серий, используя клавиши Shift или Command / CTRL, и перемещать их все сразу. Удаление кадров выполняется таким же образом, что позволяет обрезать импортированные фрагменты до наиболее важных частей.

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

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

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

Сделайте вашу анимацию сияющей

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

Корректирующие слои Photoshop позволяют вам настраивать яркость или цветовые коллекции на импортированном вами видеоматериале. Скриншот: Эндрю Лисжевски (Gizmodo)

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

Переключение глаза для каждого слоя, включая корректирующие слои, изменяет их видимость.Каждый из них можно включать или выключать покадрово. Снимок экрана: Эндрю Лишевски (Gizmodo)

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

Экспорт вашего GIF с оптимизацией размера файла и качества изображения

Adobe немного похоронила Save for Web (Legacy) … в последних версиях. Скриншот: Эндрю Лисжевски (Gizmodo)

Как только вы будете довольны тем, как ваша анимация воспроизводится, и после того, как вы добавили какие-либо улучшения изображения, такие как регулировка яркости или цветокоррекция, вы готовы создать свой GIF. Лучший способ сделать это в Photoshop — использовать параметр File> Export> Save for Web (Legacy) … , который открывает диалоговое окно, которое сначала может показаться немного пугающим, но в конечном итоге вы все оцените. варианты.

Включите 2-Up в диалоговом окне «Сохранить для Интернета», чтобы получить предварительный просмотр того, как ваш сжатый GIF будет выглядеть по сравнению с исходной версией. Снимок экрана: Эндрю Лисжевски (Gizmodo)

Если вас не заботит размер файла размер в конечном итоге оказывается, нет предустановки, которая будет работать для каждого отдельного GIF. Итак, первое, что вам нужно сделать в окне Save for Web , — это убедиться, что выбран вариант 2-Up . Здесь представлены две версии анимации, расположенные бок о бок (или уложенные друг на друга), показывающие, как оригинал будет выглядеть в сжатом формате GIF.Вам придется немного поэкспериментировать, чтобы сбалансировать размер файла и качество изображения для каждого создаваемого GIF-файла, но предварительный просмотр результатов может сэкономить вам много времени.

Важные настройки, о которых следует помнить в диалоговом окне «Сохранить для Интернета» в Photoshop. Снимок экрана: Эндрю Лисжевски (Gizmodo)

1. GIF 128 Dithered в Photoshop. но вы можете легко настроить и сохранить здесь свои собственные пресеты для быстрого доступа в будущем.(Максимальное качество GIF с максимальными настройками для оптимального качества изображения также является полезным пресетом, но вам придется сделать его самостоятельно.)

2. Убедитесь, что для него установлено значение GIF , но диалоговое окно Save for Web также имеет обширные настройки для настройки сжатия файлов JPG, PNG и WBMP (устаревший формат черно-белого изображения, используемый в древних монохромных мобильных телефонах).

3. Здесь вы указываете, какой алгоритм уменьшения цвета Photoshop будет использовать для преобразования вашего видео в очень ограниченную цветовую палитру GIF.Adobe рекомендует установить для этого параметра значение Selective (по умолчанию), которое пытается сохранить как можно более широкий диапазон цветов из исходного материала. Но после долгих проб и ошибок мы обнаружили, что получаем гораздо лучшие результаты от настройки Adaptive , которая отдает приоритет наиболее преобладающим цветам в кадре. Придерживайтесь одного из этих двух параметров.

4. Чтобы ваш GIF выглядел как можно ближе к исходному видео, оставьте для этого параметра значение Diffusion .Чтобы уменьшить размер файла, вы можете попробовать один из двух других вариантов: Pattern или Noise , но вы часто будете видеть снижение качества изображения и явные признаки того, что вы смотрите на анимированный GIF.

5. В отличие от файлов JPG, которые могут хранить более 16 миллионов оттенков, файлы GIF ограничены максимум 256 цветами. Чем больше цветов вы выберете, тем лучше будут выглядеть ваши результаты, но вы также получите больший размер GIF. Это одна из двух настроек, с которыми вам захочется больше всего поэкспериментировать, но, как правило, старайтесь, чтобы она превышала 128 цветов.Ваши глаза будут вам благодарны.

Слева направо: плавный градиент, исходный градиент уменьшен до восьми цветов без сглаживания, исходный градиент уменьшен до восьми цветов со 100-процентным сглаживанием. Изображение: Эндрю Лишевски (Gizmodo)

6. Сглаживание — это техника, которая пытается замаскировать градиенты, которые не выглядят плавно переходящими при ограничении менее 256 цветов. Приведенный выше пример является экстремальным, но слева направо — это плавный градиент, этот исходный градиент, который был уменьшен до восьми цветов без сглаживания, и, наконец, этот восьмицветный градиент со 100-процентным сглаживанием.Полосы все еще видны, но общее качество изображения значительно улучшилось, несмотря на очень ограниченную цветовую палитру. Лучше всего оставить этот параметр на уровне от 80 до 90 процентов, но имейте в виду, что увеличение этого значения до 100 процентов резко увеличит размер файла вашего GIF.

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

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

Диалоговое окно «Сохранить для Интернета» включает в себя ярлыки для изменения размера изображения GIF или ограничения продолжительности его цикла. Скриншот: Эндрю Лисжевски (Gizmodo)

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

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

Мы хотели бы поблагодарить Адама Кларка Эстеса за его вклад в это руководство.Gif: Эндрю Лишевски (Gizmodo)

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

Designlab | Photoshop 101, день 7

День 7: Сделайте гифки!

Это последний день Photoshop 101!

Вы уже достигли кучи на этой неделе.Вот обзор того, что мы рассмотрели:

• Установка с копией Photoshop
• Обходим интерфейс
• Настройте наши предпочтения
• Основные сочетания клавиш (не забудьте шпаргалки!)
• Настройка нового файла
• Изучение панели инструментов
• Профессиональные неразрушающие рабочие процессы (сохранение слоев в целости)
• Контроль версий файла (сохранение нового файла каждый день)
• Различные типы слоев (растр, форма, корректировка, заливка, тип)
• Изготовление и редактирование форм
• Создание макета сетки с использованием фигур
• Блокировка и разблокировка слоев
• Увеличение и уменьшение масштаба
• Установка цветов переднего плана / фона, обводки / заливки
• Создание и удаление направляющих
• Выровнять и распределить команды
• Группировка и разгруппировка слоев
• Создание дизайна целевой страницы с использованием фигур и текстовых слоев
• Установка радиуса угла на прямоугольнике живой формы
• Создание дизайна кнопки с использованием живой формы прямоугольника и текстового слоя
• Неразрушающий рабочий процесс для работы с фотографиями
• Использование инструмента «Заплатка» для удаления нежелательной области изображения
• Использование инструмента штампа клонирования для дублирования области изображения
• Корректирующие слои (например, яркость / контраст)
• Экспорт изображений в формате JPEG, PNG или TIFF
• Размещение файла изображения в качестве смарт-объекта в другом файле
• Изменение размера и положения смарт-объектов
• Создание масок изображений с использованием смарт-объектов и живых фигур
• Команды «Размер холста» и «Размер изображения»

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

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

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

1. Загрузите сегодняшние файлы.

У нас есть 37 кадров для нашего первого GIF и 10 кадров для второго GIF — загрузите их здесь!

2. Откройте временную шкалу.

Затем нам нужно вызвать временную шкалу в Photoshop. Для этого перейдите в меню «Окно» и нажмите «Временная шкала». Он должен появиться внизу вашего интерфейса следующим образом:

3. Загрузите кадры для первого GIF.

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

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