Как сделать баннер в фотошопе. Создание баннера в фотошоп,анимированный gif баннер Photoshop.
Приветствую Вас на страницах моего блога. Речь в сегодняшней статье пойдёт о баннерах, а если быть точнее, то об их создании с помощью программы фотошоп. Прежде всего, сегодняшний урок ориентирован на тех, кто хотел бы заработать деньги на . О заработке таким способом я напишу немного позже в своем новом кейсе. Сейчас же могу сказать, что это очень выгодное и относительно просто ремесло. Сделать такой баннер, как в нашем уроке, стоит от 500 рублей и больше.
Баннеры сегодня - это важная составляющая интернет маркетинга. Сегодня сложно представить, как бы без них выглядел интернет. Их использует практически любой человек, у которого есть . Но, чтобы создать баннер для сайта, нужно либо отвалить денег, либо воспользоваться скудными онлайн сервисами, в которых нет никакой свободы действий.
Но есть и третий вариант - это создание баннера в фотошопе. Я считаю этот способ самым лучшим. И вот почему:
- Бесплатность;
- Полная свобода действий;
- Быстрый результат;
- Много бесплатных обучающих материалов;
- Шаблоны всегда можно быстро подредактировать.
Однако, сначала этим способом нужно овладеть. Не обязательно быть каким-то художником или творческим человеком. Посмотрите на мои баннеры в сайдбаре справа - всех их сделал я сам. И в видеоуроке далее, я покажу основные приёмы, которые я использовал и продолжаю использовать:
В итоге у Вас должен получится создать такой рекламный баннер:
Что скажете? Нормально получилось?
Инструкция
Откройте Adobe Photoshop и определите размер будущего баннер а – например, вы можете сделать баннер стандартного формата 468х60 пикселей. Подберите подходящие изображения или логотипы, которые вы включите в баннер , цвета и шрифты.
Определите, что именно вы напишете на баннер е, и какие его элементы будут анимированными. Создайте новый документ нужного размера с прозрачной или белой заливкой, а затем разместите на поверхности нового файла выбранные вами изображения и иллюстрации, помещая каждый графический элемент на новый слой. Окружите баннер тонкой рамкой. Таким образом создайте один из кадров будущей анимации.
В последний кадр включите адрес сайта и контактную информацию. Распределите кадры по слоям, а затем, скрывая ненужные слои для каждого конкретного кадра, сохраните их поочередно в формате GIF в отдельную папку. К примеру, в качестве первого кадра сохраните фон баннер а, в качестве второго – фон с логотипом, в качестве третьего – логотип с подписью и так далее. У вас может получиться пять или более кадров – из всех этих изображений в формате GIF вы должны собрать несложную анимацию.
Для этого откройте программу Ulead GIF Animator и выберите опцию «Мастер анимации». Укажите размер вашего баннер а и в следующем шаге загрузите в программу все созданные вами кадры, нажав кнопку «Добавить изображение».
Установите подходящую скорость смены кадров и время задержки каждого из них, а затем установите порядок появления кадров в анимации. При необходимости продублируйте некоторые кадры, создав копии.
Нажмите кнопку предпросмотра, чтобы посмотреть, как готовая анимация будет выглядеть в сети. Если вас все устраивает, сохраните баннер в формате GIF и опубликуйте его в сети.
Вам понадобится
- - компьютер с доступом в интернет;
- - Adobe Photoshop;
- - Ulead GIF Animator.
Инструкция
Подготовьте кадры для баннера , чтобы создать анимацию в формате gif. Используйте для этого программу Adobe Photoshop. Определитесь, какого размера должна быть ваша анимация , и с тем, какой сценарий будет у баннера, что будет в нем двигаться и как. Продумайте проект, прежде чем создать анимированный гиф .
Запустите программу Adobe Photoshop, создайте новый файл с размерами 468 на 60. Добавьте необходимую графику, разместите всю информацию в видимой части файла, выровняйте. Каждый элемент изображения расположите на отдельном слое. Слои, в свою очередь, группируйте в папки для удобства. После создания кадров, сделайте кадры, которые предстоит анимировать.
Скройте все слои, кроме нижнего, сохраните фон баннера в формате gif. Далее сохраните файл с логотипом (аналогично сделайте все остальные слои невидимыми). И так поступите со всеми слоями последовательно. В результате вы получите 5 статических гиф -файлов, из которых нужно будет смонтировать анимированный файл в формате gif.
Запустите программу Ulead GIF Animator, чтобы создать анимированный gif-баннер. Запустите «Мастер анимации» (из меню Файл). Выберите необходимый размер баннера, нажмите «Далее». В следующем шаге добавьте созданные ранее кадры будущей анимации. Нажмите кнопку «Добавить изображение», зажмите Shift, выделите все нужные файлы за один раз, добавьте их в мастер. Выберите необходимую скорость, с которой будут сменяться кадры. Нажмите «Далее». Работа Мастера закончена.
Установите кадры в необходимой последовательности, выставьте время задержки для каждого кадра, выберите его свойства, вызывая контекстное меню на нем. Измените время показа баннера, щелкните по кадру, в верхнем поле впишите время. Сделайте предварительный просмотр будущего файла, для того выберите вкладку «Предосмотр». Сохраните файл в формате GIF.
Видео по теме
Анимированные баннеры активно применяются в веб-дизайне, так как они способны не только дать пользователю больше информации, но и привлечь внимание. Существует несколько способов создания таких изображений.
Инструкция
Для создания анимированного баннера вам потребуется один из графических редакторов. Есть два пути решения задачи. Первый – использование программы для создания каждого кадра баннера в виде отдельного графического файла с последующим их объединением в один. Второй – работа в графическом редакторе, позволяющем сразу создавать анимированные изображения.
Привет всем, сегодня затрону такую тему сделать рекламный баннер в фотошопе, я недавно уже писал подобный пост, сегодня в принципе для некоторых данная статья будет и не новостью, но для других, немножко открою глаза
Мне пишут люди о том, чтоб как-то подробнее все описать и показать, (я хочу сделать баннер для сайта). Так вот сегодня именно так и будет! Я в подробностях покажу что и как делается.
В статье « » я говорил что в данной программе «swishMax3» можно делать также неплохие баннера, но есть небольшое НО... При сохранение баннера, в формате gif, программа swich сохраняет в очень большом размере, что для сайта не очень хорошо, так как будет баннер долго грузится. В данной программке можно создавать красивые фреш баннера.
Как сделать рекламный баннер в фотошопе
Я буду показывать на примере «Adobe Photoshop cs6» вы можете использовать и 5, но я рекомендую версию по новее. На сайте, бесплатные легальные программы для компьютера на русском http://programmybesplatno.com можно скачать любую программу,
Заходим в программу, создаем новый файл, я буду создавать обычный баннер с размером 468×68, это стандартный размер. Для начала покажу вам, какой баннер я буду делать:
Как вы видите, все простенько и без наворотов, так как сейчас чем проще тем и не напрягает глаза, по стилю flat.
Итак создали новый файл с размерам теперь нужно все нарисовать что вам нужно. Чтоб было легче, можно на бумаге нарисовать что за чем будет идти, чтоб в фотошопе только нарисовать и слепить все в кучу.
Все описывать смысла наверное нет, поскольку я записал видео которое длительностью в 35 минут, по этому желаю вам хорошего просмотра и создавать красивые барннера для своих сайтов.
Всем спасибо за внимание, жду ваших комментариев.
Напоследок новость
Вот буквально вчера купил себе две новых рыбки, даже можно сказать не рыбки а гиганты). Большие скалярии, ну и снял для вас коротенькое видео по этому поводу, так что смотрите.
У кого есть какие-то вопросы задавайте!!!
Как создать баннер в Photoshop - 5.0 out of 5 based on 3 votes
В этом уроке мы рассмотрим, как создать баннер в Photoshop используя некоторые простые инструменты данной программы.
Как обычно вы узнаете массу полезных советов и приемов, которые пригодятся вам в дальнейшем при создании различных графических элементов в данной программе.
1. Вначале создайте новый документ. Задайте имя, ширину, высоту и разрешение для нового документа. В данном случае мы создадим баннер стандарта 468×60.
2. Когда вы сделаете все вышеперечисленное, нажимаете «OK».
3. Дважды кликните по иконке слоя.
4. Введите имя слоя.
5. Нажмите на кнопку «OK», теперь ваш слой имеет имя, а также будет разблокирован.
6. Теперь снова кликните два раза на иконке слоя, чтобы открылись параметры наложения (Blending Options).
7. Выберите пункт, наложение градиента (Gradient Overlay) и укажите градиент, от серого до белого.
8. Когда все сделаете, нажмите на кнопку «OK»
9. Теперь необходимо создать новый слой, для этого нажмите на иконку «Создать новый слой» (Create New Layer).
10. Выберите инструмент «Перо» (Pen Tool) и нарисуйте форму как на рисунке выше.
11. Перейдите на вкладку «Контуры» (Paths).
12. Выберите «Рабочий контур».
13. Кликните по значку «Загрузить контур как выделенную область» (Load Path as a Selection), затем возьмите инструмент «Прямоугольная область» (M) и нажмите сочетание клавиш (Shft+Cntr+I). После этого выберите инструмент «Заливка» (G).
14. Установите цвет переднего плана: # 3129c3.
15. Кликните внутри выделения, чтобы заполнить его выбранным цветом.
16. Кликните по вкладке «Слои» (Layers).
17. Дважды щелкните по миниатюре слоя, чтобы открылись параметры наложения.
18. Нажмите на вкладку «Обводка» (Stroke), выберите оранжевый цвет и размер обводки 2 пикселя. После установки необходимых параметров нажмите на кнопку «ОК», чтобы применить обводку.
Примечание: повторите шаги с 10 по 18, чтобы добавить еще одну фигуру, как на рисунке ниже.
19. Выберите инструмент «Прямоугольник со скругленными углами» (Round Rectangular Tool).
20. Выберите цвет для новой фигуры, которую мы собираемся создать. Значение цвета можете указать: # a51219.
В этой транскрибации мы поговорим о том, как сделать баннер в фотошоп с простой анимацией для Яндекс.Директ.
Яндекс.Директ недавно стал принимать , то есть баннеры, и я предполагаю, что вы хотите, чтобы на вашем баннере присутствовала анимация, чтобы привлечь внимание посетителей различных сайтов. Мы в (откроется в новом окне) и в траскрибации вместе сделаем анимированный баннер в фотошоп, с кнопкой, которая изменяется.
Что необходимо, чтобы сделать анимированный баннер в фотошоп?
Начнем с лимитов
Какие у нас есть ограничения?
У нас есть требования от модерации, и есть требования по размерам. Мы можем загружать следующие размеры (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, чтобы в дальнейшем можно было внести изменения в слоях. Вдруг мероприятие перенесется на час, и чтобы все это изменить, вам необходим исходник. Логику, я думаю, вы тоже понимаете. Отлично.
Вот такое , как сделать баннер (вы прочитали транскрибацию). Если оно вам понравилось, то обязательно ставьте лайк, подписывайтесь на мой , потому что вас ждет еще много интересного видео. С вами был Денис Герасимов, пока-пока!