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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

[14]- Ваше изображение должно напоминать это:
Создайте анимированный баннер для Web-сайта - уроки photoshop

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

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

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

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

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

[20]- Ваше изображение должно напоминать:
Создайте анимированный баннер для Web-сайта - уроки photoshop

[21]- Выбираем Frame3, скрываем видимость следующих слоев:
Создайте анимированный баннер для Web-сайта - уроки photoshop

[22]- И мы имеем:
Создайте анимированный баннер для Web-сайта - уроки photoshop

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

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

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

[26]- Изображение должно напоминать это:
Создайте анимированный баннер для Web-сайта - уроки photoshop

[27]- Выбираем Frame6, скрываем видимость следующих слоев:
Создайте анимированный баннер для Web-сайта - уроки photoshop

[28]- И ваше изображение должно напоминать это:
Создайте анимированный баннер для Web-сайта - уроки photoshop

[29]- Теперь проиграйте анимацию, щелкнув по иконке Play animation:
Создайте анимированный баннер для Web-сайта - уроки photoshop

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

[31]- Заключительный результат:
Создайте анимированный баннер для Web-сайта - уроки photoshop
    Перевод:NonSa Источник:
Прыгающий анимированный шарик Прыгающий анимированный шарик
Учимся создавать прыгающий анимированный шарик - уроки фотошоп

Анимированный эффект вращающегося колеса Анимированный эффект вращающегося колеса
В этом уроке вы научитесь делать такую анимацию

Щупальце осьминога. Щупальце осьминога.
Как создать щупальце осьминога.В этом уроке я покажу, как использовать photoshop инструменты, чтобы проектировать волосы, щупальца, волнистый хвост.

Пластина гравированного стеклянного текста. Пластина гравированного стеклянного текста.
Создайте эффект текста на гравированной стеклянной поверхности для баннера веб-узла или фирменного знака. Перевод:NonSa Источник:oogletutorials.com

Анимированный эффект вращающегося колеса - уроки фотошоп Анимированный эффект вращающегося колеса - уроки фотошоп
Анимированный эффект вращающегося колеса - уроки фотошопСоздаем эффект вращения колеса, используя photoshop. Перевод:NonSa Источник:funphotoart.com