13.11.2012

Blogger Гиф анимация для новичка


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



Что надо приготовить.
gif
Несколько фотографий, картинок желательно одного размера. Количество на ваше усмотрение. Можно заранее сделать на картинках надписи. Как работать с картинками читайте в статье. А можно и ничего не делать на первый раз.

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

online
Усложним задачу. Сделаем не просто гиф-анимацию, а активный баннер. Что такое активный баннер? Баннер, при нажатии на который, нас перебрасывает по адресу заданной в баннере ссылки. То есть, мы сами указываем, куда надо перейти читателю - на другой сайт, на видео, на подписную страницу. Поработаем со своей полученной живой картинкой, точнее с кодом картинки. Если мы просто вставим коды, которые получили с сервиса, то при нажатии на картинку мы переходим на сервис. Что в кодах можно сменить?  Ссылку меняем на свою собственную (выделено розовым цветом), лишнее удаляем (выделено зеленым цветом). Получаем "Колокольчик"с переходом. Замену проводим аккуратно и внимательно — важен каждый знак кода.

<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>
Творите! Создайте увлекательные гиф-анимации и притягательные баннеры. Насыщайте блог информацией и красками. 

onlineНаше знакомство с сервисом на этом не закончено. На сервисе можно создать собственный аватар, отредактировать фото. Попробуйте! Работать просто и удобно. Надеюсь, вам понравится. "Приглашаю":

<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>
Напишите в комментариях  - что у вас получилось?
Всего доброго вам и вашим блогам
  

17 комментариев:

  1. Огромное спасибо Светлана за такой урок! Мне как раз это очень нужно было, чтоб сделать банер для продажи своего товара!

    ОтветитьУдалить
  2. Спасибо, Светлана. Думаю, что мне тоже пригодится эта информация.

    ОтветитьУдалить
  3. Светлана, когда читаешь и видишь Ваши объяснения, всё так просто и замечательно. Надеюсь, что когда-нибудь наберусь храбрости, чтобы воплотить это.

    ОтветитьУдалить
  4. Светланка, спасибо, неплохой сайт для гифа. Но ассортимент переходов только один и с размерами ограничено. Вот только хорошо, что сразу выдает НТМL код да еще и его можно преобразовывать. Я вот это делаю в Гифовине, она сейчас улучшила свои опции. Правда, кода не дает. Далее переношу в iPecture и там беру код

    ОтветитьУдалить
    Ответы
    1. Да, Лариса, сервис не самый великолепный, но у него есть два больших плюса: 1) гиф-анимацию сделает даже новичок ---2) сразу получаешь коды для вставки на блог -- Для новичка это просто здорово!

      Удалить
  5. Да, а вот с баннером попробую. Правда, работа с кодами и их перекодировка всегда у меня вызывают стопор. Но все равно сделаю! Спасибо еще раз, Светочка!

    ОтветитьУдалить
    Ответы
    1. Это трудно назвать перекодировкой -- вставляем свою ссылку в готовый код. Аккуратно, внимательно, пример есть в посте . Все получится!

      Удалить
  6. Как всегда обалденно!Только хотела где-нибудь поискать про гиф,а вы,Светлана,всегда вовремя!Спасибо!

    ОтветитьУдалить
  7. Светлана, огромное спасибо! Все получилось легко и быстро!Очень довольна тем , что сделала с Вашей помощью! Успехов Вам и процветания!

    ОтветитьУдалить
  8. "Гиф анимация" - наш анонс в Марафоне Зеленая Жаба.

    ОтветитьУдалить
  9. Прочитала урок, теперь за дело

    ОтветитьУдалить
  10. Светлана, всё разжёвано, шаг за шагом... Всё получается. Благодарю за уроки!

    ОтветитьУдалить
  11. Светлана, Вы так интересно объясняете.

    ОтветитьУдалить
  12. Светлана, спасибо огромное, все очень интересно, Вы просто умница, столько полезной информации, и Вы делитесь ею с нами.

    ОтветитьУдалить
  13. Здравствуйте Светлана! В генераторе гиф работает, все устраивает, а при копировании кода в блог, не работает вообще.

    ОтветитьУдалить
  14. Светлана,у меня не получается вставит анимацию в блог.Копируется код,а картинки нет.Подскажите,пожалуйста,очень прошу.

    ОтветитьУдалить
  15. Спасибо большое! Все получилось и как раз совет был вовремя!

    ОтветитьУдалить