понедельник, 24 апреля 2017 г.

Как создать анимированный баннер GIF для сайта онлайн

Как делать  анимированные баннеры.
Приветствую вас, уважаемые читатели блога Vorabota.ru! Если в сети встречается сайт или блог, на котором нет рекламы, у многих (особенно начинающих Web мастеров, которые решили создать самостоятельно сайт) возникает закономерное подозрение. Подозрение не к ресурсу (сайту или блогу), а к его создателю. «На чем же он (создатель сайта) зарабатывает»?
Заниматься рассуждением, кто и как зарабатывает на своем сайте, в этом материале я не буду. Просто сейчас редко можно встретить сайт, на котором нет рекламного баннера. И «лить воду» на тему, что такое баннерыБаннер – преобладающий формат рекламы в интернете. Имеет вид графического изображения аналог рекламному модулю в прессе. Представляет собой статическое изображение в формате PNG или JPG, а также анимированное, в формате GIF., и какую они играют роль в заработке Web мастера, тоже не буду. «Баннеры были, есть и будут»! И пусть каждый самостоятельно решает, стоит ли ему устанавливать баннер на свой сайт или размещать его где-то еще, к примеру, в соц.сетях. В этом материале хочу просто поделиться с вами тем, как можно сделать баннер самостоятельно любому (если, конечно, это ему надо) пользователю.
Ведь для создания несложного баннера совсем не обязательно знать и уметь пользоваться какой-то «супер-программой» для работы с изображениями. Достаточно воспользоваться бесплатным онлайн сервисом на котором есть возможность быстро сделать несложный, но вполне привлекательный рекламный баннер. Даже тем, кто «дружит» с различными программами для работы с изображениями, «побаловаться» на таком онлайн сервисе будет не лишним. Возможно, и пригодиться.

Бесплатный онлайн сервис Banner Fans для создания баннеров.

Пожалуй, из большого количества бесплатных онлайн сервисов, на которых можно делать баннеры, этот ресурс (на мой взгляд) вполне достоин внимания. Из достоинств этого сервиса хочу отметить его приемлемую скорость и поддержку кириллицы (русский шрифт). И, чтобы на нем быстро освоиться, предлагаю пройти путь изготовления несложного баннера на примере. Не буду описывать каждую кнопку панели инструментов этого сервиса. Может получиться много «воды». А изучить все инструменты и функции этого сервиса в дальнейшем не должно составить труда.
Итак, переходим по ссылке на онлайн сервис Banner Fans. . Можете не регистрироваться. Регистрация нужна лишь в том случае, если вы собираетесь сохранять сделанные баннеры не только на свой компьютер, но и хранить на сервисе. В верхнем правом углу устанавливаем язык Russian. Хотя и «кривой», но будет вполне понятный перевод.
В верхней части рабочей области отражается окно макета баннера, а в нижней панель инструментов.
1. Макет:
Размер баннера: 300 px – 50 px (размер моего баннера)
Фоновый режим: градиент цвета
Цвет градиентов: первый – 8a8aff, второй – 186EAE (если кликнуть по квадратику, можно выбрать цвет)
Режим градиента: Круг 2.
- Нажимаем кнопку «Изменить баннер» в центре нижней части панели инструментов, чтобы увидеть результат изменений.
1-этап создания баннера
2. Текст:
Ваш текст: Линия 1: «Бесплатные онлайн сервисы»
Шрифт: Palatino Linotype Bold (чтобы выбрать кириллицу, нужно щелкнуть на название выбранного шрифта и в открывшемся окне, в верхнем правом углу выбрать Stock)
Размер: 14 px
Цвет: ffffff (оставил по умолчанию)
Вращение: 0° (оставил по умолчанию)
- Нажимаем кнопку «Изменить баннер»
2-этап создания баннера
Выравниваем текст: наводим курсор мышки на строку текста > захватываем крестиком строку нажатием правой кнопки мыши и делаем перемещение
3-этап создания баннера
- Нажимаем кнопку «Изменить баннер»
4-этап создания баннера
3. Воздействие:
Тень • Расстояние • Цвет • Яркость • Текст плана •Наброски цветов
Эти эффекты назначаются для каждой линии текста отдельно.
Линия 1: В данном примере оставил без изменений по умолчанию
Линия 2: Проделываю тот же путь (пункты 2 и 3), манипулируя шрифтом.
4. Пограничная:
Выбор стиля границ: (если простым языком, то это – рамка баннера) В данном примере оставил None по умолчанию.
5. После завершения редактирования перехожу на вкладку Формат - Выбираю нужный мне формат PNG (можно выбрать JPG или GIF) и сохраняю к себе на компьютер, нажав на «Скачать баннер».
Для пользователей и начинающих Web мастеров, которые «далеки» от HTML языка программирования, есть удобная функция:
Получить код
Получить код
В верхней части открывшегося окна заменяете адрес онлайн сервиса на ссылку нужной вам страницы и обновляете код. Очень удобная функция, особенно для тех, кто размещает свои реферальные ссылки на различных досках объявлений, форумах и соц.сетях. Скопировали нужный вам вариант кода и вставляйте там, где поддерживается функция HTML. В своем примере я вставил ссылку на страницу группы «Найди свой бесплатный онлайн сервис».
Найди свой бесплатный онлайн сервис
На странице группы, как и в моем блоге, можно задавать вопросы и делать предложения. А вступившие в группу могут публиковать свои материалы о бесплатных онлан сервисах. На этом примере видно, как, используя бесплатный онлайн сервис Banner Fans, я сделал простенький баннер. Как говорится, «Все гениальное просто, зачем изобретать велосипед». Но многие согласятся с тем, что динамические баннеры намного эффективнее выполняют рекламную роль. И для того чтобы этот баннер анимировать, заставить «дрыгаться», перейдем на другой не менее полезный бесплатный онлан сервис gifovina.

Анимируем баннер на онлайн сервисе Gifovina

Для того чтобы анимировать изображение, в нашем случае баннер, достаточно всего два файла с разными картинками. Но для примера, я подготовил несколько изображений в сервисе Banner Fans, предварительно сохранив их в формате GIF (это для того чтобы полученный в дальнейшем анимированный баннер имел небольшой вес). Итак, для создания анимированного баннера переходим на сервис gifovina
Так же, как и на онлайн сервисе Banner Fans, регистрироваться не обязательно. На этом ресурсе сможет разобраться даже ребенок. Загружайте заранее подготовленные файлы. Делайте несложные настройки и нажимайте кнопку «Готово». Если вас не устраивает результат, можно вернуться обратно для редактирования закрыв окно. Если все вас устраивает можете скачать себе на компьютер или поделиться ссылкой.
Из моих заранее подготовленных изображений получилась вот такая «штукенция».
Найди свой бесплатный онлайн сервис
Вот так, уважаемые читатели, используя два абсолютно бесплатных онлайн сервиса, можно делать баннеры без особых знаний графических программ.
На этом хочу закончить показывать свои «художества» и надеюсь увидеть от вас комментарии. Также предлагаю подписаться на обновления блога (чтобы не пропустить, что-нибудь интересненькое) и присоединиться к группе «Найди свой бесплатный онлайн сервис».

2 коммент.:

  1. http://www.artbanner.com.ua/generator-bannerov-onlayn — вот и всё. один участник. одна номинация. первое место. шрифты, фон, тени, положение текста по вертикали-горизонтали. мне было этого более чем достаточно.
    Сервисы для создания анимированных картинок из нескольких gif.
    http://xgif.ru/ — приличный сервис. много вариантов размеров, возможность задать скорость смены изображений. в целом доволен.
    http://htmlweb.ru/gif-animator/ — после него шрифт первого из трёх баннеров стал кривым.

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

  2. Онлайн генераторы баннеров и логотипов
    Если у вас нет времени и (или) желания для создание собственных баннеров или логотипов, можно воспользоваться онлайн службами с помощью которых можно совершенно бесплатно генерировать вполне сносные образцы веб-арта :-). Внизу приведены несколько ссылок на ресурсы “ихнего” интернета и образец сделанный одним из этих инструментов.
    Animation Online
    Онлайн сервис предоставляющий бесплатные услуги по созданию баннеров, кнопок и анимированных блоков. Множество стандартных “заготовок”. На английском языке.
    MediaBuilder 3D Text Maker
    Простой и быстрый он-лайн сервис, позволяющий бесплатно создать анимированные баннеры с 3D текстом. На английском языке.
    QuickBanner
    Предоставляет бесплатный инструмент для изготовления баннеров онлайн (GIF высокого качества). Очень просто и быстро. На английском языке.
    The Banner Generator
    Хороший онлайн сервис для генерации баннеров и кнопок для вашего сайта. На английском языке.
    Banner Wizard
    Бесплатный он-лайн ресурс предоставленный сайтом Banner-Link. С его помощью, вы можете буквально в несколько кликов, за пару минут изготовить ваш баннер. На португальском языке :-)
    1&1 BannerGenerator
    Онлайн машина для изготовления баннеров различных форматов. Сайт на немецком языке, хотя все понятно и без особенных пояснений…
    open-eye Banner-Generator
    Он-лайн генератор баннеров для неограниченного личного или коммерческого использования. Более чем 1300 отличных шаблонов в нескольких размерах и форматов включая flash. На английском языке.
    Banner Generator
    Еще один простенький инструмент для изготовления баннеров. Английский язык.
    Cool Text
    Бесплатный графический генератор логотипов и кнопок для вставки на веб-страницы и других случаев где может понадобиться впечатляющий фирменный знак. На английском языке.

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