Стандартный баннер имеет размер 468х60 пикселей и весит до 15 Кб.
Понятно, что баннер в конце-концов будет обыкновенной GIF-картинкой, но
создается он в палитре true color.
Весьма существенно на размер файла баннера, как и на любое графическое
изображение, влияет исходное количество цветов. Поэтому вам придется
обыкновенным методом тыка выбрать оптимальное количество цветов, т.е. то,
которое существенным образом не отразится на качестве исходного изображения.
Но в любом случае помните, что однородный текст на однородном фоне состоит
из 8 цветов (не более).
1. Откроем графический редактор Adobe Photoshop 5.0. или 8-9 2 Из меню Файл выберем команду Новый и заполним поля открывшегося
диалогового окна также, как это сделано на нижнем рисунке. 3. На диске создадим папку Banner и сохраним созданную картинку в этой
папке под ;именем banner.psd. Для этого из меню Файл выберем команду
Сохранить как. 4. У нас получилась обыкновенная прозрачная картинка в формате Adobe
Photoshop. 5. Обратившись к меню Окно, выберем команду Показать Цвета. Перед нами
Палитра цветов. В этой палитре определим цвет фона нашего баннера следующим
образом: n Red: 97 n Green: 166 n Blue: 19 6. Выбрав из Палитры инструментов инструмент Заливка,
применим его к нашей прозрачной картинке. 7. Теперь наш баннер имеет зеленоватую подложку.
8. Сохранимся через комбинацию клавиш Ctrl+S. 9. Найдем в нашей &библиотеке картинок изображение сияющего
компьютерщика и поместим его через команду Ctrl+O в Adobe Photoshop.
10. Выделим эту картинку через команду Ctrl+A.
шаг 2 как создать баннер
11. Скопируем эту картинку через команду Ctrl+С.
12.Возвратившись к нашей работе,через команду Ctrl+V поместим
компьютерщика в баннер.Обратите внимание, что Adobe Photoshop &в своей
Палитре слоев автоматически создал новый слой. 13. Нажмем комбинацию клавиш Ctrl+T.
14. Наш компьютерщик выделился квадратиками. Удерживая клавишу Shift,
подгоним размер компьютерщика под желаемый и нажмем клавишу Enter.
15. Удерживая клавишу Ctrl, сместим компьютерщика влево. 16. Обратимся к Палитре слоев и создадим еще один слой нашего баннера.
Для этого просто щелкнем мышкой на пиктограмме . 17. С помощью инструмента Эллиптическое выделение
создадим в новом слое круг и зальем этот круг черным цветом. 18. С помощью инструмента Прямоугольное выделение
создадим в новом слое полоску и зальем ее черным цветом. 19. Сохранимся через комбинацию клавиш Ctrl+S.
20. Обратимся к Палитре инструментов и выберем инструмент Пипетка.
шаг 3 как создать баннер
21. Инструментом Пипетка выберем из Палитры цветов желтый цвет.
22. Обратимся к Палитре инструментов и выберем инструмент Печать.
23. Инструментом Печать щелкнем в любом месте нашего баннера. 24. В открывшемся диалоговом окне Инструмент Печати выберем
кириллический шрифт PragmaticaC, определим его размер (10 пунктов) и наберем
текст "АУДИТ СЕТЕЙ". 25. Нажмем кнопку OK. 26. Нажав Ctrl+T и удерживая клавишу Shift, подгоним размер текста под
желаемый и нажмем клавишу Enter. 27. Удерживая клавишу Ctrl, поместим текст на круг.
28. Сохранимся через комбинацию клавиш Ctrl+S. 29. Обратимся к Палитре инструментов и выберем инструмент Пипетка.
30. Инструментом Пипетка выберем из Палитры цветов белый цвет.
шаг 4 как создать баннер
31. Обратимся к Палитре инструментов и выберем инструмент Печать.
32. Инструментом Печать щелкнем в любом месте нашего баннера. 33. В открывшемся диалоговом окне Инструмент Печати выберем
кириллический шрифт PragmaticaC, определим его размер (10 пунктов), наберем
текст Y2K и нажмем кнопку OK. 34. Нажав Ctrl+T и удерживая клавишу Shift, подгоним размер текста под
желаемый и нажмем клавишу Enter. 35. Удерживая клавишу Ctrl, поместим текст на экран компьютера.
36. Сохранимся через комбинацию клавиш Ctrl+S. 37. Повторив шаги 29-35 (шрифт: CyrillicHover), добавим в наш баннер
еще одну надпись. 38. Сохранимся через комбинацию клавиш Ctrl+S.
39. Повторив шаги 29-35 (шрифт: CyrillicHover), добавим в наш баннер
последнюю надпись. 40. Сохранимся через комбинацию клавиш Ctrl+S.
шаг 5 как создать баннер
41. Обратимся к Палитре слоев и склеим все слои нашего баннера.
42. Из меню Изображение выберем команду Размер Изображения. 43. Заполним поля открывшегося диалогового окна также, как это сделано
на следующем рисунке и нажмем кнопку OK. 44. Обратите внимание, что мы просто изменили разрешение нашей картинки
с 400 DPI на 72 DPI. 45. Из меню Файл выберем команду Файл к Экспорт к GIF89a Экспорт.
46. Заполним поля открывшегося диалогового окна также, как это сделано
на следующем рисунке и нажмем кнопку OK. 47. В открывшемся диалоговом окне ЭкспортGIF89 в поле File name введем
имя GIF-файла нашего баннера и нажмем кнопку OK
Пример 2
1. Выбор программ, с помощью которых вы будете
создавать свое творение. Допустим, что для создания анимированного баннера
вы выбрали Ulead Gif Animator 4 (уже есть 5), желательно русифицированный.
Из графических программ наиболее удобными и результативными, для меня являются
Ulead PhotoImpact 6 (уже есть 7), Microsoft PhotoDraw, хотя
мало кто видел эти программы в полном объёме и позволил себе их установку,
программки то не маленькие. Adobe Photoshope - я не рассматриваю, так как
про него и так много написано.
Допустим вы работаете в тех же редакторах, что и я, это упрощает процесс
понимания, так как следующая часть статьи и примеры основаны на применение
вышеназванных программ.
2. Выбор размера. Решаем какой собственно мы
будем делать баннер. Размеры различны, как и сфера их применения. Допустим
вам заказали один 100х100 пикселей и два 120х240 пикселей.
Наиболее распространенные размеры (в пикселях):
1. 468х60 - наиболее распространенный размер для расположения
как вверху, так и внизу страницы, часто им "разбивают" текст в
середине страницы (говорят эффективная отдача).
2. 120х60, 150х60, 140х 60 - это вариации баннера 468х60, разница
в том, что их можно разместить несколько вместо одного на 468. Их часто
используют серверы новостей и газет.
3. 120х240 - вертикальный баннер,
4. 100х100 - широко распространенный баннер,
5. 88х31, 88х40, 81х63 - баннеры - счетчики, различные рейтинги,
баннеры для обмена ссылками между сайтами,
6. попадаются - 140х60, 177х100, каждый из которых создается
под решение конкретного вопроса.
3. Размер баннера не должен превышать 18Кб, это уместно для большого и
среднего размера баннеров. На практике лучше доводить баннер до 15Кб или,
что еще хуже, до размера, который определил заказчик. Баннеры 120х60, 100х100
и меньше редко достигают размера 7Кб. Здесь рекомендация одна - чем меньше,
тем лучше! В нашем случае баннеры не должны превышать 15Кб.
4. Главное - идея! Допустим заказчик некая фирма
"Доктор Визус", специализируется на лазерной коррекции зрения,
и ей необходимо о себе заявить или напомнить. В техническом задании вы получаете
их логотип, пожелания о женском личике (по-видимому это опять блондинка
с пухлыми губками и томным взглядом) и свободу в выборе текста.
Интересную идею нужно искать в ассоциациях, на которые наводит вас тема
будущего баннера. Какая мысль первой приходит в голову, та и будет отправной
точкой в нелегком пути создания "шедевра" (первого, или сто первого,
как многие мнят о себе). Берем листок бумаги, а лучше отдельную тетрадь,
и записываем на него все фразы и образы, которые вас посетили. Не ленитесь!
Стоит отвлечься на минуту и гениальная идея, не найдя физического воплощения
в реальном мире, ускользнет от вас к другому баннермейкеру. По ходу работы
вы еще не раз черкнете пару строк, или зарисовок, поэтому тетрадь как нельзя
к стати, особенно когда мы начнем подбирать цвета для будущего баннера.
Ассоциации появились в виде текста: "Вам идут очки?.. Ерунда!",
"Ваш взгляд притягивает…", и коронное "Раньше вы могли только
подслушивать, а теперь можете подглядывать", и дальше естественно Доктор
Визус со своими услугами.
Подбор материала в виде фотографий и рисунков.
Теперь подбираем художественный материал (для начала, потом начнем рисовать
сами, если необходимо). Собираем все клипарты (и картинки и фотографии)
и методично разглядываем. Среди множества картинок всегда найдеться парочка
десятков соответствующих идеи баннера. Часто в процессе разглядывания рождаются
новые идеи, их также нужно записывать. Все понравившиеся картинки (фото,
рисунки) копируем в отдельную папку. Затем отсеивает еще раз из уже выбранного
самое необходимое. Желательно на стадии отбора иметь в виду, что для анимированного
гифа (он же баннер) лучше выбирать не многоцветные фотографии и рисунки
с минимум цветов. Это очень облегчит работу на стадии оптимизации конечного
файла. Напомню, что 256 цветов - это все, что может предложить gif - формат.
Результатом отбора явились взору три девы (рис. 1, 2, 3). Две из них были
блондинками (ох уж этот мужской стандарт качества, на который пробы уже
некуда ставить).
5. Создание покадровой анимации. Графический
редактор Ulead PhotoImpact 6 (русифицированный). Баннер №1, состоит всего
их 4 кадров, размер 100х100, конечный вес 11Кб. Для фото реалистичного баннера
кадров должно быть не много, 2-5. Для рисованного баннера с 5 - 6 основными
цветами (цвета плавного перехода я не имею ввиду) кадров может быть намного
больше, и 10 и 20 и 30, все зависит от сценария будущего баннера.
А). Создаем каждый кадр отдельно, строго выдерживая расположение всех одинаковых
элементов на каждом кадре. Смещение даже на пиксель приведет к тому, что
изображение начнет "подпрыгивать". Позицию и размер легко отследить
в Ulead PhotoImpact по меню "Свойства", "Позиция и размер",
и там же на месте поменять как и размер так и расположение объекта. Самое
важное: сохраняем каждый кадр в формате программы в которой вы работаете,
этим вы сохраняете возможность исправления слоев, изменения текста, цвета
и прочего (в нашем случае - это ufo). Мы получили кадр: 1, 2, 3, 4.ufo (или
расширение той программы в которой вы работаете).
Важные моменты:
1. Используем повторяющиеся цвета и расположение элементов (кадр
2, 4).
2. Цвета берем близкие основной фотографии (используя инструмент
"пипетка").
3. Добавляем всякие "вкусности", такие как: части
солнышка на 2 и 4 кадре, меняя их местами и добавляя другой цвет (близкий).
4. Обязательно включите функцию сглаживания текста.
Б). Сохраняем каждый кадр в gif - формате, предварительно сжимая до минимального
размера, без потери качества. "Дожать" вы сможете уже в аниматоре.
Желательно опять назвать кадры 1, 2, 3, 4.gif. Переходим в пункт меню "Файл",
"Сохранить для Web", "Полное изображение", и выбираем
необходимые параметры сжатия: GIF, количество цветов (в нашем случае 64),
оставляем "дрож" для фото, в текстовых кадрах "дрож"
только ухудшает качество и увеличивает размер, прозрачность нам также не
нужна. Такие шаги проделываем с каждым кадром по очереди, сохраняя в отдельную
папку.
В). Мастер в Gif Animator (Animation Wizard), просто необходимый элемент!
Он загружается при загрузке программы, вы просто открываете подготовленные
файлы (Add Image), выбираем способ отображения рисунка Text-oriented (текст
ориентированные изображения) или Photo- oriented (фото ориентированные изображения).
Этот момент очень важен, так как логичным было бы фотографический баннер
сделать фото-ориентированным, но эта функция дает гифы с множественными
точками как в фото части, так и на фоне и на тексте - это значительно увеличивает
размер файла.
Здесь решение возможно двумя путями:
1. уменьшением количества цветов,
2. заменой не основных цветов на основные (т.е. если фон "разбился"
на множественные пиксели из 2-3 цветов, то желательно выбрать один основной,
остальные заменить тем же цветом (находим эти цвета в цветовой панели и
меняем их RGB на RGB основного цвета, просто пишем те же цифры, что и у
основного цвета). Предостережение! Главное выбрать цвет, иначе картинка
измениться окончательно и бесповоротно.
Далее устанавливаете частоту повтора (предварительно установите 50-100),
и все, баннер готов. Главное читайте пошаговую инструкцию.
Как сделать баннер. Статья для тех, кто только начал
изучать основы создания баннера
Страница 2.
Г). Есть правда свои тонкости. Баннер готов, но его размер просто ужасен,
в нашем примере он уже весит 25Кб. Необходимо оптимизировать готовый баннер.
Для этого настроим оптимизатор и выполним пошаговую инструкцию. Gif Animator
- весьма удобен и прост в понимании.
Оптимизатор "Optimize" находиться во вкладке вместе с функциями
"Составление-Compose", "Редактирование-Edit", "Просмотр-Preview".
Его можно найти в меню "Файл" под именем "Optimization Wizard".
Оставляем выделенными пункты по рекомендации самого оптимизатора, можете
перевести, если хотите. Выбираем количество цветов необходимое вам (желательно
убавлять в последовательности 8, 16, 32, 64, 128, 256), а за тем, при повторном
уменьшении баннера, убавлять по нескольким цветам, проверяя результат. После
выполнения всех вышеперечисленных манипуляций баннер стал весить 11Кб, что
нам и было нужно. Мы добились этого лишь уменьшением количества цветов.
Главная