Баннер в 10 шагов

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

Итак, мы подумали и решили создать следующий баннер размера 468х60 - на темно-синем фоне постепенно появляется название сайта и его адрес в интернет: "Студия настоящего дизайна www.belovs.boom.ru". Составим схемку: баннер будет состоять из четырех кадров. 1. Просто фон. 2. Постепенно появляются слова. 3. Слова появились целиком. 4. Постепенно исчезают слова. Причем обратите внимание - 2 и 4 кадры могут быть одинаковыми! Итого, нам нужно создать только 3 оригинальных рисунка. Начали.

1. Шаг, создаем документ. Я надеюсь, что вы уже загрузили Photoshop, потому что у нас нашлась для него работка. Итак заходим: File---New. Сразу выставляем название документа (Name), скажем ban1, далее ставим размер 468х60 при этом обратите внимание, что размер должен быть в пикселях (pixels), устанавливаем разрешение (resolution) равно 72, цвет в RGB и фон (contents) белый. Жмем Ок.

Шаг, заливаем фон. Ищем панель с тремя закладками Color, Swatches, Brushes. Если не нашли - зайдите в меню Windows--Swatches. Открываем закладку Swatches и выбираем темно-синий цвет. В панели инструментов (слева - основная рабочая панель) выбираем ведерко и щелчком мыши по фону нашего баннера заливаем его выбранным цветом.

3. Шаг, пишем текст. Сначала тем же манером выбираем цвет букв, а затем в панели инструментов выбираем букву Т (текст) и щелкаем ей по фону. В появившемся окне пишем текст. Выделив текст, мы можем уменьшать или увеличивать его размер (size), менять цвет букв, выбирать шрифт. Пока вы находитесь в этом окне, вы можете передвигать свой текст по баннеру. После того, как вы его установили в нужное место, жмем Ок. Вот, что у вас должно получиться:

4. Шаг, меняем прозрачность. Чтобы буквы появлялись постепенно, во втором кадре мы должны поменять прозрачность текста. Для этого нам понадобиться найти панель Слои (Layers). (Если не нашли - зайдите в меню Windows--Layers). Там у нас два слоя - слой с текстом и слой с фоном. Берем слой с текстом мышкой, тащим в этой же панели к символу с изображением нового листа и отпускаем, создавая тем самым дубликат текстового слоя. А можно просто щелкнуть правой кнопкой мыши по слою и выбрать "создать дубликат". Теперь у нас должно быть три слоя, два с текстом и фон. В этой же панели (Layers) напротив слоя стоит "глаз". Уберем его с одного из текстового слоя. Теперь он невидим. Перейдем на видимый текстовый слой (щелкнуть мышкой по названию слоя) и изменим прозрачность. Меняется в этой же панели Opacity по умолчанию стоит 100% мы поставим 50%. Вот, что у нас получится:

5. Шаг, редактируем. Сейчас еще можно подредактировать ваш баннер. Вы можете снимать "глаз" с слоев и уже видеть практически, что получится. Если вы захотите изменить текст, щелкните по текстовому слою 2 раза мышкой. Чтобы подвигать текст, надо выделить нужный слой, взять инструмент Move tool (стрелочка в верхней части панели инструментов) и можно двигать.Довольны? Сохранились!!!.

6. Шаг, делаем 3 документа. Теперь, то, что у нас получилось, надо превратить в 3 отдельных файла. Для этого мы пересохраняем получившийся файл под названиями ban2 и ban3. И открываем все 3 файла. У нас должны получится  три одинаковых файла под разными названиями. В ban1 мы удаляем все слои, кроме слоя с фоном. Для этого щелкаем правой кнопкой мыши по ненужному слою и выбираем Удалить (Delete). В ban2 удаляем слой с текстом, оставляем фон и полупрозрачный текст, и в ban3 удаляем слой с полупрозрачным текстом, оставляем фон и текст.

7. Шаг, оптимизируем. Теперь у нас 3 документа. На одном фон, на втором полупрозрачный текст, на третьем конечный текст. Теперь, прежде чем сохранить эти файлы, нам надо оптимизировать их для Интернет, т.е. удалить ненужные цвета для уменьшения размера файла. Делаем следующее: Выбираем Image---Mode---Indexed Color. Вам зададут вопрос -  Flatten image? (Объединить слои?), соглашаемся. В появившемся окошке выбираем палитру Adaptive. Далее нам предлагают выбрать количество бит в картинке Color Depth 8 бит(256цветов); 7(128цв.); 6(64цв.); 5(32цв.); 4(16цв.); 3(8цв.);  выбираем 3 бита и в окошке Colors (количество цветов) соответственно появилась цифра 8. Смотрим на баннер. Нормально, но попробуем поставить в этом окошке (Colors) - 4 цвета (т.е. еще меньше!). Заменяем 8 на 4 - отлично! В Option выбираем diffusion и best. Теперь жмем Ок. Ту же процедуру проделывем и с остальными файлами. А файл с фоном можносохранить вообще, как один цвет.

8. Шаг, сохраняем. Все окей, осталось сохранить. File--Save a copy пишем имя файла, расширение выбираем Gif и жмем Ок. В следующем окне оставляем все по умолчанию и Ок. И так все 3 файла.

9. Шаг, собираем.   Теперь мы открываем Gif аниматор, создаем новый документ, проставляем размеры и загружаем в него все 3 файла подряд, плюс 4-й файл в конце с полупрозрачным текстом (документ ban2.gif). Теперь осталось выставить длительность (duration) каждого кадра. Кадры с прозрачностью лучше выставлять где-то 10-20, чтобы они поплавнее переходили. Я выставил следующим образом: 50 - 15 - 70 - 15 (фон - полупр. - текс - полупр.)

10. Шаг, оптимизация в аниматоре. Если ваш аниматор имеет оптимизатор - оптимизируйте еще раз, хотя после проделанных нами процедур это вряд-ли имеет смысл. Но при работе с многоцветными баннерами этот шаг необходим.

^ Вверх