На сегодняшний день не составляет труда найти программы, где быстро и просто можно будет сделать собственную гифку. Предлагаем вам несколько вариантов, выбирайте любой подходящий.
Сервисы и программы по созданию гифок
В интернете существует множество сервисов по созданию гифок. Рассмотрим несколько самых простых и качественных.
- gifovina.ru . Это абсолютно бесплатный сервис, который позволяет создать не только гиф-анимацию, но и анимированные аватарки, а также баннеры с эффектами. Простой в управлении и имеет запоминающееся название. Позволяет работать с загруженными картинками (просит на них ссылки) либо с фотографиями с веб-камеры.
- Easy Gif Animator . Позволяет создавать различного рода гифки, при этом дополняя их различными спецэффектами. Позволяет работать с цветовой гаммой, продолжительностью анимации, преобразовывать gif в AVI или даже в SWF. При этом в анимацию можно даже добавлять музыкальное сопровождение.
- Video Avatar . Одна из самых популярных и легких программ. Помогает создавать картинки и анимации из видеофайлов. Для того чтобы сделать гифку, пользователю надо выбрать нужное видео или часть видеофайла. После этого можно сделать кадрирование для получения нужной гиф-анимации или, например, аватарки на форум. О том, как видео превратить в гифку, читайте в статье .
- Benetone Movie Gif . Удобное приложение, которое, ко всему прочему, имеет большой выбор эффектов. Помогает сделать гиф-анимацию как из фото, так и из видеофайла. Чем-то напоминает программу для создания презентаций.
- Maximys Gif Animator . Довольно-таки простая программа, которая имеет свои плюсы. Например, доступен эффект прозрачности и сжатия анимации.
- Microsoft Gif Animator . С этой программой легко работать, позволяет быстро сделать гиф-анимацию. Есть большое количество настроек.
- giiif.ru . Полезный сервис для тех, кто любит блестящие анимированные надписи. Вместе с этим сайтом создать блестящее признание в любви или написать информацию о себе и вставить в подпись на форумах очень просто.
Как сделать гифку в Photoshop
В отличие от сервисов, которые были описаны выше, Фотошоп как программа, естественно, сложнее. Но именно при работе с ней вы сможете проявить свою фантазию и опять же бесплатно создать уникальную гиф-анимацию, которой не будет ни у кого, кроме вас. Как правило, те, кто пользуются онлайн-сервисами, получают гифки худшего качества и похожие друг на друга. Если вы решили сделать индивидуальную гифку, используйте Фотошоп. Вот краткое описание действий для получения простейшей гиф-анимации:
- Создайте файл, который будет выступать фоном для будущей анимации.
- Перенесите на него нужные картинки и надписи, предварительно создав или вырезав их.
- Найдите окно "Анимация" и нажмите на него. Вы увидите окошко для работы с анимацией, на ней вы сможете увидеть "видимые слои".
- С помощью кнопки "Создание копии выделенных кадров" продублируйте картинку нужное количество раз. Возьмем, к примеру, три.
- На первой картинке уберите надпись и оставьте только картинку.
- На последней картинке, соответственно, убираем рисунок и добавляем вместо него картинку.
- Теперь вам нужно задать продолжительность для каждого кадра в отдельности (чаще всего она одна).
- В выпадающем меню задайте действие "Постоянно", если хотите, чтобы именно так работала будущая гифка.
- После всего сделанного нажмите "Запуск воспроизведения анимации".
- Если вас устраивает конечный результат, сохраняйте в формате.gif в "Сохранить для WEB и устройств..".
Для получения более подробной информации прочитайте статью
Gif анимация хорошо известна тем, кто имеет дело с созданием баннеров и различных
подвижных элементов. Практически каждому пользователю интернета хоть раз, но встречалась
анимированная движущаяся картинка в виде рекламы или части сайта.
Преимущества
GIF анимации
очевидны: подвижный яркий элемент способен привлечь гораздо
больше внимания и воплотить практически любую идею дизайнера. Но что такое Gif анимация,
и из чего она состоит? Как сделать гифку? С помощью какой программы можно создать Gif анимацию? В чем
преимущества нашей бесплатной программы Gif Animator?
Формат Gif: особенности и преимущества
Файл формата Gif объединяет в себе несколько изображений, которые выводятся на экран в определенной последовательности и в итоге образуют анимированный элемент. Поэтому чтобы создать Gif анимацию, не спешите сразу обращаться к нашей бесплатной программе Gif Animator – вначале подготовьте набор картинок, из которых будет создано ваше подвижное изображение, и четко продумайте суть того, что хотите получить в итоге.
Итак, вы воспользовались программой Gif Animator для создания бесплатной анимации и теперь решили разместить результат на своем сайте. И тут вас ждет множество приятных открытий:- Процедура размещения Gif анимации в web ничем не отличается от размещения неанимированного изображения – обычного Gif.
- Бесплатное анимированное изображение, которое вы решили создать с помощью программы Gif Animator на нашем сайте, не требует никаких дополнительных плагинов для просмотра.
- За счет сжатия при создании Gif анимация в итоге получается небольшого объема.
- После создания Gif анимацию можно поместить в кэш. Повторного обращения к серверу при этом не требуется. Так же, как и для работы с анимированным Gif изображением не требуется повторной связи с сервером.
- Решив при помощи нашей бесплатной онлайн программы Gif Animator создать анимированное изображение, в последующем вы можете просто разместить его на странице – для этого вам не потребуется использовать никаких приемов программирования.
Как сделать бесплатную анимацию в программе Gif Animator?
К сожалению, специализированных программ, позволяющих быстро, качественно, а главное – бесплатно создать Gif анимацию онлайн, не так много. Именно поэтому мы предлагаем вам наш уникальный продукт – программу Gif Animator, при помощи которой вы сможете с минимальными затратами времени создать любую подвижную картинку.
Наша бесплатная программа Gif Animator для создания анимированных изображений онлайн отличается простотой использования. Все что от вас требуется – выполнить несколько простых действий:- выбрать нужные изображения для создания бесплатной Gif анимации;
- загрузить их в той последовательности, в которой вы желаете их видеть в результате;
- нажать «Создать Gif».
Чтобы получить намного больше возможностей работы с бесплатной онлайн программой для создания анимированных изображений Gif Animator – просто зарегистрируйтесь на нашем сайте!
Вы можете продолжить создавать Gif анимацию, даже если при предыдущем посещении ресурса вам пришлось прервать свою работу. Ведь все ваши творения вы всегда сможете найти на сайте! А лучшие Gif анимации, которые вы сумели создать при помощи нашей бесплатной онлайн программы Gif Animator, попадут в галерею сайта и сумеют стать предметом вашей личной гордости.
Задумывались ли вы, как создаются анимированные GIF-файлы? Автор урока предлагает вам за одну ночь освоить некоторые секреты анимации с помощью этого урока. Так же вы научитесь использовать Шкалу времени (Timeline) , которая доступна в версии Photoshop CS6. А теперь начнём!
Результат урока.
Шаг 1
Создайте новый документ (Ctrl + N ) с размерами файла 800 х 500 пикселей. Залейте фон любым цветом, который вы хотите. Теперь идём в меню Слои - Стиль слоя - Наложение градиента (Layer> Layer Styles> Gradient Overlay). Примените следующие настройки: Стиль Радиальный (Radial), цвета от чёрного (# 000000) к синему (# 54799b), который будет использоваться в центре.
Шаг 2
Создайте новый слой и назовите его Noise Layer . Выберите инструмент Заливка (Paint Bucket Tool) и залейте созданный слой тёмным цветом (# 231f20). Оставьте активным слой Noise Layer и идите в меню Фильтр - Шум - Добавить шум (Filter> Noise> Add Noise). В диалоговом окне настроек фильтра поставьте такие значения: Эффект (Amount) 3%, распределение Равномерное (Uniform) и нажмите ОК.
Шаг 3
Нажмите комбинацию клавиш (Ctrl + U) и в появившемся диалоговом окне настроек коррекции введите значения Насыщенности (Saturation) 100%: Измените этому слою режим наложения на Мягкий свет (Soft Light).
Примечание переводчика: для того чтобы добиться такого цвета как у автора на скриншоте, можно при коррекции Цветовой тон / Насыщенность (Hue/Saturation) значение Цветового тона (Hue) поставить на - 140.
Шаг 4
Добавьте любой текст, который вы хотите. Здесь мы будем использовать текст логотипа сайта 123RF. В стилях слоя используйте Обводку (Stroke). Значения размера обводки выберите по своим предпочтениям.
Примечание переводчика: На скрине автора уже растрированный текст вместе со стилем Обводка. Чтобы у вас получилось так же, после того как применили обводку, уберите Заливку (Fill ) слоя с текстом на 0%, преобразуйте этот слой в смарт объект, а затем растрируйте его.
Шаг 5
В этом шаге мы будем создавать светящийся эффект для текста с помощью стилей слоя. Дважды щёлкните по слою, чтобы вызвать окно настроек стилей. Для того чтобы настроить стили слоя, используйте скриншоты ниже.
Тиснение (Bevel & Emboss)
Внутренняя тень (Inner Shadow)
Внутреннее свечение (Inner Glow)
Наложение цвета (Color Overlay)
Внешнее свечение (Outer Glow)
Тень (Drop Shadow)
Шаг 6
Как только вы закончите создавать световые эффекты с помощью стилей слоя, перейдите в палитру слоёв и уменьшите этому слою значение Заливки (Fill) на 0%.
Шаг 7
Дублируйте слой, который вы создали в шаге 5 и отключите этой копии все стили слоя. Настройте теперь стили так:
Внутренняя тень (Inner Shadow)
Внутреннее свечение (Inner Glow)
Шаг 8
Ниже результат после того как вы применили стили слоя.
Шаг 9
Теперь мы создадим движущиеся световые пятнышки. Создайте 5 слоев поверх существующих, и переименуйте их как 1,2,3, R и F. Если у вас свой текст создайте слои в соответствии с вашими буквами. Сгруппируйте эти слои в папку, которой дайте название Light Spots и смените режим наложения на Осветление основы (Color Dodge).
Активируйте инструмент Кисть (Brush Tool), выберите мягкую кисточку, установите Непрозрачность (Opacity) на 95% и белым цветом нарисуйте пятнышки поверх текста. Для каждой буквы отдельное световое пятно на своём слое. Ниже на скриншоте вы можете рассмотреть, как слои выглядят у автора в палитре слоёв.
Шаг 10
Теперь идём в меню Окно - Шкала времени (Window > Timeline). Вы заметите, что ваши слои уже построены в этой палитре в левой её части. Выделите каждый из пяти слоёв со световыми пятнами, которые находятся в группе Light Spots и убедитесь что индикатор текущего времени (голубой слайдер) стоит на нулевом кадре. Теперь на каждом слое в группе, при его активности, нажмите на опцию Позиция (Position), чтобы создать ключевой кадр.
Примечание переводчика: Для того чтобы активировать шкалу времени, нажмите кнопку Создать временную шкалу для видео (Create Video Timeline) и все ваши слои загрузятся в шкалу времени. Выделен в ней будет тот же слой или группа, что и в палитре слоёв.
Шаг 11
Установитеиндикатор текущего времени (голубой слайдер) на отметке 01:00 F и переместите слои со световыми пятнами по траектории их движения относительно контура буквы.
Шаг 12
Так будет выглядеть начальное положение светового пятна на буквах. Перемещайте индикатор текущего времени по шкале и двигайте слои со световыми пятнами, создавая ключевые кадры. Продолжайте их перемещать, пока не закончите движение пятнышка по всей букве каждого текстового слоя. Для инструкции смотрите несколько скриншотов ниже
Всем доброго времени суток!
Довольно часто мне задают вопросы относительно картинок. Я, правда, не специалист по рисованию и редактированию фото и пр., но базовые мало-мальские приемы мне знакомы ☺.
В этой статье хочу остановиться на нескольких способах создания GIF-анимаций. Если кто не знает - то это вроде бы обычная картинка формата GIF, но она проигрывается как видео: т.е. она динамически меняется (пример на первой картинке в статье, слева).
Чтобы делать такие картинки - не нужно обладать никакими специальными навыками, достаточно всего лишь желания и несколько минут времени. В статье рассмотрю несколько источников для создания таких GIF-картинок: видео, фото и картинки.
Из своего опыта, кстати, скажу, что больше всего пользуются популярностью "Гифки", созданные из кадров популярного фильма или картинок. Гифки из фото менее популярны, их обычно используют для создания аватарок.
И так, перейдем к делу...
Примечание! Статья не научит вас делать профессиональные GIF-анимации. Все способы в статье приведены для начинающего пользователя, максимально просты и эффективны. Так, чтобы любой через 5-10 мин. получил желаемый результат!
Из видео
Используемая программа - Видео Мастер
(прим. : программа"Видео Мастер"входит в пакет "Видео Студия")
Одна из лучших программ для конвертирования, сжатия и обрезки видео. Пользоваться ей очень легко и просто, даже для совсем начинающих пользователей (именно поэтому и рекомендую остановиться на ней).
Что касается нашей задачи: в ее комплексе функций есть одна нужная нам - "Создание GIF". Именно ее ниже я и рассмотрю...
И так, вопрос скачивания и установки программы Видео Мастер я опускаю (думаю, с этим проблем не будет ☺).
После запуска программы, нажмите кнопку "Добавить", и добавьте какой-нибудь видеоролик или фильм, в котором вам нравиться какой-то момент (и из него вы и хотите сделать анимацию).
Примечание! Желательно не делать анимацию длиннее 30 сек. Если Вы добавите большое видео, например, целый фильм - то мы из него выберем конкретный 20-30 секундный момент из которого и сделаем гифку...
Следующий шаг - выбор момента, из которого будем делать анимацию. Для этого примерно отмотайте на то место, где хотите задать начало анимации: далее при помощи кнопки проигрывания включите воспроизведение видео и нажмите кнопку начала - , когда дойдете до нужного кадра. Далее, когда решите, что на следующем кадре нужно завершить ваш выбранный кусок из видео - нажмите кнопку конца - .
Когда отрывок из видео будет выбран, нажмите кнопку "Далее".
Теперь необходимо выбрать размер анимации. В этом плане программа достаточно гибка: можно задать как стандартный размер для аваторки, например, 250 на 250 пикселей, 200 на 200, так и указать конкретный размер в ручном режиме (что я и сделал в своем примере).
Кстати, в этом же шаге можно просмотреть, что из себя будет представлять гифка.
Последний шаг: необходимо указать количество кадров в секунду и скорость их воспроизведения. После введенных настроек можно сразу же оценить, как изменится качество картинки.
Чем больше количество кадров - тем более плавная картинка, и тем больше места она будет занимать. Длинные GIF-анимации могут достигать до нескольких десятков МБ!
Собственно, моя анимация готова (пример ниже). Весьма неплохо для человека, который это делает от большого случая к большому (на мой взгляд) ...
Готовая "гифка"...
Кстати, если Вы хотите создать свое видео из фото - рекомендую ознакомиться вот с этой статьей: . И, кстати, потом из этого видео можно также сделать анимацию (как в примере выше) ...
Из фото и картинок (на компьютере)
Рекомендовать здесь как создавать анимации в больших графических редакторах (типа Photoshop или Gimp) - я не буду. Во-первых, далеко не у всех они есть (а пакеты все-таки большие оп размеру), а во-вторых, пользоваться ими не так просто, даже для создания простейшей гифки. Здесь и сейчас я приведу очень просто способ создания гифки из картинок и фото, буквально за несколько кликов мышкой!
Требующаяся программа: Photo Scape
Отличная бесплатная программа для работы с картинками: позволит просматривать все популярные графические форматы, редактировать их, сжимать. Кроме этого, можно создать коллаж, анимацию, наложить рамочки, создавать скриншоты, менять цвета и т.д. Вообще, в этой программе можно решать сотни популярнейших задач с картинками.
Что касается анимаций - то в Photo Scape с ними работать одно удовольствие. Здесь, конечно, нет сотен инструментов, зато те, что есть - позволяет создать гифку за пару минут (даже тому, кто первый раз запустил программу)!
И так, перейдем к делу.
После запуска программы Photo Scape - перед вами предстанет целое колесо возможностей: редактор, вьювер, шаблоны страниц, комбинация, пакетный редактор, конвертер RAW и пр. Выберите опцию (см. скриншот ниже).
В центре экрана во время редактирования - Вы всегда будете видеть, как меняется ваша анимация (она будет проигрываться автоматически).
Справа вы сможете задать основные настройки анимации: время ее проигрывания (например, 1, 2, 3 сек.), задать эффект (чтобы картинка растворялась на фоне другой или съезжала, ниже у меня приведено два примера), указать размер картинки, цвет фона, по чему выравнивать и пр.
Конечно, в программе не так много инструментов редактирования, зато они все детально проработаны и пользоваться ими легко! Собственно, когда ваша гифка будет доведена до "ума" - просто нажмите кнопку "Сохранить" (в меню справа) .
Кстати, Photo Scape делает гифки достаточно маленькими по размеру, оптимизированными для веб-страничек сайтов. Чуть ниже я привожу пару примеров анимаций с разными эффектами, сделанными в этой программе. По-моему, очень здорово!
Эффект 1. Залить кадр фоном
Эффект 2. Сдвинуть кадр вниз
Из фото и картинок (онлайн способ)
Очень легкий и простой способ создать из самых разнообразных картинок и фото анимацию - это загрузить их на этот сайт. Сервис автоматически поочередно будет проигрывать их.
От вас лишь потребуется указать ширину и высоту картинки, и скорость ее проигрывания. Далее можно скачать полученную анимацию. Также хочу отметить одну деталь: сервис понимает PNG картинки с прозрачным фоном: т.е. при анимации - он не будет "убирать" предыдущую картинку полностью, а совместит обе картинки (пример ниже).
Кстати, лого для этой записи я сделал как раз на этом сервисе.
Еще один сайт с простым и быстрым созданием анимации. Всё что потребуется от Вас - это загрузить последовательно несколько картинок (или хотя бы одну). Затем выберите размеры будущей анимации (например, 200 на 200 пикселей), и нажмите кнопку "Создать". Через пару мгновений - увидите полученный результат (который можно скачать к себе на ПК).
Кстати, на этом сервисе есть небольшие готовые эффекты. Например, можно загрузить свое фото и добавить к нему рамочку, сердечки и пр. Можно сделать отличную аваторку для форума или ВК. Получается очень прикольно!
Эффекты к анимации: сердечки, оттенки серого, рамочки
Пример созданной 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 анимация сделает акцент на одном аспекте.От переводчика. Со всеми пожеланиями и замечаниями по поводу перевода прошу обращаться ко мне в личку. Спасибо!
