Пятница, 20.09.2019, 03:31
Все для Фотошоп
Меню сайта


Категории каталога
Эффекты [5]
Робота с текстом [3]
Робота с фото [5]
Графика для сайта [5]
Дизайн/Рисование [6]
Анимация [4]
Практика [4]
Наш опрос
Какого материала вы бы здесь хотели видеть больше?
Всего ответов: 1678


Главная » Статьи » Уроки » Графика для сайта

Урок: Создание простого юзербара
Примеры таких «полосок» вы можете наблюдать ниже, изготавливая их, я не придерживалась каких то правил, просто один раз сделала себе основу и под неё закладываю изображение и меняю текст с разными настройками.

1. Как вы сами догадываетесь, урок мы начинаем с создания нового документа. Общепринято юзебары делать или совсем тоненькими (350х20 px), средними (350х40 px), и бигбарами (350х45 px). Мы с вами будем делать средний, он, на мой взляд наиболее гармонично смотрится в подписи.





2. Мы видим основу нашего будущего юзербара

3. Следующей задачей у нас стоит выбор красивого фона. Это можеет быть любая картинка подходящая к теме юзербара, она может и не быть большого формата, какие желательны для коллажей и прочих работ, но и не маленькая, чтоб не пришлось растягивать её, ведь нам ни к чему некрасивый юзербар, правда?
Я выбрала вот такой фон для своего юзербара, безмятежный пейзаж с далеко изображенной линией горизонта, то что нужно.

4.
Перетаскиваем его инструментом Move Tool (V) на наш юзербар

5. Теперь нам необходимо красиво разместить наш фон, подвигать его, примерить с разных позиций. Для этого мы идем в меню Edit -> Free Transform или нажимаем Ctrl+T. Зажимаем Shift (чтобы не потерять пропорции) и тянем за уголок, меняем изображение насколько это нужно. Инструментом Move Tool (V) можем просто подвигать картинку.



 
Как только мы остаемся довольны результатом, оставляем слой как есть.
6. Придадим объем нашему изображению.
Создаем новый слой

7. Инструментом Paint Bucked Tool (G)заливаем наш юзербар белым цветом. Не пугайтесь что он перекрыл ваше изображение, так и должно быть.

8. Правой копкой мышки по слою вызываем меню и выбираем в нем Blending Options

9. Выставляем параметры как на картинках

Здесь можно отрегулировать сам "глянец", сделать блик ярче или бледнее, а также подредактировать форму самого блика













10. Добавляем текст, применяем к нему стиль и готово. Самый простой юзербар готов

Это примеры того что можно сделать:

Если вы обратили внимание, то внутренние тени (1 и 3 картинка в 9 п.) сделаны в универсальном сером цвете. Этот цвет можно менять в зависимости от цвета вашего фона. Если выбрать пипеткой основной цвет фона картинки и сделать его на тон темнее, то картинка будет выглядеть намного лучше и эффектней.
Если цвет не очень заметен, поставьте параметр Blend Mod: Normal и бегунком Opacity отрегулируйте яркость/прозрачность.

Вариантов для украшения юб может быть масса - это кисти, клипарт, маски, стили. Пробуйте комбинировать!

Урок по анимированному юб еще впереди

Источник: http://royal-photoshop.ucoz.ru/forum/

Категория: Графика для сайта | Добавил: Markiza_Zima (17.02.2009) | Автор/Переводчик: Markiza-Zima
Просмотров: 1641 | Рейтинг: 5.0/1 |
Всего комментариев: 0
Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]
Форма входа
Поиск
Статистика

Онлайн всего: 1
Гостей: 1
Пользователей: 0
Copyright MyPhotoshop © 2019

Хорошие, и главное бесплатные, темы для мобильного.
Rambler's Top100