CrazyReality: Любовь в Доме2 фальсифицирована и нелегитимна !

Информация о пользователе

Привет, Гость! Войдите или зарегистрируйтесь.



Юзербар в Photoshop

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

1

Юзербар (Userbar) – графическая подпись для форумов. (Brave Defender)

Юзербар в Photoshop CS3
1. Создаем текстуру «полоски», которую в дальнейшем будем накладывать на юзербар.

Новый документ (Ctrl + N) 6 х 6 пикселей с прозрачным фоном (transparent)
http://img0.liveinternet.ru/images/attach/c/0//45/73/45073776_WindowsLiveWriter_Photoshop_BABC_clip_image0014_1.gif

Получившийся документик масштабируйте до 1600% (Ctrl + знак «плюс» или Alt + ЛКМ пока не достигните нужного размера).

http://img1.liveinternet.ru/images/attach/c/0//45/73/45073779_WindowsLiveWriter_Photoshop_BABC_clip_image003_3.jpg

Щелкаем правой кнопкой по инструменту Кисть/Brush, из списка выбираем Карандаш/Pencil (расположение и назначение инструментов Photoshop см. в посте «Панель инструментов Photoshop»)

N.B. Любителям hotkeys. Горячие клавиши для выбора инструмента: кисть - B, а если необходимо выбрать инструмент из подменю (например, карандаш) - нажимаем B необходимое число раз при нажатой клавише Shift. Это касается всех кнопок, содержащих несколько инструментов (например, Волшебная палочка и Быстрое выделение - W и Shift+W, соответственно).

Размер устанавливаем 1px , цвет - черный. Рисуем диагональ (не сплошной линией, а кликая каждую точку отдельно).
http://img0.liveinternet.ru/images/attach/c/0//45/73/45073781_WindowsLiveWriter_Photoshop_BABC_clip_image001_5.gif

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

http://img1.liveinternet.ru/images/attach/c/0//45/73/45073783_WindowsLiveWriter_Photoshop_BABC_clip_image0054_1.gif

2. Изготовление юзербара.
Создаем новый документ 350 на 19 пикселей.

http://img0.liveinternet.ru/images/attach/c/0//45/73/45073785_WindowsLiveWriter_Photoshop_BABC_clip_image008_3.gif

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

http://img1.liveinternet.ru/images/attach/c/0//45/73/45073787_WindowsLiveWriter_Photoshop_BABC_clip_image010_3.jpg

Подбираем картинки, которые разместим на свой юзербар.
Здесь будем использовать логотип любимой программы - Photoshop CS3.
http://img0.liveinternet.ru/images/attach/c/0//45/73/45073789_WindowsLiveWriter_Photoshop_BABC_clip_image012_3.gif

Вырезаем и Перемещаем (V) сначала перышко (см. также пост «Способы вырезания фона (объекта) в Photoshop»).
http://img1.liveinternet.ru/images/attach/c/0//45/73/45073791_WindowsLiveWriter_Photoshop_BABC_clip_image014_3.jpg

Нажимаем Сtrl+T (Edit > Free Transform), чтобы уменьшить изображение.
http://img0.liveinternet.ru/images/attach/c/0//45/73/45073793_WindowsLiveWriter_Photoshop_BABC_clip_image016_3.jpg

Создаем новый слой под пером (нажать на пиктограмму создания нового слоя с меню слоев при нажатой клавише Ctrl). Возьмеме инструмент Градиент (Shift+G), установим 2 цвета в палитре цветов. Проведем градиент слева направо.
http://img1.liveinternet.ru/images/attach/c/0//45/73/45073795_WindowsLiveWriter_Photoshop_BABC_clip_image018_3.jpg

Уменьшаем буквы CS3 и располагаем их на юзербаре.

http://img0.liveinternet.ru/images/attach/c/0//45/73/45073797_WindowsLiveWriter_Photoshop_BABC_clip_image0204_1.jpg

3. Добавляем рамочку вокруг юзербара.
Новый слой поверх всех. Нажимаем Сtrl+А (Select > Select All / Выделение > Все), чтобы выделить все.

Переходим в меню Редактирование > Выполнить обводку / Edit > Stroke. Размер обводки (ширина) - 1px, внутри (inside), черная.

Некоторым элементам юзербара можно добавить стили. Нажимаем на кнопку внизу палитры Слоев (расположение меню см. в посте Первый шаг в Photoshop). Выбираем стиль Внешнее свечение (Outer glow), цвет свечения - по вкусу.

http://img1.liveinternet.ru/images/attach/c/0//45/73/45073799_WindowsLiveWriter_Photoshop_BABC_clip_image0214_1.gif

Добавляем текст (использованный шрифт Visitor TT2 BRK).

http://img0.liveinternet.ru/images/attach/c/0//45/73/45073801_WindowsLiveWriter_Photoshop_BABC_clip_image0234_1.jpg

Добавляем тексту стиль Обводка/Stroke (черного цвета, снаружи/outside).
http://img0.liveinternet.ru/images/attach/c/0//45/73/45073805_WindowsLiveWriter_Photoshop_BABC_clip_image024_thumb.gif

Переходим на слой с градиентом. В главном меню: Редактирование > Выполнить заливку / Edit > Fill.

В окошке выбираем текстуру Полоски, которую создали в начале (прозрачность можно уменьшить или оставить на 100%).

А теперь нужно сохранить наш юзербар через меню Файл > Сохранить для Web... / File > Save for web...), выбираем формат PNG, качество 24.

http://img1.liveinternet.ru/images/attach/c/0//45/73/45073807_WindowsLiveWriter_Photoshop_BABC_clip_image0075_1.jpg

Дополнительные эффекты:

Если хотите сделать ваш юзербар немного объемным, то...

Перейдите на фоновый слой, откройте палитру стилей и примените стиль ‘Flat Rounded Normal’

http://img0.liveinternet.ru/images/attach/c/0//45/73/45073813_WindowsLiveWriter_Photoshop_BABC_clip_image026_thumb.jpg

Этот вариант подойдет, если вы заливали фон градиентом. Но если на фоне у вас картинка, то...

1. Перейдите на фоновый слой с картинкой

2. Нажмите последовательно Ctrl+A, Сtrl+C и Сtrl+V (Выделить все, Копировать и Вставить/Вклеить)

3. Примените стиль ‘Flat Rounded Normal’

P.S. Это нужно сделать потому, что возможно не вся картинка вошла в рамки юзербара, эффект вы можете просто не увидеть.

P.P.S. Здесь режим наложения был изменен на Замена светлым (Lighten), чтобы гармонично слиться с фоном.

Вот и готово!

http://img1.liveinternet.ru/images/attach/c/0//45/73/45073772_WindowsLiveWriter_Photoshop_BABC_clip_image028_3.jpg
Источник «вдохновения» – электронная книжка «300+ уроков Photoshop»

спасибо автору)))

P.S. *cсылка на источник - если вдруг ошиблась при переносе*  :flag:

+1

2

Застряла на фазе переноса уменьшенной картинки на узкую полосу - картинка просто расплывается к лешему и ни фига не видно... :mad:

0

3

если не задумывать в Фотошопе сложные юзербары, то можно обойтись спец.прогой Userbar Generator, лежит везде в инете.

или можно сделать на сайте http://www.userba.ru/
результат- http://i057.radikal.ru/0906/3e/213d0dc3c6a6.png

а сделать переходы между несколькими юзербарами, т.е. анимировать их можно на сайте- http://animator.userbars.com/
http://i062.radikal.ru/0906/ef/813973781ef9.gif

:flag:

+1

4

vavilon
Какой ты, всё-таки отзывчивый, плакалЪ :surprise:
Спасибо тебе!

0

5

Ёжка
http://www.kolobok.us/smiles/standart/blush2.gif   http://www.kolobok.us/smiles/he_and_she/give_heart.gif 
не умаляя пост Томасика, поделился альтернативой)
радуйте нас, девушки!)  http://i028.radikal.ru/0805/31/b2b175e00360.gif

+1