Какие красивые
гиф-анимации и баннеры встречаются на страницах блогов! Порой даже
завидно становится. Живые картинки явно
привлекают внимание читателя и оживляют
любой блог — Blogger, WordPress или другой
вариант, неважно. Как сделать
гиф-анимацию новичку своими руками
опираясь только на собственную фантазию?
А потом поместить ее на свой блог на
радость себе и читателям? Ничего
невозможного нет! Гиф-анимация добавляет не только динамики блогу, но и функциональности.
Существует огромное
количество сервисов по созданию
гиф-анимации от примитивной до сложной
с привлечением множества программ и
технологий.
Мы с вами рассмотрим вариант создания гиф-анимации для новичка без использования специальных программ
и не требующий особых знаний и навыков.
Сделаем свою первую гиф-анимацию в
режиме онлайн прямо здесь и сейчас.
Что надо приготовить.

Несколько фотографий,
картинок желательно одного размера. Количество на ваше усмотрение.
Можно заранее сделать на картинках
надписи. Как работать с картинками
читайте в статье. А можно и ничего
не делать на первый раз.
Порядок действий. Заходим на сервис. В правом углу выбираем язык - русский. Открывается страница — Создать гиф-анимацию. Выбираем - загрузить через компьютер. Нажимаем Выбрать файл - делаем выбор картинки/фото со своего компа. Устанавливаем размер, скорость. Жмем Создать гиф-анимацию. Нас перебрасывает на новую страницу и через минуту мы видим нашу созданную гиф-анимацию. Ура! Получилось! Если вас все устраивает, то сохраняем картинку себе на комп и копируем в окошке HTML код для блога. Заносим код себе в блокнотик. Если же нас что-то не устраиваем, то удаляем эту анимацию и создаем новую.
Как вставить гиф-анимацию
себе на блог Blogger через HTML коды? Подробности найдете на странице Уроки или на этой странице. Вставить можно через редактор в режиме HTML в сообщение и через гаджет HTML в боковую панель блога.

Усложним
задачу. Сделаем не просто гиф-анимацию,
а активный баннер. Что такое активный
баннер? Баннер, при
нажатии на который, нас перебрасывает
по адресу заданной в баннере ссылки. То
есть, мы сами указываем, куда надо перейти
читателю - на другой сайт, на видео, на
подписную страницу. Поработаем со
своей полученной живой картинкой, точнее
с кодом картинки. Если мы просто вставим
коды, которые получили с сервиса, то при
нажатии на картинку мы переходим на
сервис. Что в кодах можно сменить? Ссылку меняем на свою собственную (выделено розовым цветом), лишнее удаляем (выделено зеленым цветом). Получаем "Колокольчик"с переходом. Замену проводим аккуратно и внимательно
— важен каждый знак кода.
Нажмите на картинку и проверьте, что получилось.
По такому принципу создаются активные баннеры.
Если убрать из кода "Ягоды" то, что выделено зеленым цветом, то получим просто гиф-анимацию без перехода:
<a href="http://picasion.com/"><img src="http://i.picasion.com/pic60/2469d2f0098aeb7b0e30dae9d7196a72.gif" width="300" height="225" border="0" alt="online" /></a><br /><a href="http://www.picasion.com/">online</a>
<a
href="http://www.picasion.com/"><img
src="http://i.picasion.com/pic60/fe7b2e8655c543a274001c7f70be58d4.gif"
width="300" height="310" border="0"
alt="gif" /></a><br /><a
href="http://www.picasion.com/">gif</a>
Я сделала замену на http://www.youtube.com/user/svetasad Нажмите на картинку и проверьте, что получилось.
По такому принципу создаются активные баннеры.
Если убрать из кода "Ягоды" то, что выделено зеленым цветом, то получим просто гиф-анимацию без перехода:
<a href="http://picasion.com/"><img src="http://i.picasion.com/pic60/2469d2f0098aeb7b0e30dae9d7196a72.gif" width="300" height="225" border="0" alt="online" /></a><br /><a href="http://www.picasion.com/">online</a>
Творите! Создайте
увлекательные гиф-анимации и притягательные
баннеры. Насыщайте блог информацией и
красками.
Наше знакомство с сервисом на этом не закончено.
На сервисе можно создать собственный аватар, отредактировать фото. Попробуйте! Работать просто и удобно.
Надеюсь, вам понравится. "Приглашаю":

<a
href="http://www.vseoblog.com/2012/03/blog-post_31.html"><img
src="http://i.picasion.com/pic60/9ca8d8457d444c28b377e093deaec315.gif"
width="125" height="114" border="0"
alt="online" /></a><br /><a
href="http://www.picasion.com"></a>
Напишите в комментариях - что у вас получилось?
Всего доброго вам и вашим блогам
Всего доброго вам и вашим блогам
Огромное спасибо Светлана за такой урок! Мне как раз это очень нужно было, чтоб сделать банер для продажи своего товара!
ОтветитьУдалитьСпасибо, Светлана. Думаю, что мне тоже пригодится эта информация.
ОтветитьУдалитьСветлана, когда читаешь и видишь Ваши объяснения, всё так просто и замечательно. Надеюсь, что когда-нибудь наберусь храбрости, чтобы воплотить это.
ОтветитьУдалитьСветланка, спасибо, неплохой сайт для гифа. Но ассортимент переходов только один и с размерами ограничено. Вот только хорошо, что сразу выдает НТМL код да еще и его можно преобразовывать. Я вот это делаю в Гифовине, она сейчас улучшила свои опции. Правда, кода не дает. Далее переношу в iPecture и там беру код
ОтветитьУдалитьДа, Лариса, сервис не самый великолепный, но у него есть два больших плюса: 1) гиф-анимацию сделает даже новичок ---2) сразу получаешь коды для вставки на блог -- Для новичка это просто здорово!
УдалитьДа, а вот с баннером попробую. Правда, работа с кодами и их перекодировка всегда у меня вызывают стопор. Но все равно сделаю! Спасибо еще раз, Светочка!
ОтветитьУдалитьЭто трудно назвать перекодировкой -- вставляем свою ссылку в готовый код. Аккуратно, внимательно, пример есть в посте . Все получится!
УдалитьКак всегда обалденно!Только хотела где-нибудь поискать про гиф,а вы,Светлана,всегда вовремя!Спасибо!
ОтветитьУдалитьСветлана, огромное спасибо! Все получилось легко и быстро!Очень довольна тем , что сделала с Вашей помощью! Успехов Вам и процветания!
ОтветитьУдалить"Гиф анимация" - наш анонс в Марафоне Зеленая Жаба.
ОтветитьУдалитьПрочитала урок, теперь за дело
ОтветитьУдалитьСветлана, всё разжёвано, шаг за шагом... Всё получается. Благодарю за уроки!
ОтветитьУдалитьСветлана, Вы так интересно объясняете.
ОтветитьУдалитьСветлана, спасибо огромное, все очень интересно, Вы просто умница, столько полезной информации, и Вы делитесь ею с нами.
ОтветитьУдалитьЗдравствуйте Светлана! В генераторе гиф работает, все устраивает, а при копировании кода в блог, не работает вообще.
ОтветитьУдалитьСветлана,у меня не получается вставит анимацию в блог.Копируется код,а картинки нет.Подскажите,пожалуйста,очень прошу.
ОтветитьУдалитьСпасибо большое! Все получилось и как раз совет был вовремя!
ОтветитьУдалить