Задумывались ли вы, как создаются анимированные GIF-файлы? Автор урока предлагает вам за одну ночь освоить некоторые секреты анимации с помощью этого урока. Так же вы научитесь использовать Шкалу времени (Timeline) , которая доступна в версии Photoshop CS6. А теперь начнём!
Результат урока.
Создайте новый документ (Ctrl + N ) с размерами файла 800 х 500 пикселей. Залейте фон любым цветом, который вы хотите. Теперь идём в меню Слои - Стиль слоя - Наложение градиента (Layer> Layer Styles> Gradient Overlay). Примените следующие настройки: Стиль Радиальный (Radial), цвета от чёрного (# 000000) к синему (# 54799b), который будет использоваться в центре.
Создайте новый слой и назовите его Noise Layer . Выберите инструмент Заливка (Paint Bucket Tool) и залейте созданный слой тёмным цветом (# 231f20). Оставьте активным слой Noise Layer и идите в меню Фильтр - Шум - Добавить шум (Filter> Noise> Add Noise). В диалоговом окне настроек фильтра поставьте такие значения: Эффект (Amount) 3%, распределение Равномерное (Uniform) и нажмите ОК.
Нажмите комбинацию клавиш (Ctrl + U) и в появившемся диалоговом окне настроек коррекции введите значения Насыщенности (Saturation) 100%: Измените этому слою режим наложения на Мягкий свет (Soft Light).
Примечание переводчика: для того чтобы добиться такого цвета как у автора на скриншоте, можно при коррекции Цветовой тон / Насыщенность (Hue/Saturation) значение Цветового тона (Hue) поставить на - 140.
Добавьте любой текст, который вы хотите. Здесь мы будем использовать текст логотипа сайта 123RF. В стилях слоя используйте Обводку (Stroke). Значения размера обводки выберите по своим предпочтениям.
Примечание переводчика: На скрине автора уже растрированный текст вместе со стилем Обводка. Чтобы у вас получилось так же, после того как применили обводку, уберите Заливку (Fill ) слоя с текстом на 0%, преобразуйте этот слой в смарт объект, а затем растрируйте его.
В этом шаге мы будем создавать светящийся эффект для текста с помощью стилей слоя. Дважды щёлкните по слою, чтобы вызвать окно настроек стилей. Для того чтобы настроить стили слоя, используйте скриншоты ниже.
Тиснение (Bevel & Emboss)
Внутренняя тень (Inner Shadow)
Внутреннее свечение (Inner Glow)
Наложение цвета (Color Overlay)
Внешнее свечение (Outer Glow)
Тень (Drop Shadow)
Как только вы закончите создавать световые эффекты с помощью стилей слоя, перейдите в палитру слоёв и уменьшите этому слою значение Заливки (Fill) на 0%.
Дублируйте слой, который вы создали в шаге 5 и отключите этой копии все стили слоя. Настройте теперь стили так:
Внутренняя тень (Inner Shadow)
Внутреннее свечение (Inner Glow)
Ниже результат после того как вы применили стили слоя.
Теперь мы создадим движущиеся световые пятнышки. Создайте 5 слоев поверх существующих, и переименуйте их как 1,2,3, R и F. Если у вас свой текст создайте слои в соответствии с вашими буквами. Сгруппируйте эти слои в папку, которой дайте название Light Spots и смените режим наложения на Осветление основы (Color Dodge).
Активируйте инструмент Кисть (Brush Tool), выберите мягкую кисточку, установите Непрозрачность (Opacity) на 95% и белым цветом нарисуйте пятнышки поверх текста. Для каждой буквы отдельное световое пятно на своём слое. Ниже на скриншоте вы можете рассмотреть, как слои выглядят у автора в палитре слоёв.
Теперь идём в меню Окно - Шкала времени (Window > Timeline). Вы заметите, что ваши слои уже построены в этой палитре в левой её части. Выделите каждый из пяти слоёв со световыми пятнами, которые находятся в группе Light Spots и убедитесь что индикатор текущего времени (голубой слайдер) стоит на нулевом кадре. Теперь на каждом слое в группе, при его активности, нажмите на опцию Позиция (Position), чтобы создать ключевой кадр.
Примечание переводчика: Для того чтобы активировать шкалу времени, нажмите кнопку Создать временную шкалу для видео (Create Video Timeline) и все ваши слои загрузятся в шкалу времени. Выделен в ней будет тот же слой или группа, что и в палитре слоёв.
Установитеиндикатор текущего времени (голубой слайдер) на отметке 01:00 F и переместите слои со световыми пятнами по траектории их движения относительно контура буквы.
Так будет выглядеть начальное положение светового пятна на буквах. Перемещайте индикатор текущего времени по шкале и двигайте слои со световыми пятнами, создавая ключевые кадры. Продолжайте их перемещать, пока не закончите движение пятнышка по всей букве каждого текстового слоя. Для инструкции смотрите несколько скриншотов ниже
GIF-анимация появилась еще на заре зарождения интернета. Особую популярность гифки получили среди веб-мастеров и форумчан, так как именно они больше всего использовали GIF-картинки в работе с сайтами и в общении. С появлением Flash-анимации о гифках немного позабыли, но до сих пор файлы в GIF-формате встречаются на сайтах в качестве баннеров. Вам потребовалось создать анимацию, а вы не знаете, как делать гифки? Данная статья поможет разобраться в обилии программ и способов создания GIF-файлов.
По сути, в гифке содержится несколько картинок, которые плавно сменяют друг друга. Таким образом, гиф-анимация – это своеобразный видеоролик без звукового сопровождения, не требующий плеера для воспроизведения, так как все браузеры поддерживают GIF-анимацию. Благодаря гифкам можно «оживить» страницу, сделать ее более интересной и информативной.
Мир софта не стоит на месте, и с каждым днем в интернете появляются новые программы для решения тех или иных задач. Для создания GIF-анимации разработано множество приложений, среди которых можно выделить следующие программы: GIF Animator, Jasc Animation Shop, Bannershop GIF Animator, CyD GIF Studio Pro, 2D&3D Animator, ImageReady CS, CoffeeCup GIF Animator. Xara3D. Часть из них – самостоятельные программы, а некоторые, к примеру ImageReady CS, являются лишь дополнением к популярному Adobe Photoshop CS. Конечно, вы можете делать гифки в Фотошопе, но для этого вам придется его приобрести одновременно с надстройкой ImageReady CS.
Несомненно, почти весь софт для создания гиф-анимации платный. Но вы можете воспользоваться программой Easy GIF Animator, у которой есть определенный триальный период работы. Так, программа Easy GIF Animator запускается бесплатно 20 раз, после чего требует ввода ключа. Утилита проста в управлении и слегка русифицирована, что облегчит ее освоение.
Для начала вам нужно скачать программу EGA с официального сайта http://www.easygifanimator.net . Открываем ссылку в браузере и кликаем по зеленой кнопке «Download now». Запускаем скачанный инсталлятор программы и устанавливаем его на компьютер.
После успешной установки запускаем «Гиф Аниматор». Откроется небольшое окошко с тремя кнопками:
Итак, пора приступить к созданию гифки. Кликаем кнопку «Создать новую анимацию».
В новом окошке добавляем фоновое изображение. Если вы уже определились с размером GIF-анимации, то лучше загрузить уже готовую обрезанную картинку, так как в программе нет инструментов для обрезки фона. После загрузки кликаем «Далее» и переходим к следующему этапу создания гиф-анимации.
Во вкладке «Цикл и задержка» устанавливаем время воспроизведения кадров анимации и количество циклов ее показа.
Если фоновое изображение, загруженное вами, имеет большой размер, то «мастер анимации» во вкладке «Позиция изображения» попросит вас определиться с местом размещения.
По окончании кликаем кнопку «Завершить» и переходим к этапу «нанесения текста» на изображение.
Пока вы не добавите текст, слева в программе будет отображаться лишь 1 кадр. Добавляется текст кнопкой «Animated Text».
При создании текстового эффекта вы можете указать, как должен начаться показ текста и как его скрыть. Помимо этого, есть возможность выбрать шрифт, его цвет и место расположения текста.
Когда текст введен и все настройки к нему применены, кликаем кнопку «ОК».
В левой части экрана появится множество кадров (фреймов). Из них, собственно говоря, и состоит создаваемая вами анимация. Информация о количестве кадров, размере анимации и времени ее воспроизведения находится в нижней левой части программы.
В итоге гифка, сделанная в программе Easy GIF Animator, может выглядеть следующим образом:
При этом качество анимации и ее красота зависят от ваших предпочтений и умения работать с программой. Подробно и наглядно об Easy GIF Animator рассказано в этом ролике:
Впрочем, вы также можете использовать различные сервисы для создания gif-анимации. К примеру, сконвертировать гифки из видео онлайн можно на сервисе http://www.yt2gif.com , который поддерживает YouTube-ролики. Кроме этого, сделать из видео GIF-анимацию можно в программе Format Factory. Популярная «Фабрика форматов» позволяет конвертировать любые видеоролики в файлы формата.gif. Достаточно лишь выбрать в качестве конечного файла.gif, добавить видеоролики и нажать кнопку «Старт». Правда, Format Factory не может конвертировать в гиф большие по времени видеофайлы.
Помните, что любая гиф-анимация ограничивается лишь вашей фантазией. Анимацию по сути создаете вы, а не программа. Утилита является лишь инструментом в работе и ничем большим.
Гифки — мощный инструмент привлечения внимания для СММщика. Сегодня посмотрим на самые интересные инструменты для создания гифок бесплатно!
Презентации. Самый простой и удобный вариант, использовать PowerPoint или Keynote. Каждый слайд передает одно простое движение. Конвертируете как видео, задаёте нужные настройки, а затем видео конвертируете как гифку.
Легко и просто.
Гимп или Фотошоп . Самые суровые и надежные инструменты для изготовления гифок. Гимп — бесплатный аналог фотошопа. Преимущество — любая сложность. Недостаток — очень сложно и долго.
В фотошопе уже давно можно импортировать любое видео и сохранять в гиф. Файл получается в разы меньше.
Крутой сервис по созданию гифок из видео, картинок. Видео можно использовать Ютьюбовское, или загрузить с компьютера. Также это поисковик уже готовых гифок.
Giphy . Сервис практически аналогичен предыдущему. Только на мой взгляд больше возможностей для дополнительного редактирования. Кроме создания гифок, имеет большую базу гифок.
Когда будете создавать гифку, не забудьте прокрутить чуть ниже. Там ждет сюрприз.
Imgur . Простой сервис по созданию гифок из видео. Поддерживает видео с Ютьюб, Вимео, Фейсбука. Видео из «Одноклассников» и «Вконтакте» не поддерживается.
Если просто загуглить «Создать гифку онлайн», можно получить кучу ссылок на сервисы по созданию гифок из фотографий, которые нужно собрать самому. 100% аналог презентаций.
Мне понравился сервис простой как «кейс в паблике Церебро», и умеет все то же самое, что умеет Keynote или PowerPoint
Пейте кефир, развивайте свои навыки и мойте руки с мылом.
Photoshop – очень продвинутое программное обеспечение, в нём имеются некоторые инструменты, которыми сможет совладать даже начинающий пользователь для создания потрясающих эффектов. Например, вам не нужны специальные навыки, чтобы создать анимированный GIF-файл.
В этом Photoshop уроке я покажу вам, как создать анимацию волка с красными горящими глазами.
Вы можете использовать любую фотографию на свой вкус, но убедитесь, что она хорошего качества и на ней хорошо видны глаза. Вы можете использовать фотографию, с которой буду работать я.
GIF является не очень хорошо оптимизированным форматом, файлы такого формата могут весить очень много. Вот почему нам необходимо обрезать наше изображение, чтобы оставить только важные элементы, в нашем случае это глаза. Откройте изображение в Photoshop, при помощи инструмента Crop Tool (C) (Рамка) вырежьте ту часть изображения, которую хотите анимировать. Затем нажмите Enter.
Мы хотим анимировать глаза, поэтому нам нужно отделить их от остальной части изображения. В Photoshop имеется много способов выбрать какой-нибудь элемент, но я покажу вам самый быстрый.
Перейдите в меню Select > Color Range (Выделение – Цветовой диапазон). Выберите вторую пипетку со знаком «+» и кликайте по оттенкам глаз на изображении, пока не увидите, что они окрасились в белый цвет в предварительном просмотре.
Мы выбрали все жёлтые тона, но некоторые из них выделились и в сером меху животного. Чтобы исключить их, поиграйте с ползунком Fuzziness (Разброс), пока вокруг глаз области не станут чёрными. Очень важно сохранить все области, кроме глаз, полностью чёрными.
После того, как вы нажмёте OK, будет создано выделение. Оно получилось не совсем идеальным. Перейдите в меню Select > Refine Edge (Выделение – Уточнить край) и используйте эти настройки, чтобы сделать выделение более точным. Поставьте галочку возле опции Smart Radius («Умный» радиус) и поиграйте с параметрами Smooth (Сглаживание) и Feather (Растушевка), пока не достигните нужного результата. После этого нажмите OK.
Скопируйте выделенную область на новый слой Ctrl + J.
И последнее, что нам осталось сделать на данном этапе это уменьшить размер изображения. Для этого перейдите в Image > Image Size (Изображение - Размер изображения) и уменьшите размер своего изображения (до разумного).
Давайте приступим к созданию анимации. Перейдите в Window > Timeline (Окно – Шкала времени), чтобы отобразить панель «Шкала времени» в нижней части рабочей области. Затем нажмите на кнопку Create Frame Animation (Создать анимацию кадра).
Панель «Шкала времени» не так уж и сложна в использовании. Нажмите на стрелочку рядом с Once (Однократно), чтобы отобразить варианты повтора анимации. Вы можете воспроизвести анимацию один раз, 3 раза, постоянно или в последнем варианте можно установить, какое количество повторов вам необходимо. Установите Forever (Постоянно), чтобы анимация воспроизводилась непрерывно.
Другим немаловажным параметром является продолжительность воспроизведения одного кадра. Чем меньше время, тем быстрее будет воспроизведена анимация с более плавными движениями, но для этого потребуется больше кадров.
Нам нужен плавный переход и у нас будет много кадров, поэтому выберите вариант Other (Другое) и введите значение 0.06.
Чтобы создать новый кадр, нажмите на значок Duplicates selected frames (Создание копии выделенных кадров) в нижней части панели «Шкала времени».
Каждый кадр запоминает состояние слоёв отдельно. Поэтому, если вы скрываете слой в одном кадре, то в другом он всё равно будет виден. Внимание: убедитесь, что вы начинаете с первого кадра.
Скройте слой в одном кадре и воспроизведите анимацию, нажав клавишу пробела. Важно, что делает этот инструмент: он скрывает и показывает слои в соответствии с их состоянием, сохранённым в кадрах.
Но скрывать и отображать слои – это не всё, что он может сделать! В каждом кадре можно сохранить три свойства:
Это означает, что вы можете сохранить эти свойства на одном слое в одном кадре, а в другом кадре на этом же слое никаких изменений не произойдёт (опять повторюсь, убедитесь, что вы начинаете с первого кадра, чтобы избежать каких-либо «сюрпризов»). Самое интересное в этом то, что Photoshop способен создать автоматический переход между этими состояниями одного слоя. Позвольте мне продемонстрировать вам этот трюк в наиболее эффективном из доступных состояний – эффекты.
Сделайте все слои видимые на обеих кадрах снова, а затем выберите второй кадр и кликните по слою с глазами. Двойным кликом левой кнопкой мыши вызовите окно «Параметры наложения», нас интересует стиль Наложение цвета.
Кликните по серому прямоугольнику и измените цвет на ярко-красный.
Режим смените на Экран, чтобы глаза не просто были закрашены ярко-красным, а смотрелись реалистично.
После этого примените стиль Внешнее свечение.
Установите здесь такой же яркий оттенок красного.
Сделайте свечение глаз сильнее, играя с параметрами Spread (Размах) и Size (Размер).
У нас получилась простая анимация, воспроизведите её, нажав клавишу пробела.
Согласитесь, получился не очень убедительный эффект? Было бы намного лучше и естественнее, если бы глаза загорались медленнее. Вот где реальная сила этого инструмента. Зажмите Ctrl и выделите два кадра. Кликните по значку меню в правом верхнем углу панели «Шкала времени» и выберите Tween (Промежуточные кадры).
Чем больше кадров вы добавите, тем более плавным будет переход и тем длиннее будет анимация. Я установил значение 10.
Ещё один недостаток созданной анимации – свечение глаз исчезает слишком резко. Исправим это, создав ещё один переход. Выделите первый и последний кадры, снова перейдите в меню, выберите Tween (Промежуточные кадры) и так же установите значение 10.
И в завершении найдите кадр с ярким свечением глаз и измените его продолжительность на большее число. Тем самым на данном этапе глаза буду гореть дольше.
Получилось неплохо!
Бонусный трюк: Если вы хотите, чтобы ваша анимация была лучше чем то, что может предложить формат GIF, вы можете записать воспроизводящуюся анимацию с помощью какого-либо программного обеспечения (или экспортировать как видео) и сохранить её как видео.
Теперь вы знаете, как создать анимированный GIF файл в Photoshop.
На Envato Tuts + мы ограничиваем размер файлов изображений не более 200 кб. Однако вы можете увидеть готовый GIF во всей красе в видеоформате ниже.
Gif анимация хорошо известна тем, кто имеет дело с созданием баннеров и различных
подвижных элементов. Практически каждому пользователю интернета хоть раз, но встречалась
анимированная движущаяся картинка в виде рекламы или части сайта.
Преимущества
GIF анимации
очевидны: подвижный яркий элемент способен привлечь гораздо
больше внимания и воплотить практически любую идею дизайнера. Но что такое Gif анимация,
и из чего она состоит? Как сделать гифку? С помощью какой программы можно создать Gif анимацию? В чем
преимущества нашей бесплатной программы Gif Animator?
Файл формата Gif объединяет в себе несколько изображений, которые выводятся на экран в определенной последовательности и в итоге образуют анимированный элемент. Поэтому чтобы создать Gif анимацию, не спешите сразу обращаться к нашей бесплатной программе Gif Animator – вначале подготовьте набор картинок, из которых будет создано ваше подвижное изображение, и четко продумайте суть того, что хотите получить в итоге.
Итак, вы воспользовались программой Gif Animator для создания бесплатной анимации и теперь решили разместить результат на своем сайте. И тут вас ждет множество приятных открытий:К сожалению, специализированных программ, позволяющих быстро, качественно, а главное – бесплатно создать Gif анимацию онлайн, не так много. Именно поэтому мы предлагаем вам наш уникальный продукт – программу Gif Animator, при помощи которой вы сможете с минимальными затратами времени создать любую подвижную картинку.
Наша бесплатная программа Gif Animator для создания анимированных изображений онлайн отличается простотой использования. Все что от вас требуется – выполнить несколько простых действий:Чтобы получить намного больше возможностей работы с бесплатной онлайн программой для создания анимированных изображений Gif Animator – просто зарегистрируйтесь на нашем сайте!
