Как сделать анимированный gif баннер за 5 минут и утереть всем дизайнерам нос

Google Web Designer — это бесплатный инструмент от компании Google, позволяющий создавать баннеры стандарта HTML5 и CSS3. Сегодня я расскажу, как начать работать в Google Web Designer и создать там первый свой баннер для рекламы в КМС.

Что такое HTML5-баннеры

HTML5 баннеры — это анимированные баннеры, которые используются во многих рекламных системах, в том числе Яндекс.Директ, Google Ads, «ВКонтакте» или Facebook. Их основные преимущества:

  • адаптированы под все браузеры: благодаря использованию HTML-разметки могут показываться во всех браузерах;
  • подходят для любого типа устройства;
  • относительно малый вес: в отличие от Flash HTML5-баннеры весят заметно меньше, поэтому при их загрузке страницы не тормозят и не грузятся долго;
  • в них легко интегрировать несколько кнопок или элементов;
  • будут поддерживаться в дальнейшем: практически все компании, разрабатывающие браузеры (в частности Google, Mozilla, Apple и другие) отказываются от Flash-технологии и переходят на HTML5.

Начало работы

Чтобы использовать Google Web Designer, необходимо сначала скачать его с сайта.

https://webdesigner.withgoogle.com/

image

После скачивания и установки приложения на компьютер можно:

  • создать новый баннер с чистого листа;
  • создать баннер по шаблону.
image

О работе с шаблонами в Google Web Designer

Google предлагает больше десяти шаблонов под разные задачи, форматы и рекламные системы:

  • App Install — шаблон для привлечения установок приложений;
  • Banner for Display & Video 360 — формат практически для любого типа устройств;
  • Banner for Google Ads and AdMob — баннер для Google Ads и AdMob;
  • Data Driven for Display & Video 360 — формат, показывающий преимущества бренда;
  • Demonstration — креатив с интерактивными элементами;
  • Dynamic remarketing for Google Ads — специальный формат для динамического ремаркетинга в Google Ads;
  • Expandable — объявление с двумя размерами: исходным и увеличенным; исходный подходит для рекламного места стандартного баннера, а больший — выходит за его границы, раскрывается автоматически или после нажатия или прокручивания. Такой формат показывает один большой баннер и несколько маленьких, подойдет для продвижения акции: можно указать несколько товаров, участвующих в ней;
  • Floating — формат только для показа на десктопах;
  • In-stream video — показывает видео вместо стандартного баннера;
  • Interstitial & in-app — межстраничные объявления, которые всплывают над страницей на десктопе и занимают весь экран на мобильном устройстве;
  • Lightbox — универсальный формат, подходит как для видео, так и для изображений, продвигающих товары;
  • Parallax for Display & Video 360 — формат красивых объявлений с несколькими слоями, имитирующих объемную картинку, показывается на мобильных устройствах;
  • Rising star — формат с интерактивным эффектом;
  • Swirl for Display & Video — креативный формат с использованием 3D-моделей.

Выбрав нужный шаблон, нажимаем на «Использовать макет».

Далее выбираем из выпадающего списка размер, задаем название файла и папку, куда сохранится баннер.

Теперь можно приступать к редактированию шаблона.

Создание баннера HTML5 с нуля в Google Web Designer

Чтобы создать баннер с нуля, при запуске программы выбираем «Создать файл».

А если мы уже открыли другой файл с баннером, то необходимо кликнуть на «Файл» (левый верхний угол) и выбрать «Создать».

Вводим название для будущего файла и выбираем его расположение.

Далее начинается работа с чистого листа. В первую очередь заходим в «Свойства».

 Здесь задаем размеры будущего баннера.

Затем переходим в «Библиотеку» и добавляем составные части будущего баннера: элементы и наброски, из которых будет состоять все изображение. Для примера, который указан ниже, все составные части можно скачать из папки:

https://drive.google.com/drive/folders/1Ts3QnqzGXYQi-rwbCEmb7IH6c2i93GAO?usp=sharing

Web Designer поддерживает изображения, видео и аудиофайлы.

Добавить объект можно просто, перетянув его из библиотеки.

Теперь объекты можно перемещать и изменять их размеры — для этого выделите нужный элемент и в свойствах задайте размеры.

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

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

После завершения расстановки кадров можно посмотреть итоговую работу, кликнув на «Смотреть».

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

Выбираем «Мышь — сlick».

Затем открываем вкладку «Объявление Google — Переход».

Кликаем на gwd-ad.

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

Посмотреть все созданные события можно в специальной вкладке в левой части экрана.

Аналогично можно посмотреть заданные стили CSS.

Также доступен предварительный просмотр баннера в браузере —  «Предпросмотр — Chrome».

Чтобы скачать итоговый вариант, кликаем на «Опубликовать — Локально».

Выбираем путь для сохранения.

Созданный баннер можно скачать в zip-архиве с Google Диска:

https://drive.google.com/file/d/1BETheW3T9XHOq8w51WjqYuL4UMCUZNIF/view

А увидеть — по ссылке (отключите блокировщик рекламы, чтобы баннер отобразился).

Загрузка баннеров в Google Ads

HTML5-баннеры загружаются в Google Ads так же, как и другие креативы. Чтобы использовать созданный баннер в рекламе, необходимо перейти в рекламную кампанию во вкладку «Объявления» и нажать на добавить.

В выпавшем списке выбираем «Загрузить медийные объявления».

Загрузите баннер с компьютера, введите конечный URL и сохраните объявление.

Подписывайтесь на наш канал в Яндекс.Дзен

Подписывайтесь на наши социальные сети

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

Подробности
Категория: Изображение

Приветствую вас, уважаемые читатели блога Rabota-Vo.ru! Если в сети встречается сайт или блог, на котором нет рекламы, у многих (особенно начинающих Web мастеров, которые решили создать самостоятельно сайт) возникает закономерное подозрение. Подозрение не к ресурсу (сайту или блогу), а к его создателю. «На чем же он (создатель сайта) зарабатывает»?

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

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

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

Пожалуй, из большого количества бесплатных онлайн сервисов, на которых можно делать баннеры, этот ресурс (на мой взгляд) вполне достоин внимания. Из достоинств этого сервиса хочу отметить его приемлемую скорость и поддержку кириллицы (русский шрифт). И, чтобы на нем быстро освоиться, предлагаю пройти путь изготовления несложного баннера на примере. Не буду описывать каждую кнопку панели инструментов этого сервиса. Может получиться много «воды». А изучить все инструменты и функции этого сервиса в дальнейшем не должно составить труда.

Итак, переходим по ссылке на онлайн сервис Banner Fans. . Можете не регистрироваться. Регистрация нужна лишь в том случае, если вы собираетесь сохранять сделанные баннеры не только на свой компьютер, но и хранить на сервисе. В верхнем правом углу устанавливаем язык Russian. Хотя и «кривой», но будет вполне понятный перевод.

В верхней части рабочей области отражается окно макета баннера, а в нижней панель инструментов.

1. Макет:

Размер баннера: 300 px – 50 px (размер моего баннера)

Фоновый режим: градиент цвета

Цвет градиентов: первый – 8a8aff, второй – 186EAE (если кликнуть по квадратику, можно выбрать цвет)

Режим градиента: Круг 2.

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

2. Текст:

Ваш текст: Линия 1: «Бесплатные онлайн сервисы»

Шрифт: Palatino Linotype Bold (чтобы выбрать кириллицу, нужно щелкнуть на название выбранного шрифта и в открывшемся окне, в верхнем правом углу выбрать Stock)

Размер: 14 px

Цвет: ffffff (оставил по умолчанию)

Вращение: 0° (оставил по умолчанию)

— Нажимаем кнопку «Изменить баннер»

Выравниваем текст: наводим курсор мышки на строку текста > захватываем крестиком строку нажатием правой кнопки мыши и делаем перемещение

— Нажимаем кнопку «Изменить баннер»

3. Воздействие:

Тень • Расстояние • Цвет • Яркость • Текст плана •Наброски цветов

Эти эффекты назначаются для каждой линии текста отдельно.

Линия 1: В данном примере оставил без изменений по умолчанию

Линия 2: Проделываю тот же путь (пункты 2 и 3), манипулируя шрифтом.

4. Пограничная:

Выбор стиля границ: (если простым языком, то это – рамка баннера) В данном примере оставил None по умолчанию.

5. После завершения редактирования перехожу на вкладку Формат — Выбираю нужный мне формат PNG (можно выбрать JPG или GIF) и сохраняю к себе на компьютер, нажав на «Скачать баннер».

Для пользователей и начинающих Web мастеров, которые «далеки» от HTML языка программирования, есть удобная функция:

Получить код

В верхней части открывшегося окна заменяете адрес онлайн сервиса на ссылку нужной вам страницы и обновляете код. Очень удобная функция, особенно для тех, кто размещает свои реферальные ссылки на различных досках объявлений, форумах и соц.сетях. Скопировали нужный вам вариант кода и вставляйте там, где поддерживается функция HTML. В своем примере я вставил ссылку на страницу группы «Найди свой бесплатный онлайн сервис».

На странице группы, как и в моем блоге, можно задавать вопросы и делать предложения. А вступившие в группу могут публиковать свои материалы о бесплатных онлайн сервисах. На этом примере видно, как, используя бесплатный онлайн сервис Banner Fans, я сделал простенький баннер. Как говорится, «Все гениальное просто, зачем изобретать велосипед». Но многие согласятся с тем, что динамические баннеры намного эффективнее выполняют рекламную роль. И для того чтобы этот баннер анимировать, заставить «дрыгаться», перейдем на другой не менее полезный бесплатный онлайн сервис gifovina.

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

Для того чтобы анимировать изображение, в нашем случае баннер, достаточно всего два файла с разными картинками. Но для примера, я подготовил несколько изображений в сервисе Banner Fans, предварительно сохранив их в формате GIF (это для того чтобы полученный в дальнейшем анимированный баннер имел небольшой вес). Итак, для создания анимированного баннера переходим на сервис gifovina

Так же, как и на онлайн сервисе Banner Fans, регистрироваться не обязательно. На этом ресурсе сможет разобраться даже ребенок. Загружайте заранее подготовленные файлы. Делайте несложные настройки и нажимайте кнопку «Готово». Если вас не устраивает результат, можно вернуться обратно для редактирования закрыв окно. Если все вас устраивает можете скачать себе на компьютер или поделиться ссылкой.

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

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

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

Желаю всем удачи и творческих успехов в изготовлении собственных рекламных баннеров. До новых встреч на страницах блога Rabota-Vo.ru.

Вас это может заинтересовать:

Создание кнопки для сайта в онлайн генераторах Сooltext и Da Button…

Чтобы сделать красивые кнопки для своего сайта, совсем необязательно знать сложные графические программы. Есть удобные сервисы, где процесс создания кнопок упрощен до предела. Но результат может получиться оригинальным и интересным. Подробнее…

Как сделать новый курсор для мыши [изменить его на компьютере] и…

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

Иконка для сайта или как сделать Favicon ico самостоятельно

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

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

Анимационные баннеры Нужны клиенты из Facebook, Instagram, VK, Яндекс, Google, сайта? Вы платите за индивидуальный дизайн За одну цену Вы получаете сразу три баннера! Адаптивность и легкость установки на сайт

НУЖНЫ КЛИЕНТЫ ИЗ FACEBOOK, INSTAGRAM, VK, ЯНДЕКС, GOOGLE, САЙТА?

Заинтересуем, подогреем, привлечем, продадим Ваш товар с помощью HTML5, CIF, MP4 анимированного баннера.

Мы разработаем анимированный баннер всего от 1000 руб., а Вы получите заявки клиентов.

Вы платите за индивидуальный дизайн, а не за шаблоны из конструктора.

Гибкость в разработке сценария сюжета и дизайна баннера в отличие от шаблонных готовых решений.

За одну цену Вы получаете сразу три баннера!

для установки на свой сайт и сайты партнеров, баннерной рекламы Google и Яндекс. Такие баннеры отличаются интерактивностью и легкостью. Вес таких баннеров редко превышает 150 кБайт.

— хорошо воспринимаются социальными сетями. Можно разместить в посте как обычную фотографию. Например, GIF-ку легко интегрировать в email рассылку “С Новым годом!”, “Предложение / Распродажа / Скидки!”, “С праздником!” и т.д.

MP4 видеобаннер (ролик)

— любимый формат в Instagram (Stories, IGTV) и Tik Tok. Также, видеоформат “дружит” с Facebook и VK — историями. Можно использовать в оформлении шапки сообщества, создании видеопрезентации.

Адаптивность и легкость установки на сайт

Совершенно все равно, какая CMS у Вас установлена — WordPress, Joomla, MODx, 1С-Битрикс, OpenCart, Drupal, Magento, Wix, Nethouse, Tilda или html страницы. Любой из представленных баннеров устанавливается стандартными средствами управления контентом.

Главный повод вкладываться в видео рекламу!

Главный повод вкладываться в видео рекламу ее востребованность. Видео материал усваивается на 80% лучше текстового. Вовлеченность респондентов в видео рекламу на треть выше статичной рекламы, а следовательно и выше KPI.

Россия вошла в топ-5 крупнейших рынков интернет-рекламы в Европе *

В 2019 году Россия вошла в топ-5 крупнейших рынков интернет-рекламы в Европе, заняв четвёртое место. Это указано в исследовательской сводке AdEx Benchmark, которую ведёт Европейское бюро Бюро интерактивной рекламы (IAB Europe).

Расходы на рекламу в интернете в России по итогам 2019 года достигли 244 млрд рублей, увеличившись на 20% и составили половину всех рекламных бюджетов в стране.

Об этом свидетельствуют данные Ассоциации коммуникационных агентств России (АКАР), которые были обнародованы в середине марта 2020-го.

Баннеры занимают примерно 30% всей рекламы в интернете по данным исследований АКАР, Mail.ru и Data Insight *

Баннеры, сообщили авторы исследования, принесли больше денег на всех устройствах. «Однако кроссплатформенно их продают реже (40%), чем на десктопе (51%) или на мобильных площадках (57%).

Спецпроекты издатели чаще продают кроссплатформенные (29%), а нативную рекламу — на мобильных ресурсах (23%) и на десктопе (20%)», — говорится в сообщении Mail.ru. Агентства зачастую выбирали в прошлом году баннеры -29%. На видеорекламу пришлось 25%, на аудиорекламу — 13%.

* По материалам TADVISER — Интернет-реклама (рынок России)

Анимированный или статичный баннер?

Конечно статичный баннер! Он не раздражает «мельканием» и он имеет очень легкий вес, что критично для мобильных сетей.

Конечно анимированный баннер! Движение всегда привлекает наше внимание, а главное по анимированному баннеру на 80% выше целевых переходов. А те кого раздражает «движение», да и любая реклама включают блокировщики.

Статичный или анимированный баннер выбирать вам. Какое бы решение не приняли, вы всегда в плюсе — ведь реклама двигатель торговли. 

HTML5 баннер — интерактивный контент

Интерактивный контент позволяет взаимодействовать с пользователем на компьютере, в том числе на мобильных телефонах и планшетах.

Например HTML5 баннер может содержать не одну, а несколько кнопок в отличии от других баннеров. Может показывать дополнительную информацию при наведении, одним словом такой баннер по сути мини сайт.

Доработка баннера

Не выкидываем старые работы, переделаем и оживим прошлые идеи. А также преобразуем статичные баннеры предоставленные вами или созданные нами в анимированные баннеры GIF, MP4, HTML5.

Изменение размер баннера

Изменение размера статического или анимированного GIF, MP4, HTML5 баннера до необходимого, из исходника предоставленного вами или созданного нами.

Быстрый хостинг

— это мгновенная активация услуг, новейшие серверы Dell, оперативная служба поддержки, быстрые процессы и многое другое.

оздаём анимированный баннер для Вашего сайтаВ этом уроке по работе с фотошопом я покажу как можно совсем несложно создать инимированный баннер с рекламой или другим подходящим для Вашего сайта текстом.Откроем исходник для баннера, его размер 468х60. Если у Вас нет таких исходников, то баннер, который используется в этом уроке, Вы можете скачать здесь. А вообще можно использовать любой прямоугольник необходимых Вам размеров, залитый какой-нибудь подходящей текстурой.Выберем инструмент «Горизонтальный текст».Напишем на нашем баннере любой текст, я выбрал подходящий для своего сайта.Добавим к тексту стиль слоя. Для этого в палитре слои нажмём на вторую слева иконку fx и выберем стиль «тень».Появится диалоговое окно «Стиль слоя», выберем примерно такие параметры, которые указаны на рисунке. А вообще, Вы вольны выбрать то, что Вам по вкусу.Добавим обводку чёрным цветом шириной 1 пиксель. Нажмём «Да».Наш текст преобразился.Отключим видимость слоя с текстом и добавим новый текстовый слой. Что-нибудь напишем.Чтобы придать новому слою те же стили слоя, зажмём клавишу Alt и перетащим значок fx с первого текстового слоя на второй.Наш верхний слой получил те же параметры стиля слоя, что и у первого текстового слоя.Таким же образом создадим третий текстовый слой и придадим ему те же эффекты.И наконец создадим последний слой с теми же стилями слоя.Всего получилось четыре слоя с текстом.Разблокируем наш основной слой «Задний план». Для этого левой кнопкой мыши два раза щёлкнем по нему. Появится окно «Новый слой», в котором ничего не меняем, а просто нажимаем «Да».Простым перетаскиванием «Слоя 0» на вторую справа иконку создания нового слоя создадим три копии слоя «Слой 0».Расположим эти слои так, что бы под каждым текстовым слоем находилась копия «Слоя 0».Делаем активным текстовый слой, нажимаем сочетание клавиш Ctrl+E. Тем самым, мы сливаем вместе активный текстовый слой и расположенную под ним копию «Слоя 0».Так делаем со всеми слоями. В результате у нас останется всего четыре слоя. На этом подготовительная работа закончена.Открываем палитру «Анимация». Для этого выбираем «Окно — Анимация».Мы увидим палитру «Анимация».Нажмём на стрелочку, расположенную в верхнем правом углу палитры и в открывшемся списке выберем «Создать кадры из слоёв».Так как, у нас четыре слоя, то в палитре «Анимация» появится четыре кадра.Выберем время в течении которого будет показываться каждый кадр. Для этого нажимаем на чёрную стрелочку каждого кадра, находящуюся в нижнем правом углу каждого кадра и в раскрывающемся меню выбираем необходимое нам значение.Затем нажимаем на чёрную стрелочку под первым кадром и выбираем параметры показа анимации — будет показана один раз, всегда или можно выбрать необходимое количество раз. Я выбрал всегда.Далее нажимаем на стандартную кнопку проигрывания анимации и смотрим что у нас получилось.Сохранеяем нашу анимацию. Идём в «Файл — Сохранить для Web» или просто нажимаем Alt+Ctrl+Shift+S.В появившемся окне ставим формат Gif, выбираем 256 цветов и нажимаем «Save» (сохранить).В окне сохранения документа выбираем папку, куда мы будем сохранять файл, пишем название для анимации и нажимаем «Сохранить».Вот что у нас получилось.

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

Подобные публикации:

  • видеоурок «Как сделать текстовый баннер в фотошопе«
  • видеоурок «Как сделать баннер для сайта»
  • урок «Создаём анимированную кнопку для Вашего сайта»

{smooth-scroll-top}

Откроем исходник для баннера, его размер 468х60. Если у Вас нет таких исходников, то баннер, который используется в этом уроке, Вы можете скачать здесь. А вообще можно использовать любой прямоугольник необходимых Вам размеров, залитый какой-нибудь подходящей текстурой.

Выберем инструмент «Горизонтальный текст«.

Напишем на нашем баннере любой текст, я выбрал подходящий для своего сайта.

Добавим к тексту стиль слоя. Для этого в палитре «Слои» нажмём на вторую слева иконку fx и выберем стиль «Тень«.

Появится диалоговое окно «Стиль слоя«, выберем примерно такие параметры, которые указаны на рисунке. А вообще, Вы вольны выбрать то, что Вам по вкусу.

Добавим обводку чёрным цветом шириной 1 пиксель. Нажмём «Да«.

small;»>Наш текст преобразился.

Отключим видимость слоя с текстом и добавим новый текстовый слой. Что-нибудь напишем.

Чтобы придать новому слою те же стили слоя, зажмём клавишу Alt и перетащим значок fx с первого текстового слоя на второй.

Наш верхний слой получил те же параметры стиля слоя, что и у первого текстового слоя.

Таким же образом создадим третий текстовый слой и придадим ему те же эффекты.

И наконец создадим последний слой с теми же стилями слоя.

Всего получилось четыре слоя с текстом.

Разблокируем наш основной слой «Задний план«. Для этого левой кнопкой мыши два раза щёлкнем по нему. Появится окно «Новый слой«, в котором ничего не меняем, а просто нажимаем «Да«.

Простым перетаскиванием «Слоя 0» на вторую справа иконку создания нового слоя создадим три копии слоя «Слой 0«.

Расположим эти слои так, что бы под каждым текстовым слоем находилась копия «Слоя 0«.

Делаем активным верхний текстовый слой, нажимаем сочетание клавиш Ctrl+E. Тем самым, мы сливаем вместе верхний активный текстовый слой и расположенную под ним копию «Слоя 0«.

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

Открываем палитру «Анимация«. Для этого выбираем «Окно — Анимация«.

Мы увидим палитру «Анимация«.

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

Так как, у нас четыре слоя, то в палитре «Анимация» появится четыре кадра.

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

Затем нажимаем на чёрную стрелочку под первым кадром и выбираем параметры показа анимации — будет показана один раз, всегда или можно выбрать необходимое количество раз. Я выбрал «Всегда».

Далее нажимаем на стандартную кнопку проигрывания анимации и смотрим что у нас получилось.

Сохранеяем нашу анимацию. Идём в «Файл — Сохранить для Web» или просто нажимаем Alt+Ctrl+Shift+S.

В появившемся окне ставим формат Gif, выбираем 256 цветов и нажимаем «Save» (сохранить).

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

Вот что у нас получилось.

Не забывайте, что на сайтах можно смотреть не только на баннеры и другую рекламу, но и фильмы смотреть онлайн, причём совершенно бесплатно и без всякой регитсрации. Пример такого сайта — RuMovie.net.

{smooth-scroll-top}

» onclick=»window.open(this.href,’win2′,’status=no,toolbar=no,scrollbars=yes,titlebar=no,menubar=no,resizable=yes,width=640,height=480,directories=no,location=no’); return false;» rel=»nofollow»> Печать

Понравилось? Поделитесь:

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

Гиф баннеры – это оптимальный вариант рекламы на сайтах и в контентно-медийных сетях. Небольшой динамический блок не останется незамеченным и максимально лаконично донесет информацию пользователям интернета.

Что такое гиф анимация

GIF анимация – это движущаяся картинка, которая содержит в себе набор сменяющих друг друга изображений.

Анимированные картинки отлично подходят для усиления визуального восприятия подаваемой информации на рекламных web баннерах, привлекая внимание потенциального клиента.

Популярные размеры

GIF баннеры изготавливаются в различных вариациях. Наибольшей популярностью пользуется гиф реклама следующих форматов:

  1. Встраиваемый прямоугольник – 300х250
  2. Большой прямоугольник – 336х280
  3. Netboard – 580х400
  4. Широкий небоскреб – 160х600
  5. Объявление на полстраницы – 300х600
  6. Баннер – 468х60
  7. Полноразмерный баннер – 728х90

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

Примеры наших работ

Цены и сроки на разработку

Анимированные Gif баннеры  от 1700 руб / 990 руб ресайз в течение 1 рабочего дня
Статические JPG, PNG  от 1200 руб / 600 руб ресайз в течение 1 рабочего дня
Анимированные HTML5  от 2900 руб / 1900 руб ресайз максимум 2 рабочих дня

Преимущества заказа баннеров у нас

Мы изготавливаем GIF баннеры, которые легко достигают поставленных заказчиком целей:

— привлечение внимания;

— увеличение продаж.

Заказывая рекламу у нас, вы получаете лучшее сочетание всех возможных преимуществ.

Скорость

Изготовление анимированных GIF баннеров – наша специализация. Мы подготовим рекламный блок любого формата в кратчайшие сроки.

Соблюдение ТЗ и сроков

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

Скидки за объем

Гибкая политика к формированию цен. Чем больше объем заказа, тем меньше его итоговая стоимость. Постоянным клиентам предоставляются скидки всегда!

Высокий уровень профессионализма

Наш опыт позволит реализовать дизайн и анимацию любой сложности.

Гарантии

Наши анимированные баннеры для сайта пройдут модерацию во всех рекламных сетях. Мы гарантируем 100% размещение на рекламных площадках без потери качества изображения.

Как мы работаем

Работы по подготовке любого веб-баннера выполняются в четыре шага:

  1. Вы оставляете заявку;
  2. Согласуем цену и сроки согласно вашему ТЗ, при необходимости помогаем составить тех.задание;
  3. Вы вносите предоплату (мы юридическое лицо, возможна работа по договору)
  4. Вы выполняем заказ точно в срок;
  5. По факту приемки работы вы вносите постоплату.

Наш профессионализм и многолетний опыт позволяет выполнять заказы в кратчайшие сроки и на высочайшем уровне.

Оцените статью
Рейтинг автора
4,8
Материал подготовил
Максим Коновалов
Наш эксперт
Написано статей
127
А как считаете Вы?
Напишите в комментариях, что вы думаете – согласны
ли со статьей или есть что добавить?
Добавить комментарий