SITE LOGO Вторник, 2022-07-05, 11:56 PM
Приветствую Вас Гость | RSS
Главная страница | Каталог статей | Регистрация | Вход
Меню сайта
Категории каталога
Уроки для GameMaker [4]
Изучаем GameMaker 6.0
Уроки для Photoshop [4]
Изучаем Adobe Photoshop
Уроки Гомера [3]
Все о ТМ
Уроки для 3DS MAX [0]
Изучаем 3D Studio Max
Форма входа
Поиск по каталогу
Друзья сайта
GP TEAM
Статистика
Начало » Статьи » Уроки для Photoshop

Создание юзербаров
1. Создаем новый документ с параметрами 350х20, RGB, Transparent. Получается этакая полоска.
2. Делаем основным цвет #898989, задним #e1e1e1
Image
Image
3. Выбираем инструмент Gradient tool (G) и проводим линию сверху вниз поперек полоски.
4. Сделаем косые линии для заливки. Для этого создадим новый документ (Ctrl+N) с параметрами 5х5, RGB, Transparent.
5. Инструментом Pencil Tool (B) размером 1 пикс. проведем диагональ как на рисунке.
Image
6. Зададим эту картинку как заливку. Для этого нажмем Edit - Define Pattern... Документ с этой картинкой можно закрыть.
7. Создаем новый слой (Ctrl+Shift+N, OK)
8. Заливаем его нашими косыми линиями. Для этого нажимаем Shift+Backspace, в открывшемся окошке в стоке USE ставим Pattern, Custom Pattern выбираем нашу косую линию
Image
9. Нажимаем ОК.
Image
(тут может показаться, что линии кривые, но стоит сделать масштаб 100%, увидите, что все нормально.)
10. Делаем прозрачность слоя с линиями 30%.
Image
11. Дальше можно скачать и установить шрифт "Visitor" вот с ЭТОГО сайта, или воспользоваться каким-нибудь подходящим своим. Я пользовался скачанным.
12. Если, как и я, пользуетесь скачанным, включите шрифт "Visitor -BRK-", установите его параметры такие:
Image
13. Дальше пишем нужную нам надпись.
Image
14. Растеризуем слой с надписью. Для этого нажимаем Layer - Rasterize - Layer.
15. Кликаем два раза левой кнопкой крыски по изображению надписи в палитре слоев, тем самым вызывая меню стилей слоя "Layer Style".
16. Нажимаем на строчку "Stroke" и ставим такие параметры:
Image
17. Нажимаем ОК.
18. Создаем новый слой и помещаем его под слой с текстом.
19. Выбираем инструмент Elliptical Marquee Tool (M) и делаем им вот такое выделение:
Image
20. Заливаем это выделение белым цветом с помощью инструмента Paint Bucket Tool (G)
21. Ставим прозрачность слоя 50%.
Image
22. Сделаем обводку всего документа. Для этого нажмем Ctrl+A, потом нажимаем Edit - Stroke. В появившемся окне выставим эти параметры:
Image
23. Нажимаем ОК.
Можно вставить какую-нибудь картинку:
25. Открываем картинку, которую хотим вставить.
26. Выбираем инструмент Rectangular Marquee Tool (M), меняем Style на Fixed Size и ставим размеры 350х20.
27. Делаем выделение на картинке и выбираем, что хотим вставить. (если не влезает то, что хотите, можно сделать размер картинки поменьше - Ctrl+Alt+I)
Image
28. Выделив нужную область, нажимаем Ctrl+C и переходим на документ с нашим UserbarОМ.
29. Нажимаем Ctrl+V.
30. Делаем прозрачность вновь созданного слоя 40%.
Image
Далее соединяем все слои (Ctrl+Shift+E) и сохраняем полученную картинку. Вот, что получилось у меня:
Image
Урок взят с сайта Creep.ru

Советы от меня:
1. Сохранять лучше так:
File -> Save For Web
Вот мои настройки:
Image
Далее жмем на треугольничек в кружочке справа вверху,Save Settings и вводим Userbars или что-нибудь другое.
Теперь чтобы сохранить второй(третий и т.д.) юзербар, жмем Save For Web и сверху выбираем Userbars, затем Save.
Так юзербар будет сохранять до 5 кб.
2. Чтобы сто раз не делать одно и тоже, советую сохранить исходник готового юзербара.
И, чтобы создать другой юзербар, нужно будет только изменить текст (Font Tool) и картинку (удалить (или выключить) слой со старой и вставить новую).
Вот пример. Чтобы выключить слой, жмем на глазик слева от слоя, чтобы включить, туда же. Ну, а текст поменять не так уж и трудно.

Категория: Уроки для Photoshop | Добавил: korvinius (2006-07-28)
Просмотров: 8706 | Комментарии: 4 | Рейтинг: 0.0

Всего комментариев: 4
0
4 Fray   [Материал]
Размер юзербара не 350*20, a 350*19! высота 20 пикселей - ошибка дизайнеров.

0
3 Chiric   [Материал]
почему картинки не видно?

0
2 Den   [Материал]
большое спс!!!!очень помогли

0
1 Анютка   [Материал]
Спасибо за урок =) у меня с первого раза получилось вот ето
http://f.foto.radikal.ru/0610/9fb6df788ff7.jpg ещё раз спасибо!

Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]
Copyright MyCorp © 2006