Как делать баннеры в фотошопе


Как сделать баннер в Photoshop

Со временем, когда сайт набирает обороты, у него появляется неплохая посещаемость и растут показатели ТИЦ и PR, тогда веб-мастера начинает задумываться о рекламе своего проекта.

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

Кто-то скажет, что такими делами должен заниматься профессионал и незачем новичкам тратить свое время, лучше статью новую написать.

Конечно можно заплатить денежку дядечке и он сделает красивый баннер к любому сайту. Но как у большинства получается на начальном этапе нет этих средств.

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

Как сделать баннер в Фотошопе за 5 минут


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

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

Далее надо определиться с размером будущего баннера, в основном используют размеры 468×60, 240×400. Мы будем делать баннер размером 468×60, для этого открываем «Меню» — «Файл» — «Создать» и выставляем размеры по ширине 468, по высоте 60.

Размер нового баннера

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

Заливаем фон баннера в фотошопе

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

Загружаем понравившуюся картинку в фотошоп и устанавливаем необходимый размер, который будет подходить по габаритам. «Меню» — «Изображение» — «Размер изображения».


Устанавливаем размер

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

После всего проделанного перетаскиваем картинку на будущий баннер, а уже там поместим ее в нужном для нас месте и объединяем ее с фоном.

Перенос изображения

У вас должно было получиться два слоя, которые выделяются во вкладке «Слои», затем нажимает правую кнопку мыши и выбираем действие «Объединить видимые».

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

Теперь осталось сделать какую-нибудь надпись в фотошопе на баннере. Выбираем в панели инструмент «Текст» и пишем нужную фразу.

Здесь тоже постарайтесь проявить оригинальность, придумайте то что привлечет людей. Теперь объединяем копию основного слоя с текстом, через все туже вкладку «Слои».

После всех процедур должно получится два шаблона:


Шаблон фона

Шаблон текста

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

Шкала времени

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

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

Посмотрите что у меня получилось в итоге за 5 минут простой, а главное интересной работы.

Руководство по созданию баннера в фотошопе

Путь к этому баннеру будет иметь вид < img srс=» URL баннера на хостинге» >< /а>.

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

А если кто-то спросит, как сделать баннер для сайта в фотошоп, то вы уверенно сможете дать правильный ответ. Пока!

seoslim.ru


Основные правила

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

Правило второе. Баннер должен нести основную информацию о товаре, но в краткой форме (название, модель). Если подразумевается акция или скидка, то это также можно указать.

Правило третье. Баннер должен содержать призыв к действию. Таким призывом может являться кнопка с надписью «Купить» или «Заказать».

Расположение основных элементов баннера может быть любым, но изображение и кнопка должны быть «под рукой» или «на виду».

Примерная схема-макет баннера, который мы будем рисовать в уроке.

Создаем баннер в Фотошопе

Поиск картинок (логотипов, изображений товаров) лучше выполнять на сайте продавца.

Кнопку можно создать самостоятельно, либо поискать в Гугле подходящий вариант.

Создаем баннер в Фотошопе

Правила для надписей


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

Цвет спокойный, можно черный, но лучше темно-серый. Не стоит забывать о контрасте. Можно взять образец цвета с темной части товара.

Создаем баннер в Фотошопе

Фон

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

Фон не должен менять цветовую концепцию баннера и иметь нейтральный оттенок. Если фон задуман изначально, то это правило опускаем.

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

Создаем баннер в Фотошопе

Аккуратность

Не стоит забывать об аккуратном размещении элементов на баннере. Небрежность может вызвать отторжение пользователя.

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


Создаем баннер в Фотошопе

Итоговый результат:

Создаем баннер в Фотошопе

Мы с Вами сегодня ознакомились с основными принципами и правилами создания баннеров в Фотошопе.

lumpics.ru

Что необходимо, чтобы сделать анимированный баннер в фотошоп?

Начнем с лимитов

Какие у нас есть ограничения?

У нас есть требования от модерации, и есть требования по размерам. Мы можем загружать следующие размеры (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Еще такой момент, в Adobe Photoshop верхние слои перекрывают нижние слои. То есть если бы слой с Ником находился ниже слоя с фото мечети, то он был бы перекрыт мечетью Кул Шариф. Поэтому он находится здесь, выше.

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

Кнопка, которая будет двигаться

Анимированная кнопкаНу и сама кнопка. Я ее нарисовал, состоит она из фигуры, которая рисуется с помощью инструмента Прямоугольник со скругленными углами, быстрая клавиша U. Нарисовал в том же цвете, что и на сайте. И далее нанес текст “купить билет” красным цветом, как на сайте.

Еще у меня у прямоугольника есть эффект тени (кстати, он есть и у других элементов этого баннера — у текста). Давайте перейдем сюда и посмотрим, что это за тень. Я два раза кликнул по слою и попал в Стили слоя. И вот здесь есть параметр Тень. Режим наложения Нормальный, непрозрачность 100%, угол 90 градусов и смещение 0. Из за того, что такая тень применена, появляется эффект воздушности, как будто объект находится ближе к зрителю.

Как сделать анимацию в фотошоп нашей кнопки


Теперь у нас есть все объекты.

Что необходимо сделать, чтобы создать простую анимацию?

Окно шкалы времени

Открываем окно Шкала времени

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

Если я так сохраню, то у меня никакого изменения не происходит. Также здесь я сразу выставил задержку 1 секунда. Дело в том, что это требования Яндекс.Директ.

Далее у меня стоит еще Постоянно, чтобы анимация крутилась постоянно. Если у нас будет Однократно, то анимация произойдет только один раз.

Создаем новый кадр

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

Более сложная gif анимация кнопки

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

Обратите внимание, я нахожусь на втором кадре и скрываю предыдущую кнопку.

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

И вы видите, что на первом кадре есть эффект воздушности, а на втором создается впечатление, что кнопка нажата.

Как добиться эффекта на баннере, что кнопка нажата?

Внутренняя тень для кнопкиПерехожу в Adobe Photoshop, и перехожу в стили слоя прямоугольника-подложки группы Кнопка копия (двойным кликом по слою). И вместо Тени я ставлю Внутреннюю тень и перехожу в настройки: режим наложения Нормальный, непрозрачность 100%. Далее я делаю смещение, такое чтобы было заметно. 7 пикселей достаточно. И можно еще угол поменять — сделаем 140 градусов, чтобы тень была сбоку.

Теперь у нас на первом кадре воздушная кнопка, а на втором нажатая.

Но согласитесь, чего-то ей не хватает.

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

Можно еще по одному пикселю добавить. У нас теперь есть два кадра, которые крутятся постоянно. Мы можем проверить, как это все работает, нажав кнопку Play.

Сохраняем gif баннер с анимацией

Сохраняем баннер с анимациейЧтобы сохранить, необходимо выбрать Файл — Сохранить для веб — и появляется окно. Чтобы у нас работала анимация, необходимо выбрать формат GIF. Если мы выберем формат JPEG или PNG, то наша анимация не будет работать, и будет только первый кадр. Выбираем GIF, можем выбрать параметры повторов (постоянно или однократно — рекомендую обязательно проверить), и можем посмотреть здесь, как работает анимация.

Все бы хорошо, но в данном случае вы видите, что у нас GIF имеет большой размер. Это связано с тем, что размер баннера большой, из-за этого вес нашего объекта очень большой. В данном случае я рекомендую его сохранить как JPEG, причем в качестве 50, тогда его вес будет 104 КБ. А лимит, напомню, 120 КБ, то есть мы входим.

Но из-за того, что мы хорошо поработали в большом баннере, мы теперь эти объекты можем переносить в баннеры меньшего размера, и там уже сможем смело сохранять в GIF. Можете в этом убедиться, когда поработаете. В итоге когда мы его сохраним,  этот баннер мы уже можем загружать себе в рекламную кампанию.

Как сделать рамку для баннера?

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

Как ее сделать?

Делаем кадрированиеДля этого переходите в фотошоп, выбираете слой с фоном-картинкой, и если вы работаете в другом размере, вам необходимо выбрать рамку (инструмент Кадрирование), и обрезать ее по размеру документа.

Баннеры небольшие, поэтому объект с фоном у вас будет, скорее всего, больше, чем ваш баннер. Поэтому его нужно будет обрезать именно в том размере.

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

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

Обязательно сохраняем исходники в PSD формате

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

Вот такое видео про то, как сделать баннер (вы прочитали транскрибацию). Если оно вам понравилось, то обязательно ставьте лайк, подписывайтесь на мой YouTube-канал, потому что вас ждет еще много интересного видео. С вами был Денис Герасимов, пока-пока!

Подпишитесь на YouTube канал

rek9.ru

Делаем баннер в Adobe Photoshop

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

Затем уже можно запустить Photoshop и создать новое изображение с прозрачным фоном (File/New) размером, например, 468 на 60 пикселей;

Как делать баннеры в фотошопеВыводим на экран панель работы со слоями “Layer”.
Как делать баннеры в фотошопеВ качестве отдельного слоя создаём фон – здесь советуем особо не экономить и любой сколько-нибудь заметный элемент баннера размещать на отдельном слое, вплоть до того, что под каждую букву слогана выделить свой слой.

Как делать баннеры в фотошопеНа отдельном слое – рекламный призыв, а так же заранее подготовленную по размерам фотографию, эмблему.

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

Как делать баннеры в фотошопеВсе варианты, пока в многослойном варианте, сохраняем в отдельных файлах в формате psd (заметим, jpg-формат «не помнит» информацию о слоях, он все слои соберёт в один и в будущем разбивка уже будет невозможна).

Очень полезно пока от компьютера отойти, отдохнуть от работы и вернуться к ней на следующий день, чтобы «свежим взглядом» оценить сделанное и выбрать окончательный вариант, который и будет подкорректирован и переведён в jpg.

Работа во многом носит творческий характер на грани мастерства владения инструментами программы фотошоп, чувства психологии, воздействия рекламы и её предмета.

Как сделать баннер в фотошопе анимированным (gif-файл)? И с этой задачей наш родной Фотошоп справится на ура! Открываем вкладку — окно — Анимация.
Как делать баннеры в фотошопе

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

Как делать баннеры в фотошопе

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

Здесь потребуется точно определить все:

  • временные параметры поведения каждого слоя;
  • поведение его прозрачности;
  • траекторию перемещения.

Дело совсем не сложное, но заставит почувствовать, насколько сложна эта профессия сценариста-режиссёра.

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

Вот такой вот баннер я создал за 5 минут! Он конечно далек от совершенства, но ведь моей целью было показать Вам возможности Фотошопа и я с этим справился!

Да, чуть не забыл рассказать о своей находке В прошлой статье, я рассказывал о том, что купил видео курсы Сергея Буйбарова, о том как создавать баннеры и зарабатывать на них ! После детального изучения (целый день смотрел видео трюки и фишки Сережи) я понял, что подобного рода курсы, очень нужны в Рунете! Советую к приобретению однозначно…

До скорого в новой статье!

С уважением, Владимир Савельев

Премиум-уроки от клуба webformyself

Это новый революционный продукт в области обучения сайтостроительству! Все лучшие видео-уроки собраны в одном месте и разделены на категории: WordPress, Joomla, PHP, HTML, CSS и JavaScript… База постоянно пополняется и уже сейчас в ней более 200 уроков! Всего за один год — Вы сможете стать опытным веб-мастером «с полного нуля»!

Подробнее

Урок о том, как создать анимированный баннер в программе Photoshop для новичков, не владеющих инструментами редактора. Достаточно уметь открывать в нем графические файлы. Мне, как раз, необходимо создать реальный баннер партнерского хостинга. Его размер будет 468 х 60 px — это один из стандартных размеров (готовый баннер внизу страницы).

1. В основном меню программы жмем «Файл — Создать» (Ctrl+N):

Как делать баннеры в фотошопе

В окне необходимо задать Имя, размеры и выбрать Прозрачный фон — остальные параметры трогать не надо, жмем OK. Если у вас другая версия Photoshop — не страшно, все действия и инструменты будут такие же. На пустой баннер я поместил изображение серверов, а вам нужно открыть своё: «Файл — Открыть» (Ctrl+O).

Высота нашего баннера 60 px, подгоните по размеру своё: «Изображение — Размер изображения» (Alt+Ctrl+I).

2. Выделите его инструментом «Прямоугольная область» (1), или его часть, затем «Редактирование — Скопировать» (Ctrl+C). Теперь на пустом баннере выделите примерную область вставки и далее: «Редактирование — Вставить» (Ctrl+V). Подправьте его расположение инструментом «Перемещение» (2):

3. Инструментом «Заливка» (3) кликните на пустом месте баннера. Если ваше изображение было в формате JPG, то останется его фон, покликайте по нему — может не получиться, закрасится полезная область. В идеале лучше иметь изображение в формате PNG, без фона, и вставить его уже на залитый баннер. У меня получилось сносно:

Как делать баннеры в фотошопе

Чтобы установить цвет, кликните по квадрату (5), а в открывшейся «Палитре цветов» выберите нужный, у меня желтый: #f9f100 — его можно просто ввести в поле, внизу палитры:

Как делать баннеры в фотошопе

4. Выделите инструментом «Прямоугольная область» (1) прямоугольник в средней части баннера, выберите в «Палитре цветов» (5) белый цвет: #ffffff и залейте область инструментом «Заливка» (3). Для отмены любых действий используйте «Редактирование — Шаг назад» (Alt+Ctrl+Z). Теперь будем работать с инструментом «Текст» (4):

5. Выберите инструмент «Горизонтальный текст» (4) и кликните в белой области — наберите нужный вам текст. На расположение не обращайте внимание, готовую надпись потом сдвинете инструментом «Перемещение» (2). На горизонтальной Панели управления, где кнопки (6) и (7), установите шрифт, его размер, резкость, цвет надписи — та же «Палитра цветов» (5). Просто выделяйте курсором сделанную надпись и меняйте эти параметры.

Для первой надписи «хостинг» (шрифт KabelCTT Medium, размер 36пт, цвет #444444) применялся инструмент «Деформировать текст» (6), он на скриншоте; для второй «от 0.4$» панель «Символ» (7) — сужение-растяжение символов по ширине и высоте, плотность и др., причем не всей надписи, а отдельных символов — выделяя их по отдельности.

Как делать баннеры в фотошопе

Во второй надписи: шрифт Arial, его размер неодинаковый, толщина для «0.4» — black, для «от..$» — bold, цвет красный — #ff0000. Чтобы сохранить надпись — нажмите галочку (8), а соседняя кнопка отменяет все несохраненные действия с текстом. После этого можете сместить и выровнять надпись инструментом «Перемещение» (2):

Как делать баннеры в фотошопе

Для первой надписи применялся эффект «Тень», для второй — эффект «Обводка», задействовать их можно через тоже основное меню: «Слои — Стиль слоя». Поэкспериментируйте. Ниже вы видите панель «Слои» (не путать с пунктом основного меню) — она справа в рабочем окне Photoshop, если там нет, то: «Окно — Слои» (F7). В ней мы будем работать со слоями, у нас их три — два текстовых.

6. А пока, объединим три наших слоя: «Слои — Объединить видимые» (Shift+Ctrl+E) — они все с глазиками. Глазик делает слой видимым, если по нему кликнуть, убрав глазик, — данный слой будет невидимым. А можно по другому: выделим все слои, кликнув, но каждому слою с зажатой клавишей Shift , и далее: «Слои — Объединить слои» (Ctrl+E). Останется один слой, изменить его название (пригодится далее) можно дважды кликнув, прямо на самой надписи «Слой 1»:

Как делать баннеры в фотошопе

7. Сделаем обводку баннера, выделив слой: «Редактирование — Выполнить обводку», здесь серый цвет #999999:

Как делать баннеры в фотошопе

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

Как делать баннеры в фотошопе

Зададим ему название «Слой 2»:

Как делать баннеры в фотошопе

9. На этом слое в третьей части напишем надпись, как на скриншотах ниже — используем инструмент «Текст» (4). Образуется еще один слой — текстовой, снова объединим его со «Слоем 2». Если название объединенного слоя получилось неправильное — двойной клик строго по самому названию и заменяем на «Слой 2»:

Как делать баннеры в фотошопе

10. Снова дублируем «Слой 2», получаем «Слой 3» — он такой и останется (с текстом). А на «Слое 2», выделив его кликом, сделаем залитый прямоугольник. Инструментом «Прямоугольная область» (1) выделяем область с надписью, как на скриншоте:

Заливаем её инструментом «Заливка» (3), серый цвет #999999 в «Палитре цветов» (5), несколько раз энергично кликнув по области выделения:

У нас получилось три слоя: «Слой 1» — пустой, «Слой 2» — с залитым прямоугольником, «Слой 3» — с надписью. По аналогии с ними нужно добавить еще две надписи (см. готовый баннер), т.е. еще шесть слоёв — всего получится девять:

Как делать баннеры в фотошопе

11. Осталось анимировать баннер в панели «Анимация», если в правой панели ее нет, то вызываем её из основного меню: «Окно — Анимация».

Как делать баннеры в фотошопе

Нажав кнопку (9), создаем дублирующий кадр (один там уже будет), выделяем его кликом — он будет в рамочке. Переходим в панель «Слои», снимаем глазик со «Слоя 1», включаем глазик в «Слое 2» и выделяем слой кликом. Переходим в панель «Анимация», создаем кнопкой (9) третий дублирующий кадр — можно сделать сразу девять кадров. Принцип простой: кадр 3 — «Слой 3» (включаем глазик и выделяем его), кадр 4 — «Слой 4» и т.д.

Кнопка (10) служит для удаления ненужных кадров, в треугольничке (11) выставляем время для каждого кадра, в нашем случае: 0.1 сек. — 0 сек. — 1 сек, а далее по аналогии. Кнопкой «Запуск» (12) запускаем анимацию баннера.

12. Сохраняем баннер строго так: «Файл — Сохранить для Web и устройств» (Alt+Shift+Ctrl+S). В нижнем правом углу можно еще раз проверить анимацию:

Как делать баннеры в фотошопе

В верхнем углу выбираем формат GIF, оптимизируем баннер: 64-цветный вариант, без дизеринга — оказался подходящий по качеству. Файл получился 10.1 KB — небольшой по объему:

Как делать баннеры в фотошопе

Готовый анимированный баннер хостинга:

Для его размещения в коде страницы нужно заключить тег img, с URL баннера, между парным тегом a, в котором находится ссылка.

Если баннер не отображается на сайте: 1 — проверить правильность URL; 2 — сработала функция «Антибаннер» в браузере или антивируснике, у меня баннер блокировал Каспер — нужно добавить URL баннера в «белый список» в настройках программы.

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

Уроки Photoshop:

  • Анимированный баннер Анимация 3D обложка

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

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

Как делать баннеры в фотошопе

Теперь ваша задача выбрать формат GIF, остальное фотошоп сделает за вас. Конечно, вы можете поэкспериментировать с настройками. Но, думаю, этого не потребуется.

Как делать баннеры в фотошопе

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

.

Теперь в том месте сайта, где необходимо показывать баннер вставляете вот этот код:

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

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

Для этого открываем административную панель WordPress – «Внешний вид» — — тип виджета «Текст» .

Как делать баннеры в фотошопе

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

Как делать баннеры в фотошопе

Готово, — наслаждаемся плодами своего труда.

А теперь смотрим видеоурок, в нём вы увидите всё наглядно и многие вопросы решаться сами собой.

Друзья, на этом сегодня всё. Я желаю вам удачи и хорошего настроения! До встречи в новых статьях.

    Как делать баннеры в фотошопеКак делать баннеры в фотошопеКак делать баннеры в фотошопеКак делать баннеры в фотошопе
    Примеры баннеров, осзданых в фотошоп можно посмотреть в галерее. Видео создания анимированного баннера.

    Важную роль в продвижении сайтов, внешней и внутренней оптимизации играет баннер. Баннера могут быть статическими различных форматов изображений и анимированными (gif, flash). В баннер вставляется ссылка в редакторе на сайте. На этой странице рассматривается создание баннера в фотошоп в формате GIF (анимированный баннер photoshop) . Аналогично можно создать анимированный баннер в Corel Photo Paint или в программе Corel Paint Shop Pro Photo. Баннер в Corel Draw можно создать только статический, т. к. программа не поддерживает анимацию. Ссылку в изображение (баннер) в программе Фотошоп вставить нельзя, в отличии от CorelDraw. Примеры созданных анимированных GIF баннеров в Photoshop можно посмотреть в галерее в разделе мои баннеры . Урок создание анимации в фотошоп. Создание анимированного баннера в Photoshop. Рассмотрим 3 приема создания GIF анимации в фотошоп. Анимированный баннер

    Анимация текста, Переключение слоев, 3. Затухание (переход).

    Создание движущегося текста в фотошоп.

    Как делать баннеры в фотошопе

    Для тех, кто только начинает знакомство с Adobe Photoshop, рассмотрим создание простейшего анимированного баннера с функцией движущийся (анимированный) текст. Так как Adobe Photoshop это программа для работы со слоями растровой графики, то она даст нам возможность создавать растровые изображения с анимацией слоев и сохранением в формате GIF, который поддерживает анимацию. Кнопки и инструменты Adobe Photoshop, которые нам понадобятся для создания баннера анимация движущийся текст: кнопки меню ФАЙЛ, ОКНО, ПРОСМОТР, панель инструментов, инструменты ТЕКСТ, окна АНИМАЦИЯ, СЛОИ, СИМВОЛ.Создаем новый документ — кнопка ФАЙЛ — в раскрывающемся меню жмем НОВЫЙ.

    Как делать баннеры в фотошопеВ появившемся окне задаем нужные размеры, допустим 200 пикселей ширина, 100 высота, задаем для начала прозрачный фон (потом можно будет залить нужным цветом). На панели инструментов слева жмем кнопку текст (Т ) и на поле документа набираем текст, допустим «ТЕКСТ» для последующей анимации движения еще раз набираем второе слово «ТЕКСТ» на таком расстоянии от первого, чтобы второе слово вышло за пределы баннера справа (стало невидимым). Настройки текста можно задать в верхнем меню — жмем кнопку ОКНО — в раскрывающемся меню жмем СИМВОЛ — в окне меню СИМВОЛ задаем нужные параметры текста: шрифт, размер, цвет и т.д.

    Создание анимации текста в фотошоп

    В верхнем меню — жмем кнопку ОКНО — в раскрывающемся меню жмем АНИМАЦИЯ — в окне меню АНИМАЦИЯ видим первый кадр.

    Как делать баннеры в фотошопе

    Для создания анимации необходимо несколько кадров. В окне АНИМАЦИЯ снизу слева от кнопки корзины жмем кнопку в виде листа и создаем копию кадра. На обоих кадрах задаем время отображения кадра (допустим 0,2 сек, но можно подобрать под нужную скорость в соответствии количеством промежуточных кадров для себя). Нажимаем на второй кадр и в окне СЛОИ нажимаем на слой с нашим текстом для активации слоя. Если нет по краям окна программы линеек для создания направляющих — в верхнем меню — жмем кнопку ПРОСМОТР — в раскрывающемся меню жмем ЛИНЕЙКИ. Нажимаем на левую линейку и, не отпуская, тянем (по умолчанию голубенькую) направляющую к началу текста. На поле баннера нажимаем на текст (при активном втором кадре) и зажав клавишу Shift (чтобы сдвиг был строго по горизонтали), тянем текст влево так, чтобы появившееся второе слово ТЕКСТ подошло к направляющей, но не в плотную, а с маленьким зазором от направляющей до начала второго слова, чтоб в последствии не было рывков в анимации при возвращении анимации к первому кадру.

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

    Как делать баннеры в фотошопе

    Если все устраивает — сохраняем — жмем ФАЙЛ — сохранить для web устройств. Перед сохранением нужно чтоб активный кадр был первым на готовом баннере (с него начнется анимация) или задать кадр для начала анимации. При сохранении для веб устройств открывается окно, в котором задаем формат GIF (только формат GIF для анимации!) если надо выбираем количество цветов colors (чем меньше оттенков, тем легче баннер), для данного черного текста хватит 8 цветов. Цикличность (looping option) оставляем forewer (без остановки). В этом окне сохранения для веб устройств можно поменять размер баннера — уменьшим — 100 на 50. Здесь же можно просмотреть результат анимации. Если все устраивает — жмем Save и указываем место сохранения баннера, допустим на рабочий стол. Назвать для последующей загрузки на сайт необходимо латинскими буквами, например banner_text. Просматриваем готовый баннер и если устраивает — можно загружать на сайт. Такой же эффект движения можно сделать не только с текстом, но и с частью изображения (объектом).

    Второй способ создания анимированного баннера в Adobe Photoshop.

    Как делать баннеры в фотошопеБаннер со сменяющимися изображениями изготавливается путем создания нескольких слоев изображений и включения (выключения) их в заданном порядке. Создадим 2 слоя с разными изображениями.

    Как делать баннеры в фотошопе

    Слой 1 и слой 2. Создаем в окне анимации 2 кадра. Задаем время показов. В первом кадре оставляем включенный слой 1, слой 2 выключаем. Просматриваем анимацию и сохраняем для веб устройств в формате GIF. Для более точной передачи цветовой гаммы выставляем количество цветов 256.

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

    Как делать баннеры в фотошопе

    Опять создаем 2 слоя, но не выключаем их, а применяем функцию прозрачности. Создаем 3 кадра. В кадре 1 первый слой непрозрачность 100%, во втором кадре слой 1 непрозрачность 0%. В 3 кадре слой 1 опять непрозрачность 100%. Между тремя кадрами создаем необходимое число промежуточный кадров и получаем эффект перехода изображения.

    Уменьшение размера gif анимации (баннера) в Фотошоп.

    Что делать, если необходимо уменьшить размер анимированного баннера (изображения), а нет PSD исходника? Напряпрямую готовый гиф со слоями в фотшоп не откроешь. Это можно сделать в Corel Photo paint. Как уменьшить размер анимированного gif баннера в фотошоп ? Тут надо знать маленькую хитрость. В Фотошоп gif анимацию загружаем через меню ФАЙЛ — импортировать — кадры видео в слои. На данном этапе и начинается фокус. Во первых, на компьютере должен быть установлен Quick Time Player. Во вторых, в открывшемся окне загрузки сразу наш gif не найти (по умолчанию-видео форматы). Чтобы найти наш баннер, необходимо в строку ИМЯ ФАЙЛА в окне поиска Фотошоп при импорте написать расширение гиф следующим образом — «*.GIF» без кавычек.

    Как делать баннеры в фотошопе

    Нажимаем загрузить и вдруг появляется в окне наш баннер в формате гиф! Выбираем его и жмем загрузить еще раз. Появляется окно, с предустановкой От начала до конца, где устанавливаем галку — Создать покадровую анимацию — жмем ДА!. В итоге наш gif баннер загрузился со всеми слоями. Осталось изменить размер изображения и сохранить для веб устройств опять же в формате gif как в прошлый раз.

    Видео наглядно показывает создание анимированного баннера.

    оздаём анимированный баннер для Вашего сайта

    Откроем исходник для баннера, его размер 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 » (сохранить ).

    Как делать баннеры в фотошопе

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

    Как делать баннеры в фотошопе
    {smooth-scroll-top}

comuedu.ru

Что потребуется для создания баннера

Прежде всего, вам потребуется сам редактор 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-соединение.

Теперь в том месте сайта, где необходимо показывать баннер вставляете вот этот код:

<!-- Баннер в сайтбаре --> <p style="text-align:center;"><a href="ССЫЛКА С БАННЕРА" target="_blank" rel="nofollow"><img src="ССЫЛКА НА БАННЕР" width="300" height="300" border="0" alt="голосовой набор текста"/></a></p> <!-- Баннер в сайтбаре -->

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

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

Для этого открываем административную панель WordPress – «Внешний вид»«Виджеты» — тип виджета «Текст».

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

Готово, — наслаждаемся плодами своего труда.

А теперь смотрим видеоурок, в нём вы увидите всё наглядно и многие вопросы решаться сами собой.

Друзья, на этом сегодня всё. Я желаю вам удачи и хорошего настроения! До встречи в новых статьях.

С уважением, Максим Зайцев.


    Похожие статьи по теме:

  • Как настроить цикличность баннера в Google Web Designer
  • Как конвертировать баннер flash в html5
  • Как сделать баннер HTML5 в Google Web Designer с эффектом 3D
  • Как создать баннер в Google Web Designer и выставить на сайт
  • Как создать и разместить флеш баннер на сайте

1zaicev.ru


You May Also Like

About the Author: admind

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

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

Этот сайт использует Akismet для борьбы со спамом. Узнайте как обрабатываются ваши данные комментариев.