Разделы
сайта:Поиск
Эта статья создана по многочисленным просьбам моих знакомых, котрые только начианют осваивать Web-Программирование. Итак, давай сделаем свой первый банер!
Что нам надо
Для того чтобы самому сделать свой банер, тебе естественно нужна программа, с помощью которой можно делать Gif - анимацию. Таких в мире много! Я использую Advanced Gif Animator. Ты, конечно, можешь выбрать какую-нибудь другую, но здесь будет разобрано создание банера с помощью именно AGA, которую, кстати, можно скачать на этом сайте, вместе с лекарством!
Нус... Начнём!
Примечания:
1. Будем рассматривать создание банера на примере ZhekinsideBaner4.
2. Предпологается, что Вы уже скачали, установили и вылечили Advanced Gif Animator
3. Постаьте программе русский язык, для этого щёлкните по Земному шару на панели инстреументов, из появившегося окна выберите русский язык!
4. Для изменения многих настроек идите сюда - файл-настройки. Там можно также поменять количество цвеотв картинок!
5. Лучше бы Вам скачать мой банер, открыть его в AGA, и посмотреть, может это что Вам даст?
1. Будем рассматривать создание банера на примере ZhekinsideBaner4.
2. Предпологается, что Вы уже скачали, установили и вылечили Advanced Gif Animator
3. Постаьте программе русский язык, для этого щёлкните по Земному шару на панели инстреументов, из появившегося окна выберите русский язык!
4. Для изменения многих настроек идите сюда - файл-настройки. Там можно также поменять количество цвеотв картинок!
5. Лучше бы Вам скачать мой банер, открыть его в AGA, и посмотреть, может это что Вам даст?
Вот, что у нас получится:
Начнём с создания основы банера, точнее той части, которая меняться не будет, или будет, но частично! Открываем AGA, жмём Образ-Новый (также можно нажать Ctrl+Shift+N). Появится окно "Размер образа". В нём снимите галочку "Сохранять пропорции", иначе банер получится квадратным. Теперь задайте размер банера следующим образом: ширина: 88, высота: 31, и нажмите кнопку OK.
В левом углу программы появится белый прямоугольник с названием Образ, он автоматически будет выделен. Теперь посмотрите чуть правее, там есть две вкладки: Компоновка и Правка, щёлкните по второй. В правой части программы появится панель инструментов для рисования. Кликните по Лупе, выберите масштаб 9x, прямоугольник заметно увеличится. Теперь выбираем инструмент линия, ставим чёрный цвет, и обводим границы рисунка, проводя линию ровно по краям рисунка. Когда рамка нарисована, выберите карандаш, задайте ему цвет, который Вы использовать где либо ещё не собираетесь, и "срежьте углы", то есть зарисуйте вершины прямоугольника. Это придаст углам округлую форму.
Получилась красивая чёрная рамка, со скруглёнными краями. Теперь опять выберите Линию и прочертите горизонтальную линию ниже центра на одну точку. Получилось как бы разделение банера горизонтально на две части. Выберите инструмент Заливка, щёлкните по какому-нибудь ненужному цвету дважды, появится окно "Редактирование глобальной палитры", в нём ещё раз дважды щёлкните по ненужному цвету, появится окно "Цвет", в котором Вы можете изменить текущий цвет на нужный Вам, в данном случае Вам надо изменить его на оранжевый. После того, как Вы изменили цвет, выберите его, и заливкой щёлкните в пространстве верхнего прямоугольника. Этот прямоугольник окрасится в оранжевый цвет!
Теперь добавим текст! Для этого выберите Сине-голубой цвет, и щёлкните по инструменту Надпись, после чего щёлкните по кнопке выбор шрифта, откроется диалог Шрифт, в нём выберите шрифт: Verdana, 10, обычный, Кириллический. Затем щёлкните мышкой на картинке, и впечатаёте слово zhekinside. Теперь, ничего не щёлкая, стрелками выровняйте текст по центру верхнего прямоугольника, после чего, щёлкните в нижнем прямоугольнике, и введите текст ЖЕкиН САйТ, но теперь сделайте его чёрным. Выровняйте его, и щёлкните по вкладке Компоновка, при этом изображение свернётся в реальный размер. Теперь гляньте немного выше, и найдёте ещё три вкладки: Глобальные, Образ и Комментарии. Щёлкните по второй. Вы увидите там разные настройки, сейчас нас интересует прозрачность. Установите галочку "Прозрачный", и выберите из списка, или укажите пипеткой цвет, которым "Срезали" границы. Теперь банер будет прозрачным в этих областях. На этом работа с первым кадром закончена.
Займёмся анимацией!
Всё! С первым кадром управились! Хух! Слава богу! Но это не всё! Там их ещё пять! Ниче, за-то их делать легче!
Вообщем, добавляем новый кадр (Ctrl+Shift+N) того же размера, что и предыдущий. После добавления в левой части прогораммы Вы сможете заметить появление нового прямоугольника под названием Образ, но с цифрой 2. Теперь выбираем 1-ый Образ,и в режиме правки щёлкаем Ctrl-A(это позволяет выделить всё изображение) и Ctrl-C(это позволяет скопировать выделенную картинку в буфер). Теперь в буфере находится весь первый кадр. Зачем? Как зачем! ... Для дела! Ладно, дальше тыкаем по второму образу, и, в режиме правки, жмём Ctrl-V, что позволит вставить изображение из буфера. Теперь щёлкаем по инструменту Кисть, и выбираем цвет, которым срезали углы в первом кадре. После чего беспощадно закрашиваем все части картинки, кроме того белого прямоугольника, котором находится текст ЖЕкиН САйТ. По выполнении данной процедуры второй кадр уже не будет похож на первый. Теперь задаём кисти белый цвет, и стираем слово ЖЕкиН САйТ. Вместо него, уже знакомым образом, добавляем текст Скрипты. Делаем это с учётом того, что кроме текста здесь будет ещё и картинка (Хотя Вы , в принципе, можете делать и без картинки!). Всё, второй кадр почти готов! Теперь осталось только задать прозрачный цвет тому цвету, которым Закрашивали большую часть картинки в начале, тоесть тому же цвету, которым "Срезали углы".
Создание остальных четырёх кадров происходит по анологии с созданием этого! Поэтому нестоит подробно описывать этот процесс!
Счётчик цикла, задержка, ...
Для
того, чтобы банер работал нормально, Вам надо освоить ещё две кнопки.
1. Счётчик цикла - находится кнопка на главной панели инструментов, выглядит как вращающаяся стрелка. Кликните по ней! Появится окно Счётчик цикла. Если Вы хотите, чтобы Ваш банер мигал бесконечно, установите соответствующюю галочку! если же хотите, чтобы Ваш банер мигал только определённое число раз, а потом замирал, установите соответственное количество миганий.
2. Задержка анимации - точнее задержка перед сменой кадров. Задержку для каждого кадра можно установить разную! Для того, что бы изменить задержку, щёлкните по кнопке в виде часов (Она распологается справа от Счётчика цикла), появится окно Задержки в анимации. В нём установите задержку 100 для всех образов.
1. Счётчик цикла - находится кнопка на главной панели инструментов, выглядит как вращающаяся стрелка. Кликните по ней! Появится окно Счётчик цикла. Если Вы хотите, чтобы Ваш банер мигал бесконечно, установите соответствующюю галочку! если же хотите, чтобы Ваш банер мигал только определённое число раз, а потом замирал, установите соответственное количество миганий.
2. Задержка анимации - точнее задержка перед сменой кадров. Задержку для каждого кадра можно установить разную! Для того, что бы изменить задержку, щёлкните по кнопке в виде часов (Она распологается справа от Счётчика цикла), появится окно Задержки в анимации. В нём установите задержку 100 для всех образов.
Облегчение ::-)
Ни чё смешного! Всё серьёзно! Облегчение значит уменьшение размера! Итак, когда банер сделан, сохраните его и сделайте резервную копию (на всякий...). А с оригиналом проверните следующее: Откройте его, если закрыли, найдите кнопку Минимизировать размер Gif файла, что находится на главной панели и напоминает тиски. Появится окно Оптимизация Gif. Там много всяких полезностей. Так же, там много галочек, которые советую выделить. После процедур выделения надо нажать на кнопку OK. Ваш банер станет меньше! Теперь сохраните его, и можете использовать!
Заключение.
В заключении несколько советов:
1.
Всегда смотите на размер банера, ведь чем он меньше весит, тем
он быстрее грузится, а значит и больше шансов, что на Ваш
сайт зайдут!
2. Старайтесь сделать банер красивым! Ведь чем красивее банер, тем больше на него хочется зайти!
3. Следите за потребностями пользователей! Делайте банер с расчётом на них! Сделайте банер так, что бы он заинтересовал!
4. Никогда не указываёте в банере то, чего нет у Вас на сайте! Потому-что пользователя может заинтересовать именно это! А полсе изнурительных странствий по сайту в поисках того, чего у Вас нет, он может просто разозлиться и из принципа не посещать Ваш сайт, а хуже того, рассказывать другим про свою неудачу!
Ну
вот, банер сделан! Надеюсь... Если что-то непонятно, тогда пишите!2. Старайтесь сделать банер красивым! Ведь чем красивее банер, тем больше на него хочется зайти!
3. Следите за потребностями пользователей! Делайте банер с расчётом на них! Сделайте банер так, что бы он заинтересовал!
4. Никогда не указываёте в банере то, чего нет у Вас на сайте! Потому-что пользователя может заинтересовать именно это! А полсе изнурительных странствий по сайту в поисках того, чего у Вас нет, он может просто разозлиться и из принципа не посещать Ваш сайт, а хуже того, рассказывать другим про свою неудачу!
ИгнатьЕвГений | http://zhekinside.narod.ru/ | Stranger1989@mail.ru| 15.02.2005
Ссылки:
