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