Your Roll

Рейтинг ролевых ресурсов. Каталог ролок. Полезные инструменты для администраторов ролевых игр.


Вы не подключены. Войдите или зарегистрируйтесь

Предыдущая тема Следующая тема Перейти вниз  Сообщение [Страница 1 из 1]

Космо

Космо
Я сквозь ткань миров проходящий странник, Я СКВОЗНЯЯЯЯЯК!!! ХДД
У меня фотошоп CS6, но процесс создания юзербара мало чем отличится в других версиях шопа :)

Что такое юзербар?
Юзербар - это небольшое изображение размером в 350х19 пикселей, говорящее об интересах или вкусах его обладателя. Зачастую это картинки с адресом сайта, на которых пользователь ещё сидит.

Если пользователю понравился сайт - он может взять себе юзербар и поставить его в подпись на другом форуме. Это приводит новых пользователей. ;)

Для начала лучше скачать шрифт microN55. Тыкайте, это прямая ссылка без каких-либо страшных хостингов :) Шрифт этот представляет собой простой пиксельный шрифт высотой в 8 пикселей. Применяется он как раз для юзербаров, мелких копирайтов, некоторых декоративных элементов. Ещё в нём есть русский язык, в отличие от подобных шрифтов.

Приступаем ;)

1. Создадим изображение размерами 350х19. Цветовой режим - RGB 8 bit.

2. Откроем изображение, которое будем использовать как фон для юзербара.

3. В открытом изображении выделяем всё (Ctrl + A) и копируем (Ctrl + C).

4. Возвращаемся к нашей заготовке для юзербара и вставляем фон (Ctrl + V).

5. Используем свободную трансформацию (Edit > Free transform или Ctrl + T). Изменяем размеры, помещаем изображение так, чтобы у нас получился симпатичный фон для юзербара :)

6. Добавим обводку. Создаём пустой слой и заливаем его любой краской. Далее дважды тыкаем по этому слою в панели слоёв - у нас откроется настройка стиля. Устанавливаем непрозрачность заливки на 0 и включаем обводку:

Урок по Photoshop: делаем юзербар для наших пользователей 3344524m

В настройках обводки указываем расположение "Внутри" (Position - Inside), а толщину обводки - на 1 пиксель.

На данном этапе у меня получается следующая вещь:
Урок по Photoshop: делаем юзербар для наших пользователей Userba10

7. Добавляем текст. Тыкаем куда-нибудь в середину и пишем желаемый текст шрифтом microN55, который мы скачали. Установите размер шрифта на 8 пунктов.
Чтобы текст не размазывался, вверху выберите режим сглаживания на "нет" (у меня это две буковки "а", выбираю "None"). Цвет текста делаем белый.

Текст юзербара обычно располагают по левому краю.

8. Сделаем у текста чёрную обводку. Чтобы не было ненужных скруглений и граница была чёткой, интерпретируем эту обводку как свечение. Дважды тыкаем по названию текста в панели слоёв и вводим следующие настройки:

Урок по Photoshop: делаем юзербар для наших пользователей 3393665m

И у меня на данном этапе уже получается что-то конкретное:
Урок по Photoshop: делаем юзербар для наших пользователей Userba12

9. Добавим блик. Он у меня уже есть на фоне, но у вас, скорее всего, его нет. Создадим новый слой и нарисуем на нём белый прямоугольник, чтобы он закрывал собой всю верхнюю половину юзербара. Нарисовав его, ставим прозрачность слоя с этим прямоугольником на 30%.

10. Обычно на этом шаге рисование юзербара заканчивается. Тем не менее, у меня юзербар остался довольно пустой. Возможно, вам надо будет добавить логотип или какую-нибудь отличительную деталь вашего форума. Мне даже пришлось поменять фон:
Урок по Photoshop: делаем юзербар для наших пользователей Userba13

:attention: Сохраняйте свои юзербары только в формате PNG - так у вас будет максимальное качество, необходимое для небольших юзербаров.

:attention: Не забудьте предложить пользователям код юзербара со ссылкой на ваш сайт.

Предыдущая тема Следующая тема Вернуться к началу  Сообщение [Страница 1 из 1]

Права доступа к этому форуму:
Вы не можете отвечать на сообщения