Самые маленькие баннеры размером 88х31 пикселей или же флеш-кнопки пользуются заслуженной популярностью. Они не занимают много места и меньше весят, поэтому веб-мастера сторонних сайтов охотнее размещают их на своих ресурсах, чем большие. С другой стороны сделать баннер в фотошопе маленького размера, чтобы он был информативный и красивый, подчас гораздо сложнее, чем большой. Яркая и броская Flash-анимация на маленьком поле выглядит не так эффектно как на большом и скорее раздражает посетителя, чем побуждает его сделать переход по баннеру.
Разместить весь необходимый текст на 2728 пикселях так, чтобы он выглядел не просто хорошо, а хотя бы был читабельным — крайне сложная задача. Исходя из этих предпосылок создадим анимированный GIF-баннер в мощном графическом редакторе Photoshop. Выбор на него пал потому что в нем можно работать со слоями изображения и лучше корректировать промежуточные и конечный результат.
Если вам нужен отечественный или импортный электродвигатель, то SZEMO может обеспечить вас двигателями со стандартом ГОСТ и DIN. Но они занимаются не только производством и поставкой, но и обслуживанием данных двигателей. Это удобно в случае если при использовании двигателя нужно провести техническое обслуживание. Консультацию о покупке и техническому обслуживанию электродвигателей вы можете получить по федеральному номеру 8-800-550-00-93.
Создание баннера в фотошопе
Открываем редактор, нажимаем «Файл» -> «Создать» и создаем новый документ с заданными параметрами.
Выбираем цвет фона удобным для Вас способом и применяем инструмент «Заливка».
Придаем баннеру эффект объемности. Для этого переключаемся с «Заливки» на «Градиент».
Чтобы лучше видеть результат, иногда удобно увеличить масштаб изображения с помощью навигатора.
У нас получился первый слой, назовем его «Фон». Для этого дважды щелкаем левой кнопкой мыши по слову «Слой 1» и переименовываем его. Затем делаем щелчок правой кнопкой по полю слоя и выбираем пункт «Параметры наложения…»
Здесь можно изменять исходный слой до неузнаваемости. В открывшемся окне слева доступен выбор стилей, а справа можно редактировать сами стили. Тут все зависит от вашего вкуса и фантазии.
Фоновый слой готов, переходим к созданию надписей. Для этого выбираем инструмент «Текст», выделяем мышкой область для текста и набираем его.
Получилось не очень красиво, но это не страшно. С помощью панели для работы с текстом надпись можно исправить, но в нашем случае лучше для этой цели пользоваться палитрой «Символ».
Выделяем текст или нужные буквы и настраиваем шрифт, размер, высоту, ширину, разрежение и прочие параметры надписи.
Используя, параметры наложения для текстового слоя делаем обводку текста выбранным цветом или же применяем любой другой стиль.
Получилось неплохо. В принципе это уже готовый статический баннер. Можно его сохранить в формат GIF и использовать, но анимированный будет смотреться лучше, к тому же в этом случае можно будет добавить еще одну или несколько надписей.
Для построения анимации воспользуемся кнопкой «Создание копии выделенных кадров» на шкале времени.
На первом кадре отключим видимость текстового слоя. Текст пропадет и на втором, так как это его копия. Затем включим текстовый слой на втором кадре. Зададим желаемое время показа каждого кадра, например 1-го – 1 сек., а второго 2 сек. Мы получили классический баннер «мигалку», но такие баннеры скорее раздражают посетителя сайта, чем побуждают его перейти по ссылке.
Для создания эффекта появления и исчезновения надписей воспользуемся функцией создания промежуточных кадров. По умолчанию их предлагается 5, но лучше сделать больше. В таком случае анимация будет более плавной. Время показа промежуточных кадров лучше выбрать минимальным или равным нулю, в противном случаебудет «играть» слишком долго, особенно если надписей несколько. Не забудьте отметить пункт «Все слои», иначе слой фона на промежуточных кадрах не будет виден.
С помощью кнопок навигации можем просмотреть результат и внести необходимые коррективы. Для создания эффекта затухания надписи нужно сделать копию первого кадра, перетащить ее мышкой в конец шкалы, выделить 2 последних кадра и снова воспользоваться созданием промежуточных кадров.
Аналогичным образом создаются и анимируются другие текстовые слои. Если стили надписей баннера не будут различаться между собой, то очень удобно нажать правой кнопкой мыши на 1-й текстовый слой и выбрать пункт «Создать дубликат слоя», а затем, дважды щелкнув на пиктограмме «Т» дубликата, изменить текст следующей надписи. Первый текстовый слой при этом нужно сделать невидимым.
Однако если мы захотим сохранить созданный баннер привычным способом с помощью функций «Сохранить» или «Сохранить как…», то у нас ничего не получится. Вернее будет сохранен лишь один статический кадр. Для сохранения анимации необходимо выбрать пункт «Сохранит для Web…»
В открывшемся окне можно отрегулировать настройки выходного файла, используя предпросмотр в Фотошопе или браузере. Последнее предпочтительнее, так как Вы будете видеть конечный результат.
Теперь Вы знаете как сделать баннер в фотошопе. Оставьте отзыв о статье, мне очень важно Ваше мнение. Спасибо за внимание.
Баннер представляет собой один из многих вариантов рекламы продукта, компании или сайта. Такая реклама очень популярная среди рекламодателей. Ее размещают в газетах, на стендах, просто приклеивают на здания или раздают на улице.
Человек, который профессионально делает такой вид рекламы, очень неплохо зарабатывает. Есть множество фирм с большим штатом работников, а это о чем-то да и говорит.
Он может быт разных видов. Например, статичные баннеры представляют собой картинку с надписью, телефонами и так далее. А есть динамичные, которые периодически меняют изображения того, что на них нарисовано. Причем можно сделать смену изображений, применяя различные красивые эффекты.
Вы можете не поверить, но огромная реклама на билборде, которые стали уже привычными, тоже баннер, только очень большой.
Баннер можно сделать в фотошопе, кореле и при помощи многих других программ. Также на просторах интернета существует очень много сервисов, где его можно легко сделать и украсить.
Существует четыре основных формата изображений:
- JPG является самым простым для изготовления, это просто изображение.
- GIF это формат анимированных изображений, он применяется для сохранения «живой» картинки, на которой происходит смена декораций, текста и так далее. Кстати, любимые всеми смайлики сохраняются в этом же формате.
- PNG хорош тем, что его легко отредактировать, если есть сохраненная копия исходника, однако «весит» он намного больше, чем файл в формате GIF. Это может сказаться на скорости загрузки сайта, если у пользователя интернет с небольшой скоростью передачи данных.
- FLASH самый «тяжелый» формат как по объему, так и по принципу создания, однако он себя оправдывает. Файл с таким расширением делается в программе Adobe Flash, и можно сделать действительно шедевр, однако человек без опыта вряд ли в ней сможет работать.
Любой дизайнер и вебмастер понимает значимость и незаменимость такого вида рекламы, ведь это позволит увеличить посещаемость сайта.
Из этой статьи вы узнаете, как легко можно сделать баннер в фотошопе.
Динамичный баннер
Итак, запускаете программу, и создаете новый документ необходимого вам размера (файл – новый). Сразу подумайте, будет он прозрачным или нет, это тоже можно задать в меню при создании документа. Конечно, фон можно потом стереть, но зачем делать лишнюю работу. Помните, что, если вы хотите сделать баннер в фотошопе с прозрачным фоном, не сохраняйте его в формате jpg, тогда все усилия пропадут зря. Для этой цели существует замечательный формат gif, который не только сохранит фон прозрачным, но и позволит даже воспроизвести анимацию.
Прозрачный фон рисунка интересен тем, что его можно поставить на поверхность любого цвета, главное сделать баннер качественно.
Создав новый документ в фотошопе, найдите подходящую картинку в интернете. Ее не обязательно сохранять на компьютер, достаточно его просто скопировать (Ctrl+C), а потом вклеить в наш созданный документ (Ctrl+V).
Если изображение не подходит по размеру, вы легко можете его отредактировать, выбрав из меню вверху «Редактирование» пункт «свободная трансформация». Вокруг изображения появится рамка, которой можно, при помощи мыши, задать необходимый размер.
В фотошопе в самом низу справа необходимо сделать новый слой – наведите на иконки, выплывет подсказка. Либо же используйте сочетания клавиш (Shift+Ctrl+N), и там же перетяните его под машину, чтобы она не исчезла после раскрашивания слоя.
Теперь раскрашиваете этот слой необходимым вам цветом, используя инструмент «Заливка» из панели слева, или же можете воспользоваться инструментом «Градиент», получится более красиво.
Градиент такой интересный инструмент в фотошопе, что стоит рассмотреть его возможности более детально.
20 Признаков что вы нашли идеального парня
Для чего крошечный карман на джинсах?
Что форма носа может сказать о вашей личности?
Используя его, вы можете сделать очень красивый баннер, так как он дает возможность окрасить фон перетекающим цветом. Например, начальный вы выбрали красный, а конечный синий. Тогда у вас получится, что красный цвет будет плавно переходить в синий, образовывая разные оттенки.
Итак, баннер стал другого цвета. Мы сейчас говорим о том, как сделать «живой», анимированный баннер, это сложнее, чем просто нарисовать статичный.
Сохраняете рисунок в формате gif, он будет нашим первым кадром в анимации.
Как вы, наверное, уже поняли, эффект анимации достигается путем смены кадров с заданной периодичностью. Сделать анимацию из нескольких картинок нетрудно, программ для этого существует множество, однако ее можно сделать и при помощи фотошопа.
Анимация создается так. Открываете в программе несколько приготовленных для баннера фото одновременно. У вас получится несколько открытых окон.
Выделяете изображение, которое будет отображаться в самом начале анимации и в поле слоев размещаете его в самый верх списка. Затем, при помощи мыши, переносите их на основную картинку и так все. Вы увидите, что наш будущий баннер наполнился разными изображениями, каждое из которых видно в слоях внизу справа. После этого другие открытые картинки, кроме главной, можно закрыть.
В верхней части панели управления программой есть пункт «Меню». Нажимаете на него и выбираете раздел «Анимация». Появится окно, в котором будет виден первый кадр, но это нормально. Чтобы добавить остальные, необходимо нажать в этом узком окошке на небольшую кнопочку, она выглядит как три линии, затем в выпавшем меню выбрать «Создать кадры из слоев», и они появятся.
Однако это еще не все. В самом низу окна, где расположены наши кадры, вы можете нажать на кнопку воспроизведения и посмотреть, как будет выглядит наш баннер. Слишком быстро мелькают картинки? Ничего страшного, нажмите на любой кадр, задайте ему время отображения.
Там же выбираете вид просмотра – зацикленный (постоянное повторение), или один раз. Если задать такую команду, анимация остановится на последнем кадре.
Красиво? Ну, кто бы сомневался. Теперь нужно правильно сохранить наш шедевр. Для этого нажимаете вверху «Файл», и выбираете в подменю «Сохранить для Web и устройств». Откроется большое окно, выбираете количество цветов, затем сохраняете. Формат файла изначально gif, его не меняете.
Совет: помните, если сделали что-то не то или ошиблись при выборе команды, в верхнем меню «Редактировать» можно в любой момент выбрать команду «Шаг назад».
Как сделать статичный баннер?
В программе нажимаете «Файл», в нем пункт «Создать» и выбираете размеры и фон будущего баннера. Для удобства можно выбирать ширину и высоту либо в пикселях, либо в сантиметрах. По умолчанию новый документ создается в цвете RGB и с разрешением семьдесят два пикселя, эти параметры не меняйте, они оптимальны для отображения в интернете. Размеры выбираете, исходя из размеров подготовленной картинки, только высоту задавайте на пятьдесят-шестьдесят пикселей больше, туда вы разместите кнопку.
Открываете приготовленный рисунок и перетаскиваете его мышкой на только что созданный документ. При необходимости можете изменить размер фото, для этого активируете заготовку, а затем в меню «Изображение» выбираете «Размер изображения». Теперь задаете ему нужный вам размер.
Совет. Если снимете галочку напротив пункта «Сохранять пропорции», вы сможете изображение вытянуть или сузить.
Когда все будет готово и баннер вам нравится, нажимаете «Файл», а в нем «Сохранить как», и сохраняете картинку на компьютер.
.
В программе можно делать много чего – красивые оформления для фотографий, коллажи, просто рисунки. Такими фото наполнен интернет, нужна лишь фантазия и знание возможностей фотошопа.
Если вы новичок, в сети можно легко найти бесплатные программы и уроки для изучения.
Видео уроки
Здравствуйте, дорогие друзья! Мой блог: — « », всегда открыт для вас! В прошлых статьях я рассказала о том, как , и как потом на блоге. Сегодня я хочу рассказать вам о том, как сделать баннер в фотошопе .
У баннеров, сделанных в Photoshop, больше плюсов, чем минусов.
1. Лёгкий вес
2. Простота в установке
3. Отображается на всех видах устройств
4. Легко делается
5. Не грузит сайт
6. Баннер можно часто обновлять
К минусам можно отнести лишь то, что он не такой «живой» как флеш, чувствуется разница между кино и картинкой. Но это единственный недостаток, и его можно частично устранить при помощи GIF картинки.
Перед тем, как приступить к созданию баннеров, необходимо сделать подготовительную работу. Подобрать нужные картинки, кнопочки. Определиться с тем, какой будет баннер: — неподвижный, или анимированный. Сделать на бумаге набросок будущего баннера, что бы чётко представлять, что вы хотите получить в конечном результате.
Собрать все подготовленные картинки в отдельную папку, созданную на рабочем столе. После создания баннера её легко можно будет удалить, и вы не забудете это сделать, так как она будет на виду. Итак, картинки подготовлены, и мы приступаем!
Создание статичных баннеров JPEG в программе Photoshop.
Открываем фотошоп, создаём новый документ: «Файл» — «Создать». В открывшемся окне прописываем название, указываем ширину в пикселях, и высоту в пикселях. Ширину узнаете, померив ваш сайдбар. Красиво смотрится баннер, расположенный по всей ширине сайдбара. Высоту указываете исходя из того, какая высота у подготовленной картинки, плюс 50 или 60 пикселей – место для кнопочки.
Разрешение документа – укажите 72 пикселя, это самое оптимальное разрешение для интернета. При большем разрешении картинка будет тяжёлой, при меньшем – плохого качества. Цвет фона выбирайте с учётом цвета фона картинки.
Как узнать какая высота картинки? Для этого откройте вашу картинку в Photoshop, жмите «изображение» — «размер изображения». В открывшемся окне меняете ширину изображения на ту, какая ширина сайдбара. Внимательно смотрите, что бы размер был указан в пикселях, если стоят другие значения, поставьте пиксели.
Высота автоматически изменится, запомните её, или запишите. Жмите «ок».
Перетаскиваем картинку на созданный документ, зажав её левой кнопкой мыши, и нажав кнопку ALT на клавиатуре. На левой панели фотошопа, выбираем инструмент «перемещение». Первый с верха. И с помощью стрелочек на клавиатуре располагаем на баннере.
Двойным щелчком по экрану открываем папку с подготовленными картинками, и выбираем кнопку. Перетаскиваем её на баннер, устанавливаем на нужном месте. Можно придать кнопке эффект тени. Двойной щелчок по слою с кнопкой, в открывшемся окне выбираем «тень», настраиваем необходимые параметры.
Вот и всё, баннер готов! Объединяем все слои: — «Объединить видимые». Далее «файл» — «Сохранить для Web…». Выбираем формат сохранения JPEG. Выбираем папку для сохранения. Жмём «сохранить».
Создание анимированного баннера gif, в программе Photoshop.
Создание анимированного баннера отличается от статического, только тем, что нужно создать несколько разных слоёв, которые будут меняться, создавая анимацию картинки. Для начала вы должны решить, что у вас будет мигать в баннере. Можно менять основную часть баннера. То есть одна картинка будет сменяться другой. Можно сделать так, что бы моргала кнопка, или менялась надпись на кнопке.
Что бы вы не задумали анимировать, принцип создания – одинаковый. Поэтому я решила показать вам, как сделать моргающую кнопку, и меняющуюся надпись. Сначала, как и в первом случае, создаём новый документ, и перетягиваем на него все необходимые картинки. Обратите внимание, что все изображения получаются на отдельном слое.
Вот это нам и позволяет сделать картинку двигающейся.
Для создания задуманной мной анимации понадобится кнопка без надписи. Я её раскрашу в разные цвета. Сделаю слой с кнопкой активным (нажму на него один раз). Далее «изображение» — «коррекция» — «цветовой тон – насыщенность».
В открывшемся окне, ставлю галочку – тонирование. И двигая, верхний ползунок, выбираю цвет, подходящий к моей картинке. Затем жму левой кнопкой мыши по слою, и выбираю «создать дубликат слоя». Появляется слой с точно такой же кнопкой. Опять иду в «изображение» — «коррекция» — «цветовой тон – насыщенность».
Ставлю галочку – тонирование. Выбираю тот же цвет, но с другим оттенком. Теперь у меня два слоя с кнопкой, разного оттенка.
Пришло время для текста. На левой панели выбираю инструмент «текст». Настраиваю размер и шрифт. Пишу одно слово.
Например, я решила сделать надпись: — «Получить бесплатно». Можно написать — «Узнать подробнее». Пишу слово – «Получить», по размеру кнопочки. Щёлкаю один раз по слою с текстом. Выбираю инструмент «перемещение». Устанавливаю надпись строго по центру кнопки.
Опять беру инструмент «Текст». Создаю дубликат слоя с текстом, выделяю текст, и заменяю его, на слово – «Бесплатно». В этом случае слово встанет там, где нужно, можно его немного подвинуть вправо или влево, не забывая брать инструмент перемещение.
Осталось нам как то раскрасить текст. Двойной щелчок по слою с текстом, В открывшемся окне настраиваем тень, выбираем градиент, делаем обводку.
Всё выбираете в зависимости от цвета вашего баннера, картинки и кнопок. Всё должно гармонично сочетаться.
Выбрав необходимые эффекты, жмём «ок». Далее правой кнопкой мыши по слою с выбранными эффектами, и в окне жмём – «скопировать стиль слоя». Щелкаем по слою с текстом без эффектов, и жмём – «вклеить стиль слоя». Теперь оба слоя с одинаковыми эффектами. Баннер создали, приступим к анимации.
Анимация баннера в фотошопе.
Для этого открываем вкладку «окно», на верхней панели, и выпавшем списке выбираем «шкала времени» и внизу на шкале – «создать анимацию кадра». В разных версиях фотошопа название может быть разным. Например в пятёрке нужно в окне выбрать – «анимация». Суть в том, что вы ищите всё, что связанно с анимацией кадра. Если будут затруднения, задавайте вопросы в комментариях.
Теперь нужно закрыть глазки у всех слоёв, которые должны оставаться невидимыми. Например: — у нас две кнопки, значит, видимость одной закрываем. У нас два слова на одном месте – одно слово временно отключаем.
Внизу на шкале у нас уже создан первый кадр. Выбираем время показа кадра. Не переживайте, если вам не понравится, то его в любой момент можно изменить. Жмём снизу на листик, и у нас создался следующий кадр.
Что бы он отличался от первого, я решила сменить кнопку. То есть тот слой с кнопкой, что был закрыт, я открыла, а ту кнопку, что была видна – закрыла. Делаю следующий кадр. Пришло время поменять не только кнопку, но и слово.
Закрываю слово, которое было видимым, открываем глазок на ранее закрытом слое, также меняем глазки на кнопках. И создаём последний, четвёртый кадр. Меняем только кнопочки. Ставим отметку проигрывать анимацию – «постоянно» и запускаем проверку анимации. Если всё сделали правильно, то кнопочки будут мигать в два раза чаще, чем меняться слова.
Баннер готов. Сохраняем для Web, в формате Gif.
Для того, чтобы вам было понятно, как всё нужно делать, я записала процесс создания баннеров на видео ролик. Прошу строго не судить, так как это мой первый видео урок. Старалась не спешить, что бы вы могли увидеть процесс создания баннера в фотошопе.
Ролик без слов, но с пояснениями. Записывала ночью, когда все спали, поэтому говорить не могла. Но зато вы можете послушать приятное музыкальное сопровождение. Приятного просмотра!
Когда вы первый раз сделаете свой баннер, то процесс создания баннеров в Photoshop, уже не будет вам казаться сложным. И анимация делается легко, главное не запутаться в слоях, и внимательно менять глазки.
По такому же принципу можно сделать меняющуюся картинку. Попробуйте сделать баннер сами, и вы поймёте, что это не сложно. Если возникнут сложности в создании баннеров, то обращайтесь, я с удовольствием помогу. А можете заказать изготовление баннера, и я сделаю вам его от начала и до конца.
Созданный баннер загружаем в библиотеку, открываем в отдельной вкладке, копируем адрес изображения, сохраняем. Вставляем в код, и ставим код в виджет.
Код для вставки баннера в виджет:
Вот и пришло время прощаться, я рассказала вам о том, как сделать статичный и анимированный баннер в Photoshop. Если у вас что то не получается, пишите в комментариях. И не забудьте нажать на кнопки социальных сетей, вам не трудно, а автору приятно!
PS. Прочитайте статьи, как установить , сделать , красивые или . Не спешите покидать блог, вы найдёте много интересной информации.
Баталова Ирина
Привет Друзья! С Вами опять я — Владимир Савельев и сегодня мы продолжаем тему создания баннеров для сайта! В первой части статьи, я рассказал Вам о , которые помогут реализовать Ваши самые смелые задумки!
Теперь же пришла пора показать Вам — как же создают баннеры в Photoshop! На самом деле ничего трудного и ужасного Вас не ждет, просто повторяйте все действия за мной и мы вместе дойдем до завершающего финала, а именно создадим наш первый рекламный баннер!
Ну не буду долго тянуть кота за яйца поехали...
Делаем баннер в Adobe Photoshop
Перед тем как приступить к работе, очень важно точно смоделировать сам характер баннера (его размеры, статичный он будет или анимированный). Так же важно определится с цветовой гаммой, использование фирменного стиля, придумать цепляющие заголовки и слоганы.
Затем уже можно запустить Photoshop и создать новое изображение с прозрачным фоном (File/New) размером, например, 468 на 60 пикселей;
Выводим на экран панель работы со слоями “Layer”.
В качестве отдельного слоя создаём фон – здесь советуем особо не экономить и любой сколько-нибудь заметный элемент баннера размещать на отдельном слое, вплоть до того, что под каждую букву слогана выделить свой слой.
На отдельном слое – рекламный призыв, а так же заранее подготовленную по размерам фотографию, эмблему.
Компонуем все элементы баннера и обязательно создаём несколько возможных вариантов, которые не мешает обсудить с коллегами.
Все варианты, пока в многослойном варианте, сохраняем в отдельных файлах в формате psd (заметим, jpg-формат «не помнит» информацию о слоях, он все слои соберёт в один и в будущем разбивка уже будет невозможна).
Очень полезно пока от компьютера отойти, отдохнуть от работы и вернуться к ней на следующий день, чтобы «свежим взглядом» оценить сделанное и выбрать окончательный вариант, который и будет подкорректирован и переведён в jpg.
Работа во многом носит творческий характер на грани мастерства владения инструментами программы фотошоп, чувства психологии, воздействия рекламы и её предмета.
Как сделать баннер в фотошопе анимированным (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 верхние слои перекрывают нижние слои. То есть если бы слой с Ником находился ниже слоя с фото мечети, то он был бы перекрыт мечетью Кул Шариф. Поэтому он находится здесь, выше.
Одно из требований Яндекс.Директ, чтобы на баннере был логотип либо ОГРН организации. Я сразу добавил и то, и другое, чтобы этот же баннер использовать, например, в 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, чтобы в дальнейшем можно было внести изменения в слоях. Вдруг мероприятие перенесется на час, и чтобы все это изменить, вам необходим исходник. Логику, я думаю, вы тоже понимаете. Отлично.
Вот такое , как сделать баннер (вы прочитали транскрибацию). Если оно вам понравилось, то обязательно ставьте лайк, подписывайтесь на мой , потому что вас ждет еще много интересного видео. С вами был Денис Герасимов, пока-пока!
