Как в онлайне сделать гиф из фотографий. Как создавать гифки: самое полное руководство. Сохранение GIF анимации в Фотошоп

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

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

Когда вы загрузили фотографии, и выбрали нужный анимационный шаблон и довольны результатом, что бы сформировать и сохранить полученную анимацию нажмите кнопку “Готово". Формирование анимации требует немного времени, подождите, после приложение даст вам возможность сохранить гиф-анимацию на диск. Надеюсь вам понравиться наше приложение и вы зайдете еще на сайт создать прикольную GIF анимацию. Если у вас возникли вопросы или пожелания по работе приложения пишите в комментариях (пока только для пользователей vk.ru и facebook.com), либо в разделе "Отзывы и комментарии" (см. внизу справа).

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

Программа «Фотошоп»

GIF - это созданное без кодирования либо при помощи Flash. Далее мы рассмотрим, как сделать GIF в «Фотошопе». Запускаем программу Photoshop. Создаем новый документ, кликнув по вкладке «Файл», а затем выбрав «Новый» среди пунктов выпадающего меню, вводим нужную высоту и ширину для будущей GIF-анимации.

Устанавливаем стандартное разрешение - 72 пикселя на дюйм. Далее левой кнопкой мышки нажимаем «ОК». Выбираем вкладку под названием «Файл», после этого «Открыть». Указываем файлы, которые будем использовать в анимации. Нажимаем левой кнопкой мышки на нужное изображение, чтобы его выделить. Для того чтобы выбрать несколько изображений, нажимаем и удерживаем клавишу Ctrl.

работа с изображением

Используем функцию «Открыть», когда выбраны все файлы. После этого Photoshop откроет картинки на рабочей области. Переходим к где левой кнопкой мышки нажимаем на «Перемещение». Расположена кнопка в верхней части левой колонки. Зажав левую кнопку мыши на изображении, переносим его в новый документ.

Photoshop поместит каждое из изображений на новый слой. При этом все слои находятся в одноименной вкладке. На следующем этапе нажимаем на вкладку «Файл» и выбираем «Открыть с помощью ImageReady». Если не открылась анимационная панель, нажимаем «Окно», а затем «Анимация». Палитра возникнет в нижнем участке рабочей области и будет показывать маленькое изображение выбранного вами файла.

Как сделать GIF-картинку: первый кадр

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

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

Повторяем процесс

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

Нажимаем «Стоп». Левой кнопкой мышки нажимаем по чёрной стрелке внизу 1-го кадра на анимационной палитре. Укажите в меню один из вариантов «Один раз» или «Всегда». В первом случае, анимация будет воспроизводиться единожды, во втором - проигрывание станет безостановочным.

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

Альтернативы

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

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

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

В решении поставленной задачи вам также могут помочь следующие программы: Adobe Flash, Blender, Pivot Stickfigure, Anime Studio, FotoMorph, 3DMonster, Funny Photo, Active GIF, Falco GIF, Abrosoft FantaMorph, Hippo Animator, Flex Gif, CoffeeCup GIF. Теперь вы знаете, как сделать GIF. Надеемся, наши советы вам помогут.

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

Способ 1: Easy GIF Animator

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

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



2. Откроется окно «Мастера создания анимации» . В нём нажмите на кнопку «Добавить изображения» .
   
   
   Запустится «Проводник» — используйте его, чтобы открыть каталог с фотографиями, из которых хотите сделать GIF. Добравшись до нужной папки, выделите файлы (удобнее всего это сделать комбинацией CTRL+ЛКМ ) и нажмите «Открыть» .
   
   
   Вернувшись обратно к «Мастеру…» , можете изменить порядок изображений, используя кнопки-стрелки. Для продолжения работы нажимайте «Далее» .



3. Настройте циклы и задержку готовой анимации, затем снова используйте кнопку «Далее» .



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



5. Нажмите «Завершить» .



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



7. Для сохранения результата щёлкните по пункту меню «File» .
   
   
   Далее выберите пункт «Сохранить» .



8. Снова откроется «Проводник» — перейдите в нём директорию, в которой хотите сохранить полученную гифку, введите имя файла и используйте кнопку «Сохранить» .



9. Готово – в выбранной папке появится GIF-анимация.

Использовать Easy GIF Animator очень удобно, но это платная программа с коротким сроком действия пробной версии. Впрочем, для единичного использования подойдёт прекрасно.

Способ 2: GIMP

Свободный графический редактор ГИМП является одним из самых удобных решений для нашей сегодняшней задачи.

Как видим, очень и очень просто, справится даже начинающий пользователь. Единственный недостаток ГИМП – медленно работает с многослойными изображениями и тормозит на слабых компьютерах.

Способ 3: Adobe Photoshop

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

Заключение

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

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

Способ 1: Gifius

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

Способ 2: Gifpal

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

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



2. Подтвердите намерения использовать Flash Player кнопкой «Разрешить» во всплывающем окне.



3. Щелкните «Get started now!» .



4. Выберите пункт «Start without webcam» , чтобы исключить использование веб-камеры в процессе создания анимации.



5. Кликните по «Select Image» .



6. Добавьте новые картинки в личную библиотеку с помощью кнопки «Add Images» .



7. Выделите необходимые для анимации картинки и нажмите «Открыть» .



8. Теперь нужно добавить картинки в панель управления GIF. Для этого поочерёдно выбираем из библиотеки по одному изображению и подтверждаем выбор кнопкой «Select» .



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



10. Подберите задержку между кадрами с помощью стрелок. Значение в 1000 ms равно одной секунде.



11. Щелкните «Make a GIF» .



12. Загрузите готовый файл с помощью кнопки «Download GIF» .



13. Введите имя для вашей работы и кликните «Сохранить» в этом же окне.

Преобразование видео в анимацию

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

Способ 1: Videotogiflab

Сайт, предназначенный специально для создания анимации с видеороликов форматов MP4, OGG, WEBM, OGV. Большим плюсом является наличие возможности регулировать качество выходного файла и просмотр сведений о размере подготовленного GIF.

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



3. Преобразуйте видеозапись в GIF, щелкнув «Start Recording» .



4. Если хотите сделать анимацию меньше загруженного файла по продолжительности, кликните на нужном моменте «Stop Recording / Create GIF» для прекращения процесса преобразования.



Когда всё будет готово, сервис покажет информацию о размере полученного файла.

5. Отрегулируйте количество кадров в секунду (FPS) с помощью ползунка ниже. Чем больше значение, тем лучше будет качество.



6. Скачайте готовый файл путем нажатия кнопки «Сохранить анимацию» .

Способ 2: Convertio

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

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

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

В конце концов люди начали спрашивать нас: «Как вы создаете GIF анимации?». Пришло время раскрыть секрет.

Дизайн GIF изображений

1. Секретный ингредиент

Вот мой небольшой секрет: все мои GIF анимации сначала были видео-файлами. Обычно я использую ScreenFlow , который я кстати также применяю для создания видео наших продуктов. Это простая программа, которая в то же время содержит множество полезных анимационных инструментов.
После того как я сохраняю анимацию как видео файл, я импортирую его в Photoshop через File > Import > Video Frames As Layers.

Совет: Если ScreenFlow или After Effects вам не по карману, то создайте анимацию в Keynote, и экспортируйте ее как видео. Наконец-то, хоть какое-то применение этой функции в Keynote.

2. Меньше цветов = больше веселья

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

3. Используйте размытие в движении (motion blur), если возможно

Такие программы как ScreenFlow и After Effects позволяют экспортировать видео с применением размытия в движении. Это не только придаст вашей анимации профессиональный вид, но и упростит процесс уменьшения размера файла в Photoshop.

4. Будьте (отчасти) ленивыми

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

Экспорт GIF анимаций

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

5. Удалите кадры-дубликаты

Скорее всего ваша анимация останавливается или остается неподвижной на какой-то момент времени. Присмотревшись, можно заметить, что этот момет состоит из нескольких одинаковых кадров. Если таких кадров 10 штук, то удалите 9 из них и установите длительность оставшегося кадра на, например, 1 секунду.

Если это не поможет, попробуйте заново импортировать видео, но на этот раз выберите параметр Limit To Every 2 Frames. Это должно значительно уменьшить размер файла.

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

6. Меньше цветов

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

7. Измените параметр Lossy* (потери)

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

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

Ничего не изменилось! Помогите!

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

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