Анимация
<<  Active GIF Creator Как сделать анимированную картинку  >>
Анимированный баннер
Анимированный баннер
Правило
Правило
Создаем новое изображение одного из приведенных размеров
Создаем новое изображение одного из приведенных размеров
Пускай наш баннер будет размера 160х60
Пускай наш баннер будет размера 160х60
Анимацию для Веб мы сохраняем в формате GIF
Анимацию для Веб мы сохраняем в формате GIF
Фон для надписи с адресом
Фон для надписи с адресом
Переместите выделение
Переместите выделение
Свободное место
Свободное место
Картинка нарисована на белом фоне
Картинка нарисована на белом фоне
Переключаемся из простого выделения в режим Быстрой маски
Переключаемся из простого выделения в режим Быстрой маски
Берем жесткую черную кисть, а еще лучше карандаш
Берем жесткую черную кисть, а еще лучше карандаш
Помещаем картинку в нужное место инструментом Перемещение (M)
Помещаем картинку в нужное место инструментом Перемещение (M)
Баннер то у нас не простой, а анимированный
Баннер то у нас не простой, а анимированный
Создаем кадры
Создаем кадры
Слои с готовыми отдельными кадрами
Слои с готовыми отдельными кадрами
Теперь можно сделать Оптимизацию кадров для GIF
Теперь можно сделать Оптимизацию кадров для GIF



Презентация «Анимированный баннер». Размер 483 КБ. Автор: XP GAME 2010.

Загрузка...

Анимированный баннер

содержание презентации «Анимированный баннер.ppsx»
СлайдТекст
1 Анимированный баннер

Анимированный баннер

GIMP. Анимированный баннер.

2 Правило

Правило

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

3 Создаем новое изображение одного из приведенных размеров

Создаем новое изображение одного из приведенных размеров

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

4 Пускай наш баннер будет размера 160х60

Пускай наш баннер будет размера 160х60

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

5 Анимацию для Веб мы сохраняем в формате GIF

Анимацию для Веб мы сохраняем в формате GIF

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

6 Фон для надписи с адресом

Фон для надписи с адресом

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

7 Переместите выделение

Переместите выделение

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

8 Свободное место

Свободное место

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

9 Картинка нарисована на белом фоне

Картинка нарисована на белом фоне

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

10 Переключаемся из простого выделения в режим Быстрой маски

Переключаемся из простого выделения в режим Быстрой маски

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

11 Берем жесткую черную кисть, а еще лучше карандаш

Берем жесткую черную кисть, а еще лучше карандаш

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

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

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

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

13 Баннер то у нас не простой, а анимированный

Баннер то у нас не простой, а анимированный

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

14 Создаем кадры

Создаем кадры

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

15 Слои с готовыми отдельными кадрами

Слои с готовыми отдельными кадрами

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

16 Теперь можно сделать Оптимизацию кадров для GIF

Теперь можно сделать Оптимизацию кадров для GIF

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

17

18

19

«Анимированный баннер»
Сайт

5informatika.net

115 тем
5informatika.net > Анимация > Анимированный баннер.ppsx