Создайте анимированный баннер для Web-сайта - уроки photoshop ↓

3 мая 2008 | NonSa

Уроки Adobe Photoshop

[1]- Для начала открываем New Document (Новый документ), высота & ширина 220×520 pixels, разрешение 72, RGB.



[2]- Создаем New Layer (Новый слой), затем, с помощью инструмента Rectangular Marquee Tool (Прямоугольное выделение), создаем выделение области.



[3]- Теперь зальем выделение любым цветом, затем открываем Blending Options (Опции смешивания – внизу палитры слоёв иконка «f») и выбираем стиль слоя Drop Shadow (Тень), используйте следующие настройки:



[4]- Теперь выбираем стиль Gradient Overaly (Перекрытие градиентом), используйте следующие параметры Photoshop, чтобы создать подобное перекрытие градиентом: (Linear Light - Линейный свет)





[5]- Сейчас ваше изображение должно напоминать это:



[6]- Создайте еще одно выделение с помощью инструмента Rectangular Marquee Tool.



[7]- Создаем новый слой (не снимая выделения) и заливаем любым цветом. Затем в Blending Options выбираем стиль INNER SHADOW (Внутренняя тень):



[8]- Затем выберите Gradient Overlay и используйте следующие параметры:





[9]- Ваше изображение должно напоминать пример, показанный ниже. Далее создаем следующее выделение с помощью инструмента Polygonal Lasso Tool (Многоугольное Лассо).



[10]- Создаем Новый слой, заливаем выделение цветом # fffffa, затем уменьшаем Непрозрачность этого слоя:



[11]- Сейчас ваше изображение должно напоминать это. Теперь печатаем текст с помощью инструмента Text Tool (Текст).



[12]- Выбираем слой с текстом и открываем Blending Options (Опции смешивания), выбираем INNER SHADOW (Внутренняя тень). Используйте следующие настройки:



[13]- Далее выбираем Stroke (Кайма, Обводка) и используем следующие настройки:



[14]- Ваше изображение должно напоминать это:



[15]- Создаем слой другого Текста с помощью инструмента Text Tool:



[16]- Теперь переходим WINDOW>ANIMATION (NS: для версии Photoshop CS3, для других версий Photoshop переход в ImageReady). Создаем 5 дубликатов Frames (Кадров) с помощью иконки, показанной на скриншоте внизу:



[17]- Выберите Frame1 (кадр 1), скрываем видимость следующих слоев, щелкнув по иконке «глаз»:



[18]- Сейчас ваше изображение должно напоминать это:



[19]- Теперь выбираем Frame2, скрываем видимость лишних слоёв и уменьшаем Непрозрачность выбранного Слоя, как показано ниже:



[20]- Ваше изображение должно напоминать:



[21]- Выбираем Frame3, скрываем видимость следующих слоев:



[22]- И мы имеем:



[23]- Выбираем Frame4, скрываем видимость следующих слоев и уменьшаем Непрозрачность выбранного слоя, как показано ниже:



[24]- Сейчас ваше изображение должно напоминать это:



[25]- И выбираем Frame5, скрываем видимость следующих слоев и установите Непрозрачность выбранного слоя, как показано ниже:



[26]- Изображение должно напоминать это:



[27]- Выбираем Frame6, скрываем видимость следующих слоев:



[28]- И ваше изображение должно напоминать это:



[29]- Теперь проиграйте анимацию, щелкнув по иконке Play animation:



[30]- Идите в FILE > SAVE FOR WEB & DEVICE (NS: для версии Photoshop CS3, для других версий Photoshop в ImageReady File> Save Optimized) и сохраните свое изображение.



[31]- Заключительный результат:

Отзывов: 4 | Просмотров: 1832

 Распечатать

Да!

Нет