• Новые сообщения · Участники · Правила форума · Поиск · RSS
    • Страница 1 из 1
    • 1
    Модератор форума: STALKER  
    Форум » Adobe Photoshop » Уроки фотошопа » Создаем анимированный баннер
    Создаем анимированный баннер
    STALKERДата: Воскресенье, 27.12.2009, 22:35 | Сообщение # 1
    Генералиссимус
    Группа: Администраторы
    Сообщений: 139
    Статус: :-(
    Здравствуйте, сегодня я расскажу вам, как создать анимированный баннер хостинг-компании.
    Вот то, что получится в конце:

    Шаг 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


     
    Форум » Adobe Photoshop » Уроки фотошопа » Создаем анимированный баннер
    • Страница 1 из 1
    • 1
    Поиск: