Любите анимационные картинки-блестяшки, а фотошоп в данный момент недоступен? Вам поможет онлайн сервис, который умеет создавать сложные живые картинки с анимированными элементами (там они называются марки или штампы). Более того, вы сможете туда закачивать свои детали для анимированных картинок: блестяшки, анимашки и просто красивые картинки.
Вот одна из анимашек которую я сделала в PixMix за 5 минут
Как начать пользоваться онлайн фоторедактором PixMix
После того как вы загрузили фон будущей живой картинки. Выбирайте штамп, кликайте на него (жёлтая стрелочка) и жмите на кисть (стрелка зелёная) . После того как кликните мышкой на картинку у вас там образуется кружок – это кисть. Вы можете увеличивать или уменьшать размер путём передвигания ползунка наверху (синяя рамочка) .
Картиночки анимашки, которые вы будете размещать на картинке — не двигаются и не уменьшаются, они просто замостятся, то есть рядами поместятся на фоне. И чтобы оставить одну или несколько в нужных местах, вам надо будет просто подтереть их инструментом «Стирательная резинка».
Вы можете написать блестящий или однотонный текст с обводкой на своём анимированном шедевре. Для этого надо кликнуть на букву «T» (жёлтая стрелочка). Написать текст (синяя стрелка). Наверху выбрать стиль шрифта (Бирюзовая стрела) и обводку (сиреневая) или без обводки (красная).
Выбрать чернила слева (то есть заливку текста), когда вы нажимаете на текст в онлайн фоторедакторе автоматически выставляется раздел «Чернила»
Жмите на слово «Хорошо» и увидите текст на своей анимационной картинке.
Вокруг текста вы увидите прямоугольную рамку и инструменты в каждом углу этой рамки:
- Крестик – удалить
- Стрелочка с двумя наконечниками – сделать надпись больше или меньше
- Стрелочка закруглённая – наклонить в одну, либо в другую сторону
- Прямоугольник в кружке – размножение текста
Вы можете менять «чернила», обводку и стиль текста, не меняя самого текста. Нажимать «Хорошо» и смотреть что у вас получится.
А после того как вы создадите свой шедевр – нужно нажать на зелёную галочку внизу слева от картинки. Когда сервис сгенерирует картинку, вас перекинет на страницу где нужно ввести название картинки. Описание – не обязательно.
Там же вы можете выбрать скорость анимации. По умолчанию там выставлена средняя.
И в заключении надо нажать на зелёную кнопку «Реестр».
После этого фоторедактор PicMix сгенерирует вашу блестящую анимированную картинку. И под своей анимационной картинкой вы увидите вот такие функции:
А ещё вы сможете добавить использованные в этой анимационной картинке блестяшки к себе в избранное. И они у вас появятся в разделе «Мои любимые марки» и вы их увидите когда начнёте создавать новую gif картинку. Для этого наводим на марку мышку и в выпавшем окне кликаем на слова «Добавить в избранное».
Марки вы можете так же добавить в избранное в разделе STAMPS на главном меню сайта ПикМикс.
Когда нас перекинет на другую страницу — нажимаем на слова «Версия без логотипа»
И наша анимированная картинка открывается в новом окне.
Вы можете её скачать на компьютер. Для этого кликаем по анимашке правой кнопкой мыши и в выпадающем окне выбираем «Сохранить картинку как».
Скорее всего на Фейсбуке картинка будет прочитана не сразу, а сначала появится вот такая публикация
Не спешите нажимать на слово «Опубликовать». Обновите страницу и поставьте ссылку туда ещё раз. Если опять появится то же самое, то опять обновите страницу. И только когда появится ваша красавица анимированная картинка, кликайте на слово «Опубликовать».
Красиво смотрится анимированная картинка на Фейсбуке. Гугл+ и Одноклассниках. А вот ВКонтакте картинка получается маленькая и чтобы увидеть анимашку во всей красе надо кликать на неё. Мне это не очень нравится, если честно.
А ещё в разделе «Мой PicMix» вы можете установить аватар для вашей учётной записи в качестве любой, из созданных вами Gif картинок, для этого сервиса.
Теперь вы сможете создавать потрясающие анимационные картинки в онлайн фоторедакторе PicMix и выкладывать их в социальных сетях.
А если вам не слишком то понятны скриншоты и объяснения в моей статье, то предлагаю посмотреть видеоурок
Задумывались ли вы, как создаются анимированные 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
Так будет выглядеть начальное положение светового пятна на буквах. Перемещайте индикатор текущего времени по шкале и двигайте слои со световыми пятнами, создавая ключевые кадры. Продолжайте их перемещать, пока не закончите движение пятнышка по всей букве каждого текстового слоя. Для инструкции смотрите несколько скриншотов ниже
Хотя этот вид искусства часто считают детским, некоторые из когда-либо сделанных величайших и самых любимых фильмов были анимационными. Мир анимации постоянно находится в списках нового великого режиссера, и этим человеком можете стать вы, поэтому пора начать практиковаться! Существует много типов анимации... достаточно, чтобы хватило каждому аниматору в мире! Далее вы узнаете, как самостоятельно создавать анимацию, и какие навыки вам необходимо приобрести, чтобы стать по-настоящему великим аниматором. Давайте начнем с Шага 1!
Шаги
Часть 1
Основы традиционной анимацииНапишите сценарий. Сначала запишите все, что должно происходить. Это не означает только диалоги, но и действия и мимику. Перед тем как начать, у вас должно быть четкое представление, что должно происходить.
Сделайте раскадровку. Раскадровка - это следующий шаг: это рисунки, которые показывают основные действия и сцены из будущего анимационного фильма. Они показывают историю в целом и очень напоминают комикс.
Нарисуйте несколько листов со своими персонажами или сделайте модели персонажей. Когда вы будете рисовать кадры, вам понадобится образец, чтобы персонаж выглядел одинаково от позы к позе. Нарисуйте своих персонажей под разным углом и с разными эмоциями. Вам также следует нарисовать, во что они будут одеты, особенно если их одежда будет меняться между сценами.
Сделайте эскиз анимации. Это один рисунок на листе бумаги, в котором показаны все основные этапы движения в кадре. Конечно, это все равно что соединить пять близнецов вместе или что-то вроде того, но предназначение этого рисунка в том, чтобы убедиться, что ключевые кадры располагаются правильно, и движения выглядят естественно.
Нарисуйте ключевые кадры. Ключевые кадры - это основные состояния выполняемого персонажем движения. Например, если вы рисуете персонаж, который должен повернуться слева направо, ключевыми кадрами будут кадр, показывающий персонажа, повернутого влево, потом персонажа, повернутого лицом в кадр, и потом персонажа, повернутого вправо.
Проверьте, как получилось. Пролистайте ключевые кадры и посмотрите, как выглядит движение.
Сделайте промежуточные кадры. Промежуточные кадры должны содержать все мельчайшие движения между ключевыми кадрами. Начните с того, что нарисуйте промежуточный кадр, который должен быть между двумя ключевыми кадрами. Затем нарисуйте картинку, которая должна быть между ключевым кадром и первым промежуточным кадром. Продолжайте в таком же духе, пока не получите количество кадров, которое полностью описывает движение (это количество зависит также и от назначения вашей анимации).
Снова проверьте, что получилось. Да, вам постоянно нужно проверять результат.
Очистите рисунки. Удалите все эскизные линии и пометки, которые отвлекают от движения персонажа. Вы даже можете выбрать чернила для кадров своей анимации, в зависимости от того, что вы хотите делать со своей работой.
Создайте анимационный фильм. Соедините все картинки вместе в компьютерной программе вроде Photoshop, чтобы получить финальное видео. Это видео вы можете добавить в свое портфолио или просто показать своим друзьям и родным!
Изучите сжатие и растяжение. Другим способом сделать даже простую анимацию более интересной и близкой к жизни - это сделать движения более динамичными и осязаемыми. Как правило, это достигается таким способом, как сжатие и растягивание. Сжатие и растягивание - это сознательное преувеличение движений, чтобы человеческий мозг воспринял их как реальные. Самый простой пример: представьте мяч. Намного интереснее видеть, как мяч немного сжимается при приземлении, чем видеть просто круглую сферу. Это помогает зрителю почувствовать совершаемое мячом движение.
Создание анимации – легкая и интересная задача.
Большинство пользователей социальных сетей используют в своих аккаунтах не сложную анимацию. Одной движущейся картинкой можно заменить несколько слов, донести до гостей свои мысли и настроение. Часто, gif-анимация используется в аватарах – смысловое изображение хозяина страницы.
Попытка скопировать анимированное изображение не всегда заканчивается успешно, чаще всего анимация пропадает и картинка становится обыкновенным статичным фото. При сохранении таких картинок формат должен быть.gif.
Для создания такой анимации требуется знание графических программ. Освоить работу в них при большом желании не составит труда. Несколько часов у монитора, и вы будете горды своими работами.
Простейшую анимацию можно создавать в он-лайн сервисах. Более качественную, в серьезных программах с установкой на компьютер.
Рассмотрим небольшой обзор программ, которые сможет освоить начинающий gif-аниматор.
Создание gif анимации из видео
Программа преображает видео файлы в анимационные. Обладает большими возможностями. Работать не сложно, программа русскоязычная, а это на много уменьшает время изучения всех возможностей. Загружайте любое видео и начинайте творить анимацию.
Заходим на сайт и скачиваем . Устанавливаем программу на ПК. Открываем.
Программа будет на английском языке. Для смены языка нажмите «Вид» и далее как на картинке.
Загружаем видео. Нажимаем Ctrl+Shift+V -открывается проводник Windows выбираем видео.
Внизу ползунком отмечаем начало гиф -анимации. И вверху делаем отметку начала нажимая на кнопку начала (стрелочка смотрит влево).
Внизу отмечаем ползунком конец анимации. И нажимаем кнопку конца (стрелочка смотрит вправо).
Затем нажимаем вверху на кнопку извлечения gif (на кнопке синяя стрелка вниз).
Производится обработка.
Нажимаем на кнопку сохранения файла и сохраняем файл себе на компьютер. Вот что у нас получилось.
Естественно, здесь рассказано как сделать простейшую гиф анимацию. Программа позволяет встраивать различные эффекты.
Easy GIF Animator
Обладает обширным функционалом. Есть платная и бесплатная версии. Отличная техническая поддержка всегда ответит на все возникшие вопросы, а так же на сайте есть форум. Можно прочитать советы гуру по анимации и узнать ответы на свои вопросы от модераторов.
GIF Movie Gear
Программа позволит создавать маленькие картинки и баннеры разных параметров. Для владельцев блогов и сайтов: в программе можно создать фавиконку и мелкие стрелки анимации.
Создание gif анимации из фотографий
Создание анимации дело увлекательное. Обязательно используйте несколько программ, и вы найдете ту, в которой будут получаться самые привлекательные живые картинки. Практически все со временем приходят к редактору Adobe Photoshop. В последних версиях программы можно делать практически мультфильмы. В сети множество уроков, изначально программа разрабатывалась для обработки фотографий, со временем стала довольно шикарной рабочей программой дизайнеров и архитекторов.
Но мы только учимся и начнём не с монстра фотошопа, а с редактора попроще, например, бесплатного t. Совершенно не важно в каком редакторе делать кадры (картинки)
Начинаем создавать. Сначала подготовим картинки.
1. Все картинки должны иметь одинаковые параметры, размер, разрешение.
2.Все сохраняется в формате файлов gif. Именно это и обозначает анимацию.
3.Все картинки желательно пронумеровать. Можно дать название каждому слою, но с нумерацией, путаницы будет меньше. Т.е. самое простое — это дать цифровые названия файлов и в такой последовательности они и будут прокручиваться, например, 1.gif 2.gif 3/gif и т.д.
Например, так:
Все готово. Отправляем все картинки в редактор UnFREEz, он достаточно простой и новичок с легкостью справится.
