Как сделать анимированную голограмму в Photoshop CS5

Как сделать анимированную голограмму в Photoshop CS5 - уроки фотошоп

Создайте знак качества для WEB. Уроки дизайна на нашем сайте еще не предлагали сделать анимацию голограммы натурального вида!

Сложность: низкая
Время: до 30 минут

Навыки для "прокачки":
- работа с градиентами
- создание групп слоев
- работа со стилями слоя
- анимация и создание GIF баннера в Фотошоп

Скачать водяные знаки

Картинка с результатом

Как сделать анимированную голограмму в Photoshop CS5 - уроки фотошоп

1. Создадим новый файл. Размер 150х150 пикселей, разрешение 72
2. Выберете инструмент Эллипс (Ellips tool) и, удерживая Shift, растяните на все изображение.
3. Поменять цвет эллипса можно дважды кликнув на иконке цвета в палитре слоев. У нас цвет fe9f9b

Как сделать анимированную голограмму в Photoshop CS5 - уроки фотошоп

4. Перетащите в файл картинку с водяными знаками над эллипсом, нажмите CTRL+Alt+G, чтобы изображение прикрепилось к нему и за его пределы не выходило.

Как сделать анимированную голограмму в Photoshop CS5 - уроки фотошоп

5. Выберете режим Экран (Screen) на панели слоев.

Как сделать анимированную голограмму в Photoshop CS5 - уроки фотошоп

6. Дважды кликните на слое со знаками и добавьте свойство слоя Радужный градиент: Не закрывая меню подвигайте его на слое, чтобы остались реальные цвета голограммы (обычно красноватые и зеленые).

Как сделать анимированную голограмму в Photoshop CS5 - уроки фотошоп

7. Создайте текстовый слой с надписью. Измените его Fill на 0 (текст исчезнет). Зайдите в стили слоя (двойной клик), сделайте для текста градиент, как у нас:

Как сделать анимированную голограмму в Photoshop CS5 - уроки фотошоп

8. Выделите все слои, нажмите Ctrl +G, чтобы собрать их в группу. Далее мы будем создавать слои переливов для инимации текста.

Как сделать анимированную голограмму в Photoshop CS5 - уроки фотошоп

9. Дублируйте группу (перетащив папку на значок листа снизу)

10. В новой группе откройте свойства слоя с текстом и перейдите к градиенту. Отодвиньте окно, чтобы видеть картинку. Светлая часть градиента у вас будет по центру. Передвиньте эту светлую полосу вправо.
11. Дублируйте группу снова. И для текста градиент передвиньте вправо, так как справа перелива еще не было в группах.
12. Дублируйте группу последний раз и передвиньте градиент так, чтобы перелив был за кадром и осталась только темная часть.
13. Все готово к анимации. Каждую группу слейте, кликнув на ней правой кнопкой.
14. Получилось 4 слоя. Идем в меню Окно > Анимация (Window > Animation). Изменяем вид меню, кликнув в нижнем правом углу на значок с 3 квадратами.
15. О, нет! У нас открылся только один слой... Исправить легко: найдите в этом окне сверху справа знак выпадающего списка. Там нажмите кнопку Создать кадры из слоев (Make Frames From Layers).
16. Теперь мы будем менять длительность каждого кадра. Нажмите кнопку выпадающего списка под кадром. Выберете 0.2 секунды. Для каждого кадра, кроме темного.

Как сделать анимированную голограмму в Photoshop CS5 - уроки фотошоп


Для него сделаем 1 секунду.
17. Проверим, нажав кнопку Play. Что-то не так. И все потому, что 3 кадр не не месте. Светлая часть у него справа (с нее и надо начать анимацию). Просто перетащим его в начало. Также выберем цикличность Непрерывно (Forever). Теперь все работает!
18. Сохраним файл, нажав Ctrl+Shift+Alt+S, выберем там GIF и 128 цветов (чтобы вес был меньше) Вуаля!

Как сделать анимированную голограмму в Photoshop CS5 - уроки фотошоп

Читайте наши уроки дизайна и учитесь Фотошоп.

Добавить комментарий

Кликните на изображение чтобы обновить код, если он неразборчив
  • Яндекс.Метрика