Кручу, верчу, баннеры делаю, пагу раскручиваю...

Xakep, номер #036, стр. 036-026-2


Обычно баннеры бывают двух видов: анимированные и статичные. Анимированный gif и статичный jpg. C помощью гифа ты сможешь передать экспрессию движением, миганием (умоляю, не переборщи с этим) и прочими мультяшными прелестями, потому как в гиф ты можешь запихнуть несколько кадров. Джипег - для статичного красивого баннера, с каким-нибудь сказочным закатом или девушкой мечты. Подключай свою фантазию, и теперь все, что тебя ограничивает, - это размер файла твоего баннера. Требование большинства баннерных систем для веса самого распространенного баннера размером 468Х60 - не более 15 Кбайт.

Сделай его!

Со статичным баннером все понятно. Берешь, к примеру, Фотошоп. Создаешь новую картинку размером 468Х60, в один слой - картинку, в другой - текст, в третий - кнопку "Кликай сюды", потом File -> Save for Web, и двигай Quality, пока внизу 14 с чем-нибудь килобайт не покажется.

Самое интересное начинается, когда ты готов анимировать. В сущности, процесс изготовления анимированного баннера ничем не отличается от производства любого другого анимированного гифа. Но так как нас ограничивает размер файла, а анимации ты собираешься делать много, то, чтобы влезть в размер, тебе придется уменьшать количество цветов в цветовой таблице твоего гифа. Отбрось мысли о градиентных заливках и качественных фотографиях. Три цвета. Ну ладно. Четыре. И все. Начали!

В фотошопе ты уже создал слои, скажем, с текстом стихотворения, которое должно появляться построчно на каком-нибудь незамысловатом фоне. Каждая строфа - в отдельном слое. Теперь сохраняешься и нажимаешь заветную кнопочку, которая находится в самом низу панели инструментов Фотошопа. Или для продвинутых File -> Jump to -> Image Ready.

Начинает грузиться чудо современной программерской мысли - Adobe Image Ready. Интерфейс - вылитый Фотошоп; возможно, для заготовки можно было бы обойтись и одним Image Ready, но ты же крутой дизайнер. А какой же ты дизайнер без Фотошопа ;)?

В случае с анимированными баннерами наше рабочее место - внизу экрана, вкладка Animation (если ее нет - Window->Show Animation). Как видишь, там все элементарно сделано для нашего брата, который знает, чего хочет. Первый кадр анимации нам уже показали. Что, там внизу все очень мелко? Да. Твоя картинка в полный рост прямо перед твоим носом: вкладка Original. Погаси все ненужные слои и оставь первую строфу. (Вкладка Layers. Нажимать на глазик и чувствовать разницу.) Далее. Дублируешь этот кадр во вкладке Animation кнопкой Dublicate Current Frame. Теперь их два. Одинаковых. Убедись, что второй кадр активен (ну тычь в него, тычь!), и погаси все слои с текстом. Мы, типа, собираемся делать так: "первая строфа", потом все потухло, "вторая строфа", опять все потухло. Итого с четверостишьем должно получиться восемь кадров, из них 4 пустых, ну не совсем пустых - с фоном, конечно, но без текста.

Назад на стр. 036-026-1  Содержание  Вперед на стр. 036-026-3