Создание gif картинки из нескольких фото. Урок фотошопа

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

GIF анимации онлайн

1. Loogix

Чтобы воспользоваться данным сервисом вам необходимо как минимум 3 изображения. Если вам нужна GIF-ка, которая содержит более 3 изображений, тогда вы можете добавить до 10 изображений с помощью ссылки с текстом «Add one more picture». Сервис может создать анимировенное изображение в 5-ти различных скоростях. Также есть возможность добавления эффектов для вашей анимации (например «Размытие»).

    Также этот сервис включает еще две возможности для создания анимаций:
  • Создание обратных анимаций

2. Picasion

Picasion очень похож внешне на сервис Loogix, но немного отличается. Кроме всего, этот сервис предлагает импортировать изображения с сайта Flickr используя специальный тег изображения (для поиска).

    Помимо основного сервиса есть еще три:
  • Создание блестящих GIF
  • Создание аватарок
  • Изменение размера изображения

3. Gickr

Как и два предыдущих сервиса Gickr для создания анимации использует от 3 до 10 изображений. Также этот сервис позволяет не только создавать анимации различных размеров, но и с различными скоростями (до 10 секунд). Присутствует возможность импортировать изображения с сайтом Flickr и Picasa.

4. MakeaGIF

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

    Плюс к этому сервису есть еще:
  • Создание GIF из роликов Youtube
  • GIF-ки с помощью веб-камеры
  • Преобразование видео в анимацию GIF

5. GIFMaker.me

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

6. ImgFlip

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

7. GIFPal

Кроме основных возможностей по созданию анимаций, этот сервис позволяет добавлять различные эффекты для 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 анимация сделает акцент на одном аспекте.

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

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

Безусловно, у процесса создания GIF-анимации есть свои уровни мастерства. На профессиональном уровне «гифки» создаются с использованием мощных графических редакторов типа Adobe Photoshop. Способ попроще – применение функциональных узконаправленных программ, предназначенных именно для создания GIF-анимации. Они не столь сложны, как графические редакторы профессионального уровня, но все же освоить их за один вечер удастся не каждому.

Программы для gif-анимации – это EximiousSoft GIF Creator, FotoMorph, Ulead Gif Animator и их аналоги – примечательны наличием специальных эффектов. Для создания простенькой GIF-анимации особых каких-то навыков не нужно. Любительские «гифки» можно создать просто, быстро и бесплатно. Для этого в Интернете существуют специальные веб-сервисы. Они могут дополнить функционал несложных графических редакторов или менеджеров изображений, которые не умеют экспортировать в формат GIF, но обладают необходимыми опциями для коррекции картинок, интересными эффектами и просты в использовании. Как сделать gif - анимацию из картинки? Тройку простых веб-сервисов и предлагаемых ими способов создания GIF-анимации онлайн рассмотрим ниже.

Программы для создания GIF-анимации

1. Веб-сервис ToolsOn

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

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

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

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

Так же просто, как из картинок, создается GIF-анимация из видеороликов. В разделе ToolsOn «Конвертировать видео в GIF» жмем кнопку с надписью «Видео в GIF конвертер».

В форму сайта добавляем находящийся на компьютере видеофайл в поддерживаемых сервисом форматах MP4, OGV, OGG, WEBM. Далее в плеере-превью загруженного видео выбираем точку начала анимации. Задаем значение частоты кадров и жмем «Start Recording». По завершении нужного отрезка видео жмем кнопку «Stop Recording». Сохраняем GIF-анимацию на выходе в файл.

2. Веб-сервис Gif creator

Веб-сервис Gif creator предлагает больший перечень исходных материалов для создания GIF-анимации на выходе, нежели предыдущий участник обзора. «Гифки» могут быть созданы не только из хранящихся на диске картинок и видео, но также из фото, создаваемых по ходу процесса с помощью камеры компьютера. GIF-анимация, создаваемая посредством инструментария в окне браузера, размещается на сервере веб-сервиса, откуда файлы можно скачивать на компьютер. Не потерять веб-адрес созданного «шедевра» помогут кнопки расшаривания ссылки в соцсетях. Но Gif creator может работать и локально, для этого лишь нужно воспользоваться бесплатными клиентским приложением для iOS, Android или Windows 10. Благодаря наличию клиентских приложений, их простоте и удобству веб-сервис Gif creator и был выбран для этого обзора из немалого числа веб-ресурсов, предлагающих бесплатное создание GIF-анимации онлайн.

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

Соответствующими кнопками внизу либо активируем камеру для создания снимков, либо добавляем имеющиеся изображения. По итогу жмем кнопку-галочку.

Затем задаем значение задержки кадров анимации, при желании добавляем какую-то надпись и нажимаем кнопку «Применить». Если нужно только локальное сохранение GIF, далее используем кнопку «Сохранить», и файл будет сохранен в специальном месте устройства. Для Windows 10, например, это папка «Gif creator» внутри папки пользовательского профиля «Изображения».

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

3. Веб-сервис Google Фото

Веб-сервис Google Фото – фотохостинг от крупнейшего поисковика Интернета – явный победитель в номинации «Самый простой способ создания GIF». Но это пока что. Дело в том, что фотохостинг от Google активно развивается, но уже можно предположить, что поисковой гигант намеревается сделать своего рода уникальный продукт с минимумом инструментария для пользователей, но с максимумом заявленных возможностей. Плюс к этому, Google Фото задуман как интеллектуальный продукт. Сервис сам каталогизирует загруженные изображения по тегам мест съемки, тематики, сам может создавать из фото эффектные видео по типу слайд-шоу. А после установки клиентского приложения для iOS, Android или Windows и оставлении его работать в фоновом режиме, компания Google будет еще и незримо стоять на страже сохранности пользовательских медиатек, автоматически отправляя копии созданных фото и видео в интернет-хранилище Google Фото. Из доступных для пользователей возможностей внутри сервиса – несложное редактирование изображений, наложение эффектов, создание коллажей и GIF-анимации.

Для создания «гифки» в веб-интерфейсе Google Фото выбираем первый раздел «Ассистент», а в нем жмем кнопку «Анимация».

Выделяем нужные картинки из числа предварительно загруженных в Google Фото, жмем кнопку «Создать».

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

Все созданные таким образом GIF-анимации хранятся в разделе Google Фото «Альбомы», в подразделе «Анимации».

Не имея настроечных опций при создании GIF, Google Фото выигрывает у других сервисов возможностью загрузки большего веса исходных изображений. Для бесплатного хранения медиаконтента в Google Фото каждому зарегистрированному пользователю выделяется 15 Гб облачного пространства. Включить в состав анимации можно аж до 50-ти изображений.

Отличного Вам дня!

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

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

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

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

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

Для начала разберём онлайн сервисы. Представляю вашему вниманию ToolsOn – популярный ресурс по созданию GIF-анимации. Присутствуют и другие функции, к примеру, создание коллажей, иконок формата ICO, создание логотипа и конвертер рингтонов.

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


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

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

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


Здесь вы можете создать гифку при нажатии на кнопку «Create Animation» . Выбираете изображения с компьютера или сразу с камеры.


Справа появится выбор скорости изменения анимации в миллисекундах.

Также есть возможность скачать приложения для Android, iOS и Windows.


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

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

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


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

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

Сервис GIF Maker

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

Когда оно загрузится появятся функциональные параметры. Например, «Start Time» означает, с какого момента начинать анимацию.

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

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


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

Какие недостатки в этом сервисе можно наблюдать?

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

Создание гифок из видео с помощью Imgflip

Очередной сервис , с которым нужно работать следующим образом:


Gifcam

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

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