Анимационный баннер. Как сделать анимированный GIF баннер.
Сегодня мы рассмотрим не очень простой, но очень интересный урок по созданию анимированного gif баннера.
Чтобы было понятнее о чем идет речь, и что в конечном итоге получится, смотрим сразу на конечный результат нашей с Вами дальнейшей работы..
На сегодняшний день, самые популярные баннеры, принимаемые практически на всех веб-сайтах и на всех баннерообменных сетях являются баннера основанные на gif или flash анимации стандартного размера: 468х60, 100х100, 120х60, 88х31.
Мы с Вами рассмотрим пример создания анимированного баннера с размерами 468х60, каким и является вышеупомянутый пример.
Итак, первое, что нужно сделать, это определиться с тем, как бы Вы хотели, чтобы Ваш баннер выглядел в конечном итоге. Придумать текстовую часть и саму концепцию движений слов, картинок и др. Пытаться создать анимацию не продумав её от начала до конца — гиблое дело.
Как видно на примере, баннер совсем не сложный, и имеет три этапа подачи информации.
1. Первый текстовый блок «Создать свой сайт» подразумевающий вопросительную информацию.
2. Второй текстовый блок «Может каждый» как бы ответ на него.
3. Сама информационная суть банера. То есть четко сформулированный ответ, где этому научиться))
Думаю теории хватит. Практика Господа!
Создадим новый документ с размерами 468х60 пикселей.
Теперь, помещаем каждую часть информации баннера на отдельный слой. (на картинке ниже я сдублировал файлы для наглядности, Вы же должны делать это в одном документе, просто располагая слои друг над другом)
Также, нам понадобится пара фоновых изображений, в нашем случае это текстура с синеватыми разводами. Её тоже располагаем на отдельные слои.
Теперь идем в выпадающее меню window и включаем панель Animation.
Здесь отображаются такие же слои, только с возможностью развертывания каждого.
В развернутом состоянии каждый слой имеет несколько параметров.
Position — отвечает за перемещение картинки находящейся на данном слое.
Opaсity — отвечает за прозрачность
Style — отвечает за приминение к картинке слоя стилей, т.е. теней, засветок, выдавливания и другого.
Text wrap (если это текстовый слой) Предназначен для искривления текста.
Каждый из этих параметров, имеет свою временную дорожку, на которой можно распологать маркеры, как-бы фиксируя текущее состояние.
Метод построения анимации прост до безумия. К примеру, нам нужно, чтобы картинка двигалась слева на право. Для этого нажимаем на часы рядом с надписью Position, после чего перемещаем бегунок справа в нужную точку временной шкалы и просто тащим картинку в сторону. Программа сама добавит все нужные кадры. Вам останется всего лишь отрегулировать промежуток времени, при помощи маркеров на временной шкале. Таким же образом работает прозрачность, добавление стилей и искривление текста.
Ниже приведен пример для свойства прозрачность(Opacity).
Проделайте этот шаг с анимацией изчезновения текста на первом слое «Создать свой сайт».
Также, на слое есть эффект inner glow, он отвечает за внутреннюю засветку текста. Выполняемые действия идентичны. Начальный кадр — маленькое значение, конечный — большое.
Следующий слой «Может каждый» работает точно так же, но с условием смещения временной шкалы, так как второй слой начинает отображаться после того, как первый стал полностью прозрачным.
И еще один, последний слой под номером 3, на временной шкале начинает действовать, когда второй стал полностью прозрачным.
С первого раза красиво вряд ли получится, поэтому прийдется постараться, но все приходит с опытом.
После того как каждая из частей будет четко соответсвовать своему участку времени, можете считать, что все готово.
Теперь нажимаем Ctrl+Shift+Alt+S(Save for Web) и сохраняем наш баннер в формате GIF, он как Вы уже знаете, поддерживает сохранение анимации.
Привет друзья! Сегодня мне пришла мысль рассказать о том, как создать анимацию или в фотошопе. Для чего это вам нужно? Если вы зарабатываете на своем блоге с помощью , то обычно это происходит с помощью баннеров.
Большинство инфо-бизнесменов предоставляют своим партнерам уже готовые баннеры, как анимированные, так и в виде простой картинки с вашей партнерской ссылкой. Остается только скопировать код и установить его на своем блоге.
А что делать, если вы решили не ставить картинку предоставленную хозяином партнерской программы, в котором вы участвуете, а сделать свою? Или этот человечек не предоставил вам ничего кроме партнерской ссылки. Да, и так бывает.
Думаю, многие согласятся со мной, что внимание посетителей блога лучше привлекают именно анимированные картинки, чем обычная . Тем самым увеличивая конверсию переходов и продаж.
Давайте приступим, и начнем создавать анимацию из картинок в программе фотошоп. В итоге, у нас получится баннер, который будет менять свое содержимое, то есть станет анимированной.
И так, запускаем программу фотошоп. Надеюсь, что она у вас установлена.
У меня установлен русифицированная версия фотошопа (CS6), поэтому я буду делать свою анимацию, и рассказывать, как это делается именно в ней.
В меню выбираем «Файл — Создать» , для того, чтобы создать новый документ.
В открывшемся окне устанавливаем наши настройки будущего анимированного баннера. Рекомендую, размеры (высота, ширина) устанавливать не наугад, а выбрать стандартные. Я, для примера, выберу один из стандартных размеров баннера, это 468 на 60 пикселей. Нажимаем «ОК».
У нас создается чистый документ, в котором мы уже будем делать анимацию.
Моя анимация будет состоять только из текста, то есть текст будут заменять друг друга через определенный отрезок времени, который мы установим чуть позже.
Вы можете использовать только картинки, или использовать и текст и картинки. Но запомните, чем больше картинок будете использовать для вашего анимированного баннера, тем больше будет он весить.
И так, в меню с инструментами фотошоп, я выбираю инструмент «Текст». Пишу нужный мне текст на созданном нами документе, и нажимаем галочку вверху окошка. Наш текст создается на новом слое. Как выбирать и настраивать шрифт, цвет шрифта, я надеюсь, вы знаете.
Теперь отключаем слой с первым текстом, нажав на глазик рядом с нужным слоем, и опять выбрав инструмент «Текст», пишем следующую строку. Новый текст опять появится на новом слое.
Теперь у нас три слоя. Первый слой это фон, который вы можете залить любым цветом, и два слоя с текстом.
Наши слои для создания анимации (анимированного баннера) готовы. Теперь перейдем к созданию сомой анимации, и оживим наш баннер.
В меню заходим по вкладке «Окно» и ставим галочку рядом с пунктом «Шкала времени».
В нижней части окна фотошоп должна появиться дополнительное окно инструмента «Шкала времени». На нем уже имеется первый кадр нашей анимации. Так как моя анимация будет состоять всего из двух кадров, то я создаю еще один кадр. Для этого надо нажать на иконку «Созданий копий выделенных кадров» (смотрите рисунок).
Теперь у нас два кадра с одинаковым содержимым. Нам же нужно, что бы содержимое кадров были разные, чтобы при показе каждого кадра менялся текст или картинка нашего анимированного баннера.
Сделайте клик на первом кадре, тем самым мы его выделяем. Теперь открываем окно с нашими слоями, и оставляем иконки глазика только рядом с теми, которые должны быть на кадре. В моем случае это надпись «Делаем анимированный баннер» и слой с фоном.
Далее выделяем второй кадр, кликнув по нему. Опять переходим в слои, и включаем те слои, которые должны быть на втором кадре. Лишние выключаем. В моем случае это опять фоновый слой и вторая надпись «В программе фотошоп».
В принципе наша анимация готова. Но если мы сейчас запустим его, нажав на кнопку воспроизведения под шкалой времени, то он будет прокручиваться с бешеной скоростью. Все из-за того, что по умолчанию, для каждого кадра, время показа стоит 0 сек.
Нам надо время показа каждого кадра изменить. Для этого нажимаем на треугольник, рядом со счетчиком времени, и в открывшемся списке выбираем то время, которое нам нужно. Я поставил 2 сек. для каждого кадра.
Теперь снова запускаем нашу анимацию, и смотрим результат. Если вас все устраивает, тогда можете переходить к сохранению нашего анимированного баннера.
Вот что получилось у меня по ходу этого урока.
Для более лучшего понимания как создать анимацию в фотошоп, я записал урок в видео формате. Смотрите и оставляйте свои комментарий 🙂
В следующий раз мы рассмотрим, чтобы при клике по нему можно было переходить на другие сайты.
На этом все! До новых встреч.
Из которого вы узнаете, как сделать анимированный GIF баннер для сайта . Кроме этого, в уроке будет рассмотрен процесс оптимизации графической анимации и вопрос установки баннера на сайт. Так что, будет интересно. Поехали.
Каждый день мы видим огромное количество всевозможных баннеров, не только в интернете, но и в реальной жизни. В любом городе можно встретить придорожные плакаты с рекламой – это тоже своеобразные баннеры. Реклама, реклама, куда не глянь реклама. Что же такое баннер? Давайте узнаем.
Что такое баннер?
Как гласит одна умная вики энциклопедия, то
Таким образом, баннер служит вроде «наживки» для клиента, чтобы тот кликнул по нему и попался «на удочку» . От сюда следует вывод, баннер должен притягивать наш взгляд и вызывать эмоцию. Но об этом чуть-чуть ниже.
Какие существуют размеры графических баннеров?
Существует бесчисленное множество разных форматов баннеров.
Приведу вам лишь неполный список стандартных размеров баннеров :
88×31, 100×100, 100×200, 120×60, 120×90, 120×240, 120×600, 125×125, 125×250, 160×60, 160×120,160×240,160×600, 240×400, 250×250, 336 x 280, 460×60, 728 x 90 и многие другие.
Как видите, размеров очень много — выбирай не хочу! . Кроме выше представленного списка вам не кто не мешает сделать баннер по своим неповторимым размерам.
Баннер – как психологический тригер
Реклама, реклама, но куда без нее. Реклама – как говорят, это двигатель торговли, и чтобы заставить рекламу работать, нужен эффективный баннер , такой, чтобы притягивал. Чтобы нам хотелось тот товар и услугу, что рекламирует баннер.
Как же сделать цепляющий баннер ? А это друзья — целая наука. Не верите? Тогда обязательно найдите и прочитайте книги Виктора Орлова (магия твоих текстов, суперзаголовок, сам себе копирайтер, волшебные слова). После прочтения которых, у вас не останется сомнений, как правильно составит рекламный текст для баннера.
Если описать кратно, то привлечение клиента идет несколькими шагами:
- Обозначаем проблему в вопросе (болит голова? Нужны деньги? Нужен сайт? и т.п.)
- Сообщаем, что ЕСТЬ волшебная таблетка
- Хочешь узнать больше? И призываем к действию (Купи, кликай, заказывай, смотри здесь, кликай по ссылке и т.п.)
Ни чего не напоминает? Ага, тот самый магазин на диване. Просто все построено на психологии человека и поэтому — это работает. Видите друзья, эта целая наука. Так что, кому интересно, бежим за книгами Вика Орлова в магазин или ищем в интернете.
А как эта наука применима к нашему уроку? Все просто, мы сделаем анимированный баннер , который будет состоять из трех разных слайдов. Каждый слайд – это отдельный шаг из выше представленного списка. Уловили момент? Уже готовы сделать свой цепляющий баннер? Тогда начинаем и и для этого нам понадобится всего лишь один .
Как сделать анимированный gif баннер в GIMP?
Шаг 1. Запускаем редактор GIMP и создаем новый проект.
Для данного примера я выбрал размеры баннера 468×60 пикселей. Вы же, можете выбрать и другой, какой вам приглянется больше всего.
Шаг 2. Как я уже упомянул выше, наш баннер будет состоять из трех кадров, т.е. мы должны с вами создать три отдельных слоя. Помните, как мы с вами делали ? Теперь, за место слоев с цифрами, у нас будут слои с текстовыми надписями, разницы в принципе не какой нет.
А чтобы один кадр показывался быстрее, а другой, например, последний кадр анимации, задерживался подольше, мы изменим время показа кадра, задав различные параметры у слоя.
Для создания текстовой надписи, выбираем инструмент «Текст» и создадим надпись
Шаг 3. Теперь нужно объединить текстовый слой с нижним белым. Щелкаем по верхнему слою правой кнопкой мыши и выбираем «Объединить с предыдущим».
Шаг 4. Вот так, первый кадр, обозначающий проблему, у нас готов. Идем дальше и создаем новый слой с белой заливкой нажав на пиктограмму «создания нового слоя»
Далее, вновь выбираем инструмент «Текст» и пишем надпись вида
Также, объединяем текстовый слой с белой подложкой.
На данный момент у нас уже есть два отдельных слоя в панели слоев.
Шаг 5. Создаем еще один белый слой и текстовый. В этот раз я выбрал цвет текста черный, а не красный.
Изменяем цвет переднего плана на синий.
Выбираем инструмент «Кисть» и закрашиваем синим цветом надпись «здесь». Вот что у меня получилось.
Объединяем слой с текстом и белым фоном, как это мы делали выше. В результате этих действий у нас готово три кадра, нашего будующего анимированного баннера . Также, для простоты можно переименовать слои, например вот так:
Шаг 6. Теперь, для пущего стимулирующего эффекта, добавим с помощью вот этих кистей , небольшой курсор руки под надписью «Здесь». Как устанавливать новые кисти в редактор гимп, можете .
Курсор, добавляем на самый верхний слой
Делаем gif баннер самостоятельно. Второй баннер для twich канала
Делаем gif баннер самостоятельно. Второй баннер для twich канала29 Ноябрь 2017
Автор: mastweb Рубрика: Web дизайн Комментариев нетЧтобы сделать gif баннер самому, нужно иметь на своем компьютере программу photoshop.
Во вторых надо знать, какие бывают размеры баннеров в пикселях и их значение КБайт, которое занимают на жестком диске. Обратимся к требованиям к баннерам на сайте яндекса.
- Во первых, размеры указаны до 150 КБ, ко всем форматам для формата gif.
- У баннера должна быть рамка в один пиксель, цвет должен не совпадать с фоном и непрозрачность больше 50 процентов.
- Баннеры не должны мигать, чтобы не отвлекать пользователя от страницы.
- Анимация не больше 15 секунд.
Будем придерживаться этих основных правил, остальные можно посмотреть на сайте yandex.
Содержание статьи
- 1 Делаем gif баннер формата 728 на 90.
- 2 Добавим смену кадров в фотошопе.
- 3 Добавляем три кадра в gif баннер.
- 4 Сохраним gif баннер.
- 5 Красивый статический игровой баннер для twich.
Делаем gif баннер формата 728 на 90.
Открываем программу фотошопа и создаем лист в формате 728 на 90.
Баннер будет по продаже видеокарты GeForce GTX 1080.
Чтобы нажали на баннер, есть смысл предложить дополнительную услугу как бонус.
Игра в подарок с хорошей графикой будет бонусом к покупке дорогой видеокарты.
- Зададим фон баннеру.
- Добавим кнопку с градиентом и внешним свечением. Gif баннер будет с правой стороны с призывом к действию.
- Добавим изображение игры Assassin’s Creed с хорошей графикой.
Изображение будет маской прямоугольнику, развернутому под углом. - Пишем зазывающий текст, который будет меняться три раза в интервале три секунды.
Добавим смену кадров в фотошопе.
- В photoshop в верхнем меню нажимаем окно и выбираем шкала времени. Внизу появится окошко.
- Нажимаем преобразовать в кадровую анимацию.
- Появилось окно с первым кадром.
Добавляем три кадра в gif баннер.
- Выставим показывать постоянно.
- Нажмем на параметр время и выставим любой интервал чередования.
- Для создания нового кадра нажимаем на иконку, создать копию выделенного кадра.
- В каждом кадре оставляем слой с разным текстом по очереди.
Сохраним gif баннер.
Все картинки для landing page и для баннеров сохраняются в программе photoshop только в формате сохранить для web, комбинация клавиш shift+ctrl+alt+s.
Файл сохраняется более компактно, и поисковый робот не ругается, что получилась большого размера картинка.
- Формат gif при сохранение.
- 256 цветов, чтобы не терять в качестве изображения.
Получившийся баннер.
Красивый статический игровой баннер для twich.
Сделаем красивый баннер, для твич канала.
- Находим кисть для фотошопа и добавляем. Делаем мазок по горизонтали кистью.
- Скачиваем png героя любой компьютерной игры. Добавляем на баннер.
- Скачиваем задний план от игры wow и делаем слой маску к рисунку кисти.
- За героем игры делаем красную тень, также кистью для фотошопа.
- Скачиваем красивый шрифт, например true lies и делаем надпись в свободной части фона.
Проверяем, что получилось.
Как создать анимированный GIF в Photoshop
НАЧИНАЮЩИЙ · 4 МИН
Узнайте, как использовать серию фотографий и кадровую анимацию для создания анимированного GIF.
Что вам понадобится
Получить приложение
Скачать Photoshop бесплатно
Получить файлы
Пример файла для практики (ZIP, 25,7 МБ)
Открыть в приложении
Открыть этот урок в Photoshop.
В этом уроке вы узнаете, как превратить серию фотографий в зацикленный анимированный GIF с помощью Photoshop.
Этот метод хорошо подходит для создания покадровой анимации с использованием серий фотографий, снятых с цифровой зеркальной камеры, компактной камеры или даже с мобильного устройства. В этом примере мы будем использовать серию фотографий, сделанных в режиме серийной съемки с iPhone. Загрузите и разархивируйте приведенные выше образцы ресурсов или используйте свою собственную последовательность фотографий.
Совет: Вы также можете использовать эту технику для создания анимированного GIF из короткого видео. Прокрутите вниз до Необязательного шага 1, чтобы узнать, как начать работу с видеофайлом.
Импорт серии фотографийОткройте Photoshop и выберите «Файл» > «Сценарии» > «Загрузить файлы в стопку».
Щелкните Обзор и найдите фотографии, которые хотите использовать. Удерживая клавишу Shift, выберите все файлы и нажмите «Открыть».
Нажмите OK, чтобы импортировать фотографии в файл с одним слоем.
Обратите внимание, что на панели «Слои» в правой части рабочей области создано несколько новых слоев.
Эти отдельные слои станут кадрами анимированного GIF.
Дополнительно: Импорт видеоЕсли вы начинаете с короткого видео, вам сначала нужно преобразовать кадры видео в отдельные слои. Выберите «Файл» > «Импорт» > «Видеокадры в слои»….
Найдите и выберите видеофайл, который хотите использовать, и нажмите «Открыть».
Нажмите «ОК», чтобы преобразовать видеокадры в однослойный файл.
Примечание. Возможно, Photoshop не сможет полностью импортировать слишком длинное видео. Используйте параметры в окне «Импорт», чтобы ограничить количество импортируемых кадров. Вы можете импортировать видео целиком или выбрать только его часть. Вы также можете ограничить количество импортируемых кадров заданным интервалом, например каждые 2 кадра.
Выберите «Окно» > «Временная шкала», чтобы открыть панель «Временная шкала».
Нажмите стрелку на кнопке в центре панели и выберите «Создать покадровую анимацию». Затем нажмите кнопку, чтобы создать новую анимацию кадра.
Преобразование слоев в кадры анимацииЩелкните значок меню в правом верхнем углу панели «Таймлайн». Нажмите «Создать кадры из слоев».
Это преобразует все слои на панели «Слои» в отдельные кадры анимации.
Нажмите кнопку Воспроизведение в нижней части панели «Таймлайн» (или нажмите клавишу пробела на клавиатуре), чтобы просмотреть анимацию.
Примечание: Если анимация воспроизводится в обратном направлении, снова нажмите значок меню временной шкалы и выберите Кадры в обратном порядке.
Зациклить анимацию Нажмите меню повтора в нижней части панели «Таймлайн» и выберите «Навсегда».
Это создаст зацикленную анимацию.
Нажмите кнопку Воспроизведение в нижней части панели «Таймлайн» (или нажмите клавишу пробела на клавиатуре), чтобы просмотреть анимацию.
Экспорт анимации в формате GIFВыберите «Файл» > «Экспорт» > «Сохранить для Интернета (предыдущая версия)»…
- Выберите «GIF 128 Dithered» в меню «Стили».
- Выберите 256 в меню «Цвета».
- Если вы используете GIF в Интернете или хотите ограничить размер файла анимации, измените поля «Ширина» и «Высота» в параметрах «Размер изображения».
- Выберите «Навсегда» в меню «Параметры цикла».
Нажмите кнопку Предварительный просмотр… в левом нижнем углу окна «Экспорт», чтобы просмотреть файл GIF в веб-браузере.
Нажмите Сохранить… и выберите место для сохранения анимированного GIF-файла.
Поздравляем! Вы только что создали свой анимированный GIF. Разместите его в Интернете, чтобы показать миру.
Обратите внимание, что вы также можете использовать эту технику для любого многослойного файла Photoshop.
Adobe Photoshop — Как изменить размер GIF-баннера для Google Ads?
спросил
Изменено 1 год, 8 месяцев назад
Просмотрено 410 раз
У меня есть следующая анимация, которая представляет собой простые формы и цвета, без градиентов или изображений. Но я не могу изменить его размер до 150 КБ (ограничение Google) Какие-либо предложения? Спасибо
- Adobe-Photoshop
- изменить размер
2
Слишком много кадров. Вам нужно будет уменьшить количество кадров и настроить задержку кадров, а также уменьшить количество цветов.
Это не должно сильно повлиять на качество анимации, хотя она не будет такой гладкой. Вот как:
Откройте GIF в Photoshop и убедитесь, что временная шкала видна
Выберите каждый кадр с нечетным номером, удерживая нажатой Ctrl и щелкая по ним, это займет некоторое время, так как имеется более 400 кадров
В меню временной шкалы выберите Удалить кадр
В меню временной шкалы выберите Выбрать все кадры
Измените задержку кадра, удвоив существующую задержку, с 0,03 до 0,06
Выполнить Файл > Экспорт > Сохранить для Интернета (предыдущая версия) , Выберите оптимизированный формат «GIF», установите меньшее количество цветов, скажем, около 20 или около того. Установите дизеринг на 0%
Проверьте предполагаемый размер файла в левом нижнем углу диалогового окна «Сохранить для Интернета». При необходимости отрегулируйте количество цветов, пока размер файла не станет меньше 150 тыс.
