Создайте анимированный баннер для Web-сайта - уроки photoshop
3 мая 2008. Разместил: NonSa
[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]- Заключительный результат:
[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]- Заключительный результат: