Перед нами стоит задача сделать простой анимированный баннер для сайта. И главное не сам баннер, а принцип создания баннера. Когда понимаешь, как работает анимация, возможности по созданию своего баннера, многократно выше. Рисовать будем в бесплатном свободном графическом редакторе Gimp.
Кратко о принципе работы анимированного баннера.
Что такое анимированный баннер ? По сути это несколько изображений, которые последовательно выводятся перед нами на экране. Время показа каждого изображения задается при создании баннера. Показ изображения зацикливается. Картинки просто листаются одна за другой. Простая мультипликация из нескольких кадров.
Создаем проект. Пишем текст.
Анимированный баннер делаем размером 300*600 пикселей. Открываем Файл_Создать проект. Указываем размеры, подтверждаем.
Пишем текст. Каждую строку текста и каждый элемент баннера создаем в отдельном слое. Выбираем инструмент Текст и пишем первую строку _ Это вкусное.
Подбираем шрифт и размер текста.
Как сделать анимированный баннер для рекламы с нуля за 10 минут?
Украшаем текст. Делаем тень от текста.
Немного украсим текст. Сделаем небольшую тень от текста. Открываем раздел Фильтры _ Свет и тень _ Длинная тень.
Пробуем различные параметры тени. Цвет тени, длина тени, наклон тени.
Делаем вторую тень текста.
Можно сделать любое количество теней разных цветов. Просто фантазируем. Используя фильтры, можно создать бесконечное разнообразие и текста, и фигур, и изображений.
Добавляем остальные текстовые строки.
Добавляем все сроки текста. Делаем тени от текста, повторяя предыдущее действие.
Вставляем картинку пирожного.
Находим в интернете подходящую картинку пирожного. Вырезаем картинку и сохраняем в отдельном файле с расширением PNG. Этот формат позволяет сохранять изображение без фона. Открываем вырезанную картинку пирожного, выбираем пункт Выделение _ Выделить все. Потом Правка _ Копировать. Переходим к баннеру.
В новом слое делаем Правка _Вставить. Как правило, вырезанная картинка будет иметь больший размер, чем наш баннер. Поэтому после вставки уменьшаем изображение пирожного. Выбираем инструмент Масштаб, уменьшаем и позиционируем изображение.
Выбираем инструмент Перемещение и равняем надписи.
Надпись в рамке.
Пишем еще одну фразу ПОРАДУЙ СЕБЯ. Делаем ее без тени, но заключаем в рамку.
Сначала пишем текст. Потом в новом слое делаем прямоугольное выделение. Далее инструментом Плоская заливка заливаем выделение.
Слой с текстом, чтобы был виден, должен быть выше слоя с залитой рамкой. Выбрав слой с залитой рамкой, используя разные фильтры, можно подобрать разные виды рамки.
Заливаем фоновый слой цветом. Обратите внимание. Слои необходимо расположить снизу вверх, в том порядке в каком они должны появляться при анимации.
Оптимизируем изображение.
Перед тем, как анимировать баннер, необходимо оптимизировать изображение. Слои преобразуются в gif формат, имея минимальные размеры. Для оптимизации изображения выбираем Фильтры _ Анимация _ Оптимизация.
Включаем анимацию.
Для включения анимации выбираем Фильтры _ Анимация _ Воспроизведение.
Установка времени анимации.
Выбрав режим анимации, включаем воспроизведение. Получаем мелькание каждого изображения со временем 100 мс. Для изменения времени показа каждого изображения (слоя), необходимо установить время в мс. Время указано в скобках на каждом слое.
Плавное появление изображения.
Для плавного появления изображения любого слоя, нужно создать несколько слоев с различной прозрачностью. Создаем 10 слоев с изображением пирожного и 10 слоев с фоном. Для создания копии слоя, кликаем на выбранном слое правой кнопкой мышки. Выбираем _ Создать копию слоя.
После создания копий слоев, располагаем под каждым слоем изображения пирожного слой с фоном. Располагаем простым перетаскиванием. Следующим этапом меняем прозрачность слоев с пирожным. Начиная с нижнего слоя устанавливаем непрозрачность. Нижний слой непрозрачность 10 процентов, следующий 20 процентов и так далее.
Последний слой непрозрачность 100 процентов.
Объединяем слои.
Дальше необходимо объединить слои. Объединяем по два слоя. Слой с изображением пирожного и слой фона. Слой фона должен быть снизу. Выделяем слой с пирожным, кликаем правой кнопкой мышки.
Выбираем Объединить с предыдущим.
В итоге получилось 10 слое с изображением пирожного с разной прозрачностью.
Включаем анимацию и проверяем , что получилось.
Сохраняем анимированный баннер.
Для сохранения готового анимированного баннера выбираем Файл _ Экспортировать как. Сохраняем с расширением gif .
Ставим флажок Сохранить ка анимацию и Бесконечный цикл. Нажимаем Экспорт.
Видео _ Создание анимированного баннера для сайта в Gimp.
Источник: wlgo.ru
Как сделать анимированный gif-баннер в Canva и добавить его на блог Вордпресс?
Привет! Сегодня поделюсь, как можно быстренько сделать анимированный gif-баннер в сервисе Canva и как его тут же применить, разместив на своем Вордпресс блоге в сайдбаре.
Большинство своих баннеров я делаю именно в Канве и ранее записывала урок по созданию статического баннера и баннерной рекламе. А в этой статье рассмотрим именно двигающийся гиф-баннер.
Рассмотрим 2 варианта его реализации в сервисе Canva:
— добавление готовых анимированных элементов на баннер,
— вначале делаем обычный статический баннер нужного размера, затем придаем ему анимированный эффект.
По итогам, сохраняем баннер в формате gif, загружаем в медиафайлы на сайт Вордпресс и размещаем баннер со ссылкой в сайдбаре (боковой колонке) через специальный html-код и виджет.
Вот обо всем этот по порядку в статье.
А для тех, кто предпочитает наглядность, оставлю свой видеоурок по теме:
Создаем баннер по нужным размерам и добавляем на него анимированные элементы
Для этого нужно перейти и авторизоваться (новым пользователям зарегистрироваться) в сервисе canva.com.
При входе вам могут предложить протестировать версию PRO бесплатно 30 дней и ввести данные платежной карты. Но в большинстве случаев достаточно обычного бесплатного тарифа, поэтому данное предложение можно пропустить, закрыв крестиком.
На главной странице вверху нажимаем «Создать дизайн» — «Настраиваемые размеры».
Указываем желаемые размеры баннера – ширину и высоту. Я для сайдбара своего блога сделаю баннер размером 240х400 пикселей. Жмем «Создать дизайн».
И попадаем в редактор.
По центру у нас белый холст, сбоку слева – готовые шаблоны. За основу и в качестве идей можно взять их, редактируя под себя.
Кстати, здесь можно найти и уже готовые анимированные шаблоны, они помечены вот таким значком:
Также при наведении мышкой, если шаблон бесплатный, вы увидите пометку «беспл.», так как есть и платные варианты с водяным знаком.
Кроме того, можно с нуля наполнять свой холст, используя инструменты на панели слева – фон, текст, элементы и т.д.
То же самое – бесплатные элементы будут с пометкой «беспл.».
Плюс есть возможность загружать свои картинки, в том числе анимированные (gif) и использовать их в баннере. Загрузка своих картинок производится в разделе «Загрузки».
Загруженная гифка отобразится в подразделе «Видео» — нажатием левой кнопкой мыши ее можно добавить на свой холст, перемещать и ползунками по краям менять размер.
Можно подключить и встроенную библиотеку гифок — Gify. Чтобы ее подключить, на панели слева нажимаем «Еще» — там где «Приложения и интеграциях» выбираем Giphy.
Я часто применяю комбинированный вариант – беру готовый шаблон за идею, затем меняю цветовое решение под цвета, которые используются на рекламируемой странице (в обложке продукта) и добавляю нужные мне элементы.
Для примера остановлюсь на таком шаблоне:
Баннер буду делать под свой бесплатный курс по привлечению трафика на страницу подписки. Вот этот:
В этих цветах и буду оформлять свой баннер.
Чтобы шаблон применился к холсту, кликаем на него левой кнопкой мыши.
Чтобы удалить лишние элементы на холсте, выделяем ненужное мышкой – кликаем по иконке корзины справа или жмем кнопку «Delete» на клавиатуре.
Чтобы отредактировать имеющийся текст, выделяем этот элемент и вписываем свой. Инструменты форматирования текста – шрифт, размер, цвет, эффекты и прочее доступны на панели вверху.
Если требуется добавить новый текст, используем одноименный инструмент на панели слева.
Иногда элементы на шаблоне сгруппированы, чтобы разъединить их и править по отдельности, нажимаем сбоку «Разгруппировать».
Чтобы изменить цвет фоновых элементов, выделяем мышкой и на панели вверху меняем цвет.
Кроме цвета, к основному фону холста можно применить заготовки из раздела «Фон».
Или даже видеофон из раздела «Видео». Чтобы применить, ухватите видео левой кнопкой мыши и перетащите на ваш фон.
Чтобы добавить анимированные элементы на баннер, можно перейти в раздел «Элементы» — «Стикеры» и подобрать подходящий вариант.
Либо, как уже писала выше, загрузить свою gif-картинку, подключить библиотеку гифок…
Находить изображения можно и в строке поиска по ключевым словам: по-русски или по-английски. Использовать библиотеку «Фото». А также раздел «Элементы» — там кроме анимированных изображений есть статические — линии, фигуры, градиенты, иллюстрации, значки и многое другое, что можно интересно обыграть на баннере.
В моем варианте будут сочетаться статические элементы и анимированная картинка из встроенной библиотеки Канвы.
Чтобы добавить элемент – я просто кликаю на него на панели слева, он помещается на холст, и дальше ползунками я регулирую его размер и перетаскиваю курсором в нужное место.
Чтобы изменить расположение элементов, к примеру, анимированный элемент я хочу переместить на задний план, выделяю его мышкой, жму справа вверху «Расположение» и выбираю «Назад».
В итоговом варианте важно не переборщить с анимацией и не сделать из баннера мигающую новогоднюю елку. Например, я использовала 1 статическую, 1 анимированную картинку, однотонный фон, яркую подложку под текст в нижней части баннера в цвет кнопки на моем лендинге.
Вот такой баннер в движении получился у меня:
Задаем анимированный эффект статическому баннеру
Сам процесс: размер, фон, добавление текста, графических элементов – все делается по аналогии, как я показала выше, кроме того, что баннер у нас полностью из статических элементов. Анимацию ему мы придаем в самом конце, нажав вверху «Анимация» и выбрав желаемый эффект.
Я сделала вот такой простенький статичный баннер и хочу его немного анимировать. Для этого вверху нажимаю «Анимация».
И выбираю эффект (нажав на тот или иной вариант, можно посмотреть результат). Те эффекты, которые помечены желтой коронкой, доступны на платном PRO тарифе.
Бесплатно доступно не так много эффектов, но выбрать интересный можно + задать продолжительность показа (через какой промежуток, анимация будет повторяться). По умолчанию 5 секунд.
Чтобы задать время повторения анимации, кликаем по цифре и указываем свое значение – например, я поставлю 6,5 секунд.
Вот, как выглядит баннер с эффектом:
Как скачать баннер в gif-формате?
Когда наш баннер с анимацией готов, его нужно скачать в формате gif. Нажимаем справа «Скачать», выбираем формат. Еще раз жмем «Скачать». По умолчанию картинка сохраняется в папку с загрузками на компьютере.
Как разместить баннер на блоге Вордпресс?
Алгоритм по шагам:
1. Заходим в консоль сайта, загружаем баннер в медиафайлы и копируем на него ссылку:
2. Подготавливаем ссылку, которую хотим добавить в баннер. У меня это ссылка на страницу подписки с бесплатным курсом. Чтобы отслеживать подписки, я ставлю на страницу Яндекс. Метрику, настраиваю цели и делаю utm-метку.
Подробнее об этом тут.
Если ссылка партнерская, то метку или спец. партнерский код можно настроить в партнерском кабинете.
Также можно сократить рекламную ссылку своим доменом в плагине-маскировщике ссылок (для учета кликов). Об одном таком русскоязычном плагине я писала здесь. Есть англоязычный бесплатный аналог – Pretty Links.
3. Далее нам понадобится вот такой код для вставки баннера:
— вместо текста «Рекламируемая ссылка» между кавычками размещаем ссылку, которая ведет с баннера.
— вместо текста «URL картинки» – между кавычками размещаем ссылку на баннер, который предварительно загрузили в медиафайлы (см.пункт 1).
*удобно все манипуляции с кодом перед добавлением на сайт делать в обычном txt-блокноте или в блокноте Notepad++.
4. Теперь в консоли сайта Вордпресс заходим в раздел «Внешний вид» — «Виджеты», выбираем виджет «html-код» и перетягиваем его левой кнопкой мыши в сайдбар (боковую колонку). Вставляем в содержимое код нашего баннера и сохраняем.
Если в боковой колонке уже есть какие-то элементы – например, рубрики, поиск и т.д., то вы можете передвигать виджеты и разместить баннер в промежутке между тем или иным виджетом.
Важно: после добавления баннера – он не сразу может отобразиться на сайте. Причина – кеш браузера. Чтобы увидеть изменения – откройте ваш сайт в браузере из режима инкогнито. В Гугл Хроме – это делается нажатием на три вертикальные точки сбоку справа.
Итак, в этой статье мы рассмотрели, как довольно просто можно сделать анимированный гиф-баннер, разместить его на блоге Вордпресс, встроив в баннер нужную рекламную ссылку.
Буду рада, если информация вам пригодилась!
И задавайте вопросы, если что.
Источник: o-zarabotkeonline.ru
Как сделать анимированный баннер в Фотошопе
Здравствуйте, уважаемые друзья. Сегодня поговорим о баннерах, о том, как сделать анимированный баннер в Фотошопе. Вы не раз видели баннеры на многих сайтах, возможно, размещали эти баннеры на своих сайтах. Разумеется, цель любого баннера привлечь внимание посетителя. И если подобрать хорошие изображения, то сделать достойный баннер не сложно.
А если вы занимаетесь партнёрским маркетингом, то знаете, что баннеры есть практически в любой партнёрской программе. Вам лишь нужно взять и вставить код на своём сайте или в рекламной сети. И красивый баннер с вашей партнёрской ссылкой начнёт работать.
А ещё быть может вы хотите привлечь внимание к своему инфопродукту. В любом случае, если нужно сделать баннер, то это можно сделать в графическом редакторе Photoshop.
Конечно, если у вас нет этого редактора, то можно воспользоваться множеством онлайн сервисами по созданию баннеров.
Я же хочу рассказать, как сделать баннер своими ручками от А до Я в графическом редакторе Photoshop.
Что потребуется для создания баннера
Прежде всего, вам потребуется сам редактор Photoshop, версия не ниже CS3. Хотя, и в более ранних версиях, можно сделать анимированный баннер, но немного иным способом.
Разумеется, вам потребуется изображение. Изображение – это основа всех баннеров. В зависимости от тематики баннера, изображения легко найти в интернете.
Подобрав нужные заготовки, можно приступать к созданию баннера.
Выбор размера баннера
Прежде чем приступить к созданию баннера, нужно определиться с его размерами. Размеров довольно много. И соответственно многие сайты имеют размеры сайтбаров, заголовка и футера с учтёнными возможностями размещения стандартных баннеров.
Поэтому я советую использовать именно стандартные размеры баннеров:
88 x 31; 100 x 100; 120 x 60; 120 x 90; 125 x 125; 120 x 240; 120 x 600; 160 x 600; 180 x 150; 234 x 60; 240 x 400; 250 x 250; 300 x 250; 300 x 600; 336 x 280; 468 x 60; 500 x 100; 600 x 90; 728 x 90; 970 x 90.
Размеры приведены в пикселях (px). Первая цифра – ширина, вторая – высота. Выбирайте размер исходя из расчёта размещения баннера.
Процесс создание баннера
Итак, допустим, я решил сделать баннер 300 x 300 для своего бесплатного курса «Как набрать текст голосом». Это нестандартный размер, но для своего блога я могу использовать этот размер, так как знаю где его разместить.
Открываем графический редактор фотошоп и создаём новое изображение с размерами 300 х 300 пикселей.
Пункт меню «Файл» — «Новый» — задаёте размер и жмёте кнопку «Да» или «ОК».
В фотошопе изображение создаётся по слоям. И это очень удобно, так как вы можете создать очень интересные изображения, оперирую графическими элементами на разных слоях. Я расписывать в мелочах не буду, как сделать заливку фона и так далее. Покажу это в видеоуроке. А здесь рассмотрим пошаговую схему создания баннера.
Для анимированного баннера нужно от двух изображений. То есть два и более. Всё зависит от того, чем вы хотите привлечь внимание посетителей.
Я создал 4 слоя с изображениями. Точнее, одно с изображением и три с текстом.
Теперь нужно включить отображение панели «Анимация». Для этого открываем пункт меню «Окно» — «Анимация».
Примечание: В зависимости от версии и перевода этот пункт может называться «Шкала времени» или ещё как-нибудь.
В панели «Анимация» будет отображаться один кадр с текущим слоем. Отображение остальных слоёв следует временно отключить (убрать пиктограмму «глаз» напротив слоя).
Далее, работаем именно с этой панелью и слоями изображения. Для начала создаём новый кадр и включаем отображение второго слоя. Здесь нужно понять принцип, новый кадр – это итог смены предыдущего кадра на новый.
А вот смена между кадрами обеспечивается промежуточными кадрами. Именно промежуточные кадры позволят создать эффект плавного проявления и исчезновения надписей и изображений.
Для улучшения плавного эффекта, на каждый кадр можно задать временную задержку. На кадрах, на которых следует сделать акцент, устанавливаем большую временную задержку.
Поэтому же принципу вы добавляете, и остальные кадры и слои. И каждый раз нажимайте на кнопку «плей» в панели «Анимация» и просматривайте полученный результат. Когда результат будет вас устраивать, следует сохранить баннер.
Только запомните, анимацию поддерживает формат GIF. Этот формат очень мало весит и воспринимается любым сайтом. Только вот качеством изображения этот формат не отличается, поэтому слишком крутые визуальные эффекты при создании баннера использовать нет смысла. Если хотите создавать красивые визуальные эффекты, тогда стоит создавать флеш баннеры или баннеры в формате html5.
Итак, для сохранения анимированного баннера нужно открыть пункт меню «Файл»— «Сохранить для Web».
Теперь ваша задача выбрать формат GIF, остальное фотошоп сделает за вас. Конечно, вы можете поэкспериментировать с настройками. Но, думаю, этого не потребуется.
В результате у вас получится подобный баннер.
Как установить баннер на сайт
Мало сделать красивый баннер. Его нужно ещё установить на сайт. Для этого сам баннер нужно загрузить на ваш сайт. Сделать это можно с помощью файлового менеджера хостинга или через FTP-соединение.
Теперь в том месте сайта, где необходимо показывать баннер вставляете вот этот код:
Только помните, коды вставляются в исходный код сайта или через виджеты. Не забывайте менять ссылки и размеры баннера.
Баннер, который я сделал идеально подходит своими размерами под сайтбар, поэтому его проще всего вставить через виджет.
Для этого открываем административную панель WordPress – «Внешний вид» — «Виджеты» — тип виджета «Текст».
После чего добавляете виджет в сайтбар и вставляете в него код баннера. Не забудьте поменять ссылки!
Готово, — наслаждаемся плодами своего труда.
А теперь смотрим видеоурок, в нём вы увидите всё наглядно и многие вопросы решаться сами собой.
Друзья, на этом сегодня всё. Я желаю вам удачи и хорошего настроения! До встречи в новых статьях.
Источник: 1zaicev.ru