Как сделать красивый игровой баннер в photoshop. Как в фотошопе сделать баннер

В этой транскрибации мы поговорим о том, как сделать баннер в фотошоп с простой анимацией для Яндекс.Директ.

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

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

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

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

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

Одно из требований Яндекс.Директ, чтобы на баннере был логотип либо ОГРН организации. Я сразу добавил и то, и другое, чтобы этот же баннер использовать, например, в myTarget. Еще у меня добавлено здесь “6+”, это тоже требование от Яндекс.Директ, чтобы на баннерах с мероприятиями была отметка о возрасте.

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

Ну и сама кнопка. Я ее нарисовал, состоит она из фигуры, которая рисуется с помощью инструмента Прямоугольник со скругленными углами, быстрая клавиша 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, чтобы в дальнейшем можно было внести изменения в слоях. Вдруг мероприятие перенесется на час, и чтобы все это изменить, вам необходим исходник. Логику, я думаю, вы тоже понимаете. Отлично.

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

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

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

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

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

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

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

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

Аналогично обводим и последний третий слой-картинку.

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

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

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

Определяемся со временем анимации. Выставляем время на каждом кадре и нажимаем на кнопочку 4, чтобы посмотреть, как получается. Если что-то не устраивает – корректируем время. Если устраивает и больше ничего мы не хотим менять, то сохраняем полученный простейший анимационный баннер.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

«Файл» — «Сохранить для Web» .

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

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

Как установить баннер на сайт

Мало сделать красивый баннер. Его нужно ещё установить на сайт. Для этого сам баннер нужно загрузить на ваш сайт. Сделать это можно с помощью или через .

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

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

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

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

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

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

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

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

Урок о том, как создать анимированный баннер в программе 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) запускаем анимацию баннера.

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

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

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

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

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

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

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

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

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

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

С чего начать

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

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

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

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

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

Видеоурок: Как легко сделать движущийся баннер в Photoshop

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

Я начну с того, что расскажу вам, кто этот мужчина на фотографии, что это не просто аноним, выбранный из любого банка изображений, нет, сэр, это Великий Милтон Глейзер, создатель логотипа I Love New York насколько сильно повлияло на наше общество в прошлом веке или обложка Боба Дилана.

Итак, оставив в стороне историческую справку, приступим к видео-уроку: Как легко сделать движущийся баннер в Photoshop, мой первый видеоурок, который, я надеюсь, вам понравится и окажется очень полезным. Начнем.

I) Делаем набросок с нашим составом и мы начали создавать и искать различные элементы баннера.

II) Ищем и загружаем фотографию старого доброго Милтона Глейзера, персонажа, которого я выбрал для нашего баннера.

III) Открываем Adobe Photoshop и создаем новый документ. Мы выбираем между разными предустановками которые Photoshop дает нам для использования в веб-формате. Из всех них мы выбрали холст 800 × 600, который является хорошим размером для баннера.

IV) Мы открываем файл JPG, содержащий фотографию хорошего Милтона Глейзера, и готовимся к ретушированию фотографии.

V) Выбираем из группы инструментов выбора один из циклов, Магнитная петля в таком случае. Обрисовываем старого доброго Милтона.

VI) После того, как наметили, переходим к маршруту Выделение — Уточнить края. Мы собираемся использовать этот инструмент, чтобы сделать края изображения хорошо очерченными.

VII) После того, как мы полностью оставили кромку Milton по своему вкусу с помощью инструмента Уточнить край, мы нажимаем CNTRL + J и новый слой будет создан с выделением.

VIII) Удаляем фоновый слой, и таким образом у нас будет Милтон на прозрачный фон которые мы можем использовать в нашем баннере.

IX) Для его сохранения воспользуемся инструментом Сохранить для Интернета. В диалоговом окне этого инструмента мы находим возможность экспорта файла в файлы разных типов, такие как GIF, JPG или PNG. Что ж, в этот файл мы собираемся экспортировать его, чтобы он оставался на прозрачном фоне. Сохраняем и называем. Закрываем и сохраняем в PSD на всякий случай.

X) Возвращаемся к нашему веб-проекту, к баннеру. Меняем цвет фонового слоя на черный. Для этого мы используем инструмент Paint Bucket, меняя цвет лицевой панели на черный и щелкая непосредственно на фоновом слое.

XI) Мы начинаем с импорта фотографии Милтона Глейзера в наше рабочее пространство или холст. Для этого мы используем Поместите инструмент, нашел в файле вариант.

XII) Ставим старый добрый Glaser в нижний угол справа от экрана.

XIII) Создаем речевой пузырь из комиксов. Размещаем так, будто говорит Глейзер.

XIV) Создаем 3 предложения с Текстовый инструмент, которые передают информацию о баннере. Один из них войдет внутрь бутерброда.

XV) Каждое из предложений должно находиться на отдельном текстовом слое.

XVI) Итак, у нас все готово к запуску дать анимацию к нашему баннеру.

В следующем видео-уроке я научу вас, как придать анимации нашему баннеру. Не пропустите.

Рисуем баннер для YouTube в Adobe Photoshop

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

 

Результат

Исходники

Для выполнения этого урока вам потребуются следующие исходники:

Создаем баннер

Шаг 1

Начнем с создания нового документа размером 2560 x 1440 px в Photoshop. Укажите параметры как показано ниже и в качестве фонового цвета выберите #333333.

Шаг 2

Разместите в документе фоновое фото. Кликните по слою с фотографией правой кнопкой и выберите Rasterize layer/Растрировать слой. Теперь обесцветьте слой, нажав Shift-Command-U.

Шаг 3

Укажите слою Layer Mask/Маску (в нижней части палитры Layers) и растяните в слое-маске радиальный градиент (используйте инструмент Gradient/Градиент (G) от белого к черному цвету. Укажите слою Opacity/Непрозрачность в 80%.

Шаг 4

Давайте создадим контейнеры для размещения фотографий. Нарисуйте прямоугольник инструментом Rectangle/Прямоугольник (U). Укажите фигуре Stroke/Обводку толщиной в 20 px и заливку любого цвета.

Шаг 5

Кликните дважды по слою с прямоугольником, чтобы открыть стили слоя. Укажите стиль Drop Shadow/Тень с параметрами как показано ниже:

Шаг 6

Import/Импортируйте в наш документ первое фото. Растрируйте его (Layer > Rasterize > Layer/Слой>Растрировать>Слой) и обесцветьте его (Shift-command-U).

Шаг 7

Сделайте из слоя Clipping Mask/Обтравочную маску для прямоугольника. Для этого кликните по слою правой кнопкой и выберите Create Clipping Mask/Создать обтравочную маску.

Шаг 8

Нарисуйте еще один прямоугольник вокруг предыдущего, и укажите ему толщину обводки в 1 px белого цвета, и отсутствие заливки. Сгруппируйте прямоугольник, фотографию и рамку (Command/Ctrl+G).

Шаг 9

Сделайте шесть копий группы (Command/Ctrl+J) и разместите в копиях оставшиеся фотографии. Поверните группы и расположите их как показано ниже.

Шаг 10

Введите ваш текст при помощи инструмента Horizontal Type/Горизонтальный текст (T). В нашем случае мы сделаем часть текста более жирным.

Шаг 11

Инструментом Pen/Перо (P) нарисуйте открытую рамку вокруг текста. Укажите ей белую обводку толщиной в 5 px. Теперь в углу нарисуйте крестик толщиной в 10 px.

Шаг 12

Теперь создадим эффект виньетки. Создайте слой-заливку типа Gradient/Градиент (выберите соответствующий пункт из меню в нижней части палитры Layers/Слои). Укажите следующие параметры (цвет — черный).

Результат

Вот и всё!

Автор урока Hector Heredia

Перевод — Дежурка

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

Создать анимированный баннер в фотошопе

Урок о том, как создать анимированный баннер в программе 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 более простыми средствами, ограничиться анимацией и простым текстом, а с эффектами — не возиться. А в этом уроке используются небольшие усложнения, делаются отступления — для лучшего знакомства с основными инструментами программы. А полученных навыков хватит, чтобы создать множество привлекательных баннеров.

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

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

А ещё быть может вы хотите привлечь внимание к своему инфопродукту. В любом случае, если нужно сделать баннер, то это можно сделать в графическом редакторе Photoshop.

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

Я же хочу рассказать, как сделать баннер своими ручками от А до Я в графическом редакторе Photoshop.

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

Прежде всего, вам потребуется сам редактор 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, остальное фотошоп сделает за вас. Конечно, вы можете поэкспериментировать с настройками. Но, думаю, этого не потребуется.

Выбор формата gif

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

Как установить баннер на сайт

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

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

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

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

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

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

Вставка кода в виджет

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

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

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

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

Друзья, поддержите блог! Поделитесь статьёй в социальных сетях:

Подписывайтесь на новые статьи!

Оставьте комментарий

Отменить ответ

33 коммент. к статье “ Как сделать анимированный баннер в Фотошопе ”

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

Сергей, привет. Конечно, заходи, буду рад видеть. Кстати, с помощью моего мануала можно легко редактировать уже готовые баннеры. Пример сейчас можно увидеть над статьёй и под ней. Я переделал баннер на систему БаннерБро.

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

Надо будет испытать, спасибо Максим.

Иван, привет. Фотошоп, очень мощная программа. А какие вещи это редактор вытворяет при нарезки шаблона для вёрстки. Обалдеть!

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

Конечно фотошоп это полезная вещь, аналогов не существует, а если и есть — они по функционалу серьёзно уступают.

Да, фотошоп отличный редактор. И его стоит изучать. Эти знания всегда будут востребованы.

Даже через сто лет?) Представляю сидит чел в экзоскилете и создаёт баннер))

Если ты не против, то я одолжу твой баннер на баннербро?

Еще бы можно дописать «вместо 3490 руб» или что-то в этом роде…

Самому лень делать, хотя данная затея может привлечь клиента… =)

Влад, конечно бери. А на счёт правки по цене, посмотрю. Может подправлю.

Привет, Максим:) Тоже как-то пробовала делать анимированный баннер в фотошопе — мне понравилось, да и вообще он мне нравится. Вот только бы времени побольше, чтобы и в нем разобраться и в других интересных для себя вещах.
А твоя статья и урок, как всегда полезны и понятны. Спасибо!

Вика, привет. Очень рад видеть тебя в гостях. Ты права, программа действительно очень интересная и полезная. Конечно на изучение нужно время, но это того стоит. А времени, его походу, всегда не хватает. Так же очень многое хочется сделать, а на всё времени нет. Но, каждый день стараюсь двигаться в заданном направлении. Хотя и не всегда получается 😉

Максим, ты как всегда на высоте. Эта информация мне пригодится, я раньше делал анимированный баннер при помощи Easy GIF Animator 5 Pro, получалось нормально.

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

Спасибо,Максим, все хотела сделать банер- руки не доходили 🙂 , видимо пора, раз попалась такая информация !

Здравствуйте, Лидия. Обязательно попробуйте, не откладывайте. Такой навык всегда пригодится. Желаю удачи!

Добрый день Максим! Вы видимо читаете мои мысли, только подумала что нужно инфу искать как делать баннеры, а вы уже все сделали и урок записали. Огромное мерси, урок в закладки! Я все больше погружаюсь в изучение фотошопа.

Здравствуйте, Маргарита. Мыслей читать не умею, хотя иногда было бы интересно. 😉 Фотошоп очень функциональная и интересная программа. И навыки работы с ней всегда пригодятся. Удачи в создании баннеров!

Здравствуйте, Максим! По Вашему уроку сделала баннер. Раньше делала их онлайн в спец. программе, результат не устраивал. В фотошоп получилось отлично. Конечно, еще необходимы доработки, но принцип ясен, теперь дело быстрее пойдет 🙂 Благодарю.

Лариса, здравствуйте. Очень рад, что у вас всё получилось. А с каждым разом будет получаться всё лучше и лучше. Самое главное, принцип вы поняли. А остальное дело за практикой. Желаю удачи!

Добрый день, а вы планируете сделать урок про flash баннеры? Я просто часто заказываю их тут: http://gobanner.ru и выходит иногда довольно дорого. А как их делать в интернете информации вообще нету. Хотелось бы узнать и делать самому, хотя бы простенькие.

Здравствуйте, Анатолий. Вообще в планах есть такая статья, но публикация её запланирована в двадцатых числах мая. Так что заходите числа 23, постараюсь раскрыть все доступные способы создания flash баннеров.

Анатолий, может плохо искали? 😉

Максим, спасибо за подробную инструкцию! У меня такой вопрос, можно сделать такой банер в онлайн-фотошопе?:)

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

Большое спасибо! У меня всё получилось! Думала, что это сложнее. Вы всё прекрасно объяснили и показали.

Здравствуйте, Татьяна. Я рад, что смог вам помочь и у вас всё получилось. 🙂

Очень полезная статья и подробное описание! Огромное спасибо! Сейчас буду делать такой баннер.

Юлия, добрый день. Рад, что статья вам понравилась. Пробуйте, делайте, а будут вопросы пишите. Кстати, в завтра выйдет новая статья по созданию баннеров в новом формате HTML5. Так что приглашаю, будет интересно. Желаю удачи!

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

Как создать анимированный баннер с помощью онлайн-сервисов?

Создание статического изображения

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

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

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

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

1. Макет :
2. Размер баннера: 700 px – 100 px;
3. Фоновый режим: градиент цвета;
4. Цвет градиента: первый 003c99, второй 49b9ff.

Нажмите кнопку « Изменить баннер » в центральной части панели и посмотрите на результат:

Текст :

Ваш текст: Линия 1: «Заголовок баннера», Линия 2: «Текст баннера»;

Шрифт. Для того чтобы выбрать кириллицу, щёлкните на название текущего шрифта и в правом верхнем углу выберите любой шрифт из Stock;

Размер: Линия 1: 22 пикселя, Линия 2: 14 пикселей;

Цвет: ffffff;

Вращение: 0

Нажмите « Изменить баннер »:

Осуществите выравнивание надписи, захватив мышкой строку баннера и переместив её в нужное место, и снова нажмите на « Изменить баннер ».

Воздействие : Тень, расстояние, цвет, яркость, текст плана и наброски цветов настраиваются отдельно для каждой строки. Оставим всё без изменений.

Пограничная : Выберите стиль границ: Оставим значение по умолчанию.

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

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

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

Рекомендуем воспользоваться ещё одним бесплатным онлайн-сервисом minimultik.ru .

Анимация статического баннера

Для того чтобы из созданной нами картинки сделать анимированную, необходимо скачать с сервиса Banner Fans два файла в формате gif (гиф): один с пустым изображением, а другой содержащий надписи. Перейдите на minimultik.ru .

Так же, как и на Banner Fans, регистрация в данном сервисе не является обязательной. Загрузите подготовленные файлы:

Следующее, что вам необходимо сделать — выполнить настройки будущей анимации:

Для того чтобы выбрать эффекты, которые будут использоваться в переходах баннера, отметьте оранжевым цветом те, которые вам понравились:

Нажмите « Создать анимацию » и затем « Скачать »:

В конечном итоге получился такой простой баннер:

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

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

Создание анимированного изображения в Adobe Photoshop

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

Откройте Photoshop и создайте новый файл, предварительно указав его размер:

Включите в вашу рабочую область панель анимации (« Окно -> Шкала времени »). Появится блок с кадрами:

Нарисуйте на первом слое холста какой-нибудь рисунок и создайте новый кадр. Добавьте новый слой:

Нарисуйте новую картинку вашей анимации в только что созданном новом слое:

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

Проверьте поведение анимации, нажав на « Play ». Если готовый результат вас устраивает, сохраните работу, нажав « Файл » -> « Сохранить для WEB устройств »:

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

Надеемся, что наши уроки полезны для вас. Желаем творческих успехов!

Делаем баннер в фотошопе | Gadget-apple.ru

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

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

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

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

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

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

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

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

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

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

С чего начать

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

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

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

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

Запускаем программу. Создаем новый документ с размерами 468 × 60 пикселей.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Путь к этому баннеру будет иметь вид .

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

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

В этой транскрибации мы поговорим о том, как сделать баннер в фотошоп с простой анимацией для Яндекс.Директ.

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

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

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

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

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

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

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

Ну и сама кнопка. Я ее нарисовал, состоит она из фигуры, которая рисуется с помощью инструмента Прямоугольник со скругленными углами, быстрая клавиша 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 канал

Поделитесь с друзьями

Денис Герасимов

Сертифицированный специалист по Яндекс.Директ, Google Analytics и Google AdWords. Отец маленького чемпиона и многократный призер различных конкурсов партнерских программ. Если есть вопросы, то спрашивайте в комментариях к статье. С удовольствием отвечу.

НАШ САЙТ РЕКОМЕНДУЕТ:

Метки:

Уроки по созданию баннеров в фотошопе. Анимированный баннер в Photoshop

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Как установить баннер на сайт

Мало сделать красивый баннер. Его нужно ещё установить на сайт. Для этого сам баннер нужно загрузить на ваш сайт. Сделать это можно с помощью или через .

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

С чего начать

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Photoshop имеет огромное количество функций и возможностей, в том числе и создание баннеров

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

Процесс и правила создания статичных баннеров

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

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

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

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

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

После этого баннер считается готовым, остаётся только соединить все применяемые слои, а затем сохранить готовый результат в формате jpeg , но обязательно выбрав пункт «Сохранить для Web».

Создание анимированных вариантов

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

Процесс и правила создания анимированных баннеров

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

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

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

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

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

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

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

В завершение остаётся поставить отметку «Проигрывать постоянно», сохранить для Web, но в формате gif.

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

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

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

Поскольку требования к рекламным баннерам у разных сайтов свои, то в каждом случае придется подстраиваться. Для того, чтобы Gif баннер был максимально «легким» и быстро грузился его необходимо делать с минимальным количеством кадров (анимации), поэтому в качестве анимация соответственно тоже будет выглядеть менее красиво, чем Flash.

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

Баннер я буду делать для своего заказчика, которому он необходим для рекламы своего продукта — учебного курса. В моем распоряжении имеется два предложения, которые необходимо разместить на баннере и необходимые размеры. Баннер должен быть максимально простым, понятным и легким (о чем говорилось ранее).

1) Создаем новый файл необходимого нам размера, для это в верхнем меню выбираем «Файл» — «Создать» и в появившемся окне выставляем необходимые размеры баннера, в моем случае — это 970х250px.

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

3) Теперь, когда все объекты для нашего баннера готовы (авто и 2 слогана) создадим по-кадровую анимацию, для этого в нижнем левом углу окна программы нажимаем на вкладку «Шкала времени». В версии Photoshop СС 2014 — данная вкладка установлена со стандартными настройками программы, если же вы не наблюдаете такую вкладку в нижнем левом углу, тогда нужно ее включить (возможно она просто отключена), для этого в верхнем меню выберите «Окно» — «Шкала времени». После этого во вкладке шкалы времени выберите «Создать анимацию кадра» и нажмите на эту кнопку.

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

Первый кадр у нас есть — это просто авто с запчастями по середине сцены (холста). По сценарию анимации у нас первый слоган баннера «Дорогие запчасти для иномарок?» будет вылетать слева, долетать до автомобиля и вместе с ним пролетать дальше в правую сторону баннера, скрываясь из вида.

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

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

Таким образом делаются все последующие кадры. Суть заключается в том, что вы делаете в каждом кадре какое-то изменение (движение объекта), тем самым создается по-кадровая анимация с разными переходящими картинками. Чем больше кадров — тем плавнее и динамичнее анимация, но тем больше она весит.

3) После того, как вы сделаете все необходимые кадры нужно будет настроить время данных кадров. Я выставил время каждого кадра анимации по 0,5 сек, а на тех кадрах, где необходимо сделать небольшую паузу, чтобы посетитель сайта смог успеть прочесть слоган, выставил время 2 секунды и на втором — 5 секунд.

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

После того, как баннер готов необходимо сохранить его в формате Gif, для этого в верхнем меню выбираем «Файл» — «Сохранить для Web» и в открывшемся окне выбираем настройки Gif.

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

42+ шаблонов баннеров для Photoshop Бесплатные шаблоны PSD

Скачать бесплатно шаблоны баннеров для Photoshop

Photoshop — одно из самых популярных программ для редактирования фотографий в недавнем прошлом. Для редактирования фотографий с помощью программы Banner Design Templates требуется множество вещей, но это, конечно, возможно, если вы решите их изучить. Многие люди используют бесплатные шаблоны баннеров Photoshop для создания потрясающих эффектов на простых фотографиях, а это программное обеспечение делает фотографии сюрреалистичными.Однако слишком много эффектов также разрушили бы красоту фотографии; вам нужно знать, где прекратить использование шаблонов баннеров Photoshop. Ниже приведены некоторые советы по быстрому изучению программного обеспечения Photoshop.

Образец дизайна баннера

Возьмите уроки: Есть много курсов по шаблонам баннеров Photoshop , которые доступны в школах анимации. Если вам действительно интересно узнать подробнее о. Эта программа хороша для участия в занятиях.Режим самообучения: Вы можете дойти до ближайшей библиотеки. Возьмите несколько книг по этой теме и начните делать заметки. Вы всегда просматриваете Интернет и узнаете больше об этом программном обеспечении. Загрузить учебные пособия: Библиотека учебных материалов доступна в Интернете, и вы всегда выбираете. Чтобы загрузить эти файлы и начать практиковаться в Photoshop.

Подружитесь с фотографом: обычно многие фотографы используют Шаблоны баннеров с вымпелом для улучшения качества фотографий, на которые нажимают.Лучше всего, если вы знаете фотографа, который вам поможет. Для этого нужно подружиться с ними и понять методы. Смотрите видео: В Интернете доступно множество видео, и если вы человек, который учится, просматривая видео. В Интернете вы всегда подписываетесь на каналы, на которых регулярно проводятся уроки Photoshop. Установите программное обеспечение и следуйте этим урокам, чтобы освоить Photoshop. Это некоторые из советов по изучению Photoshop!

Шаблон баннера для Photoshop

Шаблон баннера Photoshop CS5

Бесплатный шаблон баннера для Photoshop

Шаблон баннера Photoshop для Twitch

Шаблон баннера для конференции

Классный шаблон баннера для Photoshop

Шаблон баннера Adobe Photoshop

Шаблон свадебного баннера

Шаблон дизайна цифрового баннера

Шаблон веб-баннера Photoshop

Шаблон баннера с лентой

Шаблон баннера Top Sale

Модный дизайн баннера Photoshop

Креативный шаблон баннера Photoshop

Шаблон современного дизайна баннера

Шаблон корпоративного баннера PSD

Лучший дизайн баннера Размер

Шаблон туристического баннера

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

Шаблон баннера для Photoshop PSD

Минимальный шаблон баннера

Набор шаблонов баннеров для Photoshop

Шаблон баннера YouTube

Шаблон музыкального баннера для Photoshop

Шаблон вертикального баннера для Photoshop

Шаблон Roll Up Banner Photoshop

Шаблон персонализированного баннера

Шаблон многоцелевого баннера

Шаблон бизнес-баннера

Шаблон спортивного баннера

Шаблон рекламного баннера Facebook

Шаблон для печати баннера Photoshop

Рождественский баннер шаблон

Шаблон баннера церкви

Шаблон бизнес-баннера

Шаблон рекламного баннера Photoshop

Шаблон фитнес-баннера

Шаблон модного баннера

Дизайн гибкого баннера PSD

Шаблон баннера для автомойки

Дизайн фона баннера

Дизайн веб-баннера по недвижимости

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

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

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

---

Где найти вдохновение для дизайна баннеров?

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

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

• Behance
• Дриббл
• Pinterest
• eSputnik Электронная почта Галерея

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

• Pngtree — это огромная база бесплатных изображений и готовых шаблонов.
• Freepik — это веб-сайт с графическим дизайном, содержащий множество векторных и PSD-изображений.
• Pixabay — один из лучших веб-сайтов со стоковыми фотографиями.У него есть опция поиска, и там вы можете загружать изображения различных размеров.
• IM Free также предлагает бесплатные ресурсы по дизайну на самые разные темы, хотя его коллекция немного меньше, чем у Pixabay.
• Pickupimage — одна из трех лучших баз данных стоковых изображений.
• Creative Commons Search больше похожа на поисковую систему стоковых изображений, предоставляющую доступ к отличному дизайнерскому контенту, доступному на ряде веб-сайтов.

Платные веб-сайты с изображениями предлагают больший выбор изображений, но за них придется заплатить.Самыми популярными сайтами с платными стоковыми изображениями являются Depositphotos и Shutterstock.

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

---

Как создать баннер для электронной почты интернет-магазина

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

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

---

Итак, приступим к работе!

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

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

Здесь мы опустим большинство сложных деталей работы Photoshop и сосредоточимся на задаче. Пора попробовать себя в роли дизайнера и создать что-то красивое. Откройте фотошоп и приступим!

Откройте Photoshop и щелкните File New , чтобы создать документ, с которым мы будем работать.Так как это баннер электронной почты, установите ширину 600 пикселей. Если он будет шире, это может нарушить структуру ваших писем.

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

Теперь ваше рабочее место готово!

Нажмите Create , и вы увидите пустое изображение с установленными вами высотой и шириной.

В этом уроке мы используем следующие элементы интерфейса Photoshop:

1. Рабочее пространство для размещения компонентов изображения.
2. Панель инструментов Tools .
3. Панель Layers , на которой отображается список слоев в файле проекта.

Откройте загруженное изображение в Photoshop и перетащите его в рабочую область. Изображение будет добавлено на отдельный слой в вашем рабочем пространстве и на панели «Слои».

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

Вот инструменты, которые вам понадобятся для этого проекта:

1. Переместить
2. Ластик
3. Ведро с краской
4. Тип
5. Палитра цветов

Подробнее об инструментах Photoshop можно узнать на веб-сайте Adobe Photoshop.

---

Редактирование фона изображения

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

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

Щелкните правой кнопкой мыши инструмент «Ластик» и выберите «Волшебный ластик» в раскрывающемся списке.

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

Если вы все сделали правильно, синий цвет будет стерт.

Используйте Magic Eraser , чтобы удалить все элементы синего фона.

Теперь у вас есть слой с изображением девушки на прозрачном фоне. Щелкните фоновый слой на панели слоев. На панели инструментов выберите инструмент Paint Bucket .

Задайте цвет, который хотите использовать, в меню «Палитра цветов».

Щелкните фон с помощью инструмента Paint Bucket и наслаждайтесь результатом.

---

Добавление текста и призыв к действию

Используйте инструмент «Текст» , чтобы добавить текстовое сообщение для создания баннера.

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

Вы можете увидеть все установленные шрифты в раскрывающемся меню «Семейство шрифтов».Если шрифтов недостаточно, вы всегда можете загрузить и установить новые из бесплатных библиотек шрифтов, например, 1001fonts.

Теперь давайте добавим кнопку с призывом к действию.

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

Если вам нужно изменить размер кнопки, выберите ее слой на панели «Слои». Затем нажмите комбинацию CTRL + T , которая активирует инструмент Free Transform .Перетащите маркер, чтобы изменить размер кнопки. По завершении нажмите «ОК» или нажмите Enter.

Если вы хотите изменить цвет кнопки, вы можете сделать это, дважды щелкнув k на слое кнопки.

Если вы не видите текст призыва к действию, возможно, он закрыт кнопкой. Убедитесь, что текстовый слой на панели «Слои» находится над слоем «Кнопка», и при необходимости переместите его.

Чтобы центрировать текст, удерживая CTRL, выберите текстовый слой и слой кнопки на панели «Слои».

Щелкните инструмент «Перемещение» и отцентрируйте текст, нажав кнопки «Выровнять по центру по горизонтали» и «Выровнять по центру по вертикали» на панели параметров.

Затем давайте добавим тени к кнопке, чтобы она выделялась на фоне.

1. На панели «Слои» щелкните правой кнопкой мыши слой с кнопкой. В раскрывающемся меню выберите Blending Options .
   
2. Выберите «Drop Shadow» в окне «Параметры наложения».
   
3. Настройте параметры Drop Shadow .
   • Установите уровень непрозрачности на 60-70%
   • Установите расстояние 10-20 пикселей
   • Установите размер тени примерно 50-60 пикселей.
   • Щелкните «ОК».

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

---

Последний штрих в создании баннера!

Выберите инструмент «Эллипс» на панели «Инструменты».

В нашем проекте эллипс выходит за края вашего изображения. Если вам нужно отредактировать фигуру, выберите ее на панели «Слои» и активируйте инструмент «Свободное преобразование» с помощью комбинации CTRL + T.

Добавьте небольшой эффект Drop Shadow, выполнив описанные выше действия, чтобы выделить эллипс.

В данном случае я выбрал следующие параметры Drop Shadow:

• 25% Непрозрачность
• 3 пикс. Расстояние
• Размер 15 пикселей.

Затем я переместил эллипс ближе к девушке.Так баннер мне кажется еще лучше.

Последний шаг — добавить логотип вашей компании.

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

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

А если у вас нет доступа к Adobe Photoshop, редактор электронной почты eSputnik позволяет легко создавать баннеры в удобном визуальном редакторе. Все инструменты редактирования всегда под рукой в ​​редакторе eSputnik, и работать с ними довольно просто.

Когда дело доходит до разработки визуального контента, редактор eSputnik позволяет:

• Добавление кнопок, текстовых блоков или даже анимированных файлов GIF / видео в шаблон электронной почты;
• Работа с несколькими слоями;
• Использование готовых элементов, например меню, разрывов строк и ссылок на социальные сети.

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

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

---

---

Читайте также

Премиум-шаблоны для мобильных и адаптивных электронных писем в формате HTML 2018

Эффективные тактики электронного маркетинга для развития электронной коммерции

10 более дешевых альтернатив MailChimp для доступных почтовых кампаний

Лучшие почтовые службы, в которые вы влюбитесь

---

Не пропустите фаворитов всех времен

1. Лучший хостинг для сайта WordPress.Нажмите на нашу ссылку, чтобы получить лучшую цену на рынке со скидкой 30%. Если Bluehost вас не впечатлил, попробуйте другие альтернативы.
2. Услуга по установке веб-сайта — чтобы ваш шаблон был запущен всего за 6 часов без лишних хлопот. Ни минуты не теряются, и работа продолжается.
Членство
3. ONE — для загрузки неограниченного количества тем WordPress, плагинов, ppt и других продуктов в рамках одной лицензии. Чем больше, тем лучше.
4. Готовый к использованию веб-сайт — это идеальное решение, которое включает в себя полную установку и настройку шаблонов, интеграцию контента, реализацию обязательных плагинов, функции безопасности и расширенную оптимизацию на странице.Команда разработчиков сделает всю работу за вас.
5. обязательных плагина WordPress — чтобы получить самые необходимые плагины для вашего сайта в одном комплекте. Все плагины будут установлены, активированы и проверены на правильность работы.
6. Finest Stock Images для веб-сайтов — для создания потрясающих визуальных эффектов. Вы получите доступ к Depositphotos.com, чтобы выбрать 15 изображений с неограниченным выбором тем и размеров.
7. Служба создания SSL-сертификатов — чтобы получить абсолютное доверие посетителей вашего сайта.Comodo Certificate — самый надежный протокол https, который обеспечивает безопасность данных пользователей от кибератак.
8. Служба оптимизации скорости веб-сайта — чтобы повысить UX вашего сайта и получить лучший результат в Google PageSpeed.

Баннер электронной коммерции Как сделать его в Photoshop для начинающих

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

Наличие баннера для вашего веб-сайта электронной коммерции — один из полезных способов привлечь потребителей к просмотру ваших продуктов и продаже. Баннер для электронной коммерции — это творческий способ рассказать людям о ваших недавно появившихся товарах, товарах со скидкой, покупках за один раз и других рекомендуемых товарах. При создании баннера электронной коммерции вам необходимо согласовать текстуру, экспозицию, затенение и четкость изображения вашего продукта с выбранным вами текстом, логотипом и фоном.Создание баннера плохого качества для вашего веб-сайта создает негативное впечатление о ваших услугах и продуктах со стороны потенциальных потребителей. Чтобы избежать негативного впечатления, вот несколько способов создания эффективного баннера электронной коммерции с помощью Adobe Lightroom и Photoshop.

Баннер электронной коммерции: сначала выберите изображение продукта и соответствующим образом отретушируйте его в Lightroom

1. Перейдите в Adobe Lightroom, нажмите «Файл» и добавьте новый Каталог. Переименуйте его с желаемым именем файла и нажмите «Сохранить».(Для загрузки создания каталога потребуется некоторое время.) Если ваш новый каталог готов, нажмите «Импорт» и выберите желаемое изображение.
2. После загрузки изображения нажмите «Разработка», который находится в правом верхнем углу Lightroom.
3. В режиме проявки вы сможете настроить экспозицию, четкость, тени, свет и т. Д. Изображения вашего продукта. Вы также можете обрезать и выровнять изображение.
4. Если вас устраивает редактирование изображения, нажмите «Файл» еще раз и нажмите «Экспорт».Сохраните отредактированное изображение на рабочий стол или назначьте для него отдельную папку.

Второй — Создайте баннер, добавив отредактированное изображение и текстовую информацию о продукте.

1. Откройте Adobe Photoshop; нажмите «Файл», затем нажмите «Создать». Сделайте размер 960 x 400 пикселей и нажмите «ОК».
2. После загрузки артборда Photoshop щелкните «Файл» и «Поместить», чтобы найти изображение вашего продукта, или откройте окно, в котором находится изображение вашего продукта, и перетащите изображение на артборд.
3. Выровняйте изображение, используя Правило третей для правильной композиции. Чтобы избавиться от белого фона, выберите инструмент «Прямоугольная область» и создайте горизонтальный прямоугольник, не касаясь теней или цвета продукта.
4. Нажмите Ctrl + T, чтобы произвести настройку, перетащив маленькую рамку в середине выделенного прямоугольника, который вы создали. Нажмите Enter и Ctrl + D, если вас устраивает настройка. Проделайте то же самое с вертикальной областью.
5. Чтобы создать идеально выровненный текст с изображением продукта, используйте инструмент «Прямоугольная область», чтобы измерить размер промежутков.Также используйте некоторые направляющие сетки, перетащив их за линейку, расположенную сбоку от художественных досок. С таким же размером поля полей продукта вы сможете найти выравнивание и баланс для следующего шага, который добавит текст.
6. Теперь выберите инструмент «Горизонтальный текст», чтобы создать текст. Выберите шрифт, который, по вашему мнению, подходит для вашего баннера. Всегда делайте название бренда крупнее, а описание — меньшим тонким шрифтом. Если вы хотите изменить размер текста, просто выделите текст и, удерживая клавишу Control, начните перетаскивать маленькую рамку.
7. Добавьте рекламное предложение (если оно у вас есть) и экспортируйте его в лучшем качестве.

Изучите электронную коммерцию в Бангкоке

Если вы хотите узнать больше о Photoshop, Lightroom, Alibaba E-Commerce и запуске электронной коммерции, ознакомьтесь с этими курсами на веб-курсах в Бангкоке. Все уроки проводятся на английском языке с профессиональными инструкторами в небольшом классе из восьми человек.

НОВИНКА

КУРСЫ ГРАФИЧЕСКОГО ДИЗАЙНА

Узнайте больше о наших фирменных курсах
Выберите лучший график
для обучения ОНЛАЙН или в школе.

КУРСЫ ПРОСМОТРА

Как создать обложку канала YouTube в Photoshop (новый макет)

Самое важное, что вы можете иметь для брендинга своего канала YouTube, — это оформление вашего канала. Здесь вы персонализируете свой канал и добавляете свою индивидуальность и стиль. Цвета и стиль, которые вы выберете, полностью зависят от вас.

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

Некоторые предложения по эффективному оформлению канала YouTube

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

Небольшое примечание: я решил, что не буду проводить никаких тренингов или советов по созданию канала YouTube, пока не наберу по крайней мере 100 000 подписчиков. Мой канал YouTube здесь (PhotoshopCAFE). Я не хочу учить чему-либо, пока не докажу, что то, чему я учу, работает. Благодаря всем вам, в январе 2018 года у меня было 100 тысяч подписчиков. (Это не значит, что я собираюсь трепать вас по голове с YouTube, это просто означает, что я чувствую, что у меня есть несколько самородков, которыми я могу поделиться. Теперь).

Загрузите шаблон оформления канала Youtube

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

Youtube предоставляет шаблон psd идеального размера с отмеченными на нем различными областями. Загрузите новый шаблон Youtube здесь

Вот как выглядит шаблон, откройте его в Photoshop. Обратите внимание на горизонтальную полосу. Здесь должны быть размещены важные части вашего дизайна.Я действительно делаю дизайн для безопасной области текста и логотипа, потому что она будет видна на всех устройствах. Обратите внимание, что рабочий стол и планшеты стали немного шире. Большая область предназначена для людей, которые смотрят на телевизорах через Apple TV, хромированные, смарт-телевизоры и т. Д. Окончательный размер 2560 × 1440. Когда вы закончите, вы сохраните как jpg, и размер файла должен быть меньше 6 МБ.

Мой совет: проектируйте по минимуму, но убедитесь, что дизайн работает во всем.

Поиск красивых фотографий и иллюстраций для оформления вашего канала

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

Мне нравится использовать Adobe Stock для оформления своего канала. Причина этого в том, что вы можете искать и загружать фотографии прямо из Photoshop. Вот руководство по использованию Adobe Stock в Photoshop.

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

Для начала вот ссылка на 10 бесплатных изображений.

Стать автором Adobe Stock:
10 бесплатных изображений из Adobe Stock

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

Загрузка обложки на свой канал YouTube

После того, как вы создали свое искусство, самое время загрузить его на Youtube.Я собираюсь показать вам, как это работает как в старом, так и в новом макете YouTube (2018).

В старом макете: щелкните карандаш в правом верхнем углу заголовка и выберите Изменить оформление канала . (Убедитесь, что вы вошли в свой канал)

В новом макете YouTube щелкните значок камеры в правом верхнем углу.

Теперь вы увидите пользователя, загрузившего файл.

Перетащите обложку канала (сохраненную как файл jpg> Экспорт> Сохранить для Интернета) или нажмите синюю кнопку: Выберите фотографию на своем компьютере

Выберите сохраненную обложку канала

Нажмите Se ; ect

И все готово.

Надеюсь, это руководство было для вас полезным. Ознакомьтесь со всеми другими бесплатными уроками по фотошопу здесь, в PhotoshopCAFE, которые помогут вам создать потрясающее оформление каналов, миниатюры и многое другое.

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

Оставьте комментарий и дайте мне знать свои мысли и вопросы

Увидимся в CAFE

Колин

---

{развлекает со стилем} Учебник по созданию Баннер Party Hat в Photoshop

На прошлой неделе я писал о веселой вечеринке по случаю дня рождения моего сына Беккета «Один год в мгновение ока».Как на вечеринке, так и с тех пор, как я поделился этим в блоге, люди задавали вопросы о том, как я сделал баннер с изображением лица ребенка / шляпы для вечеринки, поэтому я подумал, что поделюсь процессом …

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

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

Как только у меня был начальный выбор, я скопировал это выделение (Control + C), а затем открыл новый документ Photoshop (Control + N) и вставил выделение в новое окно (Control + V). Теперь, когда у меня было только лицо Беккета и часть фона, я снова использовал инструмент «Быстрое выделение», чтобы выделить только фон.

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

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

После кадрирования я также преобразовал изображение в черно-белое (в раскрывающихся меню: Изображение> Режим> Оттенки серого). Я повторял эти шаги с каждой ежемесячной фотографией Беккета, пока у меня не было по одной фотографии на каждый месяц.

Затем я поискал в Интернете картинку с изображением шляпы для вечеринки, которая мне понравилась, и сохранил изображение на свой компьютер.Затем я открыл изображение праздничной шляпы в Photoshop. Изображение, которое я нашел, было черно-белым, но я хотел, чтобы шляпы были ярких цветов, поэтому я смог просто использовать инструмент Magic Wand, чтобы выделить все черные области изображения. Затем я выбрал нужный цвет и с помощью инструмента «Заливка» изменил цвет всех черных областей. Для этого вы выбираете инструмент Paint Bucket Tool, а затем щелкаете выбранную область вашего изображения.

Я сохранил это изображение как файл JPEG и назвал его «Party Hat Aqua».«Мне нужны шляпы разных цветов (голубой, синий и зеленый), поэтому повторил этот шаг несколько раз, сохраняя изображение шляпы для вечеринки каждого желаемого цвета.

Теперь, когда у меня были сохранены все мои черно-белые лица и все мои праздничные шляпы, пришло время подобрать все изображения подходящего размера. Я хотел иметь возможность распечатать баннер на своем принтере дома, поэтому мне нужно было сохранить общий размер каждого лица с шляпой, достаточно маленькой, чтобы поместиться на картон 8,5 x 11 дюймов (я мог бы печатать на бумаге формата Legal с мой принтер, чтобы сделать их выше, но я не мог найти нигде, чтобы купить картон легального размера).Поигравшись с несколькими разными размерами, я определил, что каждое лицо должно быть примерно 6 дюймов в высоту, а шляпы — 6,5 дюйма (да, я понимаю, что 6 + 6,5 = 12,5, что выше, чем 11 дюймов моей бумаги. , но поскольку шляпа перекрывает верхнюю часть головы, готовый продукт умещается в пределах 11 дюймов листа мангала формата Letter). Затем я открыл каждое сохраненное мной изображение лица и шляпы и соответственно изменил размер изображения (Изображение> Размер изображения), убедившись, что установлен флажок «Сохранить пропорции».Я должен также отметить здесь, что, поскольку я собирался распечатать эти довольно большие изображения, я старался сохранить разрешение всех изображений на уровне 300 dpi.

Как только я изменил размер всех моих изображений, я был готов соединить лица и шляпы вместе. Я начал с открытия нового документа Photoshop (Control + N) и установил размер документа 8,5 x 11 дюймов (опять же, 300 dpi). Кроме того, поскольку я собирался распечатать конечный продукт, я удостоверился, что цвет фона был установлен на белый, а цветовой режим для нового документа был установлен на CMYK (CMYK — лучший цветовой режим для печати, а RGB — стандартный цветовой режим для веб-изображений).

Я повторно открыл одну из ежемесячных фотографий лица, скопировал (Control + C) и вставил (Contol + V) в свой новый документ, затем переместил лицевую сторону вниз к нижней части документа с помощью инструмента «Перемещение» (щелкните инструмент «Перемещение»). , затем щелкните лицо и перетащите его в нужное место).

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

На этот раз я не просто скопировал все изображение, потому что, если бы я это сделал, белый фон пошел бы вместе с ним. Вместо этого я использовал инструмент Magic Wand Tool, чтобы выделить как цветную часть шляпы, так и внутренние белые части, а затем скопировал и вставил всю выбранную область. (В качестве альтернативы я мог бы поместить шляпы на прозрачный фон, когда я их впервые создал, но когда изображение сохраняется в формате JPEG, прозрачный фон все равно становится белым.Я мог бы сделать это, если бы вместо этого сохранял все свои изображения в виде файлов фотошопа, но не стал этого делать).

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

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

Когда у меня были закончены все лица с головными уборами, я решил, что я также хочу сделать еще один баннер для игровой зоны в подвале — на этот раз с оранжевыми шляпами. Поэтому я просто открыл все двенадцать завершенных лиц с изображениями шляп, использовал инструмент Magic Wand, чтобы выбрать цветную часть шляпы в каждом, и заменил цвет каждой шляпы на оранжевый с помощью инструмента Paint Bucket. Затем я распечатал новые изображения с оранжевыми шляпами.

После печати всех изображений на картоне мне просто пришлось их вырезать.Я говорю просто — но это, тем не менее, занимало много времени. Я не могу порекомендовать ножницы для точной стрижки Cutter Bee Precision Cut. Это МОЙ ЛЮБИМЫЙ! Они очень острые и имеют такой тонкий заостренный кончик, что отлично подходят для детальной резки, например, бахромы на праздничных шляпах.

Когда я был готов повесить свой баннер, я прикрепил к стене две небольшие командные полосы 3M и натянул между ними прозрачную нить (полосатый шпагат Бейкера яркого цвета тоже был бы забавным, но у меня не было ничего из этого). это вокруг).Затем я использовал мини-булавки для одежды, чтобы закрепить верх шляпы по длине прозрачной нити, и на этом мой баннер для вечеринки с детским лицом был готов.

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

Предупреждение: при развешивании баннера я бы предпочел использовать прозрачные командные полосы, а не белые, тем более, что мои командные крючки были четкими — ОДНАКО, я недавно попробовал прозрачные командные полосы для другого проекта, и давайте просто скажем, что они не используются. Не получается так просто и чисто, как обычные белые полосы Command.Я очень осторожно подходил к их удалению, и все же 10 из 12, которые я удалил, взяли с собой немного краски. После долгой подкраски я решил не доверять прозрачным полоскам Command в ближайшее время. Я надеюсь услышать, что 3M вносит некоторые изменения, чтобы прозрачные полосы работали так же потрясающе, как и белые, но до тех пор мне придется смириться с тем, что я буду видеть белые полосы Command под моими прозрачными крючками. ОБНОВЛЕНИЕ: С тех пор я много раз пробовал использовать четкие командные полосы — и я рад сообщить, что они значительно улучшились и теперь работают чисто!

Вы ищете идеи для детских праздников? Возможно, вам будут интересны эти сообщения!

Создание анимированного рождественского баннера в Photoshop

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

Шаг 1. Установите текст

В тексте здесь используются два шрифта: Fortuna Dot для «Merry», который вы можете скачать здесь, и Dancing Script Bold для «Christmas», который вы можете скачать здесь. Задайте первое слово белым цветом, а второе — теплым желтым цветом.

Шаг 2: Добавьте внешнее свечение

Выберите первое слово. Выберите Layer> Layer Style> Outer Glow и добавьте свечение около 10 пикселей (в зависимости от размера вашего текста).Щелкните образец рядом с переключателем вверху, чтобы выбрать аналогичный теплый желтый цвет.

Больше после прыжка! Продолжайте читать ниже ↓
Члены бесплатной и премиальной версии видят меньше рекламы! Зарегистрируйтесь и войдите в систему сегодня.

Шаг 3. Добавьте внутреннее свечение

Выделите второй слой со словом и выберите «Слой»> «Стиль слоя»> «Внутреннее свечение». Установите цвет свечения на белый, а источник — на центр, и увеличивайте размер до тех пор, пока не увидите часть оригинального оранжевого цвета, показывающуюся по краям надписи.Я использовал размер свечения 5 пикселей, но выбранный вами размер будет зависеть от размера используемого текста.

Шаг 4: Добавьте красное внешнее свечение

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

Шаг 5: Добавьте блестки

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

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

Шаг 6. Анимируйте блестки

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

Установите непрозрачность всех блестящих слоев на 0 (ярлык: введите 00, когда слой выбран). Убедитесь, что скорость (под рамкой) установлена ​​на 0 сек. Затем щелкните значок дубликата в нижней части панели — тот, который находится слева от значка корзины, отмечен желтым кольцом внизу — и установите непрозрачность первой искры на 100% (ярлык: введите 0, когда слой выбран. ).

Ваша панель временной шкалы теперь должна выглядеть так:

И ваш документ должен выглядеть так:

Шаг 7. Анимация анимации

Чтобы сверкание постепенно исчезало из поля зрения, выберите оба кадра на временной шкале и нажмите кнопку «Анимация» в нижней части панели временной шкалы — она ​​находится слева от значка «Дублировать».В появившемся диалоге добавьте пять кадров между существующими:

Когда вы это сделаете, ваша панель временной шкалы теперь будет содержать семь кадров, например:

Если вы нажмете кнопку «Воспроизвести» на панели «Таймлайн», то увидите, как искорки постепенно исчезают.

Шаг 8: Уберите искры

Выделив последний кадр, нажмите кнопку «Дублировать», чтобы создать восьмой кадр. Установите непрозрачность первой искры на 0 и непрозрачность второй на 100%:

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

Когда вы нажмете кнопку воспроизведения, вы увидите, что первая искорка исчезает из поля зрения; затем, когда он исчезнет, ​​одновременно исчезнет и второй.

Шаг 9: Повторите процедуру

Повторите шаг 8, добавив новый кадр и установив непрозрачность второй искры на 0 и непрозрачность третьей на 100%. Анимация между двумя последними кадрами, как и раньше. Наконец, продублируйте последний кадр и установите непрозрачность третьей искры на 0, затем Tween между двумя последними кадрами, чтобы искры погасли.

Шаг 10: Добавьте немного красного

Чтобы сделать фон менее резким, закрасьте его центр красным цветом с помощью большой мягкой кисти с низкой непрозрачностью. Теперь ваша анимация завершена: используйте «Файл»> «Сохранить для Интернета», чтобы сохранить ее как анимированный GIF, настроенный на бесконечное повторение.

Дизайн веб-баннера | Учебник Photoshop

На этом этапе дизайна мы подготовим фон баннера. Для этого нам нужно также принести синее фоновое изображение из вашего компьютерного магазина.Принесите фоновую фотографию, используя тот же процесс, который мы сделали для создания фотографии модели. Затем щелкните верхнее меню Filter и щелкните Blur. T затем нажмите на Gaussian Blur оттуда. В свойствах «Размытие по Гауссу» немного увеличивает Размытие, чтобы все края фона стали гладкими и на этом изображении создавался идеальный эффект размытия.
Сделав фон гладким, мы также добавим еще несколько эффектов к фону баннера. Для этого перетащите изображение с эффектом копья камеры из своего компьютерного магазина и поместите его в основной артборд дизайна.Теперь переместите этот слой снизу на слой с изображением девушки. И сделайте слой в режиме Normal To Multiply . Так что мы видим только эффект копья камеры на фоне баннера, а другие части фона эффекта линзы камеры скрыты.
На этом этапе урока мы создадим эффект наложения узора на фон. Чтобы создать эффект наложения узора, нам нужно создать прямоугольную форму, которая покрывает всю монтажную область дизайна. Чтобы сделать эту форму, щелкните правой кнопкой мыши Rectangle Tools или нажмите U на клавиатуре, а затем нарисуйте прямоугольник на всей монтажной области дизайна.Когда вы рисуете прямоугольную форму, вы найдете ее свойства в верхней строке меню. Из этой формы свойства выбирают синий цвет . После задания цвета формы мы применим эффект наложения узора на слой синей формы. Чтобы реализовать эффект узора, дважды щелкните на миниатюре слоя синей формы , чтобы открыть его Blending Option . Теперь установите флажок Pattern Overlay и выберите узор, который я отметил на снимке экрана.После этого измените режим шаблона Нормальный на Умножьте . Затем сделайте patter Opacity 73% и Scale 61% и нажмите Ok.

В части дизайна сделайте так, чтобы узор плавно переходил в фон. Вы уже видели, что слой прямоугольника 1 — это слой с узором. Для этого мы должны ослабить слой прямоугольника 1, что означает слой с эффектом скороговорки. Для этого сделайте Layer Mask из , прямоугольник 1, слой , щелкнув значок Layer Mask .Затем активизирует маску слоя, щелкнув по миниатюре белой маски . После активации маски слоя «Прямоугольник 1» щелкните на инструменте «Градиент ». Когда вы нажмете на инструмент градиента, вы найдете свойства градиента на верхней панели. оттуда выберите градиент прозрачного режима (Черно-белый) . И перетащите курсор мыши с правой стороны влево над монтажной областью, чтобы реализовать эффект затухания. Теперь уменьшите непрозрачность слоя прямоугольника 1 со 100% до 24%.

На этом конкретном шаге вы создадите кнопку для выделения определенного текста. Для этого нажмите на Rectangle tools , выберите Rounded Rectangle Tool, и нарисуйте круглую форму под текстом «Play Now». После создания этой формы перейдите к этому слою Blending Option , дважды щелкнув по миниатюре слоя. Диалоговое окно параметров наложения проверяет поле наложения градиента. В свойствах градиента выберите градиент синего цвета.Затем нажмите Ok .

Этот шаг — последний этап дизайна веб-баннера. На этом уровне мы наберем весь текст с помощью инструмента «Текст» и идеально выровняем текст. А потом принеси из компьютерного магазина остальные кнопки. Затем мы изменим их размер, нажав Ctrl + T . Пока что руководство завершено.

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

.

No related posts.