Как создать баннер в фотошопе cs6. Как в фотошопе сделать баннер

Самые маленькие баннеры размером 88х31 пикселей или же флеш-кнопки пользуются заслуженной популярностью. Они не занимают много места и меньше весят, поэтому веб-мастера сторонних сайтов охотнее размещают их на своих ресурсах, чем большие. С другой стороны сделать баннер в фотошопе маленького размера, чтобы он был информативный и красивый, подчас гораздо сложнее, чем большой. Яркая и броская Flash-анимация на маленьком поле выглядит не так эффектно как на большом и скорее раздражает посетителя, чем побуждает его сделать переход по баннеру.

Разместить весь необходимый текст на 2728 пикселях так, чтобы он выглядел не просто хорошо, а хотя бы был читабельным — крайне сложная задача. Исходя из этих предпосылок создадим анимированный GIF-баннер в мощном графическом редакторе Photoshop. Выбор на него пал потому что в нем можно работать со слоями изображения и лучше корректировать промежуточные и конечный результат.

Если вам нужен отечественный или импортный электродвигатель, то SZEMO может обеспечить вас двигателями со стандартом ГОСТ и DIN. Но они занимаются не только производством и поставкой, но и обслуживанием данных двигателей. Это удобно в случае если при использовании двигателя нужно провести техническое обслуживание. Консультацию о покупке и техническому обслуживанию электродвигателей вы можете получить по федеральному номеру 8-800-550-00-93.

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

Открываем редактор, нажимаем «Файл» -> «Создать» и создаем новый документ с заданными параметрами.

Выбираем цвет фона удобным для Вас способом и применяем инструмент «Заливка».

Придаем баннеру эффект объемности. Для этого переключаемся с «Заливки» на «Градиент».

Чтобы лучше видеть результат, иногда удобно увеличить масштаб изображения с помощью навигатора.

У нас получился первый слой, назовем его «Фон». Для этого дважды щелкаем левой кнопкой мыши по слову «Слой 1» и переименовываем его. Затем делаем щелчок правой кнопкой по полю слоя и выбираем пункт «Параметры наложения…»

Здесь можно изменять исходный слой до неузнаваемости. В открывшемся окне слева доступен выбор стилей, а справа можно редактировать сами стили. Тут все зависит от вашего вкуса и фантазии.
Фоновый слой готов, переходим к созданию надписей. Для этого выбираем инструмент «Текст», выделяем мышкой область для текста и набираем его.

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

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

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

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

Для построения анимации воспользуемся кнопкой «Создание копии выделенных кадров» на шкале времени.

На первом кадре отключим видимость текстового слоя. Текст пропадет и на втором, так как это его копия. Затем включим текстовый слой на втором кадре. Зададим желаемое время показа каждого кадра, например 1-го – 1 сек., а второго 2 сек. Мы получили классический баннер «мигалку», но такие баннеры скорее раздражают посетителя сайта, чем побуждают его перейти по ссылке.

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

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

Аналогичным образом создаются и анимируются другие текстовые слои. Если стили надписей баннера не будут различаться между собой, то очень удобно нажать правой кнопкой мыши на 1-й текстовый слой и выбрать пункт «Создать дубликат слоя», а затем, дважды щелкнув на пиктограмме «Т» дубликата, изменить текст следующей надписи. Первый текстовый слой при этом нужно сделать невидимым.

Однако если мы захотим сохранить созданный баннер привычным способом с помощью функций «Сохранить» или «Сохранить как…», то у нас ничего не получится. Вернее будет сохранен лишь один статический кадр. Для сохранения анимации необходимо выбрать пункт «Сохранит для Web…»

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

Теперь Вы знаете как сделать баннер в фотошопе. Оставьте отзыв о статье, мне очень важно Ваше мнение. Спасибо за внимание.

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

Что такое баннерная реклама

Баннерная реклама - графическое изображение рекламного характера. Рекламные щиты на улицах, растяжки над магазинами, картинки на сайтах в Интернете, при клике на которые переходишь на другой сайт - все это баннеры. Уличные баннеры появились давно, когда еще не было даже радио. А вот в Интернет они просочились в 1994 году и быстро начали набирать популярность. На сегодняшний день ни один бизнес не обходится без рекламы, и в частности рекламы в Интернете, а баннеры — это один из весьма эффективных инструментов в деле продвижения товаров и услуг.

Какие виды баннеров бывают

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

Виды интернет-баннеров по способам реализации

Перед тем как узнать, как создать баннер в "Фотошопе", мы познакомимся с разновидностями способов их реализации.

• Статичные. Простейший баннер - картинка с рекламным содержимым. Размер файла небольшой, поэтому быстро загружается даже при медленном Интернете. Легко создать баннер как в "Фотошопе", так и в других графических редакторах.
• Анимированные. Весят они в несколько раз больше статичных, в связи с этим загружаются медленнее, но зато больше бросаются в глаза пользователю. Такой рекламный баннер создать в "Фотошопе" уже гораздо сложнее.
• Ричтекст (Rich text). Баннер, похожий на информационную статью с графической составляющей.
• HTML5, JS, флеш-анимация. Это уже баннеры, которые являются интерактивными мини-программами. Например: различные тесты, примитивные игры, опросники. Создать такой рекламный баннер в "Фотошопе", как вы понимаете, никак не получится.

Определение размеров баннера

Прежде чем узнать, как создать макет баннера в "Фотошопе", необходимо определиться с его размерами. Стандартом считается размер 100 х 100 пикселей. Самый часто используемый вариант - 468 х 60 и 234 х 60. Первая цифра определяет ширину, а вторая длину. Так что вертикальный баннер будет иметь размер, например, 60 х 468 пикселей. Поэтому важно знать, где вы будете размещать свой баннер.

С чего начать

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

Делаем свой рекламный баннер

Итак, ваш макет готов. Теперь приступим непосредственно к основному процессу.

В этой статье мы сделаем статичный горизонтальный рекламный баннер размером 468 × 60 пикселей и текстом «Распродажа iPhone 5. Не упусти шанс» в программе "Фотошоп" версии CS6.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Шаг 1. Подготовительный.
выбираем размер баннера (в нашем случае 468х60) и создаем пустой файл
берем подготовленные заранее для нашего баннера картинки, которые уже приведены к нужному размеру баннера, копируем их и каждую из них вставляем в наш файл в виде отдельного слоя (открываем картинку- выделяем ее -копируем Ctrl+C — переходим в наш файл- вставляем Ctrl+V) . Для своего баннера я подготовила 3 картинки (картинка А).

Шаг 2. Делаем обводку для баннера:
Выбираем слой 1. Двойным щелчком по слою вызываем меню «Стиль слоя» и в этом меню выбираем «Обводка».

Выбрав ширину обводки, ее положение и цвет, зафиксируем эти параметры, нажав на кнопочку «Применить по умолчанию». Цвет обводки должен выделять четко контуры нашего баннера, а это означает, что он должен быть в меру ярким и контрастным по отношению и к фонам картинок и к фону вашего сайта.
Переходим на слой 2 . Щелкаем по нему дважды и в окне «Стиль слоя» просто выбираем «Обводка» и нажимаем ОК. (настройки стиля обводки мы оставляем неизменными)
Аналогично обводим и последний третий слой-картинку.

Шаг 3. Создаем непосредственно анимацию для нашего баннера.


Выбираем в верхнем меню фотошопа «Окно»-«Анимация» и выбираем покадровую анимацию. На картинке Б подробно показано, что обозначает каждая отдельная кнопочка на панельке анимации.(картинка Б)

Создаем кадры анимации: первый кадр создается, когда мы становимся на слой первой картинки, для создания второго кадра нажимаем на кнопочку 7(картинка Б) и переходим на второй слой, для создания третьего кадра мы снова нажимаем на кнопочку 7 (картинка Б) и «включаем» третий слой — слой нашей третьей картинки.
Определяемся со временем анимации. Выставляем время на каждом кадре и нажимаем на кнопочку 4, чтобы посмотреть, как получается. Если что-то не устраивает – корректируем время. Если устраивает и больше ничего мы не хотим менять, то сохраняем полученный простейший анимационный баннер.

Здесь я привожу только описательную часть данного шага, посмотреть ее можно в видео, которое размещено в конце урока.

Все, простейший анимационный баннер в фотошопе готов.

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

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

Принцип создания такого баннера описывать не буду, он в основном аналогичен варианту 1, отличие лишь в формировании анимации кадров:

1 кадр — фон+первый текст
2 кадр — фон+второй текст
3 кадр- фон+третий текст

На видео вы все сможете рассмотреть в реальном исполнении.

Анимация текста для создания анимационного баннера.
И еще в видео я показала, как сделать анимацию текста для анимационного баннера. Показан последовательный процесс формирования «рекламного» текста. Вначале показано, как сделать, чтобы первый текст перемещался снизу-вверх, затем второй текст перемещается справа-налево, как бы «выпрыгивая», и последний текст добавляется просто как кадр.

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

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

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

И еще… Уроки по созданию анимационных баннеров пригодяться вам не только для создания баннеров для вашого сайта, но и для создания любой анимации, Ведь принцип анимации останется таким же, изменится лишь размер картинки!

Так что, если вам интересна тема анимации, подписывайтесь на обновления блога, чтобы ничего не пропустить!