Warez Portal
Главная | Регистрация | Вход Приветствую Вас Гость | RSS
Меню сайта


Категории каталога
Уроки Photoshop [42]
Мини-чат
200
Наш опрос
Оцените мой сайт
Всего ответов: 420
Бесплатные Смс
Cлучайное фото
Администрация
9828178
400117538

Главная » Статьи » Уроки Photoshop

Создаем анимированный баннер
Здравствуйте, сегодня я расскажу вам, как создать анимированный баннер хостинг-компании.
Вот то, что получится в конце:

Шаг 1.
Создаем новый документ (Ctrl+N) 468х60px (это стандартный размер баннеров).
Берем инструмент Gradient Tool (G) и закрашиваем фон (верхний цвет #D3E4EC, нижний #A7B9C2):

Шаг 2.
Далее открываем (Ctrl+O) изображение с сервером:

Берем инструмент Polygonal Lasso Tool (L) и выделяем сервер:

Шаг3.
Далее инструментом Move Tool (V) переносим сервер на документ с баннером:

Шаг 4.
Выполняем “Edit > Transform > Scale” и уменьшаем размер сервера:

Шаг 5
Добавим отражение.
Дублируем слой с сервером (Layer > Duplicate Layer). Выполняем для оригинального слоя (нижний слой с сервером) “Edit > Transform > Flip Vertical” и инструментом Move Tool (V) переносим его вниз:

Шаг 6.
Выполняем “Edit > Transform > Skew” и немного скашиваем отражение:

Шаг 7.
Применяем “Filter > Blur > Gaussian Blur” с параметром “Radius: 0,5px” и меняем прозрачность (Opacity) слоя на 40%:

Шаг 8.
Далее включаем линейки (Ctrl+R) , если не включены.
Переводим разметку линеек в пиксели, для этого щелкните правой кнопкой мыши по линейке и выберите “Pixels”.
Зажимаем левую кнопку мыши на верхней линейке и вытаскиваем от туда направляющую. Вытащите семь горизонтальных направляющих, расположите их на 15, 20, 25, 30, 35, 40 и 45px:

Шаг 9.
Далее вытащите четыре вертикальных направляющих, на 100, 90, 80 и 70px:

Шаг 10.
Создайте новый слой (Shift+Ctrl+N), над всеми.
Возьмите инструмент Pencil Tool (B) размером 2px и используя цвет #59829A, нарисуйте семь линий, по направляющим:

Шаг 11.
Создаем новый слой, над слоем с полосками.
Берем инструмент Brush Tool (B) размером 6px с размытыми краями и рисуем белую, горизонтальную линию (зажмите Shift, что бы линия была ровной):

Шаг 12.
Нажмите Alt+Ctrl+G, для того, что бы ваша белая линия использовала нижний слой с семью полосками как маску, в окне слоев должна появиться стрелка, указывающая на нижний слой. У вас получится, что эта линия будет видна, только тогда, когда пересекает одну из семи полосок. Таким способом мы будем имитировать блик:

Шаг 13.
Вернемся к слою с семью полосками, что бы добавить тень.
Выбираем этот слой и выполняем “Layer > Layer Style > Blending Options” и настраиваем “Drop Shadow” как на картинке:

Шаг 14.
Берем инструмент Horizontal Type Tool (T) и пишем текст баннера, цвет #59829A (я использовал шрифт “Agency”, размер 30pt). Убедитесь, что слой с текстом находится выше всех слоев:

Шаг 15.
Добавим отражение.
Дублируем слой с текстом (Layer > Duplicate Layer). Выполняем к оригиналу (к нижнему слою с текстом) “Edit > Transform > Flip Vertical” и располагаем как на картинке:

Шаг 16.
Применяем к перевернутому слою “Filter > Blur > Gaussian Blur” с параметром “Radius: 1px” (перед тем как у вас появится окно с настройками фильтра, появится окно с запросом на растеризацию слоя, нажмите в нем “Ok”):

Шаг 17.
Добавим маску к слою с отражением. Для этого в окне слоев нажимаем на кнопку “Add layer mask” и закрашиваем маску, черно белым градиентом:

Шаг 18.
Теперь настроим верхний слой с текстом. Выполняем “Layer > Layer Style > Blending Options” и настраиваем “Drop Shadow”, обратите внимание на снятую галочку “Use Global Light”, ее нужно снять первым делом:

Шаг 19.
Зажимаем Ctrl, в окне слоев, выбираем слои с текстом и его отражением и нажимаем Ctrl+E для объединения слоев:

Шаг 20.
Создаем новый слой, над всеми.
Берем инструмент Brush Tool (B) размером 30px с размытыми краями и рисуем белую, вертикальную линию (зажмите Shift, что бы линия была ровной):

Шаг 21.
Нажимаем Alt+Ctrl+G. Если вы забыли к чему это приведет, то прочитайте шаг №12.

Шаг 22.
Теперь настало время приступить к созданию анимации.
Для начала мы наведем порядок в слоях.
В окне слоев, меняем режим наложения для слоев c текстом, с сервером и для слоев с их отражениями на “Dissolve”:

Шаг 23.
Далее у тех же слоев, щелкаем по иконке глаза, что бы их скрыть. У нас останется видимым только фон и слой с полосками. Далее берем инструмент Move Tool (V) и передвигаем слой с полосками за левую границу изображения (ВНИМАНИЕ! Не трогайте слои с белыми полосками, они должны быть там, где мы их нарисовали изначально!):

Шаг 24.
Далее:
1) Если у вас Photoshop CS2 и ниже, то выполняем “File > Edit in ImageReady”, для перехода в “Image Ready” .
2) Если у вас Photoshop CS3, то вам не нужно запускать “IR”, а просто нужно открыть окно анимации, “Window > Animation”:

Шаг 25.
Создаем новый кадр и делаем видимыми слои с текстом, с сервером и отражениями:

Шаг 26.
Убеждаемся, что у нас выбран второй кадр и нажимаем на кнопку создания промежуточных кадров (Tweens animation frames).
В появившемся окне выбираем “Tween With: Previous Frame” и “Frames to Add: 5”, нажимаем “OK” и получаем:

Шаг 27.
Далее создаем еще один кадр и для этих же слоев, меняем режим наложения на “Normal” (ЗАПОМНИТЕ НОМЕР ЭТОГО КАДРА! У меня он №8. Чуть позже мы поменяем у него время задержки. Сейчас менять НЕ НУЖНО, так как придется делать много лишних действий.):

Шаг 28.
Создаем новый кадр, берем инструмент Move Tool (V) , вытаскиваем из за границы изображения, слой с нашими полосками и создаем 3 промежуточных кадра, так же как в шаге №26 (естественно выбран должен быть последний кадр)(так же запоминаем номер этого кадра, для последующей установки времени задержки. У меня он №12):

Шаг 29.
Создаем новый кадр, берем инструмент Move Tool (V) и передвигаем слой с горизонтальной белой полосой вниз, так, что бы она пересекала все семь полос нижнего слоя.
Таким же образом передвигаем слева направо, слой с вертикальной полосой, что бы он прошел через все буквы.
Создаем семь промежуточных кадров:

Шаг 30.
Запоминаем номер последнего кадра (у меня он №20).
Создаем новый кадр и скрываем все слои кроме фона.
Создаем пять промежуточных кадров:

Шаг 31.
Теперь выставим время для кадров.
Для кадра №8 – 0,5 сек.
Для кадра №12 – 1 сек.
Для кадра №20 – 5 сек.
Ну и для последнего кадра – 1 или 2 сек.

Заключение.
Естественно время вы можете выставить любое, дело вкуса. Моя задача научить вас, все это делать, и надеюсь, я с ней справился.
Нам осталось только сохранить наш баннер, для этого нажимаем Alt+Shift+Ctrl+S и сохраняем в формате .GIF

Автор урока: SandWicH
Адрес урока: Paint.3Dn.ru
Категория: Уроки Photoshop | Добавил: 3JlouHax (13.04.2008)
Просмотров: 655 | Комментарии: 2 | Рейтинг: 0.0/0 |
Всего комментариев: 1
1  
злравствуйте полскажите как при помощи фотошопо убрать налпись с фотографии.После сохранения фото появилась надпись по середине

Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]
Форма входа
Ваши данные
Привет: Гость

Гость, мы рады вас видеть. Пожалуйста зарегистрируйтесь или авторизуйтесь!
Поиск
Работа
Студия дизайна ART3

Вы хотите заработать на LetitBit.net?
Тогда вы сможете сделать это на нашем сайте!
Пишите нам в форму обратной связи и становитесь Uploader'ом!
Зарабатывайте на загрузках своих файлов!
Писать здесь

Друзья сайта
 


Внимание!!!
Обмен только ссылками! Ссылки писать в гостевой.
Наша ссылка!

Наши топы
 
Каталог сайтов iLinks.RU
 
Каталог сайтов :: Развлекательный портал iTotal.RU
 
Интернет каталог WECA
 
Каталог сайтов OpenLinks.RU
 
Статистика
Зарег. на сайте
Всего: 604
Новых за месяц: 0
Новых за неделю: 0
Новых вчера: 0
Новых сегодня: 0
Из них
Администраторов: 3
Модераторов: 0
Проверенных: 3
Обычных юзеров: 597
Забаненных юзеров: 3
Из них
Парней: 396
Девушек: 208

Онлайн всего: 1
Гостей: 1
Пользователей: 0
Copyright MyCorp © 2017
Бесплатный хостинг uCoz