Форум Softmix
 

Softmix.net.ru - современный каталог программ. На сайте Вы можете скачать бесплатные программы для компьютера под Windows. У нас можно найти свежий софт (soft) по тематикам: антивирусные программы, офисные программы, кодеки, программы для видео и проги для музыки. Файлы лучших программ Вы можете скачать прямо с нашего сервера.

 

Главная | Форум Softmix | Регистрация | Вход
[ Новые сообщения · Участники · Правила форума · Поиск · RSS ]
Страница 1 из 11
Модератор форума: -ШУМ- 
Форум Softmix » Интернет - Вебстроителю. » WEB-УРОКИ! » "Баннеры" Урок 2. Создание фона баннера из картинки! (создание баннера...)
"Баннеры" Урок 2. Создание фона баннера из картинки!
MixerДата: Воскресенье, 03.09.2006, 18:22:05 | Сообщение # 1
Администрация
Группа: Администраторы
Сообщений: 298
Репутация: 15
Статус: ОНЛАЙН
Для работы над вторым баннером вам понадобится картинка. В этом уроке мы будем использовать в качестве примера картинку из левого фрейма. Вы можете работать тоже с ней. Для этого кликните правой кнопкой мыши по 2-й картинке ("Контрольный выстрел") и выберите открыть в новом окне. Как она загрузится опять кликайте правой кнопки мыши по ней и выберите сохранить картинку как... Сохраните ее в рабочей папке. Все, к уроку готовы, можно отключаться от интернета и заниматься делом!

Мы делаем баннер 468х60 используя фрагмент картинки. Так же часть картинки мы используеем как фон нашего баннера. У нас есть ограничения по размеру баннера (в Кб) и поэтому нам придется анимацию свести к минимуму. В данном случае у нас будут всего 2 фрейма.

1. Шаг, Открываем картинку. Для начала мы откроем картинку в Photoshop и переведем ее в цветовую палитру RGB Image---Mode---RGB. Теперь мы можем с ней работать. Сразу создадим документ для будущего баннера. Как это сделать описано в прошлом уроке. Теперь у нас открыто 2 окна. Картинка и будущий баннер.

2. Шаг, выбираем фрагмент. Я решил использовать в баннере часть лица с глазами. Для этого я ее выделяю инструментом "выделение прямоугольником" (самая верхняя левая кнопка на панели с инструментами или Shift+M). Если с первого раза не получилось попробуйте еще. Снять выделение можно комбинацией клавиш Ctrl+D.

3. Шаг, перетаскиваем фрагмент. Теперь берем инструмент переместить (Move tool Shift+V) и перетаскиваем выделенный фрагмент в будующий баннер. Готово. Размещаем его слева. Сочетанием клавиш Ctrl+T мы можем уменьшать или увеличивать размер выделенного фрагмента, но в данном случае это ни к чему. Вот, что должно получится:

4. Шаг, удаляем лишнее. Теперь нам надо удалить кусочек фона справа от лица. Чтобы лучше и чище выделить этот кусок мы можем увеличить картинку Ctrl + или для уменьшения Ctrl - . Берем инструмент лассо (Shift+L) и выделяем не нужный кусочек с фоном. Для этого ставим вначале точку (щелчком мыши) и ведем появившуюся линию до следующего угла, ставим точку и т.д. Мы как бы окружаем не нужный фрагмент. Подведя мышку к начальной точке должнен появится 0, щелкаем последний раз мышкой и видим выделенную область. В процессе выделения мы можем отменять поставленные точки клавишей Del, снять выделение Ctrl+D. Теперь выделенную область можно удалить нажав клавишу Del.

5. Шаг, готовим фон. Это очень сложный и важный момент, который вам еще очень часто пригодится. Я выделяю на кртинке кусочек для фона. В данном случае я выбрал левый верхний кусок. Беру Move tool и перетаскиваю его в баннер. Кусок который я выбрал:

Теперь перетаскиваю слой с фоном под слой с глазами. Для этого в панели Layers (Слои) я просто претаскиваю нужный слой ниже или выше другого слоя. Взяв инструмент Move tool я могу подвигать фон. Ставлю его капельку залицо. Теперь я копирую слой с фоном. В панели Layers (Слои) я щелкаю правой кнопки мыши по фону с слоем и выбираю Duplicate Layer (дублировать слой). Используя все тот же Move tool я могу подвигать фон. Ставлю его в притык. Место стыка видно? Не беда. Жмем Ctrl+T и кликаем правой кнопкой мыши по картинке. Выбираем повернуть на 180 градусов, кликаем еще раз и выбираем отразить по вертикале (Flip Vertikal) и жмем enter. У нас теперь 2 фоновые картинки с оабсолютно одинаковыми краями, которые надо только состыкавать. Вот, что у вас в итоге должно получиться:

Стык не виден? Молодцы!

Теперь нам осталось написать текст и сохранить. Об этом подробно рассказано в прошлом уроке.

Итак, сохраняем, собираем в Gif-аниматоре и получаем результат:




 
Форум Softmix » Интернет - Вебстроителю. » WEB-УРОКИ! » "Баннеры" Урок 2. Создание фона баннера из картинки! (создание баннера...)
Страница 1 из 11
Поиск: