Уважаемые подписчики текстовой версии ! К моему сожалению, без скриншотов в выпусках рассылки мне обойтись довольно трудно, но вы сможете просмотреть интересующий вас выпуск или скачать его, если зайдете на сайт   .

Выпуск № 5 : делаем анимированный баннер (ч.1)

   Не ошибусь, если буду утверждать, что с баннерами практически все, читающие эти строчки, в той или иной мере уже знакомы. Этакая картиночка, часто - анимированная, которая приглашает вас кликнуть по ней и зайти туда, куда просят. Опять же не ошибусь, если скажу, что практически каждая страница в Сети имеет (или очень хочет иметь) свой баннер, не важно какого формата : 468х60, 120х120, 100х100 или 88х31 (в просторечии - кнопка). Все эти форматы мы будем условно называть одним словом - баннер. Вопрос в том - где его, этот баннер взять... Заказывать - дорого, подчас просят от 10 до 30 $ или дороже ; просить добрых дядю или тётю - как-то не удобно. Значит, остаётся одно - делать баннер самим, благо, что задача эта вполне под силу каждому. Для изготовления баннера я бы посоветовал вам обзавестись двумя программами : "PHOTOSHOP" и "ULEAD GIF ANIMATOR" - первая программа поможет нам сделать составляющие баннера, а вторая - "оживит" его и оптимизирует. Где взять "Фотошоп", я думаю, вы все знаете :), там же можно взять и "Ulead GIF Animator" (последний можно скачать отсюда ). В качестве аниматора можно использовать любую известную вам программу, но поскольку "Ulead"не нравится больше, его в дальнейшем и рассмотрим. Итак, будем делать анимированный баннер размером 468 х 60 пикселей, абсолютно бессмысленный по содержанию и нарочито "попугайской окраски" (так мне будет проще объяснить, а вам усвоить),  к примеру, вот такой :

Сразу скажу, что в данном случае анимация складывается из последовательного показа двух статичных картинок (составляющих) баннера, а именно :

1.

2.

Таким образом, наша первая задача - сделать одну составляющую баннера, а для этого откроем "Photoshop" версии 5.5 (если у вас версия 5.0 - тоже не страшно :) Открыв программу, идем в меню "Файл" - "Создать". Перед вами откроется вот такое диалговое окошечко ( рис.1): 


рис.1

Выставляем требуемые ширину и высоту баннера, задаем цвет фона "прозрачный", нажимаем ОК и получаем первооснову нашей картинки (рис.2) :


рис.2

Теперь нам нужно выбрать цвет для основной заливки подготовленной основы. Для этого щелкаем по левому окошку с цветом (всплывающую подсказку вы видите на рис.3) :


рис.3

и перед нами открывается очередное диалоговое окно с выбором цвета (рис.4) :


рис.4

 Щелкаем на понравившемся (а еще лучше - на нужном нам) оттенке цвета , и получаем искомый результат, показанный на рис.3. Далее, при помощи инструмента "Ведро" , показанном на рис.5 :


рис.5

(а что вы смеетесь, есть такой инструмент :), мы зальем созданную нами "клетчатую" заготовку искомым синим цветом, для чего активизируем наше "ведро" (щелкнем по нему мышкой), подводим это ведерко к заготовке нашего будущего баннера, и снова щелкаем левой кнопкой мыши на заготовке. Оп-ля ! Получили что-то отдаленно похожее на наш баннер (рис.6). Теперь сохраним то, что мы создали : "Файл" - "Сохранить как...". В типах файлов мы увидим только одно расширение - *PSD, в нём и сохранимся. Долго сказка сказывается, да не скоро дело делается... Графики на этот выпуск рассылки я уже поставил достаточно, не хочу перегружать вашу почтовую программу лишними килобайтами, а посему мы продолжим наше занятие в следующем выпуске рассылки "Учебка". На сегодня - отбой. Вольно, разойдись !

 
рис.6

Продолжение ...


PS: как всегда, этот выпуск рассылки вы сможете найти, скачать и прочитать .  Этот выпуск вы можете распечатать, нажав на соответствующую надпись чуть ниже этих строк :

The example of usage Java Script 79

Распечатать

В следующем выпуске рассылки мы продолжим изготовление анимированного баннера. Внизу Вы видите форму для подписки на выпуски рассылки "Учебка". В соответствующее поле введите свой e-mail, и нажмите кнопку ОК.

Сервис почтовых рассылок CONTENT.RU
E-mail:



E - mail автора :             avst@hot.ee