Создаём анимированный баннер в Фотошоп

Мини-чат
Наш опрос
У вас есть свой сайт?
Всего ответов: 1504
Партнер


Статистика
Онлайн всего: 1
Гостей: 1
Пользователей: 0
Пользователи
Гости сайта

Всего: 84055 +0 новых
На сайте: Гости и боты...
Сегодня нас посетили:
fiace, Lydiathasy

Добавлено 1729 файлов
Комментариев к файлам:228
Топ пользователей
1 BellaF
Гл.Модератор

Форум:461
Файлов: 23
2 xek
Модератор

Форум:401
Файлов: 696
3 Mr_indi
Пользователь

Форум:187
Файлов: 60
4 Slappy
Проверенный

Форум:143
Файлов: 1
5 €®©
Важная персона

Форум:140
Файлов: 0
Ещё советуем скачать
2011 font для набор От 100 Pack photo 2.0 professional Software Red Digital PRO Photoshop adobe And шрифт Скачать Уникальный на тему баннер Рендер RUS Иконки 10 PSD аватар No формы розы животные сетка текстуры золотые стили стиль web сайта cs дерево девушки Футбол 3D Природа by зелёный как Фото любовь Спорт иконка Карандаш веб ucoz красивые или Кино собака девушка Красивая Птица знаменитости Очень лето зелень Машины Белый не купальник пляж море машина Иконок Игры Небо Облака вода зима год Новый очки огонь ребенок Красный Мальчик Солнце Глаза фотошопа дизайн Рип Взгляд Кровать камни фотошоп Маленький темных По 2010 тёмный лого место mp3 Кисти зеленый бесплатно плагин мужчины Птички шаблон Новогодний Логотип Закат Большие костюм шаблоны платье креатив календарь рыбалка Осень белое пилот подарок приколы Дама дед мороз богатый Елка Египет Принцесса Сказка ангел Волк девочка цветы Солдат Космос весна фоторамка фото рамка горы мужчина обезьяна остров рамка для фото король новый год друзья
Создаём анимированный баннер в Фотошоп
Скриншот материала
О статье
Автор статьи: Vikram Creative
Просмотрели: 3004 раз(а)
Прокомментировали: 1 польз.

Шаг 1. Создайте новый документ размером 250 х 250 пикселей и установите разрешение (resolution) до 70 пикселей. Цвет фона для баннера будет такой # f2f2f2.

Шаг 2. Поместите логотип в верхней центральной части баннера

Шаг 3. Напишите слоган под логотипом.

Шаг 4. Нарисуйте прямоугольник  и установите цвет # 90909.

Откройте диалоговое окно Стили слоя (layer styles)и настройте  Тень (Drop shadow). Уменьшите расстояние (distance ) и размер  (size ) на 2px.

Теперь добавьте Наложение градиента (Gradient Overlay) и установите режим смешивания на Умножение  (Multiply) с непрозрачностью 28%.

Добавьте обводку и уменьшите её  размер до 1 пикс. Установите цвет # a31b1b.

Шаг 5. Добавим список рекламных предложений. У нас это будет Tutorials (Уроки), Articles (Статьи), Tips (Советы), Freebies (бесплатно),  Basix (Азы), Videos (Видео), Premuim (Премиум) как показано на рисунке.

Растрируйте текстовые слои и создайте Обтравочную маску (Сreate a clipping mask).

Шаг 6. Теперь поместите привлекательную картинку. В нашем случае мы использовали значок премиум-программы для PSDTUTS, но вы можете использовать все, что подходит вам.

Шаг 7. Добавим ещё нужный текст ниже картинки, которую мы вставили в шаге 6.

Шаг 8. Создайте овальную фигуру  и установите цвет # fdfcfc.

Откройте диалоговое окно Стили слоя (layer styles) и настройте  Тень (Drop shadow). Уменьшите расстояние (distance ) и размер  (size ) на 1px.

Включите и проверьте Внутреннее свечение (Inner glow) и оставьте в настройках  все как есть.

Добавьте Наложение градиента (Gradient Overlay) с Непрозрачностью (Opacity)  6%

Шаг 9. Теперь, когда мы закончили создание всех наших слоёв, мы готовы приступить к работе по анимации. Во-первых, откройте панель анимации  Окно – Анимация (Window> Animation). Я буду использовать панель анимации по Временной шкале (Timeline Animation), а не в Покадровой анимации (frame animation).

Примечание: Эта функция доступна только в Photoshop Extended.

Теперь устанавливаем все слои видимыми, но уменьшаем их непрозрачность до 0%. Фон не трогаем.

Шаг 10. Смотрите изображения ниже для инструкций о том, как вставлять ключевые кадры и где увеличивать непрозрачность. Для каждого созданного нами элемента  отдельный скриншот с инструкцией.

Прим. переводчика: ключевые кадры можно будет перемещать  мышкой. Так же можно выделить несколько ключевых кадров для перемещения.



(нажмите на изображение, чтобы увеличить)

 



(нажмите на изображение, чтобы увеличить)

 



(нажмите на изображение, чтобы увеличить)

 


(нажмите на изображение, чтобы увеличить)

 


(нажмите на изображение, чтобы увеличить)

 



(нажмите на изображение, чтобы увеличить)

 


(нажмите на изображение, чтобы увеличить)

Шаг 11. Ваша Временная шкала (Timeline Animation),  должна выглядеть примерно так, как ниже.


(нажмите на изображение, чтобы увеличить)

Шаг 12. Ну вот, мы и завершили нашу анимацию. Нажмите кнопку Пуск (Play), чтобы увидеть результат. Вы можете всё подстроить в случае необходимости. Чтобы сохранить ваш баннер, перейдите в меню Файл - Сохранить для веб и устройств (File - Save for Web & Devices). Установите настройки как  на скриншоте ниже и нажмите кнопку Сохранить.

 

Вот и все! Вот такой баннер у нас получился!

А это баннер переводчика по уроку. Практика очень хорошо закрепляет теорию!



Авор статьи: Vikram Creative

Всего комментариев: 1
1  
лучше бы записали видео урок:)

Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]
Информация о нас/Поиск
EX-PS.RU - Большой сборник photoshop'а. На нашем сайте уникальный контент для PS, таки как: все для фотошопа, градиенты для PS, стили для фотошопа, уроки фотошопа, стоки и все это вы сожете найти только у нас.
Поиск
Заказ бесплатной графики
Реклама
Случайный файл
Topaz Simplify 3.0
Последние комментарии
XaXaTyH написал:
password написал:
blush
fuckdapolis написал:
KpoJluK написал:
zeus99 написал:
groov написал:
K@IZEN написал: