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

Создайте анимированный баннер для 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]- Заключительный результат:

Дата добавления: 2015-08-28