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

Дек 26, 2012

Создаем анимированный gif баннер


Теперь обратим внимание на вкладку Layers. Она выглядит точно также как и в программе Photoshop. Именно с этой вкладкой мы сейчас и будем работать. Например, для того чтобы на баннере мигал текст, в первом кадре слой с текстом сделайте видимым. Перейдите к вкладке Animation и создайте второй кадр анимации, для этого сделайте дубликат первого кадра (кнопка “Duplicates current frame” внизу вкладки Animation). Теперь, для того чтобы текст мигал, сделайте слой с текстом во втором кадре невидимым (щелкните по изображению глаза в слое с текстов на вкладке Layers). Необходимо также указать длительность кадра, для этого нажмите на маленький треугольник под кадром с надписью 0 sec и выберите длительность кадра из раскрывшегося списка. Теперь при помощи кнопки “Plays/stops animation” вы можете уже посмотреть свою анимацию.

Если вы хотите добавить в ваш банер движение или изменение прозрачности, вам не нужно прорисовывать каждый кадр самому. Пусть вы хотите изменить положение какой-либо фигуры. Сейчас она находится в первоначальном положении. Создайте следующий кадр и, в этом кадре передвиньте фигуру. Теперь, при нажатии на кнопку “Tweens animation frames”, вкладки Animation будут созданы промежуточные кадры анимации. После нажатия на эту кнопку откроется вкладка Tween, где в строке Frames to Add необходимо указать желательное количество промежуточных кадров. Таким же методом можно изменять прозрачность фигур. На этих, созданных программой ImageReady кадрах, необходимо, управляя видимостью слоев, показать или скрыть остальные слои, чтобы все соответствовало сценарию.

Когда все необходимые кадры созданы, приступим к оптимизации и сохранению баннера в формате gif. Перейдите на вкладку 4-UP, где вы будете наблюдать за качеством изображения и размером будущего gif файла. Для оптимизации используется вкладка Optimize. На этой вкладке выберем тип файла GIF. Нельзя забывать о том, что баннер, для того чтобы он был принят баннерообменными сетями, должен быть легким. Например, вес баннера размерами 468х60 не должен превышать 15 Kb. Исходя из этого, выберите на вкладке Optimize такое количество цветов, чтобы при хорошем качестве изображения вес баннера был как можно меньшим. Затем, обратившись к главному меню, сохраняем баннер (File- Save Optimized As…). Все — вы создали анимированный gif баннер.
Предыдущая   -    Страница: 2 из 2

Навигация: 1  2  

Другие статьи по теме:

- Рисуем баннеры
- О том, как делаются баннеры
- Как сделать эффективный баннер
- Про баннеры
- Создаем анимированный gif баннер

На российский рынок приходит крупнейший продавец стоковых изображений - Depositphotos.
Издательство "ИндексМаркет" анонсирует книгу Александры Саньковой - под названием "23"
Российская компания создала первый сайт по дизайн-исследованиям, так как тема дизайна не достаточна развита в России
     Баннеры | Советы web-дизайнеру | Flash | Html и CSS | Уроки Photoshop | Юзабилити
2003-2016 © sredaboom.ru
карта сайта обратная связь на главную