Здравствуйте, сегодня я расскажу вам, как создать анимированный баннер хостинг-компании. Вот то, что получится в конце: Шаг 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
|