GIMP

Создавая баннер, советую принять за правило - не ставить размер изображения "наобум", думая что потом при необходимости его можно будет подогнать под необходимый размер. Думаю так вы сами себе добавите "дурной" работы. Ведь баннер - это вам не просто так картинка! В сети распространены давно ставшие стандартами следующие размеры баннеров: 728х90, 468х60, 240х400, 120х600, 160х60, 120х60, 100х100, 88х31.

Создаем новое изображение одного из приведенных размеров. Разрешение обязательно ставим 72 пикс./дюйм. Это тоже своего рода стандарт для изображений, которые предназначены не для печати, а для показа на мониторе компьютера.

Пускай наш баннер будет размера 160х60. Для начала нарисуем ему рамочку. Цвет для рамки выбираем серый. Просто заливаем все изображение серым цветом с помощью Плоской заливки, потом Выделяем все (Ctrl+A), Уменьшаем выделение на 1 пикс. и удаляем выделенную область (клавишей Delete). Вот рамка и готова. Если при этом фон у вас остался непрозрачным, значит нужно (не снимая выделения) добавить Альфа-канал (в контекстном меню списка слоев или через главное меню Слой - Прозрачность - Добавить Альфа-канал), и еще раз нажать Delete. Слой с рамкой мы оставим самым верхним и больше трогать его не будем. Настоятельно советую каждый новый элемент баннера (да и любого другого изображения) создавать на новом слое. Это позволит в любой момент поменять, подвигать или вообще убрать этот элемент. А в случае, когда мы все "склеиваем" на одном слое, поменять отдельные элементы (например цвет фона) будет очень проблематично. Теперь на новом слое создадим фон для баннера, поместим его в самый низ списка слоев и тоже не будем его больше трогать. Все остальные слои будем создавать с прозрачным фоном и помещать межу существующими двумя слоями (рамкой и фоном). Предлагаю для покраски фона вместо Плоской заливки использовать Градиент.

При этом если вам очень важен размер файла, то не забывайте, что анимацию для Веб мы сохраняем в формате GIF, который записывает изображение построчно. А значит картинка с градиентом "сверху вниз" будет иметь размер немного меньший размер, чем с градиентом "слева на право". Так как баннер не настоящий, то в выборе цветов мы позволим себе некоторые вольности. Вы же к выбору цвета подходите более обоснованно. После того, как вам захочется использовать какой-то определенный цвет, попытайтесь объяснить хотя бы себе, почему именно этот цвет.

Следующий элемент (слой) - фон для надписи с адресом. Можно его сделать полосой через весь баннер. Это гораздо проще, но мы сделаем немного культурнее. Выберем Прямоугольное выделение (R) и зададим радиус округления углов около 15 пикс. (см. рисунок ниже).

Переместите выделение вот сюда: Теперь выделенную область можно закрасить. Наносим надпись. Для нее не нужно создавать отдельный слой, т.к. текст уже сам по себе создается на отдельном слое.

Слева от адреса у нас осталось "гулять" свободное место. Используем его эффективно. Для стрелок используем кисть с предыдущего урока «Рисуем кнопку для веб-страницы.» Теперь добавим самый важный элемент баннера - иллюстрацию.

Как видите наша картинка нарисована на белом фоне, от которого нам нужно избавится. Как вы уже догадались... Мудрствовать не будем, пойдем "ленивым" путем. Выберите инструмент Выделение по цвету (Shift+O). В его настройках нужно установить подходящее значение Порога. Ставим около 70. Кликните этим чудо-инструментом на белом фоне и он тут же выделится. Но вот досада - вместе с фоном также выделились и глаза, и зубы, в которых также есть немало белого цвета. Пусть это вас не расстраивает. Ситуацию можно исправить одним взмахом мышки, если вы знакомы с Быстрой маской. Если это словосочетание ни о чем вам не говорит - можете быстренько пробежаться и повторить урок «Лягушка на тарелке»

Итак, переключаемся из простого выделения в режим Быстрой маски нажав на маленький значок, который есть в каждом окне с изображением в нижнем левом углу, либо комбинацией клавиш Shift+Q.

Берем жесткую черную кисть, а еще лучше карандаш и зарисовываем то, что недовыделилось Выделением по цвету. Снова переключаемся в режим выделения (тем же способом) и клавишей Delete легко избавляемся от фона. Не буду второй раз второй раз повторять, что если фон не удаляется, то нужно включить Альфа-канал.

Помещаем картинку в нужное место инструментом Перемещение (M).

Вот мы и подошли к тому, что баннер то у нас не простой, а анимированный. Подумайте сколько кадров анимации вы хотели бы использовать, что на них будет изображено. Лучше выбрать золотую середину - 4 кадра. Первые 3 кадра сделать чисто текстовыми, четвертый с иллюстрацией, чтобы не примелькалась.

Создаем кадры так: пишем очередную надпись и временно делаем невидимым этот слой, потом пишем следующую и т.д. Когда у вас все элементы, используемые в анимации, будут готовы - пора приступать из этого всего сформировать отдельные кадры. Это можно сделать несколькими способами. Например: Делаем видимыми все элементы первого кадра и сохраняем изображение в отдельный файл одним слоем. То же проделываем с остальными кадрами, и в конце открываем все изображения в одном окне через меню Файл - Открыть как слои. Начало то же, только не сохраняем в отдельный файл, а Создаем слой из видимого через меню Слой либо через контекстное меню списка слоев.

Что бы вы ни выбрали - в конце подготовки у вас должны в списке слоев остаться только слои с готовыми отдельными кадрами (их 4).

Теперь можно сделать Оптимизацию кадров для GIF через меню Фильтры - Анимация, а простыми словами - вырезать из кадров повторяющиеся фрагменты, с целью уменьшения размера файла. Теперь можете посмотреть анимацию перед сохранением через проигрыватель, который находится в том же меню. По умолчанию задержка между кадрами устанавливается в 100мс (0,1 секунды), и кадры будут мелькать так быстро, что вряд ли вам это понравится. Чтобы задать нормальную задержку, поменяйте в названии каждого слоя с кадрами число 100 на большее. Надеюсь все помнят, что 1000мс = 1 секунда. Когда проигрыватель (который можно при этом даже не останавливать) наконец покажет то, что вы задумали, анимацию можно сохранить как GIF-файл.