Электронные цифровые часы
Электронные цифровые часы
Этот Фотошоп урок научит Вас создавать анимированные цифровые часы.Сложность урока: Легкий
Данный урок научит вас создавать анимированные цифровые часы.
Создадим новый документ следующих размеров 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, то палитра анимации находится в меню Окно-Анимация.
Спасибо.Интересный урок.
спасибо)))
Спасибо!
Спасибо! ^_^
Спасибо!
язык картинок английский,и его не обязательно переводить на русский.Большинство из нас знают английский,другие могут просто воспользоваться интернет-переводчиком.
Спасибо, здорово получилось
Спасибо... Возникли трудности с анимацией (первый раз всё таки), но смог, сделал :) Урок сложный по началу.