Urban Rivals RU
Меню сайта
Категории каталога
Материалы сайта
Облако тегов
Скачать шаблон бесплатно для uCoz Набор иконок для сайтов на UCoZ Green-icons for ucoz СКАЧАТЬ кнопки для форума Как нарасовать UserBar в фотошопе (Photoshop) шаблон для сайта для блога Скачать музыкальные кнопки для ucoz Скачать лучший шаблон для ucoz Иконки для форума UCOZ Отличный шаблон для ucoz Как нарисовать стильный логотип в фотошопе? Шаблон для укоз by EVILMAN (бесплатно) Набор иконок для чёрного фона.иконки UCOZ/ Скачать красивый шаблон для UCOZ Отличный шаблон для кланов, сайтов СS, Скачать медальки для форума Как в PhotoShop нарисовать 3D иконку коробки (упаковки)? Шаблон для КС сайта Скачать шаблон для СОФТПОРТАЛА Скачать бесплатно шаблон для укоз Rip By lera Скачать шаблон для сайта клана CS 1.6 Stalker шаблон для uCoz на тему игры Stalker Скачать шаблон 100mbps to Ucoz Скачать иконки 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)
Просмотров: 1526 | Рейтинг: 5.0/1 | |Теги:
Пожалуйста! Если вам понравился этот материал напишите свой отзыв. Посетите наш ФОРУМ


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

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

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