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

Этап 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:

Ulead GIF Animator или как создать анимацию. Объясню на пальцах.

Иногда простые, казалось бы вещи, нас ставят в тупик. С подобной проблемой  я как-то столкнулась, когда мне захотелось разнообразить свой аватар в социальной сети.
Вообще в процессе нашего развития в сети Интернет, у нас всё чаще и чаще появляется потребность что-либо изменить, улучшить. Например: аватар, поздравительную открытку, а может и вовсе создать рекламу своей странички? Как оживить «мёртвую» картинку? Хорошо конечно, кто владеет всеми навыками фотошопа, а кто только осваивает? А кто и вовсе попробовал и не получается. Как в таком случае быть? Хочу представить самую простую в использовании программу: Ulead GIF Animator 5.

СКАЧАТЬ

1. 

   Кадр => Правая мышка => Добавить текст => Эффект (управление кадром)

Сегодня пойдёт речь о создании стандартных текстовых анимации. Для этих целей служит специальная вкладка: Frame / Add banner text (ctrl-alt-b).
 

(Рис. 1) (Рис. 2) (Рис. 3) (Рис. 4)

1. Первое что следует сделать - это ввести нужный Вам текст (Рис. 1) в пустое белое текстовое окно. Когда текст введён из выпадающего списка "Font" можно выбрать понравившийся шрифт, его размер в списке "Size", цвет черном маленьком окошке (Между Font и Shadow), начертание шрифта (В - жирный, I - курсив), ориентацию: по левому краю, по правому или по середине, также в этом окне можно настроить отступы от краёв с помощью счётчиков: line spacing, baseline shift, character spacing. 1.а. Если Вы в первом диалоговом окне нажмёте на кнопку "shadow" то активируется окно настроек тени шрифта (Рис. 2). Синий квадратик означает цвет тени, квадратики с разными направлениями - стиль и направленность тени. С помощью нижних счётчиков можно настраивать отклонение тени по оси X, Y; размер, прозрачность, разброс тени. (Поэкспериментируйте)   2. Когда текст напечатан и выбраны к нему различные настройки можно поэкспериментировать с эффектами. Для этого специально служит вторая вкладка диалогового окна "Effect"(Рис. 3). Здесь есть возможность настройки только двух сцен: начальной (Enter scene) и конечной (exit scene). К обоим сценам можно применить ряд эффектов: Scroll left Выезд слева (Как в бегущей строке) Scroll right Выезд справа (Как в бегущей строке) Scroll top Выезд наверх с низу Scroll Bottom Выезд вниз с веху Fade Постепенное появление Still Настройки анимации по умолчанию (Т. е. так, как было сделано Вами). Эффекты не применяются Drop Поочередное приземление букв в свободном порядке Merge vertically Слияние букв текста в слово (Одна половина движется сверху, а другая снизу) Merge horizontally Слияние букв текста в слово (Одна половина движется слева, а другая справа) Zoom in Появление текста с постепенным увеличением Zoom out Появление текста с уменьшением Zoom in (Rotate) Появление текста с увеличением и вращением Zoom out (Rotate) Появление текста с уменьшением и вращением. Можно получит совсем неожиданную картинку, если применять различные эффекты для начальной и конечной сцен. Также в этой вкладке можно редактировать качество анимации. Для улучшения плавности увеличивают количество кадров("Frames"), но это приводит неизбежно к увеличению объёма файла   3. Вкладка "Frame control". Назначение: изменение продолжительности кадров анимации   4. Вкладка "Neon". (Рис. 4) Назначение: применение свечения (Неона) к тесту. Есть возможность настройки размера, цвета и направления свечения.

Будем делать вот такую аватарку из такой

Заранее я в фотошопе изменила ее размер из 98 сделала 150 ...После немного поиграла резкостью умной...
Как все было готова я сохранила в Gif.

И открыла файл в Ulead GIF Animator

Так как там все на русском почти языке трудностей не должно быть...
Находим на верху Видеоэффекты -> 3D ->Gate-3D...

Откроется окно... где вы увидете видеоэффекты... Находим... Turn Page-Peel Жмем на эту надпись...

Откроется окно я пометила от 1 до 4х... Можете поиграть там с задержками кадра, цветом... Как убедитесь, что вот оно к чему вы шли смела жмите ок... Увас должно будет получиться вот так как тут...

Там я пометила для вас просмотр и где сохранять вашу работку...
Я сохраняю свою работу на рабочем столе... И после загружаю ее Тут, чтобы показать вам...

Вот что у меня вышло...