Уроки Анимация Игорь Арония 23 января 2010

Электронные цифровые часы

Сложность урока: Легкий

Данный урок научит вас создавать анимированные цифровые часы.

Создадим новый документ следующих размеров 350 *200 px., и зальем его черным цветом (#000000). Сделаем рамку для наших часов, для этого полностью выделите слой и перейдите в меню Select >> Modify >> Border (Выделение>>Модификация>>Граница).
Установите ширину размером 20 px. (выделение при этом переместится на 20 px. ниже).

Сейчас, для того чтобы выделить область, которая осталась за выделением, (и сделать рамку), перейдите в меню Select >> Inverse (инверсия выделения). Теперь граница размером 20 рх. выделена.  Создайте новый слой. Залейте его любым цветом, мы выбрали темно серый, но это не обязательно.

При выделенном новом слое, перейдите в меню Layer >> Layer Styles >> Options (Слой>>Стили слоев>>Опции), и примените следующие установки, с целью получить стильную металлическую рамку.
Drop Shadow – тень

Inner Shadow - внутренняя тень, используйте цвет #CCCCCC.

Inner Glow - внутреннее свечение, используйте цвет #666666.

Bevel and emboss – тиснение.

Contour – контур, используйте форму «Gaussian» ( по Гауссу).

Satin – глянец, используйте форму «Rolling Slope» (Повторяющийся уклон) и цвет #FFFFFF.

Gradient Overlay - наложение градиента, градиент между #CCCCCC и  #666666.

Stroke – обводка.

Вот такую рамку вы получили.

Сейчас перейдем к более трудоемкой части. Выберите инструмент Текст и напишите следующее 88:88.
Вам необходимо использовать какой-либо «цифровой» шрифт. Мы использовали шрифт “DS Digital”, который можно скачать тут. Размер: 123 px, цвет: #3d3d3d.

Продублируйте слой с цифрами. На копии слоя напишите различные цифры, например 6:05. Используйте яркий режущий глаз цвет, мы использовали ярко-голубой цвет #04e3fd. Также, на ваше усмотрение, можете использовать и другие цвета.

Проверьте, чтобы новый слой точно был наложен сверху на серые цифры. Вы также можете добавить немного «Outer Glow» (внешнее свечение) того же, голубоватого оттенка, чтобы цифры выглядели более светящимися, но это не обязательно.

Сохраните это изображение в новую папку на жесткий диск и назовите его «1».
Теперь, удалите голубые точки между цифрами (слой с серыми цифрами оставьте не тронутым).

Это будет вашим вторым изображением, сохраните его как «2» в ту папку, где хранится первое изображение.

Откройте ImageReady.
Перейдите в меню File >> Import >> Folder as Frames (Файл>>Импорт>>Папка как Кадры), и выберите папку, где хранятся ваши изображения.
Установите время для анимации изображений.

Сохраните изображение в формате GIF, так как анимацию можно сохранять только в этом формате.

Автор: loreleiwebdesign

Источник: loreleiwebdesign.com

Комментарии 219

оч похоже=)) мне нравится урок=)

Цифры смещаются при смене кадра (у автора тоже).
Ссылка на гифку: http://jpegshare.net/49/9c/499c2d4ca51ae52bb31cd7d147893bd6.gif.html

Интересный урок, спасибо.
http://savepic.ru/8935020.gif

Спасибо за урок :)

Спасибо !
N:\home\html.loc\www\images\169.gif

Вот такие часики получились http://savepic.ru/6059244.gif

спасбо
http://jpeg.im/2waa

Спасибо за урок. Анимацию сделала другой.

Не выходит в самом начале, нажимаю Граница 20 пикс. он сразу делает рамку, нажимаю Инверсия, вообще бред выходит, подскажите что делать, у CS 5.

Администратор
Вопросы по урокам задаём на форуме. В конце каждого урока есть ссылка "Задать вопрос по уроку на форуме".

У меня анимация не получается... Подскажите в чем проблема? Я захожу Файл -> Импортировать -> а там нету Папка как Кадры...

спасибо большое!!!!

Thank you ,Отличный урок

У меня Photoshop CS4 и у меня нету Файл>>Импорт>>Папка как Кадры подскажите пожалуйсто где это найти?

Не умею я ставить шрифты...зато получилось все интереснее.

www.s019.radikal.ru/i618/1204/73/bf0309e4c515.gif а

спасибо =)

Моя работа:

Ответьте пожалуйста,а можно сделать анимацию без ImageReady?

Администратор
Если у вас версия выше CS2, то палитра анимации находится в меню Окно-Анимация.

Спасибо.Интересный урок.

язык картинок английский,и его не обязательно переводить на русский.Большинство из нас знают английский,другие могут просто воспользоваться интернет-переводчиком.

Спасибо, здорово получилось

Спасибо... Возникли трудности с анимацией (первый раз всё таки), но смог, сделал :) Урок сложный по началу.

Еще 30
Добавить комментарий / работу

Новые работы пользователей

По заданным фильтрам работы не найдены

Попробуйте изменить критерий поиска или сбросить фильтры


Смотреть все работы

Предыдущая Следующая
Добавлена {{work.date}}
Не удалось загрузить работу. Возможно она была удалена.
GIF {{work.bite}} Мб Загрузить
Редактировать Удалить
18+
Работа имеет содержимое для 18+ лет
{{work.views}} {{work.comments}}
Жалоба

Комментарии {{work.childs.length || 0}}

Видео к работе
Популярные работы автора:
Работа получила награды:
Курсы автора:
Онлайн-курс

Жалоба

Опишите суть жалобы, при необходимости добавьте ссылки на скриншоты

Спасибо! Ваше обращение ушло на рассмотрение.

Название работы

Описание работы (необязательно)

Комментарий

Ваша миниатюра:

Название:
{{name}}
Описание:

Исходник:

{{source.name}} {{source.name}}

Тэги:
#{{tag.label}}

Есть ли у вас исходник к работе?

Исходник — это файл из исходных изображений, которые использовались для создания вашей работы. Исходник позовляет лучше понять вашу работу. Он не обязателен, но работы с исходниками получают больше лайков и имеют право на участие в еженедельных конкурсах.
jpg-файл, максимальный размер 1920x1080px

Пример исходника

Выберете тэги работы:

Тэги позволяют лучше находить вашу работу другим пользователям. Подумайте какие тэги описывают вашу работу лучше всего и проставьте их. Это даст вам больше просмотров, лайков и комментариев. 

Не более десяти тэгов на одну работу

Комментарии к работе будут отключены, на их месте будет выведена реклама.

После добавления работы:


Запланировать публикацию

Отменить планирование
Запланировать

Используя данный сайт, вы даёте согласие на использование файлов cookie, данных об IP-адрес, помогающих нам сделать его удобнее для вас. Подробнее