Создание анимированных баннеров онлайн на русском (Flash, Gif и др) под стандартные и собственные размеры.

Создание анимированных баннеров онлайн на русском (Flash, Gif и др) под стандартные и собственные размеры.

 

ПРИМЕР самостоятельно изготовленного баннера

Gamma_banner

 

Рано или поздно, наверняка, каждому владельцу сайта, блога, форума, доски объявлений и т.п. интернет ресурсу приходилось сталкиваться с необходимостью изготовления собственного рекламного баннера, да и простые пользователи, зачастую, для украшения своей подписи на форумах  стараются вставить в нее какой-нибудь баннер отображающий их пристрастие или другую информацию (зависит от форума).

Как это сделать просто и максимально быстро если вы не владеете различными графическими редакторами типа Photoshop и т.п. программами?

Вот об этом и пойдет речь в данной статье.

Я не буду рассказывать вам какие баннеры бывают и в чем их преимущества и недостатки. Это уже многократно и так описано в инете и найти эту информацию не представляет труда. Отмечу лишь что я использую исключительно Gif анимацию, т.е. баннеры сохраненные в формат gif.

Почему именно ее? Да потому, что обилие разнообразной анимированной рекламы в сети интернет подталкивает пользователей устанавливать в своих браузерах плагины, которые блокируют автоматическое отображение различного рода рекламы, такой, как, допустим, Flash анимация. Т.е. пользователь, у которого стоит запрет на отображение Flash анимации просто не увидит ваш баннер, а вот gif анимацию отключают реже.

Для себя я искал какой-то онлайн сервис по изготовлению анимированных баннеров и очень желательно на русском языке с возможностью изготавливать баннер обязательно под свои размеры, а не жестко заданные в шаблонах.

Искал..и нашел благодаря ресурсу Дмитрия (KtoNaNovenkogo.ru) подписчиком которого я являюсь уже несколько лет и неоднократно его ресурс помогал мне решить ту или иную задачу. Так случилось и в этот раз.

 

Поговорим мы сегодня о сервисах bannerfans.com и xgif.ru

 

 bannerfans.com

Прежде чем создавать баннер советую вам зарегистрироваться на этом сервисе. Регистрация очень простая и займет у вас не более 1 минуты зато вы получите возможность сохранять ваши баннеры и в последующем при необходимости их редактировать, что мне лично сразу же пригодилось, когда я посмотрев на созданный мной баннер захотел его немного подкорректировать.

«В этом сервисе имеется русскоязычный интерфейс, возможность использования шрифтов с поддержкой русских букв, ну и просто довольно удобный и интуитивно понятный онлайн генератор баннеров.

Регистрация на сервисе не обязательна и нужна только для сохранения сделанных вами баннеров, но ведь их можно будет просто скачать на свой компьютер. Для переключения интерфейса генератора на русский язык, просто выберите его из выпадающего списка расположенного справа вверху (над кнопкой регистрации). Теперь можно приступать к изготовлению баннера.

На первой вкладке «Макет» вам будет предложено выбрать размер будущего баннера из выпадающего списка стандартных размеров, либо указать свой собственный нестандартный размер. Далее вам нужно будет выбрать цветовое решение для баннера:

  1. однотонную заливку одним выбранным цветом
  2. градиентную заливку (используется по умолчанию) с выбором обоих цветов и способа перетекания градиента
  3. загрузить изображение, которое будет использовать в качестве фона.

Создание баннеров онлайн сервис

Чтобы произведенные вами изменения отобразились на макете, нажмите на расположенную чуть ниже кнопку «Изменить баннер». Переходим на вкладку «Текст». В зависимости от типа и размера итогового баннера вы сможете задействовать от одной до шести линий с текстом (по умолчанию используется две).

Создание баннера онлайн сервис 2

Для каждой линии вам так же предоставляется возможность выбрать размер и цвет шрифта, а так же угол поворота текста относительно горизонтали.

ВАЖНО!  Строки текста на получившейся картинке можно перемещать в любое желаемое вами место. Достаточно навести на них указатель мышки и нажав левую кнопку мышки перетащить в нужное место. Т.е. позиционировать их на получившемся изображении.

Вписываете нужный вам текст для каждой линии и выбираете тип шрифта, которым будут прописаны слова. Шрифтов очень много, но поддержку русского я нашел только в группе «Stock»:

Создание баннеров 3

На следующей вкладке «Воздействие» вы сможете задать направление падения света для отбрасывания тени, собственно, ширину тени, ее цвет, а также ширину и цвет обводки букв текста линий вашего баннера:

Создание баннеров 4

Не забывайте после каждого изменения параметров применять их к создаваемому баннеру, нажав на кнопку «Изменить баннер».

Ну вот, на следующей вкладке выбираете тип рамки для создаваемого баннера (если она вообще нужна), а потому уже на вкладке «Формат» выбираете тип изображения растровой графики, в котором вы предпочитаете сохранить данный шедевр (jpg, png или gif).

Какой именно формат выбирать, решать нужно вам самим, но можете просто попробовать все, а при нажатии на кнопку «Скачать баннер» посмотреть, какой же формат является наиболее экономичным для вашего случая. Будем считать, что сделать простой баннер нам удалось. Но наибольшим эффектом будет обладать анимированный баннер. Как можно его сделать?

Ну, для начала будет достаточно изготовить несколько кадров будущего анимированного шедевра в уже описанном сервисе Bannerfans. Сохранять итоговые изображения нужно будет уже строго в формате Gif ибо только он позволит нам достигнуть желаемого результата (правда, сервис по созданию анимированных баннеров может и преобразовать в Gif другие форматы, но лучше будет сразу соответствовать). Можно, например, на одном кадре оставить только верхнюю линию, на втором добавить еще и нижнюю, а потом написать какую-нибудь замануху-небылицу. В общем, все зависит от богатства фантазии.

xgif.ru

Полученные кадры в формате Gif нужно будет загрузить уже в другой онлайн сервис (xgif.ru), где можно будет настроить порядок чередования кадров и получить вполне рабочий анимированный баннер сделанный полностью онлайн. Все операции, которые вам необходимо будет сделать на этом сервисе, описаны во всех подробностях, так что и добавить не чего. Хотя…

Просто перетащите нужное количество фрагментов будущего баннера на салатовый прямоугольник, после чего для настройки последовательности кадров переместите их мышью между собой в нужном порядке. Скругление углов и плавные переходы мне не понравились, поэтому убрал все это как излишество и нажал кнопку «Создать анимацию»:

Создание баннеров 5

Если полученный результат создания анимации вас устраивает, то жмите на кнопку «Скачать», а если не устраивают, то «Продолжить редактирование»:

Создание баннеров 6

Так при желании вы можете получить HTML код для вставки получившейся анимации в структуру вашего сайта. Если желаете поделиться вашим баннером с друзьями и знакомыми то можете получить прямую ссылку на него.»

Большая часть текста и часть картинок к статье взяты с сайта KtoNaNovenkogo.ru

 

 

Поделись с друзьями
Понравилась статья? Не забудь поделиться ей с друзьями в twittere, facebooke, google+ и других сетях.

Не забудьте подписаться на email рассылку и вы всегда будите получать самые свежие публикации.

Подписка на новостную рассылку

10 comments

  1. Валерий:

    Спасибо за подробное описание! нужная вещица — в закладки!

  2. Спасибо, за интересную программу давно искал подобное, теперь буду создавать сам баннеры а не заказывать или пользоваться просто картинками как баннерами. +5 за статью!

  3. xax:

    Ваш «ПРИМЕР самостоятельно изготовленного баннера» в опере не отображается(

    • Все прекрасно отображается и в опере и в хроме и в мозиле и в ИЭ — такие вещи я сразу проверяю после публикации.

      Скорее всего у вас в опере стоит какое-то дополнение блокирующее отображение gif картинок, либо блокировка содержимого. Погуглите этот вопрос, наверняка найдется решение. На всякий случай загляните в «общие настройки» — «расширенные» — «содержимое» и посмотрите стоит ли галочка в пункте «Включить анимацию изображений». Это вот прям самое простое что быстро нашел.

  4. Кирил:

    Большое спасибо за полезную стать.
    У меня вопрос по поводу накрутки баннеров. Хочу немного накрутить на своём сайте просмотры баннера. Посоветуйте пожалуйста с помощью какого сервиса или программы это лучше всего сделать? Пока в поиске только нашёл сервис traffic.uarnet.org, но раньше с ним не работал.

  5. Спасибо огромное. Искал сервис по созданию флеш баннеров и нашел отличное описание классных сервисов!

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *