* Создание юзербара

Страница: 1

Сообщений 1 страница 3 из 3

Поделиться12008-07-13 07:53:49

Автор: Colnce
Супер_помощница
Откуда: Казахстан
Зарегистрирован: 2008-06-21
Приглашений: 0
Сообщений: 178
Уважение: +197
Позитив: +133
Пол: Женский
Провел на форуме:
3 дня 2 часа
Последний визит:
2009-09-08 00:23:18

Привет, вот пришло время новому уроку. На этот раз мы научимся делать юзербары. Итак немного теории, что же такое юзербар? А все просто это графическое изображение, предназначенное для размещения в подписи на веб-форумах, интернет-конференциях и других средствах интернет-общения. Основной целью размещение картинки-юзербара является выражение каких-либо убеждений, пристрастий, увлечений, привязанностей и даже черт характера пользователя. И так пошло-поехало…но нам этого хватит и приступаем к созданию собственного юзербарчика.

Итак нужно учесть что каждый уважающий себя юзербар должен иметь размер 350×19.
Наличие чёрной рамки толщиной 1 пиксель по всему периметру изображения.
Использование шрифта Visitor TT1 (10 кегль), Visitor TT2 (13 кегль) или microN55 (8 кегль) белого цвета с чёрной каймой и выключенной опцией anti-alias.
Наличие фоновой штриховки под углом 45°.
Белый полупрозрачный овал в верхней части изображения для придания иллюзии трёхмерности.
Формат файла GIF (можно использовать также для создания анимации) или PNG (для высокого качества).

Итак начинаем.

Фотошоп запущен, обязательный атрибут на столе (в виде кофе). Создаем новый документ ctrl+n. Ставим размеры 350*19.
Создаем новый слой и заливаем его цветом #0d0d0d. Снова создаем новый слой берем инструмент Brush Tool (b) и ставим белый цвет. В свойствах инструмента ставим opacity на 10%, мягкую кисточку диаметров 80px. Теперь рисуем блики слева и немного высветлим справа.

Теперь берем #752f4c цвет и добавляем блик справа, совсем не значительный. Теперь сменяем цвет на # 263880 и рисуем в продолжение первого цвета, создавая такой себе градиентик

На новом слое заливаем штриховкой цветом #545454. И ставим непрозрачность слоя на 12%.

Добавил красивостей кистями и добавил надпись. “rendermarket fun”. Шрифт как и требовалось поставил Vistor TT1 и размер 10 кеглей.

И последних 2 штриха: нужно добавить рамочку однопиксельную и блик. Итак рамочку делаем на новом слое и ставим на верхний уровень (думаю создание рамочки не составит сложности). Под этим слоем нужно создать еще одни где разместим наш блик. Создаем овальное выделение инструментом Elliptical Marquee Tool, заливаем белым цветом и ставим непрозрачность на 20%.
Вот и все наш юзербар готов.

Обсуждаем урок и выкладываем свои результаты

Поделиться22009-10-13 16:35:22

Автор: KrasotkaDJo
Администратр
Откуда: Питер
Зарегистрирован: 2008-05-09
Приглашений: 0
Сообщений: 16033
Уважение: +3601
Позитив: +1801
Пол: Женский
Возраст: 40 [1984-10-27]
Провел на форуме:
3 месяца 7 дней
Последний визит:
2016-04-30 21:50:15

В этом Фотошоп уроке мы будем создавать юзербар.
Юзербар - это графическая подпись для форумов.
Сначала мы создадим текстуру "Полоски", которую в дальнейшем будем накладывать на юзербар.
Откройте новый документ, 6×6 px, фон сделайте прозрачным (transparent)

Получившийся малюсенький документ масштабируйте до 1600% (ctrl+"+" пока не достигните нужного размера).

Щелкните правой кнопкой по инструменту Кисть , из выплывающего списка выберите Карандаш.
Размер установите на 1px , цвет - черный. Нарисуйте диагональ, как показано ниже (не рисуйте сплошной линией, кликайте каждую точку отдельно)

Переходим в меню Редактирование - Определить узор/текстуру (Edit > Define Pattern), дайте имя, нажмите ОК.

—————————————————————————
Теперь мы готовы приступить к изготовлению вот такого юзербара:

Создаем новый документ с такими же настройками:

Должно получиться вот так:

Подберите картинки, которые вы хотите разместить на свой юзербар.
Здесь будем использовать логотип вашей любимой программы - Фотошоп версия CS3.

Вырезаем и Перемещаем сначала перышко.

Нажимаем Сtrl+T, чтобы уменьшить изображение. На сколько уменьшать, решайте сами.

Создайте новый слой под пером.
Возьмите инструмент , установите 2 цвета в палитре цветов. Проведите градиент слева направо.

Уменьшите буквы CS3 и расположите их вот так:

Добавим рамочку вокруг юзербара.
Создайте новый слой поверх всех. Нажмите Сtrl+А чтобы выделить все.
Перейдите в меню Редактирование - Выполнить обводку (edit>stroke). Размер поставьте 1px, внутри (inside), и черную.
Некоторым элементам юзербара Вы можете добавить стили.
Нажмите на кнопку внизу палитры Слоев.
Выберите стиль Внешнее свечение (Outer glow).
Цвет свечения Вы можете подбирать на свой вкус.

Добавим текст, специальный шрифт вы можете скачать здесь - Visitor TT2 BRK.
Установите такие настройки.

Добавьте тексту стиль "Обводка", черного цвета, снаружи (outside).

Теперь перейдите на слой с градиентом. Переходим в меню Редактирование - Выполнить заливку (edit>fill).
Выберите в окошке текстуру, которую мы создавали в начале урока.
Прозрачность можете уменьшить или оставить на 100%.
А теперь нужно сохранить наш юзербар через меню Файл - Сохранить для Web (File > Save for web), выберите формат png, качество 24.

Дополнительные эффекты:
Если хотите сделать ваш юзербар немного объемным, то следуйте этой инструкции.
Перейдите на фоновый слой, откройте палитру стилей и примените стиль ‘Flat Rounded Normal’

Этот вариант подойдет, если вы заливали фон градиентом. Но если на фоне у вас картинка, то:
1. Встаньте на фоновый слой с картинкой
2. Нажмите последовательно Ctrl+a, Сtrl+c, затем Сtrl+v
3. Примените стиль ‘Flat Rounded Normal’
Это нужно сделать потому, что возможно не вся картинка вошла в рамки юзербара, эффект вы можете просто не увидеть.
* Здесь режим наложения был изменен на Замена светлым (lighten), чтобы гармонично слиться с фоном.
Вот и готово!

Источник: photoshop-master.ru

Поделиться32009-10-13 16:44:20

Автор: KrasotkaDJo
Администратр
Откуда: Питер
Зарегистрирован: 2008-05-09
Приглашений: 0
Сообщений: 16033
Уважение: +3601
Позитив: +1801
Пол: Женский
Возраст: 40 [1984-10-27]
Провел на форуме:
3 месяца 7 дней
Последний визит:
2016-04-30 21:50:15

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

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

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

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

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

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

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

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

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

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

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

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

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

13. Осталось добавить эффект стекла. Его можно сделать различными способами — я покажу вам способ попроще. Зальем градиентом белого цвета (с помощью инструмента Gradient Tool), и уменьшим прозрачность слоя: