Иногда, оставляя сообщения на форумах или в блогах, для более компактного вида отображаемой информации бывает полезно вместо jpeg воспользоваться анимированным форматом gif.
Также, умение создавать gif-анимацию из набора картинок пригодится, если вы захотите сами создать для себя анимированную аватарку. Краткая видеоинструкция ниже:
Преимущества и недостатки разных форматов изображений кратко описаны здесь: http://it.sander.su/image-formats.php, в этой же инструкции я расскажу как можно легко и быстро создать gif-анимацию из ваших картинок. Классный софт для работы с видео, изображениями и фотографиями делает фирма Ulead, у них же нашел подходящую и очень удобную программку для создания GIF- Ulead GIF Animator 5. Результат использования программы - компактная инструкция по быстрому созданию GIF:
Теперь о работе с этой программой по пунктам и не спеша:
Запустив программу в открывшемся окошке Мастера Ulead, нажмите на кнопку Мастер Анимации:
В случае если у вас отключено отображение Мастера Ulead при каждой загрузке программы, к Мастеру Анимации можно перейти через верхнюю панель меню: Файл -) Мастер Анимации.
В следующем пункте меню укажите разрешение холста для вашей анимации. Идеальный вариант, когда вы делаете GIF-анимацию из картинок с одинаковым разрешением, тогда это разрешение и указываете. Если у вас есть картинки, которые отличаются, в этом случае выбирайте такой размер холста, чтобы каждая картинка поместилась на нем. Выбрав подходящее разрешение, нажмите кнопку Далее.
Разрешение для холста также можно выбрать из набора стандартных разрешений. Удобной фишкой для работы над GIFами в дальнейшем, есть возможность добавлять к списку стандартных разрешений свое.
В следующем окне, нажимая кнопку Добавить изображение, добавьте по одной все картинки, которые хотите вставить в анимацию. После этого нажмите кнопку Далее.
Дальше нужно выбрать продолжительность отображения кадра, которая будет выставлена для каждого из добавленных кадров. Вы можете выбрать Время задержки в 0.01с, то есть одной секунде соответствует 100, двум - 200, также вместо времени отображения кадра можно указать частоту смены кадров (количество кадров анимации, отображаемых за одну секунду).
Потом еще будет возможность изменить этот параметр для каждого кадра индивидуально (например, в моей анимации, которая сверху инструкции, время отображения кадров- 2.5с, 3с, 4с и 5с, в зависимости от смысловой нагрузки :) ).
В следующем окошке просто нажимаете кнопку Готово. После этого вы попадете в Меню редактирования анимации. В нижней панели инструментов вы сможете изменить продолжительность отображения любого из кадров, добавлять и удалять кадры, изменить порядок кадров, а также добавить баннерный текст:
Минимум действий, которые вам нужно будет сделать для создания анимации:
Также, вы можете вносить дополнительную информацию на любой из кадров, используя Панель редактирования кадра, которая находится слева сверху в программе Ulead GIF Animator 5:
Сверху над Панелью редактирования кадра для каждого элемента панели отображаются опции, которые можно менять.
Кнопка Вставка текста - дает возможность поместить на выбранный кадр анимации текст. Для текста доступен ряд опций: выбор шрифта; жирный, курсив, подчеркнутый,зачеркнутый; цвет шрифта; форматирование текста - слева, по центру и справа.
Кнопки Выделение прямоугольника и Выделение эллипса могут быть полезны, если захотите залить какую-то область выбранным цветом (кнопка Заливка, цвет можно выбрать снизу панели).
Произвольную область можно выделить, используя инструмент Лассо.
Кнопка Трансформация - дает возможность поворачивать любой из добавленных на кадр объектов вокруг точки, которую вы можете задать (перемещая мушку :) ).
Еще одним полезным инструментом из этой панели является Кисточка. Вы можете изменять ее размер и форму (квадратная или круглая), а также степень прозрачности. Цвет кисточки задается на ближнем прямоугольнике внизу Панели редактирования кадра.
Применение других доступных инструментов можете исследовать экспериментально, отмечу только, что возможность редактирования кадров прямо перед созданием GIF штука полезная и интересная :) .
И наконец, выбрав подходящую последовательность кадров, отредактировав их как следует, выбрав подходящее время отображения для каждого кадра, можно смело сохранять полученную анимацию в виде файла GIF (Файл -) Сохранить как -) GIF файл) :
Просто, удобно и практично :)
Также вам могут пригодиться другие мои инструкции на тему создания коллажей в Windows:
XnView - удобная программа для создания коллажей и панорамной склейки фотографий
и
Создание коллажа из кадров видеоклипа
Оффлайн-версию инструкции по созданию GIF-анимации
качаем здесь:
Как проверить MD5 с помощью HashTab читаем здесь:
Работаем с программой HashTab!
Также, умение создавать gif-анимацию из набора картинок пригодится, если вы захотите сами создать для себя анимированную аватарку. Краткая видеоинструкция ниже:
Преимущества и недостатки разных форматов изображений кратко описаны здесь: http://it.sander.su/image-formats.php, в этой же инструкции я расскажу как можно легко и быстро создать gif-анимацию из ваших картинок. Классный софт для работы с видео, изображениями и фотографиями делает фирма Ulead, у них же нашел подходящую и очень удобную программку для создания GIF- Ulead GIF Animator 5. Результат использования программы - компактная инструкция по быстрому созданию GIF:
Теперь о работе с этой программой по пунктам и не спеша:
Запустив программу в открывшемся окошке Мастера Ulead, нажмите на кнопку Мастер Анимации:
В случае если у вас отключено отображение Мастера Ulead при каждой загрузке программы, к Мастеру Анимации можно перейти через верхнюю панель меню: Файл -) Мастер Анимации.
В следующем пункте меню укажите разрешение холста для вашей анимации. Идеальный вариант, когда вы делаете GIF-анимацию из картинок с одинаковым разрешением, тогда это разрешение и указываете. Если у вас есть картинки, которые отличаются, в этом случае выбирайте такой размер холста, чтобы каждая картинка поместилась на нем. Выбрав подходящее разрешение, нажмите кнопку Далее.
Разрешение для холста также можно выбрать из набора стандартных разрешений. Удобной фишкой для работы над GIFами в дальнейшем, есть возможность добавлять к списку стандартных разрешений свое.
В следующем окне, нажимая кнопку Добавить изображение, добавьте по одной все картинки, которые хотите вставить в анимацию. После этого нажмите кнопку Далее.
Дальше нужно выбрать продолжительность отображения кадра, которая будет выставлена для каждого из добавленных кадров. Вы можете выбрать Время задержки в 0.01с, то есть одной секунде соответствует 100, двум - 200, также вместо времени отображения кадра можно указать частоту смены кадров (количество кадров анимации, отображаемых за одну секунду).
Потом еще будет возможность изменить этот параметр для каждого кадра индивидуально (например, в моей анимации, которая сверху инструкции, время отображения кадров- 2.5с, 3с, 4с и 5с, в зависимости от смысловой нагрузки :) ).
В следующем окошке просто нажимаете кнопку Готово. После этого вы попадете в Меню редактирования анимации. В нижней панели инструментов вы сможете изменить продолжительность отображения любого из кадров, добавлять и удалять кадры, изменить порядок кадров, а также добавить баннерный текст:
Минимум действий, которые вам нужно будет сделать для создания анимации:
- Исправьте порядок отображения кадров, перемещая их по левому клику мышки влево и вправо (Drag-and-drop);
- Задайте время отображения для тех кадров, которым не подходит время, заданное вами на предыдущем этапе (Правый клик по кадру -) Свойства кадра -) Задержка)
Также, вы можете вносить дополнительную информацию на любой из кадров, используя Панель редактирования кадра, которая находится слева сверху в программе Ulead GIF Animator 5:
Сверху над Панелью редактирования кадра для каждого элемента панели отображаются опции, которые можно менять.
Кнопка Вставка текста - дает возможность поместить на выбранный кадр анимации текст. Для текста доступен ряд опций: выбор шрифта; жирный, курсив, подчеркнутый,
Кнопки Выделение прямоугольника и Выделение эллипса могут быть полезны, если захотите залить какую-то область выбранным цветом (кнопка Заливка, цвет можно выбрать снизу панели).
Произвольную область можно выделить, используя инструмент Лассо.
Кнопка Трансформация - дает возможность поворачивать любой из добавленных на кадр объектов вокруг точки, которую вы можете задать (перемещая мушку :) ).
Еще одним полезным инструментом из этой панели является Кисточка. Вы можете изменять ее размер и форму (квадратная или круглая), а также степень прозрачности. Цвет кисточки задается на ближнем прямоугольнике внизу Панели редактирования кадра.
Применение других доступных инструментов можете исследовать экспериментально, отмечу только, что возможность редактирования кадров прямо перед созданием GIF штука полезная и интересная :) .
И наконец, выбрав подходящую последовательность кадров, отредактировав их как следует, выбрав подходящее время отображения для каждого кадра, можно смело сохранять полученную анимацию в виде файла GIF (Файл -) Сохранить как -) GIF файл) :
Просто, удобно и практично :)
Также вам могут пригодиться другие мои инструкции на тему создания коллажей в Windows:
XnView - удобная программа для создания коллажей и панорамной склейки фотографий
и
Создание коллажа из кадров видеоклипа
Оффлайн-версию инструкции по созданию GIF-анимации
качаем здесь:
- PDF с картинками и активными ссылками:
https://www.dropbox.com/s/nnovv0jly1kfczy/Ulead%20GIF%20Animator.pdf
Прямая ссылка
Размер: 690 Кб
MD5: 30921F012F4EC0D9144E556A6386682B - HTML-версия в архиве с возможностью просматривать видео при наличии последней версии FireFox, Opera или Google Chrome:
https://www.dropbox.com/s/b2b3f1wg9k0cqsg/Ulead_GIF%20Animator_5-Russian%20Manual.rar
Прямая ссылка
Размер: 8.35 Мб
MD5: 22693692BE1E6E3EE4F604944B5B83DF - Видео в формате WebM, смотреть которое можно с помощью VLC Media Player или Media Player Classic из K-Lite Mega Codec Pack:
https://www.dropbox.com/s/sfi4xpavu63xdgb/slideshow_with_ulead_gif_animator_5.webm
Прямая ссылка
Размер: 7.78 Мб
MD5: FE5D2C8E484C52D3C720059C914B401D
Как проверить MD5 с помощью HashTab читаем здесь:
Работаем с программой HashTab!
Спасибо все четко и ясно, научилась за 5 минут!!!!
ОтветитьУдалитьСпасибо огромное за отзыв!
ОтветитьУдалитьПриятно быть полезным :)
Програмка действительно удобная, сам ей пользуюсь для которких мини-инструкций слайдшоу.
А как на блог выставлять потом расскажите, НУ СДЕЛАЛ Я АНИМАЦИЮ И ХОЧУ НА БЛОГ ВЫСТАВИТЬ И ПРИ НАЖАТИИ НА АНИМАЦИЮ ДОЛЖЕН БЫТЬ ПЕРЕХОД НА ДРУГОЙ САЙТ- КАК ЭТО СДЕЛАТЬ ВСЕХ ИНТЕРЕСУЕТ, БЛАГОДАРЮ.
ОтветитьУдалитьЧтобы выложить анимацию в блог или на форум, нужно сначала залить её на какое-то хранилище картинок. С gif умеет работать сайт www.radikal.ru (можно даже без регистрации), и сайт screencast.com (тут уже нужна регистрация, но потом довольно неплохие возможности для хранения изображений).
УдалитьЕсли с радикала: переходите на главную, убираете все галочки и нажав кнопку обзор находите Вашу картинку, нажимаете кнопку загрузить. После того как зальётся картинка, нужно скопировать в текст сообщения, для блога - строчку под HTML: картинка в тексте, для форума - строчку под BBCode, строчные буквы: картинка в тексте.
Примерно так.
Добавил ссылки, по которым можно скачать оффлайн-версию инструкции по созданию GIF-анимации программой Ulead Gif Animator в форматах pdf и html. Кому актуально, качаем и делимся дальше :)
ОтветитьУдалитьСвободу информации!
Добавил короткую видеоинструкцию.
ОтветитьУдалитьРаньше в комментариях появлялся вопрос как и куда заливать gif-слайдшоу.
По поводу второй части вопроса: gif-слайдшоу, размещённые на этом блоге хранятся в платном аккаунте imageshack.us (стоимость 2$/месяц).
Из бесплатных вариантов обратите внимание на dropbox (фишка Links).
Кстати, ждём возрождения Megaupload (был удобный сервис для хранения личной информации).
Пример комплексной подачи инфы с использованием GIF-анимации, текста со ссылками, коллажей, а также видеороликов смотрите здесь:
ОтветитьУдалитьСоздание коллажа из кадров видеоклипа
Кстати, видеоклип там зачётный!
Важное дополнение:
ОтветитьУдалитьСейчас активно использую в своих статьях gif-слайдшоу, и получилось немного поднять свой уровень.
Задумка следующая - изначально делать кадры на "прозрачках" формата PNG (отдельная папка под готовые прозрачные кадры, отдельная под новые элементы, изменяющие прошлый кадр).
Изначально разрешение картинок PNG на прозрачном фоне идёт значительно выше того, которое потом вставляю в слайдшоу, поэтому полезно уметь изменять разрешение пакета картинок (для последнего слайдшоу, которое делал, в папке с "прозрачками" лежит 228 картинок). Просто и оперативно уменьшить разрешение группы изображений можно в программе XnViewMP от автора Xnview. В моём случае 228 PNG-картинок с разрешением 2168*1483 уменьшало до 800*547 - минуты за 2, до 1200*820 - около 4х минут. Подобного рода операция освобождает от небольшого кусочка рутины, качество картинок на выходе получилось отличное и вполне без нареканий. Также та прога многое другое умеет, у себя решил не ставить лого на картинках (ставлю только на видео), но если кому актуально, там есть возможность добавлять "водяные знаки" пакетом.
Сейчас пока нету возможности сделать инструкцию по полезным пакетным действиям с картинками, но пакетное уменьшение картинок в XnViewMP кратко опишу:
-запустить XnViewMP;
- "Инструменты" -) "Пакетная обработка" (или сразу Ctrl+U);
- Вкладка "Входные данные" - добавить папку с исходниками;
- Вкладка "Действия" -) "Добавить действие" -) [ "Изображение" -) "Изменение размера"] -) удобно выбирать режим "По наибольшей стороне", задавая ширину в пикселах на выходе;
- Вкладка "Выходные данные" - выбираете папку для уменьшенных файлов, если нужно меняете маску файлов (формат названия изменённых картинок - "Имя файла"), хотя изначально предложеный вариант вполне приемлем;
- Нажимаете кнопку "Преобразовать" в правом нижнем углу окна пакетной обработки.
Предложенная инструкция только примерная, пробуйте свои комбинации и удачных вам экспериментов!
добрый день. А если я хочу сразу несколько текстов одновременно появляющихся по-разному сделать? Как это мозно реализовать???
ОтветитьУдалитьДоброго времени суток!
УдалитьЕсли делать чтобы 2 текстовых сообщения появлялись не синхронно, нужно будет делать такие кадры анимации, на которых первый текст виден, а второй нет, и наоборот.
Например, есть у вас "текст 1" и "текст 2".
Кадр 1 - "текст 1" отображается (/+/), "текст 2" нет (/-/).
Кадр 2 - "текст 1" /+/, "текст 2" /-/ .
Кадр 3 - "текст 1" /-/, "текст 2" /-/ .
Кадр 4 - "текст 1" /-/, "текст 2" /+/, и так далее.