Urban Rivals RU
Меню сайта
Категории каталога
Материалы сайта
Облако тегов
Отличный шаблон для ucoz Иконки груп для ucoz Скачать красивый шаблон для UCOZ CS icons for Ucoz Скачать бесплатно Большой набор иконок 262 штук OurWarez for uCoz by ReaL шаблон для сайта для блога КС шаблон Скачать Скачать шаблон для музыкального портала Иконки Glossy Red Icons Set Скачать иконки для ucoz Объемный текст, тени, отражения Красивый шаблон для ucoz СКАЧАТЬ КНОПКИ ДЛЯ ucoz Скачать кнопки для форума ucoz Скачать шаблон 100mbps to Ucoz Скачать шаблон на темуWarcraft 3 Portal by -=Wolf=- Скачать набор кнопок на тему "CS" Огненные иконки для форума UCOZ Скачать бесплатно шаблон для ucoz на тему Rap Скачать бесплатно шаблон для ucoz Oslik Скачать Шаблон "WorldPress" Скачать шаблон для uCoz Скачать Шаблон сайта для Кс Шаблон PRO UCOZ
Главная » Статьи » Уроки Adobe Photoshop » Для сайта

Как нарасовать UserBar в фотошопе (Photoshop)

« Рисуем UserBar »

Или как нарасовать UserBar в фотошопе (юзербар - картинка, использующаяся в подписи на форумах)...

Если вы любитель форумов, да и не любитель тоже, если вы просто заходите на форумы, то могли там частенько видеть у пользователей в подписи длинную узкую картинку — название которой « User Bar ».

UserBar или просто «графическая подпись (юзербар)» обычно размещается в подписи и отражает взгляды и интересы пользователя. Есть кучи сайтов, где можно скачать себе какие угодно User Bar'ы, но ведь будет оригинальней сделать его самому, и, тем самым, придать ему свою индивидуальность.

Сейчас я вам покажу и расскажу как его нарисовать...

Рисуем User Bar (картинка для подписи на форуме):

1. Создаём новое изображение размером 350x19 пикселей:

как нарасовать юзербар (User Bar) в фотошопе (юзербар - картинка для подписи на форуме)

2. Теперь нужно сделать фон. Можно применить в качестве фона какую-либо картинку, можно залить цветом (на ваш вкус), что я и сделал:

как нарасовать юзербар (User Bar) в фотошопе (юзербар - картинка для подписи на форуме)

3. Теперь сделаем чёрную внутреннюю обводку толщиной в 1 пиксель (чтобы наш User Bar хорошо отделялся от другой информации на форуме). Для этого кликаем на нашем слое правой кнопкой (на панели слоёв – Layers), выбираем пункт Blending Options и делаем так, как показано на рисунке ниже:

как нарасовать юзербар в фотошопе

4. Теперь не мешало бы добавить внутреннюю тень. Для этого в этом же окошке переходим на вкладку Inner Shadow и выставляем следующие параметры (можно и поэксперементировать):

как нарасовать юзербар в PhotoShop

5. Сейчас нужно добавить к нашему изображению штриховку. Чтобы не рисовать её полностью самому, сделаем текстуру. Чтобы создать текстуру создадим новое изображение размером 4x4 пикселей с прозрачным фоном (Background Contents: Transparent):

как нарасовать UserBar в фотошопе

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

как нарасовать UserBar в PhotoShop

7. Изображение для текстуры готово. Теперь нужно чтобы оно было доступно в PhotoShop'е. Для этого идём на вкладку Edit —> Define Pattern главного меню, в появившемся окошке вводим название текстуры и жмём OK. Теперь можно изображение, которое мы использовали для текстуры, закрыть не сохраняя – оно нам не понадобится:

как в фотошопе нарисовать юзербар

8. Возвращаемся к нашему User Bar'у... Снова открываем Blending Options, переходим на вкладку Pattern Overlay, в пункте Pattern выбираем только что созданную нами текстуру и изменяем следующие параметры:

нарисовать юзербар в фотошопе

9. Фон готов. Теперь нужно добавить текст. Лучше для этого использовать специальные шрифты, которые хорошо читабельны даже при малом размере. Я использовал шрифт Hooge 05_55 Cyr2 (прилагается к уроку – смотрите в конце статьи). Пишем белым шрифтом текст:

нарисовать юзербар в фотошопе

10. Добавим к нашему тексту тень:

нарисовать юзербар в фотошопе

И обводку толщиной в 1 пиксель, чёрного цвета:

нарисовать юзербар в фотошопе

11. Сейчас создадим новый слой и разместим его над слоем с фоном. Зайдём в Blending Options данного слоя и выставим значение параметра Blend Mode в Overlay:

нарисовать юзербар в фотошопе

12. Теперь нарисуем на этом слое что-нибудь любыми кисточками (на ваш вкус, а эту кисточку ищите в конце урока) белого цвета:

как нарисовать юзербар в фотошопе. User Bar - картинка для использования на форумах в подписи.

13. Осталось добавить эффект стекла. Его можно сделать различными способами — я покажу вам способ попроще. Для этого выделим часть изображения инструментом Elliptical Marquee Tool:

как нарисовать юзербар в фотошопе. User Bar - картинка для использования на форумах в подписи.

И зальём его градиентом белого цвета (с помощью инструмента Gradient Tool):

как нарисовать юзербар в фотошопе. User Bar - картинка для использования на форумах в подписи.

14. Снимаем выделение и всё. Наш User Bar готов:

как нарисовать юзербар в фотошопе. User Bar - картинка для использования на форумах в подписи.

Можно ещё поэкспериментировать с эффектами, фоновым рисунком и др. Вот, например, какой UserBar сделал себе я:

как нарисовать юзербар в фотошопе. (Guljay S.V. - Web Designer)


.: Дополнительно :.

Скачать шрифт « Hooge 05_55 Cyr2 » | ZIP, 15.2 КБ

Скачать кисточку (пункт №12 этого урока) | ZIP, 885 КБ



Категория: Для сайта | Добавил: cinemania (28.12.2008)
Просмотров: 1527 | Рейтинг: 5.0/1 | |Теги:
Пожалуйста! Если вам понравился этот материал напишите свой отзыв. Посетите наш ФОРУМ


Всего комментариев: 0
Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]
Форма Входа
Воскресенье, 28.04.2024, 20:25
-й день

Гость, мы рады вас видеть. Пожалуйста зарегистрируйтесь или авторизуйтесь!
 
Логин:
Пароль:
Друзья сайта
Статистика
Рейтинг сайтов
Онлайн всего: 1
Гостей: 1
Пользователей: 0

Лучшие фильмы | Уроки Adobe Photoshop | Шаблоны для uCoz | Онлайн-TV | Кнопки для сайта UCOZ | Иконки для сайтов UCOZ | Скрипты для uCoz