МИР ВЕБМАСТЕРА
Меню сайта
Категории каталога
ВебМастеру [111]Раскрутка сайта [122]Уроки Photoshop [44]Who is who в Инете [21]
PC [13]Разное [0]CopyPaste [4]
Главная » Статьи » Уроки Photoshop

Создание анимированного баннера с помощью Adobe Photoshop и ImageReady

это бомба $550 дают просто так

  Создание анимированного баннера с помощью Adobe Photoshopи ImageReady

Я как-то обнаружил, что в Сети нет нормальных статей (руководств) о создании баннеров. Признаюсь, я искал только в рунете, западные источники даже не пытался посмотреть. Кроме того некоторые мои друзья спрашивали о том, как делаются баннеры, и мне некуда их было отправить. Такой жуткий пробел стоит заполнить. Надеюсь, что данная статья (руководство) кому-нибудь поможет. После появления на рынке графических программ редактора от компании Adobe — Photoshop'а версии 5.5 со встроенным продуктом той же компании — ImageReady 2.0, все программы создания анимированной графики безнадежно отстали. Дело в том, что до этого процесс создания баннера (а баннер и есть анимированная графика, неанимированные баннеры в данном руководстве не рассматриваются) обычно сводился к следующему: создание в Photoshop'е (или любом другом графическом редакторе) файлов, которые впоследствии станут кадрами баннера; компоновка этих кадров в один gif (в анимирующей программе, например, Animagic, Ulead GIF Pro, GIFLine Pro, GIF Movie Gear и другие; таких программ очень много, достаточно зайти в соответствующий раздел любого сайта с программами); оптимизация (тут тоже применяются другие программы, как правило оптимизационные способности аниматоров весьма слабы). Три ступени, причем каждая из них требовала отдельной программы, так как хорошо все эти процессы одновременно выполнять не умела ни одна программа. Хотя надо признать, что два из трех некоторые программы осилили. Например, пакет PaintShop Pro от Jasc и его аниматор Animation Shop превосходно работает с анимацией и созданием сложной графики (пакет в общем-то является попыткой Jasc догнать Adobe Photoshop), но оптимизация в этой программе стоит на первобытном уровне. Данная статья описывает процесс создания баннера с помощью Adobe Photoshop'a и ImageReady, версии 5.5 (последняя 6.0) и 2 (3) соответственно. Что нужно иметь? Голову, компьютер, Photoshop версии 5.5 и выше (ImageReady входит в стандартный комплект установки Photoshop'а 5.5 и выше); иметь мало, нужно еще и владеть. Статья рассчитана на людей с минимальными знаниями Photoshop'a и ImageReady. Создание баннера — в нашем случае формата 468 пикселей на 60 — начинается в Photoshop'е. На рисунке 1 показано диалоговое окно создания нового файла (команда file\new).


рисунок 1

В соответствии со старыми традициями ставится рамка в один пиксель, как видно на рисунке 2 она находится в отдельном слое, хотя это не необходимо. Принято считать, и мне кажется не без оснований, что рамка в баннере придает ему некоторую аккуратность.


рисунок 2

Начинаем рисовать элементы нашего баннера. В данном случае я собираюсь нарисовать нескольких абстрактных человечков, один из которых будет резко отличаться по цвету от остальных, также я планирую создать надпись «design different» — подражание слогану компании Apple Macintosh «Think different». Я хочу, чтобы и надпись и оранжевый человечек мигали. Человечков рисую в данном случае попиксельно (то есть увеличиваю изображение до 1600% и заливаю краской каждый пиксель вручную). Это даёт колоссальную экономию в размере файла. Если на рисунке 3 голова человечка имеет по краям области светло-серого — это хорошо видно при сильном увелечении, то в последствие я переведу вручную все светло-серые пиксели в один цвет и сделаю голову более примитивной, на качестве прорисовки это не отразится, зато даст экономию в размере файла.


рисунок 3

Обратите внимание, на рисунке 4 есть выделенная пунктиром область. Она будет залита белым в отдельном слое Layer 2, он «выше» текста и за счет включения/выключения этого слоя получиться мигание слова «different». Аналогичная ситуация с мигающим человечком, оранжевый находиться в слое yell .


рисунок 4

Как видите баннер готов. Он еще не мигает и никак не оптимизирован. Сохраняем в его формате psd и нажимаем на значок ImageReady, значок подсвечен на рисунке 5. После чего Photoshop автоматически запустит ImageReady, причем наш psd файл уже будет открыт в ImageReady.


рисунок 5

На рисунке 6 мы видим небольшую область окна ImageReady. Попробую пояснить. Внешне ImageReady на 80% похож на Photoshop. Но его основная область работы — веб, поэтому у него свои выкладки. Например, в случае с баннером нам понадобятся две выкладки — animation и optimize. И та и другая хорошо видны на рисунках 7 и 9. Про оптимизацию позже, а сейчас несколько слов об анимации. Выкладка анимации позволяет создать кадр (рисунок 7, левее корзинки; в ImageReady — Duplicates current frame), назначить время его проигрывания (всплывающее меню на рисунке 6), проиграть. Техническое отступление. Помимо Animation есть еще две выкладки: Slice и Rollover. Первая позволяет «резать» наш рисунок и оптимизировать отдельные его фрагменты (slices) с различными установками. Например, есть большой рисунок, в одной его части есть пустая область, в другой кусок фотографии. Сохраняя каждую область рисунка отдельно мы получим очень большую экономию общего размера. Кроме того, когда грузится не один большой рисунок, а много маленьких, создается впечатление, что страница грузится быстрее. Выкладка Rollover позволяет работать с картинками, html и JavaScript'ом, с тем, что принято называть роловерами — графическими событиями, происходящими при прохождении курсора мышки по области рисунка. Например, мы хотим нарисовать меню, при наведении мышки на которую пункты меню будут менять свой вид (технически это просто смена картинок). С помощью выкладки Rollover этот процесс будет сведен к минимуму: нарисовать рисунок, его вариант реакции на курсор мышки (например, слои), задать условия Rollover и сохранить Save Optimized As… кликнув галочку Update HTML.


рисунок 6

На рисунке 7 в нашей анимации существует всего два кадра (в терминах ImageReady — frame). Первый кадр длится 1 секунду, второй — 3. Отличия кадров я не показываю, но, как я уже упоминал, я включаю\выключаю слои, за счет чего в конечном файле формата gif мы получим мигание. Напомню: мы все еще работаем с файлом psd. И нам еще доступны слои. Когда мы сохраним анимированный gif и попробуем открыть его в том же ImageReady, то мы получим анимированный gif, причем не будет никаких слоёв — только кадры. Если открыть этот gif в Photoshop'е, то мы увидим лишь первый кадр анимации.


рисунок 7

На рисунке 8 у нас уже 7 кадров. Обратите внимание, все кадры имеют разное время показа (delay). Собственно баннер готов. Нажав кнопку Plays animations мы увидим, как будет выглядеть наш анимированный gif файл. Осталось оптимизировать и сохранить.


рисунок 8

На рисунке 9 — оптимизация. Я выбираю 16 цветов, хотя в данном случае можно выбрать три цвета, так как в баннере использованы темно-серый, белый и оранжевый. Вообще вопрос оптимизации gif'а прежде всего сводится к сокращению количества используемых цветов. В некоторых случаях приходится задействовать другие пункты выкладки optimize. Но четких советов тут дать нельзя — экспериментируйте. Кстати, на рисунке 6 видно, что окно нашего баннера имеет несколько закладок: Original — для psd, Optimized — баннер выглядит в соответствии с нашими установками меню Optimize, 2-Up — 2 рисунка для сравнения настроек, 4-Up — 4 рисунка для сравнения. Все эти закладки созданы, чтобы помочь максимально точно установить оптимизационные настройки. Рекомендую после установки оптимизационных настроек проиграть наш файл в закладках 2-Up и 4-Up. Так можно будет увидеть в сравнении результат работы.


рисунок 9

Для сохранения нашего баннера в формат gif открываем меню file и выбираем пункт Save Optimized As… Даём файлу имя, нажимаем Ok, баннер готов.


рисунок 10

Вот результат: примитивный анимированный баннер, цель выполнена. «Вес» файла 2,53 Кб. Для анимированного баннера такого формата (468 на 60 пикселей) стандартный размер около 12-16 Кб. Причина такого малого «веса» моего баннера — применение всего трех цветов, попиксельная прорисовка и минимум элементов.



BBCode:
HTML:  
[ Скрыть ссылки ]




Категория: Уроки Photoshop | Добавил: ya (04.10.2008)
Просмотров: 29524 | Комментарии: 1 |
Всего комментариев: 1
avatar
0
1 Romka • 21:49, 15.12.2010
помоги
как сохронять в фотошопе 5 русской верий




avatar
Форма входа
Поиск
TRANSLATOR
Друзья сайта
Статистика
p
IP:34.228.142.94


Здесь и Сейчас: 1
Прохожих: 1
VIP: 0
l
n