Категории раздела
Начало работы в Photoshop [1]
Здесь написано про использывание этой программы.
Панель инструментов Adobe Photoshop CS3 [1]
Текст в Photoshop (Type) [0]
Использование кривых в Adobe Photoshop [0]
Каналы в Photoshop [0]
Работа с каналами в Adobe Photoshop [0]
Корректируем тона при помощи уровней [0]
Работа со слоями в Photoshop [0]
Маски в Adobe Photoshop [0]
Cлои в Photoshop [0]
RAW в Adobe Photoshop [1]
Изменение размеров фотографии [1]
Увеличение фотографии без потери качества [1]
Урок создания банера в фотошопе [1]
Создаем анимированный gif баннер [1]
Устанавливаем кисти в Photoshop [1]
Автоматизируем действия... [1]
Корректировочные слои [1]
5 простых шагов к улучшению цвета [1]
Обработка фотографий для интернет [1]
Сложная замена фона на фотографии [1]
Создаем свою кисть для фотошопа [1]
Раскрасим черно-белую фотографию [1]
Восстановление фотографий [1]
Удаляем синюю дымку [1]
Рисуем настенное граффити в Photoshop [1]
Составляем коллаж [1]
Полярные координаты (рисуем солнце) [1]
Удаление линии загара [0]
Использование стилей слоя (часть 1) [1]
Использование стилей слоя (часть 2) [1]
Использование стилей слоя (часть 3) [1]
Режимы наложения (Blending Modes в фотошопе) [1]
Вырезаем объект [1]
Вырезаем объект (способ №2) [1]
Выделение в Photoshop [1]
Вырезаем надпись из фона [1]
Меню сайту
Статистика

Total online: 1
Guests: 1
Users: 0
Календарь
«  March 2010  »
SuMoTuWeThFrSa
 123456
78910111213
14151617181920
21222324252627
28293031
Мини Чат
500
Photo
Опрос
Какого производителя фотоапаратов вы больше любите
Total of answers: 609
Поиск
Печать страницы
Формальность
Deposit Files


Wednesday, 26.07.2017, 03:33MainRegistrationLogin
Black-and-white photo...
Welcome Guest | RSS
Main » 2010 » March » 25 » Создаем анимированный gif баннер
14:21
Создаем анимированный gif баннер
Создаем анимированный gif баннер

В этой статье я познакомлю вас с принципами создания анимированных gif баннеров при помощи программ Photoshop и ImageReady. Желательно, чтобы вы уже имели некоторый опыт работы с Photoshop, т.к. данная статья в основном посвящена работе с программой ImageReady.
 

Первое, что необходимо сделать — это разработать сценарий баннера, т. е. решить каким будет фон, что именно будет двигаться. А когда вы все это представили себе, создайте в Photoshop файл с размерами равными размерам баннера. Теперь создаем фон баннера. Он не будет изменяться при анимации. Все остальные элементы баннера, которые будут принимать участие в анимации — текст, изображения поместим в отдельные слои. В самом верхнем слое поместите рамку баннера.
Теперь можно приступать к созданию анимации. Для этого, нажав самую нижнюю кнопку основной палитры программы Photoshop ("Jump to ImageReady” ) или нажав комбинацию клавиш Ctrl+Shift+M, перейдите в ImageReady. Эта программа откроется с уже загруженным в нее баннером.
Программа ImageReady напоминает программу Photoshop, но у нее есть и собственные вкладки. При создании анимации используется вкладка Animation. Созданный нами файл уже помещен в первый кадр вкладки Animation, его увеличенное изображение вы можете видеть на вкладке Original.
 
 

Теперь обратим внимание на вкладку 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 баннер.
Удачи в создании банеров!
Category: Создаем анимированный gif баннер | Views: 1962 | Added by: ASTRO | Rating: 3.0/1
Total comments: 0
Only registered users can add comments.
[ Registration | Login ]

Make a free website with uCozCopyright MyCorp © 2017