-Рубрики

 -Метки

primal twitter астрология бизнес биоэнергетика блог бог вера видео война воспитание время гармония деньги дети диетология дизайн духовность душа евреи желания женщина жизнь защита здоровье израиль инструментал интернет информация история иудаизм календарь картинки качества красота литература личностный рост личность любовь медитация медицина методики мечты мир мозг молитвы мудрость музыка мышление новый год осознанность отношения оформление блога питание планирование плеер поздравления позитив позитивная психология полезности помощь праздник праймал природа психология путешествия путь радость развитие реальность ребенок религия родители ролики самопознание свобода скачать сознание стиль стихи страны счастье твиттер творчество терапия тест трансформация уроки успех философия фильмы финансы фото христианство цель чувства школа жизни эмоции энергетика юмор

 -Всегда под рукой

 -Поиск по дневнику

Поиск сообщений в MaSatyamAloka

 -Подписка по e-mail

 

 -Приложения

  • Перейти к приложению Всегда под рукой Всегда под рукойаналогов нет ^_^ Позволяет вставить в профиль панель с произвольным Html-кодом. Можно разместить там банеры, счетчики и прочее
  • Перейти к приложению Открытки ОткрыткиПерерожденный каталог открыток на все случаи жизни
  • Перейти к приложению Онлайн-игра "Большая ферма" Онлайн-игра "Большая ферма"Дядя Джордж оставил тебе свою ферму, но, к сожалению, она не в очень хорошем состоянии. Но благодаря твоей деловой хватке и помощи соседей, друзей и родных ты в состоянии превратить захиревшее хозяйст
  • Перейти к приложению Кнопки рейтинга «Яндекс.блоги» Кнопки рейтинга «Яндекс.блоги»Добавляет кнопки рейтинга яндекса в профиль. Плюс еще скоро появятся графики изменения рейтинга за месяц
  • Перейти к приложению Я - фотограф Я - фотографПлагин для публикации фотографий в дневнике пользователя. Минимальные системные требования: Internet Explorer 6, Fire Fox 1.5, Opera 9.5, Safari 3.1.1 со включенным JavaScript. Возможно это будет рабо

Юзербар в Photoshop

Среда, 17 Июня 2009 г. 17:09 + в цитатник
Цитата сообщения BraveDefender

Юзербар в Photoshop

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

Я давал ссылку на скачивание UserBar Generator – махонькой программы для автоматического создания юзербаров (с возможностью добавления текстов латинскими буквами).

А сейчас сделаем юзербар в Photoshop CS3 – всегда интереснее иметь простор для творчества.

Юзербар в Photoshop CS3

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

Новый документ (Ctrl + N) 6 х 6 пикселей с прозрачным фоном (transparent)

 

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

 

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

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

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

 

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

2. Изготовление юзербара.

Создаем новый документ 350 на 19 пикселей.

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


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

 

Вырезаем и Перемещаем (V) сначала перышко (см. также пост «Способы вырезания фона (объекта) в Photoshop»).


Нажимаем Сtrl+T (Edit > Free Transform), чтобы уменьшить изображение.


Создаем новый слой под пером (нажать на пиктограмму создания нового слоя с меню слоев при нажатой клавише Ctrl). Возьмеме инструмент Градиент (Shift+G), установим 2 цвета в палитре цветов. Проведем градиент слева направо.

 

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


3. Добавляем рамочку вокруг юзербара.

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

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

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

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


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

clip_image024


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

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

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


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

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

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

clip_image026 

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

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

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

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

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

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

Вот и готово!

Источник «вдохновения» – электронная книжка «300+ уроков Photoshop»

Серия сообщений "Photoshop":
Часть 1 - Редактор изображений.
Часть 2 - Мигающий баннер в Photoshop'e
Часть 3 - Юзербар в Photoshop
Часть 4 - Работа с фото. 69 уроков
Часть 5 - Уроки Photoshop
...
Часть 7 - Photoshop. Режимы наложения. Русский - английский
Часть 8 - Как пользоваться паттернами в photoshop
Часть 9 - Эффект распускающегося цветка

Метки:  



 

Добавить комментарий:
Текст комментария: смайлики

Проверка орфографии: (найти ошибки)

Прикрепить картинку:

 Переводить URL в ссылку
 Подписаться на комментарии
 Подписать картинку