Как создать анимированный баннер (Gif ) для лендинг бота в Photoshop
Создайте новый документ (Ctrl + N) с размерами файла 700 х 280 пикселей. В новый документ любым удобным для вас способом добавляем изображение, которое будет являться фоном баннера.
Добавляем на наш баннер текст или же картинки, которые у нас будут появляться\передвигаться, создавая тем самым анимацию. Например, для добавления текста необходимо выбрать на панели инструментов «Горизонтальный текст».
Добавляем текст, который мы хотим анимировать — каждую фразу отдельно!
После того, как мы добавили всю необходимую информацию, открываем временную шкалу. Для этого идём в меню Окно – Шкала времени (Window > Timeline). В нижней части рабочей области у нас откроется шкала времени, на которой будет один кадр — текущее состояние нашего баннера.
В редакторе слоев снимаем видимость (убираем «глаз») со всех элементов, кроме тех, которые нам нужны на первом кадре нашей анимации. В Шкале времени нажимаем на кнопку «Создании копии выделенных кадров», переходим на второй кадр и в редакторе слоев убираем видимость со всех ненужных слоев.
После выполнения предыдущего шага у нас должна сформироваться шкала времени с кадрами, которые будут менять друг друга. Теперь мы настраиваем время длительности каждого кадра, для этого нажимаем на знак стрелочки под кадром и выбираем необходимое значение (если предложенное значение вам не подходит, можете выбрать свое.
Что бы посмотреть результат своей работы, жмем на кнопку «запуск воспроизведения анимации»
Как только все будет готово, перейдите в меню Файл — Сохранить для Web (File > Save for Web) (CTRL+SHIFT+ALT+S) и примените настройки, как показано на скриншоте. После этого нажмите кнопку Сохранить (Save) и сохраните анимацию в формате GIF.
Как создать gif баннер в фотошопе (видеоурок)
Если у вас есть свой сайт, то рано или поздно вам понадобится создать gif баннер. Для каких целей мне нужен баннер, подумаете вы сначала. А все просто для рекламы (сайта, товаров, услуг, курсов, книг, мануалов, софта и др.).
Когда вы решите что будите рекламировать, вам нужно будет создать баннер и вот тогда возникнет вопрос, а как его создать. Есть два пути решения этой задачи. Это обратиться к фрилансерам или в студию которые предоставляют услуги по изготовлению баннеров для сайтов. Либо взять все в свои руки и создать баннер самостоятельно.
У этих путей решения есть плюсы и минусы. Если обращаться к разработчикам, то им нужно заплатить за их работу. Если разработкой заниматься самим, то нужны какие-то знания и информация по разработке баннеров.
Сегодня я поделюсь с вами минимальным набором знаний для создания простого gif баннера в фотошопе. Мы разработаем баннер размером 240х400px. Проработаем дизайн, композицию и в заключение создадим анимацию.
Видеоурок по изготовлению баннера для сайта
Я долго думал о написание статьи по изготовлению баннеров для сайтов, но все никак не выходило, так как хотелось написать информативную статью для большего понимания, а это большой объем материала.
Поразмыслив, я решил записать видеоурок по созданию gif баннера в фотошопе, в котором и раскрыть необходимую информацию. Которой будет достаточно для изготовления полноценного простого баннера для сайта. Урок получился на удивление небольшой, но емкий.
Приятного просмотра, надеюсь, вы узнаете из видеоурока что-то новое и интересное для себя.
Если возникнут вопросы, задавайте в комментариях.
Другие записи из рубрики
Понравилась статья?
Подпишитесь на обновления сайта:
Поделитесь статьей с друзьями:
Выражаю искреннюю благодарность читателям, которые поддерживают проект и рассказывают о статьях своим друзьям!
Комментарии к статье:
Сергей, привет! Большое спасибо за интересный урок! Обязательно буду пробовать, добавил страницу в закладки. Вроде не очень сложно… Баннер у тебя на сайте про разработку уникального дизайна очень симпатично смотрится)
Сергей Нуйкин
Привет, Денис! Пожалуйста, по сути да, не особо сложно, если не делать сложную анимацию. Старался сделать простой урок. Да баннер в сайдбаре вроде простенький получился.
Скажешь тоже, простенький, просто отличный получился! Мне до такого как до луны) А сколько по времени у тебя вышло на его создание?
Сергей Нуйкин
Да не особо много, может минут 30. Пока идею продумал, пока все собрал в картинку, сделал анимацию. Опыт большой, баннеров делал много раньше.
Опыт имеет большое значение, с этим не поспоришь
Сергей Нуйкин
Денис, полностью с тобой согласен.
Сергей, спасибо за хороший урок, хотя для себя я нового ничего и не узнал, т.к. так же переделал кучу самых разных анимированных кнопок, баннеров сначала в Фотошопе, а потом уже и во флэш. Кстати, готовую анимацию можно и лучше всего предварительно ещё перед сохранением просмотреть в интернет-браузере — в том же окне, где выбираем формат, параметры цвета, прозрачности, оптимизации. Потому что скорость анимации при просмотре в самом Фотошопе очень часто отличается от реальной (может запаздывать, могут вылетать кадры или попросту тормозить). Не знаю, быть может это старый урок или вы не знаете или не используете — горячие клавиши и их комбинации. Есть масса удобнейших функций в Фотошоп, которые повышают комфорт при работе и экономят массу времени. К примеру, если слои не лежат изначально в папках, то их можно мгновенно выбирать при помощи инструмента указателя (V) зажав при этом CTRL (по типу Corel Draw с фигурами). Если же слои уже в папках, то данный способ поможет быстро отыскать эту самую папку. (с фигурами и векторными элементами (те же кнопки, например) проще — их ВСЕГДА можно отыскать, где бы они не лежали глубоко среди папок — инструмент «стрелка» A — просто кликаем по искомой фигуре/элементу).
Делать дубликат слоёв проще-простого — зажать ALT и перетянуть куда-либо элемент или слой.
Чтобы вставить введённый шрифт и поменять инструмент — зажмите CTRL и нажмите ENTER.
Ну и прочие другие трюки. Может кому-нибудь да пригодится, если вы знали об этом.
Сергей Нуйкин
Владимир, спасибо за развернутый и интересный комментарий. Я просмотром при сохранение к сожалению практически никогда не пользуюсь, дело привычки видимо.
А горячие клавиши использую, правда не все, а частично. Вы наверное обратили внимание на клавиши из-за того что я не использую их в уроке? Если так, то это сделано намеренно для большей наглядности и понимания.
Сергей, спасибо за урок. Случайно попал на ваш сайт, по ссылке с youtybe канала. Искал информацию, как создать gif баннер в photoshop. Подписался на ваш youtybe канал и поставил лайк. Спасибо за интересную информацию.
спасибо за отличный урок, все ясно и понятно. Интересно получится ли работать в другом редакторе (ссылка удалена согласно правил) с вашими подсказками
Сергей Нуйкин
Вера, данный материал ориентирован на создание баннера в граф. редакторе Adobe Photoshop. Но если вы понимаете принцип создания gif баннеров, то создать можно в любом другом редакторе. Главное условие возможность редактора создавать анимированные gif изображения.
Нажимая на кнопку «Отправить комментарий», вы соглашаетесь с Политикой конфеденциальности .
Как сделать баннер в Фотошопе
В этой транскрибации мы поговорим о том, как сделать баннер в фотошоп с простой анимацией для Яндекс.Директ.
Яндекс.Директ недавно стал принимать графические объявления, то есть баннеры, и я предполагаю, что вы хотите, чтобы на вашем баннере присутствовала анимация, чтобы привлечь внимание посетителей различных сайтов. Мы в этом видео (откроется в новом окне) и в траскрибации вместе сделаем анимированный баннер в фотошоп, с кнопкой, которая изменяется.
Что необходимо, чтобы сделать анимированный баннер в фотошоп?
Начнем с лимитов
Какие у нас есть ограничения?
У нас есть требования от модерации, и есть требования по размерам. Мы можем загружать следующие размеры (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 верхние слои перекрывают нижние слои. То есть если бы слой с Ником находился ниже слоя с фото мечети, то он был бы перекрыт мечетью Кул Шариф. Поэтому он находится здесь, выше.
Далее, у меня есть текст, здесь вся информация. Потом, у меня есть логотип.
[alert yellow»]Одно из требований Яндекс.Директ, чтобы на баннере был логотип либо ОГРН организации. Я сразу добавил и то, и другое, чтобы этот же баннер использовать, например, в myTarget. Еще у меня добавлено здесь “6+”, это тоже требование от Яндекс.Директ, чтобы на баннерах с мероприятиями была отметка о возрасте.[/alert]
Кнопка, которая будет двигаться
Ну и сама кнопка. Я ее нарисовал, состоит она из фигуры, которая рисуется с помощью инструмента Прямоугольник со скругленными углами, быстрая клавиша U. Нарисовал в том же цвете, что и на сайте. И далее нанес текст “купить билет” красным цветом, как на сайте.
Еще у меня у прямоугольника есть эффект тени (кстати, он есть и у других элементов этого баннера — у текста). Давайте перейдем сюда и посмотрим, что это за тень. Я два раза кликнул по слою и попал в Стили слоя. И вот здесь есть параметр Тень. Режим наложения Нормальный, непрозрачность 100%, угол 90 градусов и смещение 0. Из за того, что такая тень применена, появляется эффект воздушности, как будто объект находится ближе к зрителю.
Как сделать анимацию в фотошоп нашей кнопки
Теперь у нас есть все объекты.
Что необходимо сделать, чтобы создать простую анимацию?
Открываем окно Шкала времени
Для этого нужно выбрать меню Окно и поставить галочку Шкала времени. Вот если я сейчас ее сниму, я не смогу создавать анимацию кадра. Сейчас я включу, и вы увидите, что у меня есть два кадра. Второй удалю, и у меня есть один кадр.
Если я так сохраню, то у меня никакого изменения не происходит. Также здесь я сразу выставил задержку 1 секунда. Дело в том, что это требования Яндекс.Директ.
[alert yellow»]Если у нас происходит анимация объекта с текстом, то этот текст должен успевать читаться. Одной секунды вполне достаточно для прочтения текста.[/alert]
Далее у меня стоит еще Постоянно, чтобы анимация крутилась постоянно. Если у нас будет Однократно, то анимация произойдет только один раз.
Создаем новый кадр
Для того, чтобы создать следующий кадр, необходимо нажать кнопку Новый кадр. И мы можем на этом кадре просто убрать, сделать невидимой кнопку. То есть на одном кадре у нас есть кнопка, а на втором нет. И если я нажму воспроизведение, то уже наша анимация создана.
Более сложная gif анимация кнопки
Но давайте мы создадим немного более сложную анимацию. И для этого я на втором кадре сделаю дубликат этой кнопки. В группе Кнопка находятся слой с текстом и сам прямоугольник-подложка. Для этого я выберу группу Кнопка, нажимаю правой кнопкой мыши, выбираю Дубликат группы, соглашаюсь, и у меня появляется новая группа Кнопка копия.
Обратите внимание, я нахожусь на втором кадре и скрываю предыдущую кнопку.
Давайте сейчас перейдем в браузер, и я расскажу, какого эффекта я хочу добиться. Вот перед вами баннер, какой должен у нас получиться.
И вы видите, что на первом кадре есть эффект воздушности, а на втором создается впечатление, что кнопка нажата.
Как добиться эффекта на баннере, что кнопка нажата?
Перехожу в Adobe Photoshop, и перехожу в стили слоя прямоугольника-подложки группы Кнопка копия (двойным кликом по слою). И вместо Тени я ставлю Внутреннюю тень и перехожу в настройки: режим наложения Нормальный, непрозрачность 100%. Далее я делаю смещение, такое чтобы было заметно. 7 пикселей достаточно. И можно еще угол поменять — сделаем 140 градусов, чтобы тень была сбоку.
Теперь у нас на первом кадре воздушная кнопка, а на втором нажатая.
Но согласитесь, чего-то ей не хватает.
Для этого необходимо встать на слой с текстом в кнопке, выбрать инструмент перемещение, и я на клавиатуре нажимаю стрелку Вниз. Таким образом, я смещаю текст вниз, нажимая два раза. И еще два раза вправо.
Можно еще по одному пикселю добавить. У нас теперь есть два кадра, которые крутятся постоянно. Мы можем проверить, как это все работает, нажав кнопку Play.
Сохраняем gif баннер с анимацией
Чтобы сохранить, необходимо выбрать Файл — Сохранить для веб — и появляется окно. Чтобы у нас работала анимация, необходимо выбрать формат GIF. Если мы выберем формат JPEG или PNG, то наша анимация не будет работать, и будет только первый кадр. Выбираем GIF, можем выбрать параметры повторов (постоянно или однократно — рекомендую обязательно проверить), и можем посмотреть здесь, как работает анимация.
Все бы хорошо, но в данном случае вы видите, что у нас GIF имеет большой размер. Это связано с тем, что размер баннера большой, из-за этого вес нашего объекта очень большой. В данном случае я рекомендую его сохранить как JPEG, причем в качестве 50, тогда его вес будет 104 КБ. А лимит, напомню, 120 КБ, то есть мы входим.
Но из-за того, что мы хорошо поработали в большом баннере, мы теперь эти объекты можем переносить в баннеры меньшего размера, и там уже сможем смело сохранять в GIF. Можете в этом убедиться, когда поработаете. В итоге когда мы его сохраним, этот баннер мы уже можем загружать себе в рекламную кампанию.
Как сделать рамку для баннера?
Еще я бы хотел отметить такой момент, что у этого фона есть обводка. Она здесь не очень заметна, так как присутствует черный цвет, но в браузере видно, что фиолетовая обводка есть. Ее необходимо сделать, рамка — это тоже одно из требований Яндекс.Директ.
Для этого переходите в фотошоп, выбираете слой с фоном-картинкой, и если вы работаете в другом размере, вам необходимо выбрать рамку (инструмент Кадрирование), и обрезать ее по размеру документа.
Баннеры небольшие, поэтому объект с фоном у вас будет, скорее всего, больше, чем ваш баннер. Поэтому его нужно будет обрезать именно в том размере.
После того, как вы обрежете, двойным кликом вызываете стили слоя и используете параметр наложения Выполнить обводку, выберите Положение Внутри, выберите цвет, какой вам необходим, можете его номер вставить сюда в цифровом виде, и выбираете размер.
Я думаю, больше 3 пикселей нет смысла. Отлично, сохраняете. И теперь вы получаете на выходе готовый баннер, который можете использовать.
Обязательно сохраняем исходники в PSD формате
Этот документ тоже сохраняете в формате PSD, чтобы в дальнейшем можно было внести изменения в слоях. Вдруг мероприятие перенесется на час, и чтобы все это изменить, вам необходим исходник. Логику, я думаю, вы тоже понимаете. Отлично.
Вот такое видео про то, как сделать баннер (вы прочитали транскрибацию). Если оно вам понравилось, то обязательно ставьте лайк, подписывайтесь на мой YouTube-канал, потому что вас ждет еще много интересного видео. С вами был Денис Герасимов, пока-пока!
Как сделать баннер с анимацией в Photoshop
Дорогие друзья, как я и обещал в комментариях к посту Как увеличить эффективность партнерских баннеров + бонус, предлагаю вам свой видеоурок о том, как сделать баннер с анимацией в Photoshop.
Рекомендую смотреть видеоурок в полноэкранном режиме (чтобы выйти из него, просто нажмите Escape.). Это можно сделать нажатием на иконку Fullscreen Toggle:
�� Кстати! 13 ноября 2023 года стартует 24 поток моего курса по продвижению англоязычных сайтов SEO Шаолинь. Для читателей блога я делаю хорошую скидку по промокоду «blog». Тариф Про стоит не 36, а 30 тыс. рублей. Тариф Лайт не 16, а 13 тыс. рублей. Тариф Команда не 53, а 45 тыс. рублей. Для получения скидки пишите мне на globatorseo@gmail.com с темой «Курс» или в Telegram @mikeshakin.
В этом видеоуроке я покажу, как быстро сделать самый простой анимированный баннер. Работать буду в программе Photoshop CS3. Такой баннер можно создать в любой версии Фотошопа (просто в более ранних версиях нужно будет переходить в программу Image Ready, ее кнопка будет в самом низу панели инструментов).
Баннер получится самый простой, я решил не делать разные стили и эффекты, чтобы легче было понять суть создания анимации.
Любой эффект в Photoshop можно проделать разными способами, в видеоуроке я приведу свои.
Все нужные сочетания клавиш я сделал в виде всплывающих подсказок.
Так что желаю Вам приятного просмотра. Если захотите дальше развиваться в Фотошопе, то добро пожаловать на мой сайт Уроки Photoshop, на котором я пишу уроки с 2006 года.
Читайте также: 14 лет блогу shakin.ru. Видео с поздравлениями
Постовой: Приближаются выборы 2010, что нас ждет?
Luxury Swiss replica — free shipping worldwide.
Best replica watches of all the best Swiss, Italian an French watchmaking companies.
Десерт на сегодня — увлекательная flash игра, в которой нужно стрелять зомби дождливой ночью. Чтобы использовать щит, жмите пробел:
Подпишитесь на рассылку блога с полезными материалами по SEO
Читайте также:
- 12 лет блогу shakin.ru. Видео с поздравлениями
- Итоги 2018 года и планы на 2019
- 13 лет блогу shakin.ru. Видео с поздравлениями
- 11 лет блогу shakin.ru. Видео с поздравлениями
- 14 лет блогу shakin.ru. Видео с поздравлениями
Меня зовут Михаил Шакин, я автор этого блога, занимаюсь SEO с 2006 года. Вы можете заказать у меня консультации по продвижению вашего сайта в рунете или англоязычном интернете. Мои контакты.
Shakin.ru в соцсетях
Мои каналы и чат в Telegram
