Баннер своими руками на новый год

Кстати, можно сделать такую длинную надпись вдоль лестничных пролетов или в коридоре

(«С днём Знаний!», «С Днём Учителя!», «С Новым Годом!»…..)

Картинки на таком «баннере» можно не рисовать, а просто вырезать готовые и приклеить:)))

Видео: Рекламный баннер своими руками — 04.02.2022

Нестандартные металлоизделия. Ремонт рекламного баннера.

7 месяцев назад

Подложка под каркасный бассейн. Рекламный баннер и экструдированный пенополистирола.

7 месяцев назад

Применение б.у. ПВХ баннера. Сварка ткани, установка люверсов в домашних условиях. PVC banner.

10 месяцев назад

Кровля из рекламного БАННЕРА. Что стало за два сезона?!

1 год назад

Как сшить шоппер своими руками ? Эко-сумка.

1 год назад

Постройка Балагана в лесу своими руками. Часть первая…

1 год назад

Как сделать БАННЕР для ФОТОЗОНЫ

1 год назад

Как сделать баннер? Рекламные баннеры своими руками с нуля. Уроки онлайн.

1 год назад

Рекламный баннер своими руками, который приводит клиентов через соцсети

1 год назад

Круглый баннер своими руками, круглые тумбы, круглая фотозона разнокалиберная гирлянда из шаров

Трансляция закончилась 1 год назад

✅ Как сделать вывеску? ЗА 4 ЧАСА | Световая вывеска своими руками (signboard) | DIY наружная реклама

1 год назад

Изготовление световой вывески своими руками| Пошаговая инструкция от Ситилайт

2 года назад

Штендер своими руками. Самый простой штендер для рекламы.

2 года назад

Как сделать рекламный баннер (БЫСТРЫЙ СПОСОБ)

3 года назад

Защита направляющих своими руками. «Гармошка» из рекламного баннера.

3 года назад

Как сделать рекламный баннер своими руками. Основные правила создания рекламного баннера

3 года назад

Световой короб своими руками

5 лет назад

Наружная реклама своими руками. Объемные световые буквы с внутренней подсветкой

5 лет назад

Урок 4. Открытка своими руками

6 лет назад

Объемные буквы своими руками. Виды, устройство, цена основного вида наружной рекламы

6 лет назад

Всем привет дорогие читатели! В сегодняшнем уроке я покажу вам как реально сделать анимированный gif баннер для сайта в фотошопе cs5 своими собственными силами без проблем.

Такой баннер вы можете применить где угодно, будь-то размещая его для рекламы на стороннем сайте, или, скажем, как тизер в тизерных сетях.

Применение всегда одно – привлечь внимание посетителей, чтобы они перешли на вашу страницу.

Мы будем создавать стандартный баннер, размеры которого 468×60 пикселей. Пример того как сделать рекламный баннер я выкладывал в этой статье.

Итак начнем создавать новый документ Файл — > Новый. Вы можете не придерживаться стандартов и выбрать любые размеры длины и высоты или можете выбрать размер из выпадающего списка пресетов фотошопа.

Если вы хотите заказать профессиональный дизайн для своего баннера, то можно воспользоваться услугами сайта [urlspan]http://www.20dollarbanners.com/[/urlspan] За приемлемую цену они исполнят любую вашу идею. Единственный минус, вы должны отлично знать английский, чтобы вести с ними переписку, или обратиться на сайт fl.ru и выбрать исполнителя там.

Перво наперво что мы должны с вами сделать это задать с вами обводку вокруг баннера в 1 пиксель.

• Создаем новый слой, называем его «Рамка»
• Нажимаем CTRL+A, чтобы выбрать все. Затем идем в пункт Редактирование — > Обводка. Применяем следующие настройки:

Длина: 1 пиксель, цвет: черный, расположение (Location): по центру, режим смешивания (blendingmode):нормальный, Непрозрачность (Opacity): 100%

Это дает нам четкую однопиксельную границу вокруг нашего баннера. Теперь все последующие слои будут накладываться друг на друга, но самый главный слой всегда будет оставаться видимым. Что мы и сделали.

Двигаемся дальше. Мы будем создавать наш анимированный gif баннер для сайта tutorialwiz.com. Перейдя на него вы увидите много уроков по фотошопу. В основе будет лежать картинка логотип, размещенная справа.

Теперь нам нужно воспользоваться инструментом ellipse shape tools (попросту Овал и придать ему черный цвет), он будет находиться справа. В этой области будет помещаться наш рекламный текст. Ее надо сделать большой, примерно в половину от общего размера самого баннера.

Теперь мы должны задать цвет- градиент этой овальной области. Идем в раздел меню Layer (Слои) -> Стиль слоя — > Градиентная заливка. Я использую настройки по умолчанию следующих цветов:

Также применяю небольшую внутреннюю тень. Просто измените непрозрачность до 20%

Дальше мы создаем еще одну скругленную область, которая будет располагаться под нашим логотипом. Примените градиентную заливку следующих цветов:

Сделайте обводку в 2px овальной области. Там же, где находится логотип, я делаю заливку фона светло-серым цветом, чтобы выглядело не так плоско.

Читайте также заметку — произвольный сменный фон для сайта WP

А сейчас приступаем к самой интересной части дизайна нашего баннера – анимации.

Чтобы вы имели представление в нашей основной области будет размещено два блока с текстом, т.е они будут попеременно мигать, сначала один, потом другой, это и будет анимацией баннера.

С помощью инструмента «Текст» создайте любой произвольный текст, который бы уместился в границы нашей области.

Теперь скрываем этот слой с текстом и добавляем второй слой, используя уже другой текст, добавляя его туда, где был первый.

Выбрав второй слой с текстом мы получим следующее:

Теперь мы уже полностью готовы к анимации, переключимся в режим Image Ready, кликнув на соответствующую кнопку.

В image Ready вы увидите следующую палитру слоев для анимации, как показано ниже:

Кликните на иконку «Новый Фрейм» (или новая рамка), тем самым вы продублируете выбранный слой.

Начиная со 2 выбранного слоя, выберите слой с видимым текстом из палитры слоев и переместите его на пикселя (нажмите стрелку вверх дважды).

Если вы взглянете на первый кадр и второй кадр, то заметите их некоторое отличие друг от друга.

Теперь дублируем последний кадр, а затем используем стрелку вниз и двигаем текстовой слой примерно на 10 пикселей и установим непрозрачность слоя до 70%

Снова дублируем последний фрейм, перемещая текстовой слой вниз на 15 пикселей и установим непрозрачность слоев на 40%

Теперь работаем со второй текстовой областью.

Скрываем предыдущую текстовую область и перейдем к другому слою, сделав его видимым. Двигаем его также как и предыдущий, т.е на 10 пикселей и делаем непрозрачность в 40%

Клонируем последний кадр.

Перемещаем слой этот слой с текстом приблизительно  до 15 пикселей вверх и устанавливаем непрозрачность в 70%

Снова клонируем последний фрейм.

Сейчас двигаем текстовой слой выше примерно на 10 пикселей и устанавливаем непрозрачность анимированного gif баннера на 100%

Клонируем фрейм.

Теперь перемещаем текстовую область ниже на 2 пикселя.

А сейчас нужно все повторить, начиная с 8 шага, спустив этот слой, а другой слой вновь поднять.

Если вы все сделали правильно, то у вас должно получиться примерно 14 кадров.

В нижней части каждого фрейма вы увидите «0 сек». Это время задержки между кадрами.

Установите на все эти кадры задержку в 0,05 или 0.1, в зависимости от того, с какой скоростью вы хотите, чтобы работал баннер.

Чтобы установить значение в 0.05 нажмите на стрелочку рядом с 0 секунд и выберите «Другое», затем введите нужную цифру.

В нижней части анимационной палитры, есть панель управления с набором кнопок, для того чтобы просмотреть результат вашего труда нужно нажать на клавишу проиграть >

Как вы видите, текст прокручивается очень быстро, настолько быстро, что его просто невозможно успеть прочитать. Значит нужно установить значение задержки в 2 секунды, тогда результат у вас будет примерно таким.

проделывается с 8 шага).

Если для вас урок показался трудным, то ниже я прикрепляю исходник с баннером.
[sociallocker id=»3259″]

Скачать Исходники

[/sociallocker]
На этом все. В этом уроке я хотел показать как на простом примере чисто технически сделать анимированный gif баннер для сайта в фотошопе, а уже дизайн и стиль вы продумываете самостоятельно, по крайней мере, додумайте лучше, чем есть в этом примере. Спасибо за внимание.