Создание ЮзерБоксов

Уроки и советы. Шаблоны, стили и их создание.

Создание ЮзерБоксов

Сообщение none » 02 авг 2008, 14:39

Добрый день. Сейчас мы научимся делать юзербокс.

Но для начала, что такое юзербоксы?
Юзербоксы (Userboxes) - это юзербары (Userbars) другого размера. Для их создания используются одинаковые методы.
Так в чём же разница?
Различие:
1 Размер: UB - 350х19 рх; UBX - 50х125 рх.
2 Размещение текста (подпись к картинке): UB - горизонтально; UBX - вертикально.
3 Штриховка: UB - чаще всего присутствует;UBX - чаще всего отсутствует.
Подобие:
1 Назначение: описать пользователя, его интересы.
2 Техника выполнения: блики, шрифт Visitor.

Ну собственно начнем :

1. Открыли Photoshop, создаем файл размером 50х125 с разрешением 72 пикселя/дюйм.
2. Ищем картинку, которую хотиете поместить на юзербокс, например эту:
Изображение
3. Вставляем на юзербокс немного редактируем размер, получаем заготовку для будущего юзербокса:
Изображение
4. Теперь будем делать стекло. Создаем новый слой, заливаем белым цветом #FFFFFF. Называем слой, например стекло (да как угодно) Теперь выбираем инструмент Эллипс (Eliptical Marque Tool), и делаем вот такое выделение:
Изображение
5. Вырезаем выделенную часть, но у нас остается ненужный белый, цвет:
Изображение
Его мы удаляем инструментом Ластик (Eraser Tool):
Изображение
6. Ставим Прозрачность слоя (Opacity) стекло на 30% (я делаю обычно с такой прозрачностью, вы можете выбрать любую другую):
Изображение
7. Теперь выбираем инструмент Выделение прямоугольником (Marque Tool), и выделяем все изображение полностью:
Изображение
Cоздаем новый слой, выбираем цвет (чтобы он подходил под основную цветовую гамму юзербокса) #7290BD, идем в Редактировать --> Штрих (Edit --> Stroke) , и выбираем такие настройки:
Изображение
8. Теперь будем делать градиентную рамку внутри юзербокса. Создаем новый слой, выбираем цвет позаметнее (чтобы не сливался с цветами), например белый #FFFFFF (в этом случае он будет заметным), делаем масштаб в 300%, выбираем инструмент Карандаш (Pencil Tool) размером 1, и рисуем внутри юзербокса рамку, так, чтобы она была рядом с рамкой цвета #7290BD:
Изображение
Изображение
9. Теперь идем в Слой --> Стиль Слоя (Layer --> Layer Style), выбираем Перекрытие градиента (Gradient Overlay) от черного к белому, то есть этот (выделен красной квадратной рамочкой)
Изображение
Получаем вот что:
Изображение
10. Ну и последнее - текст. Пишем например Nuclear белым цветом #FFFFFF, обводка черным цветом #000000. Потом идем в Редактировать --> Трансформация --> Поворот (Edit --> Transform --> Rotate), и поворачиваем вертикально.
Готово:
Изображение
Последний раз редактировалось none 03 авг 2008, 21:00, всего редактировалось 1 раз.
Изображение
Аватара пользователя
none

 
Сообщения: 4
Зарегистрирован: 02 авг 2008, 14:17

Re: Создание Юзербоксов

Сообщение zk » 03 авг 2008, 21:11

Сферы использования? ИМХО для подписей на форумах слишком громоздко, другие сферы есть? И можно ли привести примеры использования со ссылками на страницы?
zk
Администратор
 
Сообщения: 1971
Зарегистрирован: 02 сен 2007, 16:04
Домен: vfose.ru

Re: Создание Юзербоксов

Сообщение none » 03 авг 2008, 21:21

В основном используетсо как альтернатива юзер барам.В строчке их можно разместить больше.На некоторых форумах в фуле их используют т.к. нет ограничений на размеры и вес подписи :) Тем более чем больше вещей ты умеешь делать в фотошопе тем лучше. ИМХО когда юзербоксы хорошо подобраны смотритсо довольно красиво :)
Пример юзербоксов:
ИзображениеИзображение
Изображение
Аватара пользователя
none

 
Сообщения: 4
Зарегистрирован: 02 авг 2008, 14:17

Re: Создание ЮзерБоксов

Сообщение Костик » 04 авг 2008, 02:12

Юзирбоксы замена юзербарам для плоховидящих людей :)
FreeBSD 9.2 and Fedora 18 user
Аватара пользователя
Костик
Активный участник
 
Сообщения: 1944
Зарегистрирован: 03 сен 2007, 02:15

Re: Создание ЮзерБоксов

Сообщение none » 04 авг 2008, 12:23

Ну что то типа таво :)
Изображение
Аватара пользователя
none

 
Сообщения: 4
Зарегистрирован: 02 авг 2008, 14:17

Re: Создание ЮзерБоксов

Сообщение aAa » 06 авг 2008, 13:33

Незнаю как вам, но для меня юб чётче чем юбх.
aAa
Начинающий участник
 
Сообщения: 6
Зарегистрирован: 05 май 2008, 21:50

Re: Создание ЮзерБоксов

Сообщение Coolman » 11 авг 2008, 11:25

Это урок фотошопа? Если да, то лучше было бы создавать в подфоруме Фотошоп. (ИМХО)
Изображение
Coolman
Автор
 
Сообщения: 30
Зарегистрирован: 20 фев 2008, 14:56
Откуда: Саратов
Домен: All-Games.vFOSe.Ru

Re: Создание ЮзерБоксов

Сообщение zk » 11 авг 2008, 11:43

Coolman писал(а):Это урок фотошопа? Если да, то лучше было бы создавать в подфоруме Фотошоп. (ИМХО)

Тему прикрепили как статью т.к. она претендует на массовость, но что-то пока юзербоксов ни у кого не видно))
zk
Администратор
 
Сообщения: 1971
Зарегистрирован: 02 сен 2007, 16:04
Домен: vfose.ru

Re: Создание ЮзерБоксов

Сообщение InQ » 13 авг 2008, 03:46

я вот попробывал и чо то получилось)
User.jpg
User.jpg (33.68 Кб) Просмотров: 23036
User2.jpg
User2.jpg (32.54 Кб) Просмотров: 23098
Последний раз редактировалось InQ 13 авг 2008, 03:59, всего редактировалось 1 раз.
Изображение
Изображение
Изображение
Аватара пользователя
InQ
Участник
 
Сообщения: 36
Зарегистрирован: 16 фев 2008, 23:07
Откуда: VOLSK
Домен: failed.sytes.net

Re: Создание ЮзерБоксов

Сообщение zk » 13 авг 2008, 03:48

InQ писал(а):я вот попробывал и чо то получилось)

Текст совсем не читаем, попробуй выбери более разборчивый шрифт.
zk
Администратор
 
Сообщения: 1971
Зарегистрирован: 02 сен 2007, 16:04
Домен: vfose.ru

След.

Вернуться в Дизайн

Кто сейчас на конференции

Сейчас этот форум просматривают: нет зарегистрированных пользователей и гости: 2

cron