Баннер представляет собой один из многих вариантов рекламы продукта, компании или сайта. Такая реклама очень популярная среди рекламодателей. Ее размещают в газетах, на стендах, просто приклеивают на здания или раздают на улице.
Человек, который профессионально делает такой вид рекламы, очень неплохо зарабатывает. Есть множество фирм с большим штатом работников, а это о чем-то да и говорит.
Он может быт разных видов. Например, статичные баннеры представляют собой картинку с надписью, телефонами и так далее. А есть динамичные, которые периодически меняют изображения того, что на них нарисовано. Причем можно сделать смену изображений, применяя различные красивые эффекты.
Вы можете не поверить, но огромная реклама на билборде, которые стали уже привычными, тоже баннер, только очень большой.
Баннер можно сделать в фотошопе, кореле и при помощи многих других программ. Также на просторах интернета существует очень много сервисов, где его можно легко сделать и украсить.
Существует четыре основных формата изображений:
- JPG является самым простым для изготовления, это просто изображение.
- GIF это формат анимированных изображений, он применяется для сохранения «живой» картинки, на которой происходит смена декораций, текста и так далее. Кстати, любимые всеми смайлики сохраняются в этом же формате.
- PNG хорош тем, что его легко отредактировать, если есть сохраненная копия исходника, однако «весит» он намного больше, чем файл в формате GIF. Это может сказаться на скорости загрузки сайта, если у пользователя интернет с небольшой скоростью передачи данных.
- FLASH самый «тяжелый» формат как по объему, так и по принципу создания, однако он себя оправдывает. Файл с таким расширением делается в программе Adobe Flash, и можно сделать действительно шедевр, однако человек без опыта вряд ли в ней сможет работать.
Любой дизайнер и вебмастер понимает значимость и незаменимость такого вида рекламы, ведь это позволит увеличить посещаемость сайта.
Из этой статьи вы узнаете, как легко можно сделать баннер в фотошопе.
Динамичный баннер
Итак, запускаете программу, и создаете новый документ необходимого вам размера (файл – новый).
азу подумайте, будет он прозрачным или нет, это тоже можно задать в меню при создании документа. Конечно, фон можно потом стереть, но зачем делать лишнюю работу. Помните, что, если вы хотите сделать баннер в фотошопе с прозрачным фоном, не сохраняйте его в формате jpg, тогда все усилия пропадут зря. Для этой цели существует замечательный формат gif, который не только сохранит фон прозрачным, но и позволит даже воспроизвести анимацию.
Прозрачный фон рисунка интересен тем, что его можно поставить на поверхность любого цвета, главное сделать баннер качественно.
Создав новый документ в фотошопе, найдите подходящую картинку в интернете. Ее не обязательно сохранять на компьютер, достаточно его просто скопировать (Ctrl+C), а потом вклеить в наш созданный документ (Ctrl+V).
Если изображение не подходит по размеру, вы легко можете его отредактировать, выбрав из меню вверху «Редактирование» пункт «свободная трансформация». Вокруг изображения появится рамка, которой можно, при помощи мыши, задать необходимый размер.
В фотошопе в самом низу справа необходимо сделать новый слой – наведите на иконки, выплывет подсказка. Либо же используйте сочетания клавиш (Shift+Ctrl+N), и там же перетяните его под машину, чтобы она не исчезла после раскрашивания слоя.
Теперь раскрашиваете этот слой необходимым вам цветом, используя инструмент «Заливка» из панели слева, или же можете воспользоваться инструментом «Градиент», получится более красиво.
Градиент такой интересный инструмент в фотошопе, что стоит рассмотреть его возможности более детально.
Используя его, вы можете сделать очень красивый баннер, так как он дает возможность окрасить фон перетекающим цветом. Например, начальный вы выбрали красный, а конечный синий. Тогда у вас получится, что красный цвет будет плавно переходить в синий, образовывая разные оттенки.
Итак, баннер стал другого цвета. Мы сейчас говорим о том, как сделать «живой», анимированный баннер, это сложнее, чем просто нарисовать статичный.
Сохраняете рисунок в формате gif, он будет нашим первым кадром в анимации.
Как вы, наверное, уже поняли, эффект анимации достигается путем смены кадров с заданной периодичностью. Сделать анимацию из нескольких картинок нетрудно, программ для этого существует множество, однако ее можно сделать и при помощи фотошопа.
Анимация создается так. Открываете в программе несколько приготовленных для баннера фото одновременно. У вас получится несколько открытых окон.
Выделяете изображение, которое будет отображаться в самом начале анимации и в поле слоев размещаете его в самый верх списка. Затем, при помощи мыши, переносите их на основную картинку и так все. Вы увидите, что наш будущий баннер наполнился разными изображениями, каждое из которых видно в слоях внизу справа. После этого другие открытые картинки, кроме главной, можно закрыть.
В верхней части панели управления программой есть пункт «Меню». Нажимаете на него и выбираете раздел «Анимация». Появится окно, в котором будет виден первый кадр, но это нормально. Чтобы добавить остальные, необходимо нажать в этом узком окошке на небольшую кнопочку, она выглядит как три линии, затем в выпавшем меню выбрать «Создать кадры из слоев», и они появятся.
Однако это еще не все. В самом низу окна, где расположены наши кадры, вы можете нажать на кнопку воспроизведения и посмотреть, как будет выглядит наш баннер. Слишком быстро мелькают картинки? Ничего страшного, нажмите на любой кадр, задайте ему время отображения.
Там же выбираете вид просмотра – зацикленный (постоянное повторение), или один раз. Если задать такую команду, анимация остановится на последнем кадре.
Красиво? Ну, кто бы сомневался. Теперь нужно правильно сохранить наш шедевр. Для этого нажимаете вверху «Файл», и выбираете в подменю «Сохранить для Web и устройств». Откроется большое окно, выбираете количество цветов, затем сохраняете. Формат файла изначально gif, его не меняете.
Совет: помните, если сделали что-то не то или ошиблись при выборе команды, в верхнем меню «Редактировать» можно в любой момент выбрать команду «Шаг назад».
Как сделать статичный баннер?
В программе нажимаете «Файл», в нем пункт «Создать» и выбираете размеры и фон будущего баннера. Для удобства можно выбирать ширину и высоту либо в пикселях, либо в сантиметрах. По умолчанию новый документ создается в цвете RGB и с разрешением семьдесят два пикселя, эти параметры не меняйте, они оптимальны для отображения в интернете. Размеры выбираете, исходя из размеров подготовленной картинки, только высоту задавайте на пятьдесят-шестьдесят пикселей больше, туда вы разместите кнопку.
Открываете приготовленный рисунок и перетаскиваете его мышкой на только что созданный документ. При необходимости можете изменить размер фото, для этого активируете заготовку, а затем в меню «Изображение» выбираете «Размер изображения». Теперь задаете ему нужный вам размер.
Совет. Если снимете галочку напротив пункта «Сохранять пропорции», вы сможете изображение вытянуть или сузить.
Когда все будет готово и баннер вам нравится, нажимаете «Файл», а в нем «Сохранить как», и сохраняете картинку на компьютер.
.
В программе можно делать много чего – красивые оформления для фотографий, коллажи, просто рисунки. Такими фото наполнен интернет, нужна лишь фантазия и знание возможностей фотошопа.
Если вы новичок, в сети можно легко найти бесплатные программы и уроки для изучения.
uchieto.ru
Делаем баннер в Adobe Photoshop
Перед тем как приступить к работе, очень важно точно смоделировать сам характер баннера (его размеры, статичный он будет или анимированный). Так же важно определится с цветовой гаммой, использование фирменного стиля, придумать цепляющие заголовки и слоганы.
Затем уже можно запустить Photoshop и создать новое изображение с прозрачным фоном (File/New) размером, например, 468 на 60 пикселей;
Выводим на экран панель работы со слоями “Layer”.
В качестве отдельного слоя создаём фон – здесь советуем особо не экономить и любой сколько-нибудь заметный элемент баннера размещать на отдельном слое, вплоть до того, что под каждую букву слогана выделить свой слой.
На отдельном слое – рекламный призыв, а так же заранее подготовленную по размерам фотографию, эмблему.
Компонуем все элементы баннера и обязательно создаём несколько возможных вариантов, которые не мешает обсудить с коллегами.
Все варианты, пока в многослойном варианте, сохраняем в отдельных файлах в формате psd (заметим, jpg-формат «не помнит» информацию о слоях, он все слои соберёт в один и в будущем разбивка уже будет невозможна).
Очень полезно пока от компьютера отойти, отдохнуть от работы и вернуться к ней на следующий день, чтобы «свежим взглядом» оценить сделанное и выбрать окончательный вариант, который и будет подкорректирован и переведён в jpg.
Работа во многом носит творческий характер на грани мастерства владения инструментами программы фотошоп, чувства психологии, воздействия рекламы и её предмета.
Как сделать баннер в фотошопе анимированным (gif-файл)? И с этой задачей наш родной Фотошоп справится на ура! Открываем вкладку — окно — Анимация.
Далее в этом окне нужно добавить кадры, путем скрытия и показа слоев. Так же определим скорость показа кадра и его зацикливание!
Необходимо понимать, что вы уже создаёте какое-никакое видео, а значит, не обойтись без небольшого «сценария». По крайней мере, очень важно будет точно смоделировать весь характер анимации – партию каждого «героя-слоя».
Здесь потребуется точно определить все:
- временные параметры поведения каждого слоя;
- поведение его прозрачности;
- траекторию перемещения.
Дело совсем не сложное, но заставит почувствовать, насколько сложна эта профессия сценариста-режиссёра.
Вся работа обеспечивается основной идеей – многослойностью изображения и возможностью работать с каждым слоём совершенно независимо друг от друга.
Вот такой вот баннер я создал за 5 минут! Он конечно далек от совершенства, но ведь моей целью было показать Вам возможности Фотошопа и я с этим справился!
Да, чуть не забыл рассказать о своей находке В прошлой статье, я рассказывал о том, что купил видео курсы Сергея Буйбарова, о том как создавать баннеры и зарабатывать на них ! После детального изучения (целый день смотрел видео трюки и фишки Сережи) я понял, что подобного рода курсы, очень нужны в Рунете! Советую к приобретению однозначно…
До скорого в новой статье!
С уважением, Владимир Савельев
Премиум-уроки от клуба webformyself
Это новый революционный продукт в области обучения сайтостроительству! Все лучшие видео-уроки собраны в одном месте и разделены на категории: WordPress, Joomla, PHP, HTML, CSS и JavaScript… База постоянно пополняется и уже сейчас в ней более 200 уроков! Всего за один год — Вы сможете стать опытным веб-мастером «с полного нуля»!
Подробнее
Урок о том, как создать анимированный баннер в программе 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:
- Анимированный баннер Анимация 3D обложка
Здравствуйте, уважаемые друзья. Сегодня поговорим о баннерах, о том, как сделать анимированный баннер в Фотошопе. Вы не раз видели баннеры на многих сайтах, возможно, размещали эти баннеры на своих сайтах. Разумеется, цель любого баннера привлечь внимание посетителя. И если подобрать хорошие изображения, то сделать достойный баннер не сложно.
Итак, для сохранения анимированного баннера нужно открыть пункт меню «Файл» — «Сохранить для Web» .
Теперь ваша задача выбрать формат GIF, остальное фотошоп сделает за вас. Конечно, вы можете поэкспериментировать с настройками. Но, думаю, этого не потребуется.
В результате у вас получится подобный баннер.
.
Теперь в том месте сайта, где необходимо показывать баннер вставляете вот этот код:
Только помните, коды вставляются в исходный код сайта или через виджеты. Не забывайте менять ссылки и размеры баннера.
Баннер, который я сделал идеально подходит своими размерами под сайтбар, поэтому его проще всего вставить через виджет.
Для этого открываем административную панель WordPress – «Внешний вид» — — тип виджета «Текст» .
После чего добавляете виджет в сайтбар и вставляете в него код баннера. Не забудьте поменять ссылки!
Готово, — наслаждаемся плодами своего труда.
А теперь смотрим видеоурок, в нём вы увидите всё наглядно и многие вопросы решаться сами собой.
Друзья, на этом сегодня всё. Я желаю вам удачи и хорошего настроения! До встречи в новых статьях.
- видеоурок «Как сделать текстовый »
- видеоурок «Как сделать баннер для сайта»
- урок «Создаём анимированную кнопку для Вашего сайта»
Примеры баннеров, осзданых в фотошоп можно посмотреть в галерее. Видео создания анимированного баннера.
Важную роль в продвижении сайтов, внешней и внутренней оптимизации играет баннер. Баннера могут быть статическими различных форматов изображений и анимированными (gif, flash). В баннер вставляется ссылка в редакторе на сайте. На этой странице рассматривается создание баннера в фотошоп в формате GIF (анимированный баннер photoshop) . Аналогично можно создать анимированный баннер в Corel Photo Paint или в программе Corel Paint Shop Pro Photo. Баннер в Corel Draw можно создать только статический, т. к. программа не поддерживает анимацию. Ссылку в изображение (баннер) в программе Фотошоп вставить нельзя, в отличии от CorelDraw. Примеры созданных анимированных GIF баннеров в Photoshop можно посмотреть в галерее в разделе мои баннеры . Урок создание анимации в фотошоп. Создание анимированного баннера в Photoshop. Рассмотрим 3 приема создания GIF анимации в фотошоп. Анимированный баннер
Анимация текста, Переключение слоев, 3. Затухание (переход).
Создание движущегося текста в фотошоп.
Для тех, кто только начинает знакомство с Adobe Photoshop, рассмотрим создание простейшего анимированного баннера с функцией движущийся (анимированный) текст. Так как Adobe Photoshop это программа для работы со слоями растровой графики, то она даст нам возможность создавать растровые изображения с анимацией слоев и сохранением в формате GIF, который поддерживает анимацию. Кнопки и инструменты Adobe Photoshop, которые нам понадобятся для создания баннера анимация движущийся текст: кнопки меню ФАЙЛ, ОКНО, ПРОСМОТР, панель инструментов, инструменты ТЕКСТ, окна АНИМАЦИЯ, СЛОИ, СИМВОЛ.Создаем новый документ — кнопка ФАЙЛ — в раскрывающемся меню жмем НОВЫЙ.
В появившемся окне задаем нужные размеры, допустим 200 пикселей ширина, 100 высота, задаем для начала прозрачный фон (потом можно будет залить нужным цветом). На панели инструментов слева жмем кнопку текст (Т ) и на поле документа набираем текст, допустим «ТЕКСТ» для последующей анимации движения еще раз набираем второе слово «ТЕКСТ» на таком расстоянии от первого, чтобы второе слово вышло за пределы баннера справа (стало невидимым). Настройки текста можно задать в верхнем меню — жмем кнопку ОКНО — в раскрывающемся меню жмем СИМВОЛ — в окне меню СИМВОЛ задаем нужные параметры текста: шрифт, размер, цвет и т.д.
Создание анимации текста в фотошоп
В верхнем меню — жмем кнопку ОКНО — в раскрывающемся меню жмем АНИМАЦИЯ — в окне меню АНИМАЦИЯ видим первый кадр.
Для создания анимации необходимо несколько кадров. В окне АНИМАЦИЯ снизу слева от кнопки корзины жмем кнопку в виде листа и создаем копию кадра. На обоих кадрах задаем время отображения кадра (допустим 0,2 сек, но можно подобрать под нужную скорость в соответствии количеством промежуточных кадров для себя). Нажимаем на второй кадр и в окне СЛОИ нажимаем на слой с нашим текстом для активации слоя. Если нет по краям окна программы линеек для создания направляющих — в верхнем меню — жмем кнопку ПРОСМОТР — в раскрывающемся меню жмем ЛИНЕЙКИ. Нажимаем на левую линейку и, не отпуская, тянем (по умолчанию голубенькую) направляющую к началу текста. На поле баннера нажимаем на текст (при активном втором кадре) и зажав клавишу Shift (чтобы сдвиг был строго по горизонтали), тянем текст влево так, чтобы появившееся второе слово ТЕКСТ подошло к направляющей, но не в плотную, а с маленьким зазором от направляющей до начала второго слова, чтоб в последствии не было рывков в анимации при возвращении анимации к первому кадру.
В окне АНИМАЦИЯ внизу слева от кнопки создание нового кадра нажимаем на Добавление промежуточных кадров, в открывшемся окне задаем количество промежуточных кадров, допустим 10 с параметром «предыдущий кадр» (чем больше кадров зададим, тем плавне будет движение анимации, но, соответственно, увеличится вес изображения баннера) жмем ДА. По идее анимация готова. Теперь надо проверить анимацию. В окне АНИМАЦИЯ жмем на кнопку воспроизведение анимации и просматриваем в основном окне программы на баннере движение текста.
Если все устраивает — сохраняем — жмем ФАЙЛ — сохранить для web устройств. Перед сохранением нужно чтоб активный кадр был первым на готовом баннере (с него начнется анимация) или задать кадр для начала анимации. При сохранении для веб устройств открывается окно, в котором задаем формат GIF (только формат GIF для анимации!) если надо выбираем количество цветов colors (чем меньше оттенков, тем легче баннер), для данного черного текста хватит 8 цветов. Цикличность (looping option) оставляем forewer (без остановки). В этом окне сохранения для веб устройств можно поменять размер баннера — уменьшим — 100 на 50. Здесь же можно просмотреть результат анимации. Если все устраивает — жмем Save и указываем место сохранения баннера, допустим на рабочий стол. Назвать для последующей загрузки на сайт необходимо латинскими буквами, например banner_text. Просматриваем готовый баннер и если устраивает — можно загружать на сайт. Такой же эффект движения можно сделать не только с текстом, но и с частью изображения (объектом).
Второй способ создания анимированного баннера в Adobe Photoshop.
Баннер со сменяющимися изображениями изготавливается путем создания нескольких слоев изображений и включения (выключения) их в заданном порядке. Создадим 2 слоя с разными изображениями.
Слой 1 и слой 2. Создаем в окне анимации 2 кадра. Задаем время показов. В первом кадре оставляем включенный слой 1, слой 2 выключаем. Просматриваем анимацию и сохраняем для веб устройств в формате GIF. Для более точной передачи цветовой гаммы выставляем количество цветов 256.
В программе Adobe Photoshop множество инструментов и эффектов, позволяющих создавать различные баннера, например анимированный баннер с плавным переходом изображений.
Опять создаем 2 слоя, но не выключаем их, а применяем функцию прозрачности. Создаем 3 кадра. В кадре 1 первый слой непрозрачность 100%, во втором кадре слой 1 непрозрачность 0%. В 3 кадре слой 1 опять непрозрачность 100%. Между тремя кадрами создаем необходимое число промежуточный кадров и получаем эффект перехода изображения.
Уменьшение размера gif анимации (баннера) в Фотошоп.
Что делать, если необходимо уменьшить размер анимированного баннера (изображения), а нет PSD исходника? Напряпрямую готовый гиф со слоями в фотшоп не откроешь. Это можно сделать в Corel Photo paint. Как уменьшить размер анимированного gif баннера в фотошоп ? Тут надо знать маленькую хитрость. В Фотошоп gif анимацию загружаем через меню ФАЙЛ — импортировать — кадры видео в слои. На данном этапе и начинается фокус. Во первых, на компьютере должен быть установлен Quick Time Player. Во вторых, в открывшемся окне загрузки сразу наш gif не найти (по умолчанию-видео форматы). Чтобы найти наш баннер, необходимо в строку ИМЯ ФАЙЛА в окне поиска Фотошоп при импорте написать расширение гиф следующим образом — «*.GIF» без кавычек.
Нажимаем загрузить и вдруг появляется в окне наш баннер в формате гиф! Выбираем его и жмем загрузить еще раз. Появляется окно, с предустановкой От начала до конца, где устанавливаем галку — Создать покадровую анимацию — жмем ДА!. В итоге наш gif баннер загрузился со всеми слоями. Осталось изменить размер изображения и сохранить для веб устройств опять же в формате gif как в прошлый раз.
Видео наглядно показывает создание анимированного баннера.
оздаём анимированный баннер для Вашего сайта
Откроем исходник для баннера, его размер 468х60. Если у Вас нет таких исходников, то баннер, который используется в этом уроке, Вы можете скачать А вообще можно использовать любой прямоугольник необходимых Вам размеров, залитый какой-нибудь подходящей текстурой.
Выберем инструмент «Горизонтальный текст».
Добавим к тексту стиль слоя. Для этого в палитре слои нажмём на вторую слева иконку fx и выберем стиль «тень».
Появится диалоговое окно «Стиль слоя», выберем примерно такие параметры, которые указаны на рисунке. А вообще, Вы вольны выбрать то, что Вам по вкусу.
Добавим обводку чёрным цветом шириной 1 пиксель. Нажмём «Да».
Наш текст преобразился.
Чтобы придать новому слою те же стили слоя, зажмём клавишу Alt и перетащим значок fx с первого текстового слоя на второй.
Разблокируем наш основной слой «Задний план». Для этого левой кнопкой мыши два раза щёлкнем по нему. Появится окно «Новый слой», в котором ничего не меняем, а просто нажимаем «Да».
Простым перетаскиванием «Слоя 0» на вторую справа иконку создания нового слоя создадим три копии слоя «Слой 0».
Расположим эти слои так, что бы под каждым текстовым слоем находилась копия «Слоя 0».
Делаем активным текстовый слой, нажимаем сочетание клавиш Ctrl+E. Тем самым, мы сливаем вместе активный текстовый слой и расположенную под ним копию «Слоя 0».
Так делаем со всеми слоями. В результате у нас останется всего четыре слоя. На этом подготовительная работа закончена.
Открываем палитру «Анимация». Для этого выбираем «Окно — Анимация».
Мы увидим палитру «Анимация».
Нажмём на стрелочку, расположенную в верхнем правом углу палитры и в открывшемся списке выберем «Создать кадры из слоёв».
Так как, у нас четыре слоя, то в палитре «Анимация» появится четыре кадра.
Выберем время в течении которого будет показываться каждый кадр. Для этого нажимаем на чёрную стрелочку каждого кадра, находящуюся в нижнем правом углу каждого кадра и в раскрывающемся меню выбираем необходимое нам значение.
Затем нажимаем на чёрную стрелочку под первым кадром и выбираем параметры показа анимации — будет показана один раз, всегда или можно выбрать необходимое количество раз. Я выбрал всегда.
Сохранеяем нашу анимацию. Идём в «Файл — Сохранить для Web» или просто нажимаем Alt+Ctrl+Shift+S.
В появившемся окне ставим формат Gif, выбираем 256 цветов и нажимаем «Save» (сохранить).
В окне сохранения документа выбираем папку, куда мы будем сохранять файл, пишем название для анимации и нажимаем «Сохранить».
Вот что у нас получилось.
В этом уроке по работе с фотошопом я покажу как можно совсем несложно создать анимированный баннер с рекламой или другим подходящим для Вашего сайта текстом.
Подобные публикации:
{smooth-scroll-top}
Откроем исходник для баннера, его размер 468х60 . Если у Вас нет таких исходников, то баннер, который используется в этом уроке, Вы можете скачать А вообще можно использовать любой прямоугольник необходимых Вам размеров, залитый какой-нибудь подходящей текстурой.
Выберем инструмент «Горизонтальный текст «.
Напишем на нашем баннере любой текст, я выбрал подходящий для своего сайта.
Добавим к тексту стиль слоя. Для этого в палитре «Слои » нажмём на вторую слева иконку fx и выберем стиль «Тень «.
Появится диалоговое окно «Стиль слоя «, выберем примерно такие параметры, которые указаны на рисунке. А вообще, Вы вольны выбрать то, что Вам по вкусу.
Добавим обводку чёрным цветом шириной 1 пиксель. Нажмём «Да «.
small;»>Наш текст преобразился.
Отключим видимость слоя с текстом и добавим новый текстовый слой. Что-нибудь напишем.
Чтобы придать новому слою те же стили слоя, зажмём клавишу Alt и перетащим значок fx с первого текстового слоя на второй.
Наш верхний слой получил те же параметры стиля слоя, что и у первого текстового слоя.
Таким же образом создадим третий текстовый слой и придадим ему те же эффекты.
И наконец создадим последний слой с теми же стилями слоя.
Всего получилось четыре слоя с текстом.
Разблокируем наш основной слой «Задний план «. Для этого левой кнопкой мыши два раза щёлкнем по нему. Появится окно «Новый слой «, в котором ничего не меняем, а просто нажимаем «Да «.
Простым перетаскиванием «Слоя 0 » на вторую справа иконку создания нового слоя создадим три копии слоя «Слой 0 «.
Расположим эти слои так, что бы под каждым текстовым слоем находилась копия «Слоя 0 «.
Делаем активным верхний текстовый слой, нажимаем сочетание клавиш Ctrl+E . Тем самым, мы сливаем вместе верхний активный текстовый слой и расположенную под ним копию «Слоя 0 «.
Так же делаем со всеми слоями. В результате у нас останется всего четыре слоя. На этом подготовительная часть работы по созданию анимации закончена.
Открываем палитру «Анимация «. Для этого выбираем «Окно — Анимация «.
Мы увидим палитру «Анимация «.
Нажмём на стрелочку, расположенную в верхнем правом углу палитры и в открывшемся списке выберем «Создать кадры из слоёв «.
Так как, у нас четыре слоя, то в палитре «Анимация » появится четыре кадра.
Выберем время, в течении которого будет показываться каждый кадр. Для этого нажимаем на чёрную стрелочку, находящуюся в нижнем правом углу каждого кадра и в раскрывающемся меню выбираем необходимое нам значение.
Затем нажимаем на чёрную стрелочку под первым кадром и выбираем параметры показа анимации — будет показана один раз, всегда или можно выбрать необходимое количество раз. Я выбрал «Всегда».
Сохранеяем нашу анимацию. Идём в «Файл — Сохранить для Web » или просто нажимаем Alt+Ctrl+Shift+S.
В появившемся окне ставим формат Gif , выбираем 256 цветов и нажимаем «Save » (сохранить ).
В окне сохранения документа выбираем папку, куда мы будем сохранять файл, пишем название для анимации и нажимаем «Сохранить «.
{smooth-scroll-top}
comuedu.ru
В данном уроке будет рассмотрен способ создания анимированного баннера путем покадровой анимации. Данные баннеры используются в качестве рекламных на различных сайтах, в социальных сетях и т.п..
Поскольку требования к рекламным баннерам у разных сайтов свои, то в каждом случае придется подстраиваться. Для того, чтобы 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.
В результате получаем вот такой простой и легкий анимированный баннер, который можно использовать в качестве рекламы.
www.pscraft.ru
Что потребуется для создания баннера
Прежде всего, вам потребуется сам редактор 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, остальное фотошоп сделает за вас. Конечно, вы можете поэкспериментировать с настройками. Но, думаю, этого не потребуется.
В результате у вас получится подобный баннер.
Как установить баннер на сайт
Мало сделать красивый баннер. Его нужно ещё установить на сайт. Для этого сам баннер нужно загрузить на ваш сайт. Сделать это можно с помощью файлового менеджера хостинга или через FTP-соединение.
Теперь в том месте сайта, где необходимо показывать баннер вставляете вот этот код:
<!-- Баннер в сайтбаре --> <p style="text-align:center;"><a href="ССЫЛКА С БАННЕРА" target="_blank" rel="nofollow"><img src="ССЫЛКА НА БАННЕР" width="300" height="300" border="0" alt="голосовой набор текста"/></a></p> <!-- Баннер в сайтбаре -->
Только помните, коды вставляются в исходный код сайта или через виджеты. Не забывайте менять ссылки и размеры баннера.
Баннер, который я сделал идеально подходит своими размерами под сайтбар, поэтому его проще всего вставить через виджет.
Для этого открываем административную панель WordPress – «Внешний вид» — «Виджеты» — тип виджета «Текст».
После чего добавляете виджет в сайтбар и вставляете в него код баннера. Не забудьте поменять ссылки!
Готово, — наслаждаемся плодами своего труда.
А теперь смотрим видеоурок, в нём вы увидите всё наглядно и многие вопросы решаться сами собой.
Друзья, на этом сегодня всё. Я желаю вам удачи и хорошего настроения! До встречи в новых статьях.
С уважением, Максим Зайцев.
- Как настроить цикличность баннера в Google Web Designer
- Как конвертировать баннер flash в html5
- Как сделать баннер HTML5 в Google Web Designer с эффектом 3D
- Как создать баннер в Google Web Designer и выставить на сайт
- Как создать и разместить флеш баннер на сайте
Похожие статьи по теме:
1zaicev.ru
Что необходимо, чтобы сделать анимированный баннер в фотошоп?
Начнем с лимитов
Какие у нас есть ограничения?
У нас есть требования от модерации, и есть требования по размерам. Мы можем загружать следующие размеры (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 канал
rek9.ru