Главная » Уроки » Уроки по веб-дизайну:
Перевод основных меню в Adobe Photoshop

Создание анимационного юзербара
1. Создаем новый документ 350х19 пикселей.
2. Заливаем его цветом ff7e00 должно получится примерно так:

3. Создаем новый документ с разрешения 3х3 пикселя. Удаляем задний фон и карандашом рисуем 3 точки по диагонали. В результате у вас должно получится то что показано на рисунке:

4. Далее идем в Edit => Defite Pattern… => называем нашу заготовку и жмем ОК и закрываем данный документ.
5. Теперь нам нужно залить наш оранжевый цвет нашей заготовкой создаем новый слой, идем Edit => Fill… и ставим настройки, показанные на рисунке, жмем ОК и ставим Opacity нового слоя, который мы залили равно 25% 6. В результате мы должны получить такое:

7. Нажимаем для склеивания обоих слоев Shift+Ctrl+E ( Для Photoshop CS2 )
8. С помощью инструмента Elipse Tool создаем белый овал на изображении и ставим Opacity только нарисованного овала равно 25%
9. Дале нанесем какой ни будь логотипчик или изображения заранее приготовленных размеров.
10. Теперь пришла очередь нанести на наш юзербар текст. Я выбрал стандартный для всех юзербаров шрифт Visitor.
11. Выбираем Blending options слоя с текстом => Stroke и ставим настройки показанные на рисунке:

14. Жмем для склеивания всех слоев Shift+Ctrl+E
15. Создаем новый слой. С помощью инструмента Rectangular Marquee Tool прямоугольное выделения небольших размеров и заливаем выделенную область таким цветом каким вам нравится также можно использовать градиент. После того как залили снимаем выделения с помощью Ctrl+D .
16. Дале делаем Opacity нашего нового слоя равно 50%
17. Пришло время создавать анимацию. Жмем на кнопку перехода от Photoshop в ImageReady, выглядит она так:
18. Все, теперь находясь ImageReady, будем творить анимацию. В нас всего два слоя – один с основным рисунком второй с нашим прямоугольником. Выбираем наш слой с прямоугольничком и передвигаем с помощью зажатой клавиши CTRL и стрелок на клавиатуре влево, чтобы его не стало видно вообще. После в окне Animation нажимаем на клавишу, которая показана на рисунке. (Если у вас по какой, то никому не ясной причине нет окна Animation, то его можно вызвать жмем Window => Animation)

19. После нажатия клавиши показанной на рисунке выше у вас появится еще один кадр. Выбираем второй кадр и опять как в прошлом шаге мы перемещали наш прямоугольник влево так теперь на нужно переместить его в право, чтобы его тоже не стало видно. После перемещения жмем клавишу которая показана на рисунке ниже:

20. После нажатия выставляем настройки указанные на рисунке:

21. Вот собственно и все жмем File => Save Optimized As… => Выбираем папку для сохранения, называем наш новоиспеченный юзербар => жмем СОХРАНИТЬ => в окне котором открылось, жмем ОК и все наш анимационный юзербар готов

Перевод основных меню в Adobe Photoshop

Сообщить о проблемном уроке



Источник: http://freed-net.org.ru/
Категория: Уроки по веб-дизайну: | Добавил: Mr-Freed (06.12.2009) | Автор: Владимир E W
Просмотров: 3500 | Комментарии: 2 | Рейтинг: 4.5/4
Всего комментариев: 2
2  
Спасибо, получилось.

1  
cry

Имя *:
Email:
Код *: