Пятница, 15.01.2021
Рамка-25 января День студента PNGРамка-25 января День студента PNGРамка-25 января,Татьянин день PNGРамка-Открытка-С рождеством христовым PSDОткрытка-Рамка-С Рождеством PNGРамка-Для девочек PNGОткрытка-рамка-С новым годом! PNGРамка-Воздушный шарик PNGОткрытка-рамка-С новым годом! PNGРамка–Новый год! PNGРамка для фото - Новогодняя с розами PNGКлипарт-Новогодний 8 штук PNGРамка-Улыбка Деда Мороза PNGРамка-Да здравствуют подарки! PNGРамка-2 сердца и цветы PNGРамка-Ариель и Жасмин PNGРамка-Открытка-С новым годом PNGШаблон–Зимняя фея PNGРамка-Зима под снежной бахромою PNGРамка-Снегурочка PNGРамка-Зимушка-зима PNGРамка – Новогодний блеск PNGШаблон-Снегурочка PSDОткрытка-Рамка-С Рождеством Христовым PNGШаблон-Девушка зима PNGРамка-Год бычка PSDОткрытка-Рамка-Снегурочка и бык PNGКалендарь-Бык PSDКалендарь-Японский PSDРамка-Зима PNGШаблон-Девочка и снег PNGШаблон-Девушка в меховой одежде и шапке PNGКалендарь на 2020 год PNGРамка-Голубь плавно приземлился PNGКалендари на 2021 год JPGРамка-Вот и лето PNGКалендарные сетки на 2021 год PSDРамка-Микки Маус и Дональд Дак PNGРамка - Смотри на мир счастливыми глазами PNGРамка-Скажи вирусу - нет! PNGРамка-Фото и цветок PNGРамка-Атласная PNGРамка-Ты моя киска PNGРамка-Неповторимость белых лилий PNGРамка–Кошка дружит с обезьяной PNGРамка-Хорошее настроение PNGРамка-Праздник PNGОткрытка-С днём рождения PNGФон-Скрап набор - Rose EleganceРамка-Ветер PNG
Меню сайта
Реклама
Новости

Открытка-С днём рождения PSD

Рамка-Родовое дерево PNG и PSD

Рамка-Сборник рамок-Детский альбом для мальчика PNG

Рамка-Лесные жители PSD

Рамка-Любимой бабушке PSD

Шаблон-Немецкая форма PSD

Костюм-Шаблон-Дед мороз и Снегурочка PNG

Фон-Свадьба PSD

Рамка-Фотоколлаж PNG

Шаблон-Сборник шаблонов со знаменитостями(превьюшки) PNG

Открытка-С днём свадьбы PSD

Этикетка-Шампанское Юбилейное PNG

Рамка-Для двоих PNG

Клипарт-Воздушные шарики PNG

Этикетка-Пиво PSD

Шаблон-Грамота 2 штуки PSD

Рамка-Полароид PNG

Рамка-Доктор Айболит PNG

Виньетка-Наш детский сад PSD

Этикетка-Коньяк Сергей PSD

Этикетка-Вино PSD

Рамка-Розы PSD

Виньетка-До свидания 1 класс PNG

Рамка-С днём рождения PNG

Рамка-Пчела Майя PNG

Этикетка-Шампанское-С днём рождения PSD

Шаблоны-Сборник Логотипов PSD

Шаблон-Грамота PSD

Этикетка-Водка именная PSD

Рамка-Подснежники к 8 Марта PSD

Открытка-С днём рождения PSD

Костюм-шаблон-Адмирал PNG

Рамка-Ромашки и солнце PNG

Рамка-Разыскивается PNG

Этикетка-Коньяк Валера PSD

Этикетка-Водка особая PNG

Рамка-До свидания детский сад PNG

Открытка-С днём рождения PNG

Шаблон-Грамота PNG

Этикетка-Шампанское свадебное PSD

Клипарт-Мультики PSD

Открытка-Свадебное приглашение PSD

Костюм-Робокоп-Робот-Полицейский PNG

Рамка-Для двоих PSD

Рамка-Мама,я родилась PNG

Этикетка-Коньяк Короткевич PSD

Рамка-Подарки PNG

Шаблон–Снегурочка PSD

Шаблон-Женщина и меч PNG

Рамка-Наш класс PNG

Этикетка-Коньяк Валера PSD

Рамка-Фиолетовые цветы PNG

Рамка-Книгу первую мою берегу я и люблю PNG

Рамка-Последний звонок PNG

Открытка-Приглашение на День Рождения PSD

Рамка-Мама я родился PNG

Рамка-Для влюблённых PNG

Этикетка-Шампанское Свадебное и Юбилейное PSD

Рамка-Золотая рыбка PNG

Костюм-Шаблон-Солдат PNG
Главная » Статьи » Уроки

Как самому сделать GIF баннер.
Если вы скачали программу Ulead GIF Animator 5, установили и открыли программу Adobe Photoshop CS3, самое время читать статью.Подробная пошаговая инструкция этой статьи позволит даже новичку создать свой качественный и красивый баннер. Для этого достаточно нарисовать кадры (последовательность изображений GIF) в Фотошопе и затем собрать их программой Ulead GIF Animator 5. Результатом будет также картинка GIF, но уже анимированная. И ее можно с полной уверенностью называть GIF-баннером.

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

В этой статье мы научимся делать анимированные GIF-баннер средней сложности с нуля. Для этого нам понадобится немного времени и терпения, т.к. шедевр анимации у новичка за час не получится никак. Из программ мы будем использовать Adobe Photoshop CS3 – для подготовки кадров баннера и Ulead GIF Animator 5 – для создания из готовых кадров анимационного ролика в формате GIF. Если вы не знаете, где взять эти программы, рекомендую смотреть раздел полезные программы.
В результате выполнения этого урока мы получим вот такой баннер:

Этап I: Подготовка кадров баннера в программе Adobe Photoshop:

1. Выбираем размер баннера, который мы будем делать (в примере ширина баннера 468 пикселей, высота 60 пикселей). Определяемся с примерным сценарием баннера: что и как будет двигаться. Ищем в интернете нужные картинки, готовим логотип компании и другую графику, которую вы хотите вставить в свой будущий баннер.

2. Создаем в Фотошопе файл размером 468х60. Добавляем в него всю нужную графику, логотип, размещаем в нужном месте видимой области баннера, выравниваем. Чаше всего в баннерах делают тонкую рамку на границе видимой области, некоторые сайты даже не принимают рекламные баннеры, не ограниченные рамкой.

Каждый элемент располагаем на отдельном слое. Желательно группировать слои в папки, чтобы не путаться, какая графика к какому кадру относится. Подготовив один кадр, скрываем его слои для удобства и на освободившемся месте готовим другой кадр. Получится примерно так:

3. После того, как все кадры созданы и распределены по слоям в фотошоповском файле, нам нужно сделать отдельные кадры, которые мы будем анимировать. Для этого мы будем скрывать ненужные в данном кадре слои и сохранять в формате GIF каждый кадр по очереди, начиная с первого, в отдельную папку.

1 кадр: Спрятав все слои, кроме самого нижнего, сохраним фон нашего баннера:
2 кадр: Сохраняем файл с логотипом, но без надписи «Веб-студия»:
3 кадр: Сохраняем кадр логотипа:
4 кадр: Прячем все слои, кроме слоя с арбузом и фонового. Сохраняем предпоследний кадр анимации:
5 кадр: Делаем видимым еще и слой со слоганом баннера. Сохраняем пятый файл в gif:

В результате мы создали 5 статических GIF-файлов, из которых сейчас сделаем один файл GIF-анимации.

Этап II: Создание анимированного GIF-баннера из подготовленных кадров с помощью программы Ulead GIF Animator:

1. Открываем Ulead GIF Animator 5. Запускаем Мастер анимации (4й пункт сверху в меню Файл). Выбираем размер баннера и нажимаем Далее:
2. В новом шаге мастера анимации добавляем созданные нами ранее 5 кадров баннера. Для этого нажимаем на кнопку «Добавить изображение» и с помощью Shift выделяем за раз все файлы и добавляем их в Мастер:
3. Работа Мастера анимации почти завершена. Осталось выбрать скорость смены кадров. Можно не менять предложенную по умолчанию скорость в четверть секунды (25 мс), позже мы все равно сделаем для каждого кадра свое время задержки. Нажимаем Далее и завершаем работу Мастера анимации.

4. Попадаем в основное окно программы. Пять кадров добавлены, теперь нужно установить их в нужной нам последовательности, каждому кадру выставить свое время задержки и продублировать несколько кадров, чтобы добиться «мигания» баннера.

Для того, чтобы сделать копию кадра, нажмите правой кнопкой мыши на нужном кадре и выберите в контекстном меню пункт Дублировать кадр. Аналогично можно удалять кадры, менять его свойства, выбирая нужный пункт контекстного меню:
Чтобы изменить время показа кадра баннера, нужно дважды кликнуть на кадре и в самом верхнем поле появившегося окна вписать нужное время (100 мс =1 секунда).

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

5. После смены последовательности кадров, дублирования и экспериментов со временем показа, наша линейка кадров будет выглядеть вот так:

6. Для того, чтобы просмотреть, как баннер будет выглядеть в анимированном виде, можно воспользоваться вкладкой Предосмотр. Если все устраивает – сохраняем баннер в формате GIF: Ctrl+Shift+S.

7. Баннер готов. Может открыть его любым браузером или программой просмотра графики. Сделанный нами GIF-баннер в конечном итоге выглядит так:
Как видите, все совсем не сложно. Конечно, функциональность программ, которые мы использовали для создания кадров баннера и их анимации, гораздо шире. После создания пары простеньких баннеров, вы можете экспериментировать и сделать более сложные и красивые рекламные ролики. Инструменты и знания у вас уже есть, осталось запастись временем и желанием сделать баннер для своего сайта или блога.
Категория: Уроки | Добавил: Admin (14.06.2009)
Просмотров: 27401 | Рейтинг: 0.0/0
Всего комментариев: 0
Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]


Поиск
Опрос
Какие новости вам интересны!!!
Всего ответов: 553
Реклама
Новости

Календари на 2021 год JPG

Календарные сетки на 2021 год PSD

Иконки-Социальные иконки и логотипы PNG

156 Вариантов градиента для фотошопа GRD

Стили для фотошопа - Жар PSD

Шаблон-Моя новая тачка PNG

Иконки-Смайлы PNG ICO

Рамка-Скажи вирусу - нет! PNG

Иконки-Сборник иконок 75 штук PNG

Иконки-Пингвины PNG

Календарь на 2020 год PNG

Иконки-Социальные сети PNG SVG AI EPS

Иконки-Иконки для Веб-дизайна PNG

Иконки-Иконки для Instagram PNG

Иконки-Животные PNG SVG
EduSt.ru-всё для фотошопа и ваших фотографий. 2021