Как сделать gif-баннер за пару минут
Опубликовал Евгений от июня 17, 2012
В этом посте я хочу продолжить начатую в предыдущем тему. Для начинающих интернет бизнесменов технические моменты иногда представляют непреодолимое препятствие, хотя на самом деле это бывает намного проще, чем кажется.
Сегодня закончил свою многодневную работу над страницей рекламы собственных услуг копирайтера, и в голову мне пришла мысль как-то выделить ее на главной странице. Первое, что пришло в голову установить в сайдбаре баннер, который бы бросался в глаза. Как выход напрашивался gif – баннер, но как его сделать, если я этим никогда не занимался?
Как всегда выручил Яндекс, благодаря которому я наткнулся на замечательный бесплатный онлайн сервис и сделал gif-баннер меньше чем за минуту. Конечно же, это заняло значительно больше времени. Вооружившись фотошопом, я предварительно заготовил картинки, которые в дальнейшем и составили сам баннер. Для gif-баннера необходимо минимум две картинки одинакового размера – они и будут чередоваться, сменяя друг друга. Потом с помощью сервиса ГИФОВИНА буквально за минуту сверстал их в одно целое.
Предположим что у Вас заготовлено несколько картинок одинакового размера, заходим на сайт:
Жмем на кнопку «Добавить кадр» и заносим первую картинку:
Аналогичным образом заносим все остальные:
Указываем размеры баннера, если в выпадающем списке нет подходящего, указываете свой (в моем случае 120×240 пикселей). Указываете желаемое время показа картинки и эффект их смены, вот и все, жмем на кнопку «Готово» и Ваш баннер готов.
В случае, если Вас не устраивает эффект или например скорость, вы можете нажать на крестик в правом верхнем углу, и вернувшись на предыдущую страницу, сделать необходимые корректировки. Если все устраивает, скачивайте баннер, он готов.
В результате мы получаем анимированную картинку в формате gif. Используйте ее во фрагменте кода, приведенного в предыдущей статье, и Вы получите уже не статический, а анимированный баннер. В принципе количество кадров может быть достаточно большим, превращая Вашу картинку в мультфильм, однако следует учитывать, что чем больше количество кадров, тем «тяжелее» будет итоговый файл, что ведет к увеличению времени загрузки.
Всех благ Вам и удачи, Евгений Беляков.
Не забывайте добавлять к своим комментариям ссылки на новые статьи Вашего блога.
Подписывайтесь на мою рассылку – Реальные деньги в виртуальном мире.
Вступайте в мои группы на SubScribe.ru:
«Интернет для всех: пенсионеры в глобальной сети – объединяйтесь!» и
«За здоровый Интернет».
Популярность: 17%
На эту тему я писал раньше:
Ваш E-Mail в безопасности
Мне кажется, что-то подобное преподают на курсах ПК, причём это делаетсся прямо в Worde. Вот напомнили об этом!!!
Но всё-равно, статья очень хорошая, т.к. не все проходят курсы ПК. А необходимость установки баннера всегда есть у любого начинающего блоггера.
И урок, несомненно, очень полезный.
Спасибо.
[Ответить]
Все очень подробно и четко написано. Спасибо за ценный урок!
[Ответить]
интересно, с удовольствием использую
[Ответить]
Большое спасибо, Евгений, за такую интересную и содержательную статью! Благодарю за сервис Гофина! Чудесный сервис. Давно такой искал. Сейчас буду анимацию делать.
[Ответить]
А вот знаете, какое у меня замечание? Может и некомпетентное.)) Ссылка на сайт у вас в том же, а не в новом окне. А может мне уходить не хочется, а я забуду вернуться, займусь там гиф — баннером и всё.))) Я, конечно, знаю, что правой кнопкой можно.))
А по поводу баннера, так я его уже сделал и начал размещать!
Простой, но очень ценный совет! Спасибо!
[Ответить]
Согласен с Андреем, гиперссылки надо делать так, чтобы они открывались в новом окне, это для себя же делается, чтоб не терять посетителей.
Еще вопрос, как создать код для этого баннера, я не обладаю навыками HTML или PHP, ты пишешь в одной из предыдущих статей, а как мне знать в какой?
Дружеский совет, делай на такие тексты как «в одной из предыдущих статей» гиперссылки на эти самые статьи, так ты к тому же, еще и улучшишь поведенческие факторы.
[Ответить]
И еще, спасибо за сервис, действительно очень удобно и быстро, особенно для таких профанов в работе с видеофайлами как я, которые к тому же еще не хотят тратить свое время на изучение всего, а изучают именно то, что необходимо, чтобы успешно вести блог, при этом стараясь максимально упростить и автоматизировать все остальное.
[Ответить]
Владимир правильно заметил, что мы изучаем именно то, что необходимо. И Сегодня я нашел, то, что мне необходимо. Ура!
[Ответить]
Спасибо за сервис, Евгений, воспользуюсь услугами, только с фотошопа надо начать. Удачи.
[Ответить]
admin Reply:
августа 20, 2012 at 22:03
Кстати Александр существует много сервисов «Фотошоп-онлайн» наберите эту фразу «... + на русском» в поисковике и выбирайте.
[Ответить]
Пишите вы интересно. Много интересных мыслей и идей можнопочерпнуть у вас. Чувствуется, что и определенными навыками и знаниями обладаете. Но, скажите, зачем вам столько банеров? Честное слово, хочется подольше задержаться на сайте,но тяжело, в глазах рябит от мерцания рекламы.
[Ответить]
Я пользуюсь программой «Banner Maker Pro 7» для создания баннеров, но этот сервис тоже пригодится. Спасибо за информацию!
[Ответить]
Создали баннер, а как к нему сделать код и вставить его в сайдбар?
[Ответить]
admin Reply:
декабря 27, 2012 at 12:14
Вот последний абзац статьи Татьяна:
«В результате мы получаем анимированную картинку в формате gif. Используйте ее во фрагменте кода, приведенного в предыдущей статье, и Вы получите уже не статический, а анимированный баннер. В принципе количество кадров может быть достаточно большим, превращая Вашу картинку в мультфильм, однако следует учитывать, что чем больше количество кадров, тем «тяжелее» будет итоговый файл, что ведет к увеличению времени загрузки.»
А в сайдбар его вставить можно с помощью виджета «Текст»
[Ответить]
Как создать код баннера и вставить его в сайтбар смотрите по ссылкам fobos12.ru/?p=3393 «Как сделать баннер и создать его код?» и fobos12.ru/?p=2766 «Размещение баннера»
[Ответить]
Создаю баннеры по другом. Но этот метод мне интересен. Испробую и поделюсь впечатлением.
[Ответить]
Спасибо! Кстати, на выходе выдаётся файл gif, а для обработки можно загружать и другие форматы, специально пробовал. Отличное дополнение к моей коллекции полезных бесплатных он-лайн сервисов. Я недавно поделился всем, что уже уже накопилось в статье «Бесплатные Инструменты для Пользователя ПК» на своём сайте. Могу делать кнопку для сайта за 2 минуты, а теперь ещё и анимированый банер. Так дальше пойдёт, то и графические программы не понадобится использовать.
[Ответить]
Я еще не разу не делала баннер и понятия не имею, как это делается. Ваша статья во время, теперь обязательно сделаю себе баннер. Спасибо!
[Ответить]
admin Reply:
мая 12, 2013 at 8:43
У Вас все получится Анастасия. Удачи!
[Ответить]
Здравствуйте, Евгений! Полезный сервис для новичков, но я предпочитаю SWiSH Max4, там больше функций для работы, да и возможности по круче.
[Ответить]
admin Reply:
июля 2, 2013 at 19:06
Спасибо Геннадий за подсказку, буду иметь ввиду.
[Ответить]
Попробуйте, это того стоит. Обучающие видео можно найти в Ютюбе.
[Ответить]
admin Reply:
июля 2, 2013 at 19:55
Хорошо, будет время обязательно попробую.
[Ответить]