С помощью этого урока вы сможете легко сделать себе анимешный юзербар в программе Adobe Photoshop. В уроке будут показаны два способа создания юзербаров .

1 способ

Создаем новый документ (Ctrl + N), размером 350х19 px (стандартный размер для юзербара).

Нам нужно залить наше изображение градиентом.

Я выбрала черно – белый цвет для градиента. Однако вы можете выбрать любые цвета или даже один цвет.

В настройках градиента я выставила заливку по окружности. Вы же можете выставить ту которая вам нравиться.

Не бойтесь экспериментировать.

Теперь создадим заготовку для заливки в виде косых черных линий. Для этого создадим новый документ с параметрами 3х3 px, RGB, Transparent (Прозрачный).

Выбираем инструмент Pencil (Карандаш), черного цвета c размером 1 px.

Ставим точки по диагонали как на скриншоте.

Нажимаем Edit >

Выбираем инструмент Paint Bucket (Заливка). В параметрах выставляем Pattern (Узор) и выбираем в выпадающем списке текстуру, которую мы делали. Заливаем новый слой.

Добавляем любую картинку без заднего фона.

Добавляем надпись. В основном надпись пишут шрифтом

Однако можно Вы можете использовать любой шрифт.

Теперь создадим эффект объема.

Создаем новый слой. Выставляем белый цвет. С помощью инструмента Ellipse (Окружность) делаем овал равный по размеру изображения.

Переходим на вкладку Paths (Пути) и нажимаем в нижней панели инструментов на первую кнопку (черный кружок). Затем перетягиваем Work Path в ведро.

Устанавливаем прозрачность слоя на 40%.

Если хотите усложнить свой юзербар, то можно добавить новый слой и с помощью разных кистей сделать рисунок.

2 способ

Второй юзербар мы сделаем немного больше по размеру.

Создаем новый документ (Ctrl + N), размером 350х40 px.

Выбираем любую понравившеюся картинку и перетягиваем ее на созданный документ.

Теперь создадим заготовку для заливки в виде косых белых линий. Для этого создадим новый документ с параметрами 5х5 px, RGB, Transparent (Прозрачный).

Первый слой заливаем черным цветом и создаем еще один слой. Выбираем инструмент Pencil (Карандаш), белого цвета, размером 1 px. Ставим точки по диагонали как на скриншоте.

Удаляем черный слой и сохраняем.

Нажимаем Edit > Define Pattern (Редактирование – Определить узор) и даём нашей текстуре имя.

Возвращаемся на изображение нашего будущего юзербара и создаём новый слой.

Выбираем инструмент Paint Bucket (Заливка). В параметрах выставляем Pattern (Узор) и выбираем в выпадающем списке текстуру, которую мы делали. Заливаем новый слой. Устанавливаем параметр слоя Soft Light (Мягкий свет).

Которых мы будем придерживаться на этом уроке.

1. Размер 350х19 пикселей.
2. Фон со штриховкой под углом 45°
3. Шрифт Visitor
4. Черная рамка вокруг всего изображения юзербара толщиной 1 px. Ее можно и не делать, но с черной обводкой юзербар лучше выделяется на фоне сообщения на форуме.

1. Открываем Adobe Photoshop. Создаем новый документ размером 350х19:

2. Делаем рамку: заливаем изображение черным цветом (Edit --> Fill --> Black) , а затем выбираем инструмент Rectangular Marquee Tool . Выделяем часть изображения таким образом, чтобы по краям осталась невыделенная область размером в 1 пиксель. Удаляем выделенную область. После того, как мы снимем выделение (Ctrl+D), будем иметь черную рамку по периметру юзербара.

3. Создаем новый слой - для фона (Layer - New - Layer или Shift-Ctrl-N) и помещаем его ниже слоя с рамкой. Заливаем его нужным цветом

2а. Для создания черной рамки можно поступить иначе. После создания документа (см. шаг 1) заливаем его нужным цветом. Затем на панели слоёв Layers кликаем на нашем слое правой кнопкой выбираем пункт Blending Options . В появившейся панели переходим на вкладку "Штриховка" и делаем так, как показано на рисунке ниже:

Получим тот же результат, как после шагов 2 и 3.

4. Можно добавить внутреннюю тень. Переходим в то же окно, что и в пункте 2а и выбираем пункт Inner Shadow (Внутренние тени):

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

5. Делаем штриховку. Для этого создадим новую текстуру. Это делается так.

Создадим документ размером 4х4 пикселя с прозрачным фоном.

Увеличим полученный документ до максимума (1600%), чтобы было удобнее работать. Выбераем инструмент Карандаш (Pencil ) размером 1px и рисуем с его помощью линию цветом #91E780, как показано ниже:

Теперь сохраняем полученный рисунок как Шаблон (Pattern) : Меню Edit --> Define Pattern и даем вашему узору какое-нибудь название:

6. Возвращаемся к нашему юзербару. Снова открываем Blending Options (см. пункт 2а), переходим на вкладку Наложение шаблона (Pattern Overlay) , в пункте Pattern выбираем только что созданную нами текстуру и изменяем следующие параметры:

7. Добавляем текст. Выбираем шрифт Visitor - он хорошо читается и при малом размере (скачать шрифт). Цвет белый. После того, как наша надпись создана, применим к тексту эффект Внешней тени (Outer Shadow) :

И добавим внешнее штрихование (обводку) толщиной 1 пиксель:

Результат:

8. Можно добавить к нашему изображению эффект стекла. Для этого создаем новый слой (Layer - New - Layer или Shift-Ctrl-N) над слоем с фоном, но ниже слоя с надписью. Выделяем верхнюю часть изображения инструментом Elliptical Marquee Tool и заливаем его белым цветом с помощью инструмента Paint Bucket Tool (G) . Далее снижаем прозрачность этого слоя (Opacity) до 30%:

Наш юзербар готов.

Вместо эффекта стекла можно применить другой прием, который часто используется при создании юзербаров - залить фон не однородным цветом, а градиентом. Для этого выбираем два цвета для заливки фона в панели инструментов:

Затем используем инструмент Градиентной заливки (Gradient Tool) . Кликаем вверху своего рисунка и, не отпуская левую клавишу мыши, проводим линию до низа документа (можно наоборот, тогда градиент пойдет в противоположном направлении).

Тогда готовый юзербар будет выглядеть так:

Вы можете скачать PSD-исходник этого юзербара , чтобы самостоятельно с ним поэкспериментировать и научиться рисовать свои юзербары. Не забудьте, что в юзербары вы можете вставлять картинки! Этим мы предлагаем вам заняться самостоятельно. ;-)

Создаем новый документ размером 8х8 пикселей и закрашиваем его следующим образом. Можно брать произвольные оттенки серого, но ранжирование оттенков надо соблюдать.

Затем открываем стили слоя,нажав соответствующую иконку в палитре слоёв. Выбираем пункт
"Наложение узора" (Pattern Overlay) , в нём выбираем наш созданный узор и придаём ему следующие настройки:

Всё, фон готов. Должно получиться примерно так:

Выбираем подходящий логотип или рисунок и открываем в Фотошопе. Я взял этот:

Делаем режим отображения "Окна" (режимы отображения меняются клавишей F) и мышкой перетягиваем логотип на документ с юзербаром. Создался новый слой, и он у меня автоматически назвался "Слой 3". В Панели слоёв проверяем, что активным является именно слой с логотипом, инструментом "Перемещение" придаём нужное положение логотипу по горизонтали. Далее включаем режим привязки, если он не включен (вкладка Просмотр --> Привязка или нажимаем клавиши Shift+Ctrl+;), и, зажав Shift перемещаем логотип вниз, так, чтобы верхний край логотипа "прилип" к нижнему краю юзербара.

Пишем какой-нибудь текст. Для юзербаров хорошо подходит шрифт Visitor, его можно скачать в статье Шрифт для юзербара Visitor с поддержкой русских букв . Как устанавливать шрифт, рассказывается в статье Работа со шрифтами и добавление шрифтов в Adobe Photoshop

Важно помнить, что при использовании шрифтов толщиной в 1-2 пикс надо в палитре шрифтов отключать любое сглаживание.

Я сделал две надписи,"обработка изображений" и "graphics-video.ru", каждая надпись на отдельном тестовом слое, назвал их эти слои "обработка изображений" и "текст:graphics-video.ru". Они понадобятся для анимации текста, конкретно для анимации побуквенного появления текста.

Приступаем к анимации.

Теперь главное не перепутать порядок действий, иначе получатся кракозябы. Но, в любом случае, замечательная программа Фотошоп всегда позволяет нам отменить одно или несколько неверных действий с помощью нажатия комбинаций клавиш Shift+Alt+Z.

Открываем панель анимации (вкладка Окно --> Анимация). Если панель открылась не в покадровом режиме, то клик по кнопке (2). Первый фрейм анимации сгенерировался автоматически. Выставляем время отображения кадра 0.1 сек, кликнув по треугольничку в правом нижнем углу иконки кадра.

Помните, логотип у нас внизу, вне зоны видимости? Вот его и невидно.

Создаём второй фрейм (клик на кнопку (1) на панели анимации). Зажав Shift, перетаскиваем логотип "Слой 3" вертикально вверх, до исчезновения из зоны видимости, чтоб он приклеился нижним краем к верхнему краю юзербара. Клик по кнопке (3) ,в открывшемся окне создаём 10 промежуточных кадров.

Проверяем, у всех ли фреймов время отображения 0,1 сек. Если нет, то можно выделить нужные, зажав Ctrl, клик по треугольничку в правом нижнем углу иконки любого кадра, и в открывшейся панели поменять время. Оно изменится у всех выделенных фреймов.
Кликаем на воспроизведение, наслаждаемся результатом.

Понаслаждавшись положенное время, приступим ко второй части танцев с логотипом. Кликнем по последнему фрейму в палитре анимации (убедимся, что в поле юзербара не видно логотипа), затем создадим новый фрейм. Кликнем по "Слой 3" в Панели слоёв, нажимаем клавиши Ctrl+J. Этим мы клонируем "Слой 3". Получился новый слой "Слой 3-копия". Переместим его в зону видимости, нажмём Ctrl+T и масштабируем логотип по размеру юзербара:

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

Как сделать юзербар?

Создание юзербаров процесс несложный. Можно создать юзербар онлайн, используя бесплатный графический редактор или конструктор баннеров , а можно использовать специальный конструктор юзербаров, которым очень легко пользоваться, а на выходе получаются симпатичные картинки фиксированного размера с вашим текстом.

Чтобы создать юзербар в сервисе Userba, начните с установки заднего фона, для чего выберите направление и цвет градиента. Далее определитесь с дополнительными эффектами, которые будут использоваться на юзербаре. Из выпадающего списка выберите фоновую штриховку (Насечка) и наложение рисунка (Эффект), чтобы создать оригинальный эффект на картинке, а также установите расположение бликов (Блик), чтобы придать трехмерности и индивидуальности юзербару. Большое количество шаблонов позволят воплотить самые разные идеи.

Остается настроить цвет рамки и текстовую составляющую юзербара. Укажите шрифт, размер, цвет текста и напишите сам текст. Чтобы посмотреть на конечный вариант достаточно нажать на кнопку «Создать», и в окне предсмотра появится ваш созданный онлайн юзербар.

Сервисы для создания и редактирования изображений, фото и другой графики:

И фирменного стиля, конвертов и визиток

Похожий на известный Photoshop

Интересный сервис для тех, кому нравится рисование

Брашечка

Просто в сервисе BannerFans