|
|||||||||
Ольнев
Александр Я как-то обнаружил, что в Сети нет нормальных статей (руководств) о создании баннеров. Признаюсь, я искал только в рунете, западные источники даже не пытался посмотреть. Кроме того некоторые мои друзья спрашивали о том, как делаются баннеры, и мне некуда их было отправить. Такой жуткий пробел стоит заполнить. Надеюсь, что данная статья (руководство) кому-нибудь поможет. Системные Требования: художник - 1 шт...После появления на рынке графических программ редактора от компании Adobe - Photoshop'а версии 5.5 со встроенным продуктом той же компании - ImageReady 2.0, все программы создания анимированной графики безнадежно отстали. Дело в том, что до этого, процесс создания баннера (а баннер и есть анимированная графика, неанимированные баннеры в данном руководстве не рассматриваются) обычно сводился к следующему:
Что нужно иметь? Голову, компьютер, Photoshop версии 5.5 и выше (ImageReady
входит в стандартный комплект установки Photoshop'а 5.5 и выше); иметь мало, нужно
еще и владеть. Статья рассчитана на людей с минимальными знаниями Photoshop'a
и ImageReady. Создание баннера - в нашем случае формата 468 пикселей на 60 - начинается
в Photoshop'е. На рисунке 1 показано диалоговое окно создания нового файла (команда
file\new).
В соответствии со старыми традициями ставится рамка в один пиксель, как видно на рисунке 2 она находится в отдельном слое, хотя это не необходимо. Принято считать, и мне кажется не без оснований, что рамка в баннере придает ему некоторую аккуратность. ![]() рисунок 2 Green Kakadu: Стоит отметить, что рамка - это не только для эстетики. Ваш баннер будет показываться на различных сайтах, и возможно такое, что фон баннера и фон сайта, на котором он демонстрируется, будут сливаться - рамка предотвращает подобные явления. Дайте мне кисточку!Начинаем рисовать элементы нашего баннера. В данном случае я собираюсь нарисовать нескольких абстрактных человечков, один из которых будет резко отличаться по цвету от остальных, также я планирую создать надпись "design different" - подражание слогану компании Apple Macintosh "Think different". Я хочу, чтобы и надпись и оранжевый человечек мигали.Человечков рисую в данном случае попиксельно (то есть увеличиваю изображение
до 1600% и заливаю краской каждый пиксель вручную). Это даёт колоссальную экономию
в размере файла. Если на рисунке 3 голова человечка имеет по краям области светло-серого
- это хорошо видно при сильном увелечении, то в последствие я переведу вручную
все светло-серые пиксели в один цвет и сделаю голову более примитивной, на качестве
прорисовки это не отразится, зато даст экономию в размере файла. Обратите внимание, на рисунке 4 есть выделенная пунктиром область. Она
будет залита белым в отдельном слое Layer 2, он "выше" текста и за счет включения/выключения
этого слоя получиться мигание слова "different". Аналогичная ситуация с мигающим
человечком, оранжевый находиться в слое yell . Как видите баннер готов. Он еще не мигает и никак не оптимизирован. Сохраняем
в его формате psd и нажимаем на значок ImageReady, значок подсвечен на рисунке
5. После чего Photoshop автоматически запустит ImageReady, причем наш psd файл
уже будет открыт в ImageReady. На рисунке 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. На рисунке 7 в нашей анимации существует всего два кадра (в терминах ImageReady - frame). Первый кадр длится 1 секунду, второй - 3. Отличия кадров я не показываю, но, как я уже упоминал, я включаю\выключаю слои, за счет чего в конечном файле формата gif мы получим мигание. Напомню: мы все еще работаем с файлом psd. И нам еще доступны слои.
Когда мы сохраним анимированный gif и попробуем открыть его в том же ImageReady,
то мы получим анимированный gif, причем не будет никаких слоёв - только кадры.
Если открыть этот gif в Photoshop'е, то мы увидим лишь первый кадр анимации. На рисунке 8 у нас уже 7 кадров. Обратите внимание, все кадры имеют разное
время показа (delay). Собственно баннер готов. Нажав кнопку Plays animations
мы увидим, как будет выглядеть наш анимированный gif файл. Осталось оптимизировать
и сохранить. На рисунке 9 - оптимизация. Я выбираю 16 цветов, хотя в данном случае можно
выбрать три цвета, так как в баннере использованы темно-серый, белый и оранжевый.
Вообще вопрос оптимизации gif'а прежде всего сводится к сокращению количества
используемых цветов. В некоторых случаях приходится задействовать другие пункты
выкладки optimize. Но четких советов тут дать нельзя - экспериментируйте.
Кстати, на рисунке 6 видно, что окно нашего баннера имеет несколько закладок:
Автор: Ольнев Александр
|
|||||||||
![]() |
![]() |