Создаем баннер в фотошопе за 14 шагов

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

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

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

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

Шаг 1

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

Шаг 2

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

Шаг 3

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

Шаг 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/

 

[sociallocker id=»3259″]Скачать PSD файлы[/sociallocker]