|
Урок: Как сделать стильный юзербар в Фотошопе
|
|
| [SeVaPeR] | Дата: Среда-Middas, 07.07.2010, 14:57 | Сообщение # 1 |
Группа: Почетный участник сайта
Сообщений: 193
Награды: 23
Статус: Выехал
| "Урок: Как сделать стильный юзербар на сайт в Фотошопе"
Итак. Открываем Adobe Photoshop CS. Создаем новый холст ("New") с размерами 350 x 19. Резолютность ставим на 72
Тип холста/Прозрачность ( Transparent ) .
У вас должна получиться такая моделька:
Далее открываем свою картинку приготовленную собственно для юзербара. Я например выбрал картинку абстракции. В колонке
Файла открываем свою картинку или из дериктории папки переносим её на серый "задний" план.
Далее, перемещаем картинку в свой созданый холст для юзербара. В панели кистей выбираем инструмент размещения.
После, оптимизируем картинку до нужного размера. Выбираем в столбике "Edit"(выбор) строку "Transform"(трансформация)
Выбираем в появившейся подстроке "Scale" (размеры).
Чтобы вам удобнее было формировать картинку отдалите её при помощи колесика на мышке. Или же горячими клавишами приближения и отдаления. CTRL + (естественно приблизить)
CTRL - (отдалить) . Если вы потеряете случайно формировку картинки, горячей клавишой редактирования размеров вы можете её восстановить (CTRL + T)
Итак, размер оптимизирован по вашему желанию. (Но не забывайте, маленькие картинки при уменьшении теряют свое свойство качества и объема. Так что лучше выбирать большие,яркие,и качественные картинки.
После придадим нашему юзербару немного узоров для стильности. Я использовал узоры Brush, скачать этот узор вы сможете по Леттитбиту.
Размещаем узор кисти на юзербар. Я выбрал черный цвет для создания узора.
У вас должен получиться примерно такой юзербар:
Теперь придадим юзербару немного объема, обводки и сделаем ему штифт. Открываем в меню слоев "Blending Options" (основные настройки)
Теперь отмечаем галочкой Inner Shadow ( Внутреняя тень), Bevel and Emboss (Объем и резолют) , и Stroke (Обводка) . Внутри ставим такие значения:
Теперь в конце, отмечаем параметр Pattern Overlay( Патерн). Установим юзербару шифт. Если вы незнаете как делать шифт юзербару, прочитайте в разделе Фотошопа. (урок пользователя OldToroniel)
Устанавливаем значение Оверлэя как вам удобнее.
У вас должен получиться примерно такой юзербар со штифтом.Немного смегчаем штифт то 32 до 41, чтобы узор не загораживал рисунок.
Примерно вот так:
Я дополнительно установил Векторную маску со стеклянным эффектом вверху. Чтобы сделать такой эффект- создайте фигуру шаровой образности,разместите её снизу или поверху юзербара.
Примините в общих натсройках прозрачность до 20 или 30 и эффект стекла будет готов. Подробнее можете обратиться ко мне с вопросами по этому эффекту.
Теперь мы сделаем текст. Нажимаем на буковку "T" в панели. Выбираем шрифт текста. Я выбрал специальный шрифт для юзербаров Hooge.Скачать вы можете его с моего урока по Летитбиту:
Приминяем текст на юзербаре. Я создал текст моего знакомого сайта fablegame.info. Делаем тексту спецэффекты. Заходим опять же в "Blending Options" и выбираем строку "Stroke" (обводка)
Устанавливаем эти значения:
 (обязательно обратите внимание на "Inside"
нажимаем ок. и наш юзербар готов. Можете сделать штифт также шрифту для красоты. Наш юзербар теперь готов для постановления в ваши дневники, форумы , подписи и работы.
У меня получился вот такой юзербар:
 Урок "Как создать стильный юзербар в Фотошопе " составил [SeVaPeR]. Сделано специально для imperialcity.ucoz.net, копирование на другие сайты только с разрешением создателя урока.
Вам также предоставляется возможность скачать этот урок, и подробнее прочитать о создании юзербаров. (скачать можете с ссылки нашего сайта по Летитбиту)
Сообщение отредактировал [SeVaPeR] - Среда-Middas, 07.07.2010, 15:00 |
| |
| |
| Dar-Dro | Дата: Среда-Middas, 07.07.2010, 15:39 | Сообщение # 2 |
 Хранитель Памяти
Группа: Смотритель
Сообщений: 2099
Награды: 54
Статус: Выехал
| круто 
|
| |
| |
| Саннифер | Дата: Среда-Middas, 07.07.2010, 20:34 | Сообщение # 3 |
Группа: Пользователи
Сообщений: 1592
Награды: 20
Статус: Выехал
| [SeVaPeR], гениально! даже мне понятно! обязательно попробую... при первой возможности...
Дома - разруха, голодные дети... Мама часами сидит в Интернете...
Чисто прибранная квартира и вкусный ужин – два признака неисправного компьютера.
[Вот кто я!] [Манчкин 20%] [Убийца 0%] [Тусовщик 13%] [Исследователь 67%]
Сообщение отредактировал Саннифер - Среда-Middas, 07.07.2010, 21:05 |
| |
| |
| [SeVaPeR] | Дата: Среда-Middas, 07.07.2010, 21:03 | Сообщение # 4 |
|
Группа: Почетный участник сайта
Сообщений: 193
Награды: 23
Статус: Выехал
| Саннифер, Спасибо. Если все таки что то непонятно будет.- обязательно обращайся
|
| |
| |
| Zeron | Дата: Среда-Middas, 07.07.2010, 21:18 | Сообщение # 5 |
Группа: Пользователи
Сообщений: 1258
Награды: 31
Статус: Выехал
| У меня с Оверлеем не получается, нет таких полосочек... Да и других нет.
 I'm Commander Shepard, and this is my favorite Zeron on ImperialCity!
|
| |
| |
| [SeVaPeR] | Дата: Четверг-Turdas, 08.07.2010, 12:13 | Сообщение # 6 |
|
Группа: Почетный участник сайта
Сообщений: 193
Награды: 23
Статус: Выехал
| Zeron,
Вот как делать штифт на юзербар: Открываем Adobe Photoshop. Создаем новый холст с параметрами ширины 4, высоты 4 . Резолюцию делаем на 72.
У тебя должно получиться такое окошко:
Теперь оптимизируем размер на 120%. Нажимаем CTRL+, до тех пор пока размеры станут предельными. (т.е. уже нельзя увеличить картинку)
Далее выбираем в панели кистей инструмент карандашик.Правой жмем на кисти и выбираем снизу Pencil Tool:
Далее на готовом холсте рисуем узор. Он должен распологаться южно-вертикально вниз. (прежде чем рисовать узор, поставьте толщину карандаша на 1pix.
Вот такой узор должен получиться:
Теперь сделаем его в паттерны. Выбираем, Edit, Define Pattern (Выбрать/Определить паттерн)
В появившимя окошке жмем на ОК. И готово! Ваш штифт для юзербаров/аватаров/бигбаров и т.п. готов, теперь вы сможете его приминять на картинке.
Чтобы принять штифт, жмем на любой картинке панели слоев Blending Options/Pattern Overlay (Общие параметры/паттерн)
Самый последний квадратик это наш штифт - с узором.
|
| |
| |
