Урок «Юзербар»

Этот урок показывает как с помощью графического редактора Paint.NET создать юзербар. Например вот такой:

Пример юзербара

Пример юзербара

Для того, чтобы сделать это быстрее, рекомендуется (но не обязательно) предварительно установить плагин «Падающая тень». Также (для создания надписи) нужно иметь установленный шрифт Visitor.

1. Откройте Paint.NET и создайте файл размером 350х19 (Файл — Создать… или Ctrl+N):

Создание нового изображения

Создание нового изображения

2. Выберите нужный цвет (в данном случае синий), затем возьмите «Градиент» (1) в «Линейном» режиме (2) и создайте фон изображения:

Выбор градиента

Выбор градиента

Должно получиться так (нажмите над изображением левую кнопку мыши и удерживая её так, переместите курсор по холсту, так, как если бы вы рисовали линию):

Заливка градиентом

Заливка градиентом

3. Подготовьте изображение для вставки в юзербар. Это изображение должно быть на прозрачном фоне и более-менее подходить по размерам:

Изображение для вставки в юзербар

Изображение для вставки в юзербар

4. Создайте новый слой (Слои — Добавить новый слой или Ctrl-Shift-N) и вставьте в него предварительно подготовленное изображение. При вставке появиться окно выбора размера холста:

Окно выбора

Окно выбора

Нажмите «Сохранить размер холста» и разместите вставленное изображение (пользуясь инструментом «Перемещение выделенной области») в нужном районе юзербара:

Расположение изображения

Расположение изображения

Снимите выделение (Правка — Отменить выделение или Ctrl+D)

5. Создайте еще один новый слой. Выберите в палитре белый цвет, возьмите инструмент «Текст» (1) и установите шрифт «Visitor» (2). Размер шрифта можно поставить на 14 (3) а стиль букв — на «Полужирный» (4):

Настройки шрифта

Настройки шрифта

Нанесите на новосозданном слое требуемую надпись:

Создание надписи

Создание надписи

6. Теперь нужно создать черный контур вокруг букв надписи. Это можно сделать с помощью инструмента «Карандаш» (см. пример в самом начале урока):

Черный контур создаваемый «карандашом»

Черный контур создаваемый «карандашом»

… или с помощью уже упомянутого плагина «Падающая тень».

В последнем случае нужно выставить в окне настроек плагина (Эффекты — Object — Drop Shadow) следующие параметры:

Настройки падения тени

Настройки падения тени

С плагином черный контур получается быстрее и проще, но не так качественно как вручную (хотя это как кому нравится):

Контур созданный плагином

Контур созданный плагином

7. Создайте новый слой и поместите его под слоем с надписью (перемещать очередность слоев можно с помощью специальных стрелочек в окне слоев):

Перемещение слоя

Перемещение слоя

Выберите белый цвет, возьмите фигуру «Овал» (1) и установите для нее режим «Сплошная фигура» (2):

Настройки эллипса

Настройки «Овала»

С помощью «Овала» создайте на новосозданном слое «заготовку» блика:

Заготовка блика

Заготовка блика

Теперь нужно сделать его полупрозрачным. В окне со слоями нажмите на иконку «Свойства»:

Свойства слоя

Свойства слоя

… и установите желаемый уровень прозрачности:

Установка прозрачности

Установка прозрачности

Готовый блик будет смотреться так:

Юзербар с бликом

Юзербар с бликом

8. Создайте еще один слой и поставьте его самым первым (над слоем с текстом). С помощью инструмента «Карандаш» или «Линия или кривая» создайте на этом слое черную однопиксельную рамку:

Однопиксельная рамка

Однопиксельная рамка

Для придания юзерпику объема примените к этому слою эффект «Гауссового размытия» (Эффекты — Размытие — Гауссово размытие…) с радиусом 2.

Все. Юзербар готов:

Готовый юзербар

Готовый юзербар

По мотивам урока Dark_Ajvengo.

Комментариев: 97

  1. М.:

    А как повернуть выделенное?

  2. Dag:

    а че получилось)

  3. Влад:

    а ссылку можно вставлять?

  4. Димон):

    не получилось =/

  5. Владислав:

    Прикольно!!!Побольше бы на сайте таких уроков – полезных,интересных и понятных.

  6. орагон:

    Отличный урок! С:
    Все прекрасно объяснено, и результат радует глаз.
    Огромное спасибо авторам!!!

  7. Susel:

    А как подготовить изображение для вставки???

  8. alexandr kabakow:

    обводка контура надписи, с помощью плагина ужасная, в правду в ручную на много лучше!

  9. Confessor:

    Очень бы хотелось посмотреть как создается анимированный юзербар…
    сделайте пожалуйста такой урок

  10. Ф:

    я начал писать но не получилось не видно((

  11. Kisynka:

    Первый раз работаю с этой программой, но получилось хорошо!Только я столкнулась с проблемой мой второй Юзербар открывается только через Paint.NET, а первый может открываться хоть как.В чём проблема?

  12. Андрей:

    Я создал,а как сделать так чтоб я мог его в формате jpg смотреть?И как се в подпись ставить?

  13. Kir:

    Андрей:

    Я создал,а как сделать так чтоб я мог его в формате jpg смотреть?И как се в подпись ставить?

    когда сохраняешь под строкой с названием есть строка с форматом там можно выбрать нужный формат изображения

  14. SergeJkee:

    а как сделать изображение с прозрачным фоном?

  15. Анна:

    М.:
    А как повернуть выделенное?

    Берешь инструмент «Переместить выделенное», захватываешь выделенное ПРАВОЙ кнопкой мыши и поворачиваешь.

  16. Имя:

    А как вставить изображение? Куда нажимать?

  17. Нюточка:

    Чтобы вставить,команда ctrl-v.
    А мне последнее действие нравится – классно получается.
    И ещё – хотелось бы дать ссылку,но я не знаю как.
    Автор – молодец,а тот,кто понятно написал – ещё больший молодец.

  18. 6a3yk:

    Нюточка, чтобы залить зайди на http://www.radikal.ru/ и когда зальешь скопируй одну из ссылок!

  19. Колянище:

    А я так и непонял как писат в этой программе! напишите пожалуйста кому не трудно пж.

  20. Начинающий Рисовальщик в Paint.NET:

    А что получилось! Даже прикольненький. Я написал «Сходи в Любимое Кафе» для теста.

  21. Анатолий:

    Больше УРОКОВ БОЛЬШЕ !!!!
    Спасибо за урок !!!!!!!!!

  22. Ащот:

    Хороший урок, только я немного по другому леплю: добавляю еще диагональные полосы и полупрозрачные поля вот например http://s54.radikal.ru/i145/1101/2c/b20473533757.png
    Насчет анимаций – нужен спец плагин вот тут скачаешь (там целый пак инструкция прилагается) http://forums.getpaint.net/index.php?/topic/13454-animated-image-23-agif-apng/page__hl__animated%20gif
    Вот мои примеры: http://s43.radikal.ru/i099/1101/2a/633b1839e93e.gif
    http://s47.radikal.ru/i116/1101/5b/766db0e956be.gif
    У меня ещё до фига юзербаров есть если че обращайтесь

  23. Domino:

    Долго я с картинкой мучался,надо было подробней описать как её добавить.Вот что получилось http://sderni.ru/45883

  24. Domino:

    Извиняюсь не та картинка вот правильная http://sderni.ru/45884

  25. Михаил:

    скажите пожалуйста как картинку вставить, не получается почему-то

  26. Михаил:

    и ещё как понять «Это изображение должно быть на прозрачном фоне»

  27. Михаил:

    всё разобрался.
    хороший урок

  28. Про-новичок среднего уровня:

    А у меня вот что получилось: http://sderni.ru/56063

  29. олег ястребов:

    а для чего нужен юзебар??? а то сделать сделал а куда его!

  30. SaheR:

    Олег, юзербар это просто узкая картинка, которая вставляется в подписи к своим постам на форумах. Пользы никакой, лишь чтобы показать/выделить себя =) Сама картинка в подпись вставляется через ВВ-код.
    Выглядит он так: [IMG]http://ссылка_на_картинку[/IMG]
    Пример самого ВВ-кода: [IMG]http://img64.imageshack.us/img64/7825/zombiee.jpg[/IMG]

  31. марсель:

    Кто не знает, как повернуть изображения, то это очень просто. Нужно нажать правую кнопку мышки)))

  32. йа:

    помогите что делать я вставляю свою картинку и юзербар увеличивается.

  33. йа:

    там даже вопроса нет что делать с юзером

  34. йа:

    file:///C:/Users/%D1%87%D0%B5%D0%BB%D0%BE%D0%B2%D0%B5%D0%BA/Desktop/%D0%AE%D0%97%D0%95%D0%A0.png Этот юзер мой токо очень похож на созданный

  35. Светлана:

    у меня не получается вставить картинку на второй слой- предыдущий куда-то исчезает! напишите пожалуйста подробные этапы!

  36. Mythbuster47:

    Прикольно, у меня получилось с первого раза

  37. Лёша:

    Хорошо,всё получилось

  38. ZnR:

    Получился вполне красивый юзербар.Делал для своей учётной записи в icq.

  39. "EGOR=MEGION":

    клёво получилось, спасибо!!!

  40. Лиза:

    У меня не получается сделать текст. Я когда пишу у меня ничего не видно. Кто нибудь подскажите что делать. Пожалуйста

  41. zMiq:

    В уроке упомянался плагин «Падающая тень», но мне поазалось, что админ сам не знает всех действий плагина. Что бы сделать такую же обводку, как и карандошом нужно поставить радиус размытия на 0. Я лично не пользуюсь не пэйнтом и тем более этим плагином, но пользуюсь другими графческими редакторами. Если я не прав (насчет радиуса размытия), можете закидать меня кирпичами.

  42. Юля:

    Подскажите пожалуйста как сделать изображение на белом фоне?Зарание спасибо!

  43. Ариша:

    НЕ ПРОШЛО И ПОЛ ГОДА.КАК МОЙ ЮЗЕРБАРЧИК ГОТОВ.
    КАК ГЛАСИТ НАРОДНАЯ МУДРОСТЬ-ТЕРПЕНЬЕ И ТРУД ГОРЫ СВЕРНУТ
    СПАСИБО ЗА КЛАССНЫЙ УРОК

Оставить комментарий: