Многие из нас, участвуя в партнерских программах, испытывают острую нехватку рекламных материалов. Не все партнерки предоставляют баннеры необходимых размеров, а то и вовсе оставляют создание рекламы на откуп партнерам. Если вы попали в такую ситуацию, не стоит отчаиваться. Сегодня создадим баннер размером 300х600 пикселей для сайдбара сайта в Фотошопе.
Создание баннера в Photoshop
В качестве товара выберем наушники из одного известного интернет-магазина. Технических приемов в этом уроке будет не много, в основном поговорим об основных принципах создания баннеров.
Основные правила для баннеров
- Баннер должен быть ярким и в то же время не выбиваться из основной цветовой гаммы сайта. Явная реклама может раздражать пользователей.
- Изображения и текст должны нести основную информацию о товаре, но в краткой форме (название, модель). Если подразумевается акция или скидка, это также можно указать.
- Текст должен содержать призыв к действию. Таким призывом может являться кнопка с надписью «Купить» или «Заказать».
- Расположение основных элементов баннера может быть любым, но изображение и кнопка должны быть «под рукой» или «на виду».
Для начала необходимо создать визуальный макет того, что мы планируем разместить на холсте. Примерная схема-макет баннера, который мы будем рисовать в уроке:
Показываю, как выполнила заказ с фриланса. Дизайн баннеров игровой тематики
Поиск картинок (логотипов, изображений товаров) лучше выполнять на сайте продавца. Кнопку можно создать самостоятельно, с помощью инструментов из группы «Фигуры» (в нашем случае «Прямоугольник со скругленными углами») либо поискать в Гугле подходящий вариант.
Правила для надписей
Все надписи должны быть выполнены строго одним шрифтом. Исключение могут составлять надписи на логотипах, либо информация об акциях или скидках. Цвет спокойный, можно черный, но лучше темно-серый. Не стоит забывать о контрасте. Можно взять образец цвета с темной части товара.
Фон
В нашем случае фон у баннера белый, но если фон сайдбара Вашего сайта такой же, то имеет смысл подчеркнуть границы баннера. Фон не должен менять цветовую концепцию баннера и к тому же иметь нейтральный оттенок. Если фон задуман изначально, то это правило опускаем. Главное, чтобы на фоне не потерялись надписи и изображения. Картинку с товаром лучше выделить более светлым цветом.
⚡️ВСЁ О РЕКЛАМНЫХ БАННЕРАХ ЗА 6 МИНУТ
Аккуратность
Не стоит забывать об аккуратном размещении элементов на баннере. Небрежность может вызвать отторжение пользователя. Расстояния между элементами должны быть примерно одинаковыми, так же, как и отступы от границ документа. Пользуйтесь направляющими: они помогут точно спозиционировать объекты — кнопки, логотипы и типографику на холсте.
Как нарисовать баннер без дизайнера: инструкция и примеры
Тестирование рекламных кампаний и креативов — ежедневный и не самый быстрый процесс, даже если вы отлично владеете Photoshop или Illustrator. Если речь идет о небольших изменениях в уже готовом файле, времени потребуется не так много. Гораздо дольше создается баннер с нуля.
А что если вы не дизайнер и для тестирования рекламы заказываете баннеры? Только вспомните: сначала объяснить задачу, показать или найти примеры, ответить на уточняющие вопросы, дождаться результата, написать комментарии, попросить внести изменения и снова ждать. Это время можно потратить гораздо эффективнее на изучение продукта и его аудитории или настройку рекламы.
Как же нарисовать баннер самому, если вы не владеете профессиональным софтом для отрисовки графики? Онлайн-редакторы помогут!
Обычно функционал графических редакторов для не-дизайнеров гораздо беднее профессиональных программ, однако конечный результат, как ни странно, может оказаться ничуть не хуже. В подобных сервисах нарисовать баннер можно не с нуля, а с готового шаблона, который нужно только изменить под свои нужды.
Давайте посмотрим, как нарисовать баннер онлайн с помощью популярного инструмента Canva .
Выберите макет и размер — как нарисовать баннер самостоятельно
Начать работу нужно с регистрации. Аккаунт позволяет сохранять все дизайны в одном месте и возвращаться к их редактированию в нужный момент.
После регистрации на главной будет доступен каталог макетов: подберите подходящий под вашу задачу и кликните на него.
В базовой версии изменить размер шаблонов нельзя. Зато можно задать размер дизайна самостоятельно, кликнув на «Использовать специальные размеры» справа сверху.
Выберите шаблон — как нарисовать баннер самостоятельно
Для примера выберем «Большой прямоугольный баннер» — стандартный формат 336×280 пикселей. Помимо прямоугольника, доступны готовые форматы «небоскреба», горизонтального баннера и картинок под разные виды рекламы на Facebook.
Слева вы увидите каталог доступных бесплатных и платных шаблонов для различных сфер и видов услуг. Выберите подходящий одним кликом — теперь его можно отредактировать. В любом случае придется заменить исходный английский текст.
Адаптируйте шаблон — как нарисовать баннер самостоятельно
Текстовые блоки можно легко переставить, изменить шрифт и размер, если надписи не очень читабельны.
Редактировать можно практически любые элементы макетов: цвета подложек, фильтры на фотографиях, контрастность, степень прозрачности и другие характеристики.
Загрузите фото или логотип — как нарисовать баннер самостоятельно
Во вкладке «Загрузки» можно загрузить собственные фотографии или логотипы. Если вы планируете использовать какую-то из картинок регулярно — загружайте ее в папку «Мое»: так она всегда будет у вас под рукой.
Загрузив фотографии, вы можете добавлять их вместо исходных снимков в один клик, подгонять масштаб и обрезать.
Скачайте баннер — как нарисовать баннер самостоятельно
Когда все готово, нажмите «Скачать» справа сверху и выберите один из доступных форматов.
Для баннеров, конечно, лучше всего подойдет JPG, позволяющий делать файлы максимально легкими, а значит — минимизирующий «вес» вашей рекламы для пользователей.
Создайте несколько вариантов — как нарисовать баннер самостоятельно
Если вам нужно протестировать несколько вариантов текста или, к примеру, цветов фона одного и того же баннера, не нужно создавать второй макет с нуля или редактировать текущий, ведь этот исходник вам может понадобиться позже. Лучше создать копию: для этого перейдите на главный экран, нажав на лого Canva слева сверху, найдите нужный шаблон и выберите копирование в меню.
Копии и варианты можно создавать в неограниченных количествах.
3 совета для продуктивной работы — как нарисовать баннер самостоятельно
Есть еще несколько фишек бесплатной версии, которые могут пригодиться вам, чтобы нарисовать рекламный баннер. Разберемся в них?
Режим совместного редактирования
Для совместной работы вы можете дать коллегам доступ к редактированию макета.
Это можно сделать 2 способами:
- по электронной почте, тогда коллеги тоже должны быть зарегистрированы на платформе. Для этого кликните «Поделиться» в правой верхней части интерфейса. В этом случае работать над черновиками и вариантами можно вместе;
- создав команду через меню слева на главной странице. Для этого внесите email’ы ваших коллег в форму на открывшейся странице. В этом случае можно давать доступ к черновикам сразу всей команде. Все общие картинки будут видны в разделе «Общие».
Встроенная коллекция стоковых фото и клипартов
Если вам требуется фотография, иконка или другая иллюстрация, в Canva их можно найти через строку поиска слева или тематические папки в разделе «Элементы».
Часть доступных изображений бесплатны, остальные можно использовать за деньги, от 1$ в зависимости от типа лицензии и количества. Альтернативный источник — другие фотостоки, которые предлагают немало бесплатных фотографий.
Мультиформатность
В Canva также можно нарисовать рекламный баннер, создавать презентации, логотипы, визитки, обрабатывать фотографии, оформлять посты и профили в социальных сетях, а также делать баннеры для YouTube- и Twitch-каналов. В сервисе очень много шаблонов под разные тематики, все они сделаны профессиональными дизайнерами.
Помимо браузерной версии, Canva можно найти в виде приложений в каталогах App Store и Google Play для работы с мобильных устройств.
Заключение
Как видите, нарисовать баннер без дизайнера под боком и соответствующих навыков может оказаться не таким сложным делом — нужны только правильные инструменты.
Современные сервисы во многом решают проблему временных затрат на создание графики, композиции, нехватки воображения и общего качества дизайна, давая возможности сосредоточиться непосредственно на анализе результатов и тестировании новых идей в контекстной рекламе.
Топовые статьи
За все время За месяц
Гайд по рекламе в Facebook. Часть 1: бизнес-менеджер и рекламный кабинет
LTV, CAC, CRR: что значат, как считать и чем реально полезны
Гайд по Google Ads (2022). Часть 6: реклама в YouTube
Пошаговые рекомендации по Google Shopping: советы специалистов Penguin-team
Создание фида Google Merchant Center для основных CMS
Хочешь погрузиться в РРС больше ?
Проявить себя , развивать профессиональные навыки?
Не боишься вызовов, готов быть активным и эффективным ?
Смотри открытые вакансии и отправляй резюме!
Мечты не работают, пока ты не работаешь в Penguin-team
Как сделать баннер в Фотошопе
В этой транскрибации мы поговорим о том, как сделать баннер в фотошоп с простой анимацией для Яндекс.Директ.
Яндекс.Директ недавно стал принимать графические объявления, то есть баннеры, и я предполагаю, что вы хотите, чтобы на вашем баннере присутствовала анимация, чтобы привлечь внимание посетителей различных сайтов. Мы в этом видео (откроется в новом окне) и в траскрибации вместе сделаем анимированный баннер в фотошоп, с кнопкой, которая изменяется.
Что необходимо, чтобы сделать анимированный баннер в фотошоп?
Начнем с лимитов
Какие у нас есть ограничения?
У нас есть требования от модерации, и есть требования по размерам. Мы можем загружать следующие размеры (240×400, 300×250, 300×500, 300×600, 336×280, 640×100, 640×200, 640×960, 728×90, 960×640, 970×250), и наш баннер должен весить до 120 КБ. То есть, если мы сделаем много анимации у большого баннера, то скорее всего, он не пройдет по весу, это понятно.
Куда добавлять готовые баннеры?
Давайте сразу поговорим, где добавлять эти графические объявления. Когда вы создаете рекламную кампанию, то в ней есть чекбокс изменения типа объявлений.
Если вы выбираете Графическое, то вы можете добавить изображение (загрузить его с компьютера, например), и добавляется ссылка на сайт. Скорее всего, вы добавите сюда ряд объявлений, то есть для одного типа таргетинга вы добавите множество баннеров. Это связано с тем, что в РСЯ много различных сайтов, и они в зависимости от своего дизайна добавляют рекламные блоки разного размера для показа объявлений. Думаю, это тоже понятно.
Далее, выбираете тип таргетинга, ключевые фразы, либо сегмент какой-либо аудитории, либо ретаргетинг, и переходите к следующему шагу, где уже выставляете цену за клик.
Итак, мы решили создать баннер. Что нам для этого необходимо?
Нам необходима графика
Один из принципов создания хорошего баннера — это сохранение непрерывности. То есть: тот текст, тот стиль, который есть на странице приземления, его необходимо частично перенести на наш баннер. Чтобы у пользователя, когда он кликнет по баннеру, создалось впечатление, что он попал туда, куда хотел.
Поэтому, если вы настраиваете рекламу на заказ, необходимо всю графику попросить у владельца страницы приземления. Если вы рекламируете свой собственный сайт, то выбираете ту же графику. То есть все логично.
В моем случае я взял вот это большое изображение, взял фотографию Ника и нарисовал кнопочку в том же стиле, как на странице приземления. Так же и текст, в том же стиле, как на странице приземления. Возможно, шрифт отличается, но идея такая же.
Графический редактор для создания баннера
Далее нам необходим редактор. Я рисую баннеры в Adobe Photoshop CC 2015. В вашем случае может быть другой графический редактор, мне просто удобно в нем, поэтому я буду показывать на примере Adobe Photoshop.
Рисуем баннер в Adobe Фотошоп CC 2015
Далее вы создаете новый документ, рекомендую начать с большого размера. Это связано с тем, что когда вы нарисуете первый баннер большой, и он полностью устроит вас или вашего заказчика, то вы все элементы, которые сюда нанесли, можете простым перетягиванием перенести на другой документ.
Например, мне нужен Ник. Выбираю этот слой, и просто перетягиваю в новый документ, и вот у меня в новом документе есть Ник. Здесь в Adobe Photoshop я могу нажать сочетание клавиш Ctrl+T или Command+T, и я получаю доступ к инструменту Трансформирование. И здесь я могу изменять размеры, это очень удобно. Поэтому я рекомендую вам обязательно начинать рисовать баннеры с большого размера.
Слои баннера в Фотошоп
Итак, у нас есть Adobe Photoshop, есть графика, мы создали документ (в моем случае это 960х640), я сюда добавил фон — это просто белое полотно. Сделано это для того, чтобы следующий мой слой не привлекал внимания — у него есть степень прозрачности (я выставил заливку 80%), так как фотография достаточно качественная, четкая, и поэтому если оставить заливку 100%, то она слишком привлекает внимание. Следующим элементом я добавил сюда Ника. Видите, он вырезан из какой-то студийной фотографии. Все это можно скомбинировать.
Еще такой момент, в Adobe Photoshop верхние слои перекрывают нижние слои. То есть если бы слой с Ником находился ниже слоя с фото мечети, то он был бы перекрыт мечетью Кул Шариф. Поэтому он находится здесь, выше.
Далее, у меня есть текст, здесь вся информация. Потом, у меня есть логотип.
[alert yellow»]Одно из требований Яндекс.Директ, чтобы на баннере был логотип либо ОГРН организации. Я сразу добавил и то, и другое, чтобы этот же баннер использовать, например, в myTarget. Еще у меня добавлено здесь “6+”, это тоже требование от Яндекс.Директ, чтобы на баннерах с мероприятиями была отметка о возрасте.[/alert]
Кнопка, которая будет двигаться
Ну и сама кнопка. Я ее нарисовал, состоит она из фигуры, которая рисуется с помощью инструмента Прямоугольник со скругленными углами, быстрая клавиша U. Нарисовал в том же цвете, что и на сайте. И далее нанес текст “купить билет” красным цветом, как на сайте.
Еще у меня у прямоугольника есть эффект тени (кстати, он есть и у других элементов этого баннера — у текста). Давайте перейдем сюда и посмотрим, что это за тень. Я два раза кликнул по слою и попал в Стили слоя. И вот здесь есть параметр Тень. Режим наложения Нормальный, непрозрачность 100%, угол 90 градусов и смещение 0. Из за того, что такая тень применена, появляется эффект воздушности, как будто объект находится ближе к зрителю.
Как сделать анимацию в фотошоп нашей кнопки
Теперь у нас есть все объекты.
Что необходимо сделать, чтобы создать простую анимацию?
Открываем окно Шкала времени
Для этого нужно выбрать меню Окно и поставить галочку Шкала времени. Вот если я сейчас ее сниму, я не смогу создавать анимацию кадра. Сейчас я включу, и вы увидите, что у меня есть два кадра. Второй удалю, и у меня есть один кадр.
Если я так сохраню, то у меня никакого изменения не происходит. Также здесь я сразу выставил задержку 1 секунда. Дело в том, что это требования Яндекс.Директ.
[alert yellow»]Если у нас происходит анимация объекта с текстом, то этот текст должен успевать читаться. Одной секунды вполне достаточно для прочтения текста.[/alert]
Далее у меня стоит еще Постоянно, чтобы анимация крутилась постоянно. Если у нас будет Однократно, то анимация произойдет только один раз.
Создаем новый кадр
Для того, чтобы создать следующий кадр, необходимо нажать кнопку Новый кадр. И мы можем на этом кадре просто убрать, сделать невидимой кнопку. То есть на одном кадре у нас есть кнопка, а на втором нет. И если я нажму воспроизведение, то уже наша анимация создана.
Более сложная gif анимация кнопки
Но давайте мы создадим немного более сложную анимацию. И для этого я на втором кадре сделаю дубликат этой кнопки. В группе Кнопка находятся слой с текстом и сам прямоугольник-подложка. Для этого я выберу группу Кнопка, нажимаю правой кнопкой мыши, выбираю Дубликат группы, соглашаюсь, и у меня появляется новая группа Кнопка копия.
Обратите внимание, я нахожусь на втором кадре и скрываю предыдущую кнопку.
Давайте сейчас перейдем в браузер, и я расскажу, какого эффекта я хочу добиться. Вот перед вами баннер, какой должен у нас получиться.
И вы видите, что на первом кадре есть эффект воздушности, а на втором создается впечатление, что кнопка нажата.
Как добиться эффекта на баннере, что кнопка нажата?
Перехожу в Adobe Photoshop, и перехожу в стили слоя прямоугольника-подложки группы Кнопка копия (двойным кликом по слою). И вместо Тени я ставлю Внутреннюю тень и перехожу в настройки: режим наложения Нормальный, непрозрачность 100%. Далее я делаю смещение, такое чтобы было заметно. 7 пикселей достаточно. И можно еще угол поменять — сделаем 140 градусов, чтобы тень была сбоку.
Теперь у нас на первом кадре воздушная кнопка, а на втором нажатая.
Но согласитесь, чего-то ей не хватает.
Для этого необходимо встать на слой с текстом в кнопке, выбрать инструмент перемещение, и я на клавиатуре нажимаю стрелку Вниз. Таким образом, я смещаю текст вниз, нажимая два раза. И еще два раза вправо.
Можно еще по одному пикселю добавить. У нас теперь есть два кадра, которые крутятся постоянно. Мы можем проверить, как это все работает, нажав кнопку Play.
Сохраняем gif баннер с анимацией
Чтобы сохранить, необходимо выбрать Файл — Сохранить для веб — и появляется окно. Чтобы у нас работала анимация, необходимо выбрать формат GIF. Если мы выберем формат JPEG или PNG, то наша анимация не будет работать, и будет только первый кадр. Выбираем GIF, можем выбрать параметры повторов (постоянно или однократно — рекомендую обязательно проверить), и можем посмотреть здесь, как работает анимация.
Все бы хорошо, но в данном случае вы видите, что у нас GIF имеет большой размер. Это связано с тем, что размер баннера большой, из-за этого вес нашего объекта очень большой. В данном случае я рекомендую его сохранить как JPEG, причем в качестве 50, тогда его вес будет 104 КБ. А лимит, напомню, 120 КБ, то есть мы входим.
Но из-за того, что мы хорошо поработали в большом баннере, мы теперь эти объекты можем переносить в баннеры меньшего размера, и там уже сможем смело сохранять в GIF. Можете в этом убедиться, когда поработаете. В итоге когда мы его сохраним, этот баннер мы уже можем загружать себе в рекламную кампанию.
Как сделать рамку для баннера?
Еще я бы хотел отметить такой момент, что у этого фона есть обводка. Она здесь не очень заметна, так как присутствует черный цвет, но в браузере видно, что фиолетовая обводка есть. Ее необходимо сделать, рамка — это тоже одно из требований Яндекс.Директ.
Для этого переходите в фотошоп, выбираете слой с фоном-картинкой, и если вы работаете в другом размере, вам необходимо выбрать рамку (инструмент Кадрирование), и обрезать ее по размеру документа.
Баннеры небольшие, поэтому объект с фоном у вас будет, скорее всего, больше, чем ваш баннер. Поэтому его нужно будет обрезать именно в том размере.
После того, как вы обрежете, двойным кликом вызываете стили слоя и используете параметр наложения Выполнить обводку, выберите Положение Внутри, выберите цвет, какой вам необходим, можете его номер вставить сюда в цифровом виде, и выбираете размер.
Я думаю, больше 3 пикселей нет смысла. Отлично, сохраняете. И теперь вы получаете на выходе готовый баннер, который можете использовать.
Обязательно сохраняем исходники в PSD формате
Этот документ тоже сохраняете в формате PSD, чтобы в дальнейшем можно было внести изменения в слоях. Вдруг мероприятие перенесется на час, и чтобы все это изменить, вам необходим исходник. Логику, я думаю, вы тоже понимаете. Отлично.
Вот такое видео про то, как сделать баннер (вы прочитали транскрибацию). Если оно вам понравилось, то обязательно ставьте лайк, подписывайтесь на мой YouTube-канал, потому что вас ждет еще много интересного видео. С вами был Денис Герасимов, пока-пока!
Источник: rek9.ru