Часть2: как сделать баннер в фотошопе для сайта. Фотошоп рекламный баннер


Как сделать баннер в Фотошопе

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

Если Вы попали в такую ситуацию, то не стоит отчаиваться. Сегодня создадим баннер размером 300х600 пикселей для сайдбара сайта в Фотошопе.

В качестве товара выберем наушники из одного известного интернет магазина.

Технических приемов в этом уроке будет немного, в основном поговорим об основных принципах создания баннеров.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Фон

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

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

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

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

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

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

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

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

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

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

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

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

Помогла ли вам эта статья?

Да Нет

lumpics.ru

как сделать баннер в фотошопе для сайта

Привет Друзья! С Вами опять я — Владимир Савельев и сегодня мы продолжаем тему создания баннеров для сайта! В первой части статьи, я рассказал Вам о создании баннера в программах и сервисах, которые помогут реализовать Ваши самые смелые задумки!

Теперь же пришла пора показать Вам — как же создают баннеры в Photoshop! На самом деле ничего трудного и ужасного Вас не ждет, просто повторяйте все действия за мной и мы вместе дойдем до завершающего финала, а именно создадим наш первый рекламный баннер!

Ну не буду долго тянуть кота за яйца :razz: поехали...

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

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

Затем уже можно запустить Photoshop и создать новое изображение с прозрачным фоном (File/New) размером, например, 468 на 60 пикселей;kak-sdelat-banner-v-Photoshop-001Выводим на экран панель работы со слоями “Layer”.kak-sdelat-banner-v-Photoshop-002В качестве отдельного слоя создаём фон – здесь советуем особо не экономить и любой сколько-нибудь заметный элемент баннера размещать на отдельном слое, вплоть до того, что под каждую букву слогана выделить свой слой.kak-sdelat-banner-v-Photoshop-003 На отдельном слое – рекламный призыв, а так же заранее подготовленную по размерам фотографию, эмблему.kak-sdelat-banner-v-Photoshop-004Компонуем все элементы баннера и обязательно создаём несколько возможных вариантов, которые не мешает обсудить с коллегами.kak-sdelat-banner-v-Photoshop-005Все варианты, пока в многослойном варианте, сохраняем в отдельных файлах в формате psd (заметим, jpg-формат «не помнит» информацию о слоях, он все слои соберёт в один и в будущем разбивка уже будет невозможна).

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

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

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

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

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

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

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

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

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

Только одно предупреждение. Чтобы сохранить анимированный рекламный баннер в gif-формате, необходимо использовать команду File / Save Optimized As. Привычное File / Save As здесь не работает, вернее, не создаётся анимированный gif.

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

P.S: Надеюсь эта статья помогла Вам и теперь Вы без труда сможете сделать любой баннер самостоятельно! В знак признательности за мой труд, прошу поделиться ссылкой на данную статью с теми, кого интересует вопрос — как сделать баннер в фотошопе!

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

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

savme.ru

Как создать рекламный баннер при помощи фотошопа

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

Банерная реклама

Для чего нужен баннер?

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

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

Способы создания баннера

Есть несколько способов создания рекламных баннеров.

  1. Сделать его самостоятельно в любом графическом редакторе (самой распространенной программой для этого является Фотошоп).
  2. Воспользоваться с этой целью специальной программой или онлайн сервисом.
  3. Заказать оформление баннера у профессионалов.

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

Инструменты Фотошопа

Стандартный размер баннера обычно составляет 468х60 px. Для начала работы запускаем программу и нажимаем Файл-Создать. В появившемся окне задаем имя, а также выбираем прозрачный фон. Остальные параметры изменять пока не следует.

Выбор размера баннера

На пустой фон необходимо будет поместить изображение (Файл-Открыть), и подогнать его размер по высоте. Полностью картинку или ее часть необходимо выделить, скопировать и поместить на баннер. Далее можно выбрать Заливку и кликнуть на пустую часть изображения. Для того, чтобы последняя операция удалась наверняка, рекомендуется для работы использовать изображение в формате PNG.

Создание баннера при помощи фотошопа

После этого выбирается область, в которую необходимо поместить текст, выделяется прямоугольником и заливается нужным цветом. Следующий шаг – это работа с текстом. Выбираем данный инструмент. Кликнув на нужную область, набираем текст, редактируем его шрифт и размер. После того, как вы закончите данную работу, необходимо объединить слои. Чтобы полученное изображение сохранить, нужно перейти в меню Файл-Сохранить для Web и устройств.

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

Утилита Easy GIF Animator

Советы по оформлению рекламного баннера

Перед тем, как создать рекламный баннер в coreldraw или другом графическом редакторе, посмотрим, что советуют специалисты непосредственно по его оформлению. Во-первых, считается, что больше привлекают внимание анимированные баннеры. Причем слишком сложную анимацию делать не рекомендуется, так как она долго загружается и делает изображение более “весомым”. Из-за этого владельцы сайтов могут отказаться размещать его на своем ресурсе.

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

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

computerologia.ru

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

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

Плюс еще немного расстроила игра нашей сборной на ЧМ в Бразилии, хотя гол Кокорина на 6 минуте 1 тайма поднял настроение и вселил уверенность в победу сборной, правда длилась она ровно до ничьи.

Ладно, футбол футболом, а у меня для вас очередная полезная статья подсмотренная в зарубежном «буржуйнете» и называется она – как создать красивый рекламный баннер для сайта в фотошопе. Любезно перевел ее для Вас. Наслаждайтесь.

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

Шаг 1

Создаем рекламный баннер шаг 1

Одним из самых основных и общих по размеру является рекламный баннер – 300*250 пикселей. Откройте Adobe Photoshop и создайте новый документ, размер которого будет таким или большим, тут уже от вашего желания зависит. Я использовал простую текстуру гранж на сером фоне.

Шаг 2

Создаем баннер для сайта в фотошопе

С помощью инструмента прямоугольная область или если у вас англоязычная версия то Rectangle Tool, создайте темно-серый прямоугольник. Как мы уже говорили выше размеры его пусть будут 300*250 пикселей. Примените к нему эффект Outer Glow (Внешнее свечение ) и задайте цвет #343434

Шаг 3

Добавляем эффект внутреннего свечения

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

Шаг 4

Шаг 4 Добавление градиента

Для всей формы нашего рекламного баннера мы применим так называемый бесшовный (прозрачный ) фрагмент-градиент. Мы хотим, чтобы он был едва заметным, поэтому я установил режим наложения SoftLightс прозрачностью в 5%. Я использовал этот узор из этой выборки, просто скачайте его к себе на компьютер.

Шаг 5

Обводка прямоугольной области

Мы закончим работу с нашим прямоугольным рекламным баннером для сайта эффектом простой обводки. Он должен быть размером всего в один пиксель и темнее нашего основного цвета фона баннера (цвет можете выставить тот, что указан на картинке #525252)

Шаг 6

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

Захватите любой векторный декоративный набор, коих в интернете предостаточно. Большинство из них доступны в интернете в бесплатном доступе. Я использовал две одинаковые декоративные формы, прикладываю их в исходнике, который можете скачать ниже этой статьи. Для нашего заголовка мы будем использовать шрифт «BebasNeue» размером в 48 пикселей. Примените эффект тени DropShadowдля вашего заголовка, а также к декоративной форме.

Шаг 7

Используем инструмент скругленный прямоугольник

Возьмите инструмент скругленная прямоугольная область RoundedRectangle, установите радиус в 2 пикселя и создайте форму размерами 260*125 пикселей. Примените эффект тени к нему. Вам придется продублировать форму два раза и уменьшить размер первого на 1%, а второй на 2%

Шаг 8

Добавляем к баннеру текст

Добавьте немного текста в форму, используя шрифт «MuseoSlab», задайте цвет (#887e7e). Возьмите любые иконки размером 16*16 пикселей, можно с сайта IconSweets (достаточно набрать это название в гугле, прим. автора) и разместите их соответствующим образом. Используйте инструмент линии LineToolи создайте две тонких линии (цвет #e6e6e6), которые будут служить нам в качестве разделителей текста.

Шаг 9

Создаем новую область баннера

Снова возвращаясь к инструменту «Скругленная Прямоугольная Область» создайте красную его форму (#dc4027). Это будет основой для кнопки призыва к действию, например «Купи», «Заходи», «Подпишись» и т.д. Примените к этой форме эффект тени.

Шаг 10

Наносим эффект тени

Нанесите тонкий внутренний эффект тени и установите прозрачность в 15%

Шаг 11

Эффект наложения градиента

Примените эффект наложение градиента GradientOverlayBlendModeSoftLightи установите прозрачность 35%

Шаг 12

Завершаем кнопку призыва к действию

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

Шаг 13

Выполняем обводку кнопки призыва к действию

Здесь мы снова будем использовать шрифт «BebasNeue» для добавления текста на нашей кнопке. Он может быть абсолютно любым, я выбрал «Зарегистрироваться» (SignUp). К тексту добавьте эффект падающей тени Drop Shadow.

Шаг 14

Рекламный баннер для сайта готов

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

Источник статьи: http://www.1stwebdesigner.com/tutorials/create-advertisement-banner-photoshop/

 

Скачать PSD файлы

 

smarticle.ru


Смотрите также