Это цитата сообщения lagrimosa Оригинальное сообщение
Как сделать анимированный GIF баннер, Ulead GIF Animator 5
Для продвижения своего сайта нужны баннеры. Их можно размещать бесплатно в блогах своих знакомых или на коммерческой основе на сайтах с высокой посещаемостью. Создание баннера можно заказать в профессиональной веб студии, а можно сделать самому.
В этой статье мы научимся делать анимированные GIF-баннер средней сложности с нуля. Для этого нам понадобится немного времени и терпения, т.к. шедевр анимации у новичка за час не получится никак. Из программ мы будем использовать Adobe Photoshop CS3 – для подготовки кадров баннера и Ulead GIF Animator 5 – для создания из готовых кадров анимационного ролика в формате GIF. Если вы не знаете, где взять эти программы, рекомендую прочитать статью Чем бесплатно скачать любую информацию.
В результате выполнения этого урока мы получим вот такой баннер:
Все материалы этого урока, включая фотошоповский файл PSD со слоями и триал программы Ulead GIF Animator 5, можно скачать по ссылке:
Скачать с depositfiles
Этап 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-баннер в конечном итоге выглядит так:
Код для размещения баннера gif на своем сайте или блоге:
|
1
2 3 4 5 6 |
<a href="http://www.gravitacia.com.ua" target="_blank">
<img src="http://www.gravitacia.com.ua/gravitacia/gravitacia-web-design.gif" border="0" title="Создание веб-сайтов для вашего бизнеса" alt="Создание веб-сайтов для вашего бизнеса" /> </a> |
Как видите, все совсем не сложно. Конечно, функциональность программ, которые мы использовали для создания кадров баннера и их анимации, гораздо шире. После создания пары простеньких баннеров, вы можете экспериментировать и сделать более сложные и красивые рекламные ролики. Инструменты и знания у вас уже есть, осталось запастись временем и желанием сделать баннер для своего сайта или блога.
http://www.web-article.com.ua/2008/sdelat-gif-banner-samomu/