Как сделать красивый юзербар
Быстрый старт
ProGIMP — сайт про Гимп
GIMP — The GNU Image Manipulation Program
Гимп — бесплатный графический редактор
Создаем юзербар
Для выполнения урока необходим фильтр «Layer Effects».
Создадим новое изображение размером 350x20px. Заполните линейным градиентом фоновый слой, он будет подложкой. Я выбрала для заполнения градиент Tropical Colors.
Теперь нужно сделать сетку, неотъемлемую часть юзербаров. Я делала сетку с помощью выделения.
Создавала новый слой, а потом заполнила выделение черным цветом. После этого продублировала слой и оттянула его в сторону на определенное расстояние. Соединила оба слоя с сеткой и снова продублировала слой, оттянула его, свела оба слоя. В результате всех действий у меня получилось так:
После этого нужно немного уменьшить интенсивность сетки. Я установила непрозрачность для сетки в 50%.
Теперь нужен логотип программы. Для этого нужно зайти в дирректорию, в которой установлен Гимп, а дальше в \share\gimp\2.0\images\, там будет файл gimp-logo.png. Его надо перетащить на холст с юзербаром и на нем появится слой gimp-logo.png. Перетащите Вильбера к левому краю.
Выбираем инструмент «Текст» и пишим большими буквами GIMP USER. В настройках инструмента устанавливаем шрифт Arial, размер 8px, ставим галочку напротив инструктурирования и автоинструктурирования, с антиалиасинга галочку убираем.
Заходим в меню Script-Fu – Layer Effects – Add Border. Устанавливаем белый цвет и применяем эффект к слою с текстом.
Делаем эффект отражения в стиле Web 2.0. Для этого создаем новый слой, берем инструмент эллиптического выделения, делаем выделение и заполняем его белым цветом.
Устанавливаем непрозрачность слоя с отражением 20%.
Последним шагом нужно сделать черную рамку вокруг юзербара. Для этого создаем новый слой, выделяем всю область юзербара и заходим в «Выделение – Граница», в появившемся окне надо установить 1px. Теперь нужно заполнить получившееся выделение черным цветом.
Юзербар Гимпа готов. Если хотите, можете использовать этот (или другой) юзербар на форумах.
Онлайн генератор юзербаров для форумов
Что такое юзербары для форумов (userbar)?
Это графическая картинка имеющая размеры 350х19 пикселей. Юзербары используются на форумах, размещаются в подписи и выражают настроение, отношение к чему-либо, пристрастия, увлечения и так далее. Под каждое настроение или случай нужно создать юзербар и размещать его в подписи по мере необходимости.
Как сделать юзербар?
Создание юзербаров процесс несложный. Можно создать юзербар онлайн, используя бесплатный графический редактор или конструктор баннеров, а можно использовать специальный конструктор юзербаров, которым очень легко пользоваться, а на выходе получаются симпатичные картинки фиксированного размера с вашим текстом.
Чтобы создать юзербар в сервисе Userba, начните с установки заднего фона, для чего выберите направление и цвет градиента. Далее определитесь с дополнительными эффектами, которые будут использоваться на юзербаре. Из выпадающего списка выберите фоновую штриховку (Насечка) и наложение рисунка (Эффект), чтобы создать оригинальный эффект на картинке, а также установите расположение бликов (Блик), чтобы придать трехмерности и индивидуальности юзербару. Большое количество шаблонов позволят воплотить самые разные идеи.
Остается настроить цвет рамки и текстовую составляющую юзербара. Укажите шрифт, размер, цвет текста и напишите сам текст. Чтобы посмотреть на конечный вариант достаточно нажать на кнопку «Создать», и в окне предсмотра появится ваш созданный онлайн юзербар.
Чтобы сохранить готовый баннер у себя на компьютере, необходимо кликнуть на картинке правой кнопкой мыши и выбрать команду «Сохранить изображение как».
Сервисы для создания и редактирования изображений, фото и другой графики:
LogoServis конструктор логотипов и фирменного стиля, конвертов и визиток
онлайн редактор фото и изображений похожий на известный Photoshop
банер онлайн сделать просто в сервисе BannerFans
создать логотип на основе профессиональных шаблонов в конструкторе LogoMaker
простой логотип можно сделать в online генераторе CoolText
в сервисе аватарок FaceYourManga создаются прикольные аватарки
создать gif анимации легко в удобном online сервисе Gifovina
Создание юзербара в программе Photoshop
С помощью этого урока вы сможете легко сделать себе анимешный юзербар в программе Adobe Photoshop. В уроке будут показаны два способа создания юзербаров.
1 способ
Создаем новый документ (Ctrl + N), размером 350х19 px (стандартный размер для юзербара).
Нам нужно залить наше изображение градиентом.
Я выбрала черно – белый цвет для градиента. Однако вы можете выбрать любые цвета или даже один цвет.
В настройках градиента я выставила заливку по окружности. Вы же можете выставить ту которая вам нравиться.
Не бойтесь экспериментировать.
Теперь создадим заготовку для заливки в виде косых черных линий. Для этого создадим новый документ с параметрами 3х3 px, RGB, Transparent (Прозрачный).
Выбираем инструмент Pencil (Карандаш), черного цвета c размером 1 px.
Ставим точки по диагонали как на скриншоте.
Нажимаем Edit > Define Pattern (Редактирование – Определить узор) и даём нашей текстуре имя.
Возвращаемся на изображение нашего будущего юзербара и создаём новый слой.
Выбираем инструмент 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 (Мягкий свет).
Теперь добавим немного контраста. Переходим на слой с картинкой. Через нижнюю панель включаем настройку Brightness/Contrast (Яркость/Контраст).
Передвигаем ползунки до тех пор, пока вам не понравиться результат.
Делаем эффект объема (как его делать я описывала выше, когда мы делали юзербар первым способом).
Создание анимированного юзербара 1
В этом уроке мы рассмотрим, как создать анимированный юзербар с помощью программы Photoshop. В данном уроке будет использоваться Фотошоп С5 / Photoshop CS5.
Для создания анимированного юзербара нам потребуются две картинки и немного времени.
Первая картинка должна быть крупной, что бы четко были видны глаза и черты лица.
Она может быть вырезанной или быть на белом фоне.
Вторая картинка должна быть меньше первой (смотрите по лицу).
Она может быть вырезанной или быть на цветном фоне.
Создаем новый документ (Ctrl + N), размером 350х40px.
Перетаскиваем первую картинку на созданный документ и устанавливаем ее самое нижнее положение. Я решила, что мое нижнее положение будет начинаться с собачки замка кофты.
Если рассмотреть, как картинка будет располагаться на юзербаре, то получиться следующее: красная рамка – начальное положение, а все что находиться на желтом фоне, находиться за пределом юзербара и будет в дальнейшем опускаться при анимации.
Теперь отключаем слой с картинкой.
Создаем новый слой и заливаем его любым градиентом (если у вас вторая картинка без заднего фона).
Переносим вторую картинку, поверх слоя с градиентом. И устанавливаем ее самое нижнее положение.
Расположение картинки на юзербаре: красная рамка – начальное положение, а все что находиться на желтом фоне, находиться за пределом юзербара и будет в дальнейшем опускаться при анимации.
Создаём новый слой.
Выбираем инструмент Paint Bucket (Заливка). В параметрах выставляем Pattern (Узор) и выбираем в выпадающем списке текстуру. Выставляем Opacity(прозрачность) 60%.
Заливаем новый слой. И выставляем параметры для слоя Multiply (умножение) и Fill 35%.
Теперь пишем любой текст, любым шрифтом. Цвет выбираем любой, кроме белого.
Для текста делаем белую обводку любым способом (можно на новом слое, можно с помощью стилей слоев).
Создаем новый слой и делаем на нем эффект объема (более подробно как его делать написано в уроке Создание юзербара в программе Photoshop).
Все подготовки закончены и теперь мы приступим к созданию анимации!
Отключаем ненужные слои (слой с текстом, слой с градиентом, слой с BlackGold).
И включаем слой BlackRockShooter.
Запускаем панель анимации. Выставляем для первого кадра – время 0,2сек. Затем создаем еще один кадр.
Для второго кадра опускаем девочку вниз (Опускайте аккуратно с помощью клавиши вниз на клавиатуре).
Теперь нажимаем на кнопку создания промежуточных кадров. И выставляем количество кадров – 10.
Создаем новый кадр и включаем все слои.
Опять создаем новый кадр и опускаем девочку вниз (Опускайте аккуратно с помощью клавиши вниз на клавиатуре). После опять нажимаем на кнопку создания промежуточных кадров. И выставляем количество кадров – 10.
Теперь нам нужно сделать, чтобы белая обводка на буквах мигала.
Для этого мы переходим на 13 кадр и ничего не меняем.
Затем идем на 14 кадр и отключаем обводку. 15 кадр – не трогаем, 16 – отключаем и так далее до 23 кадра (23 кадр с обводкой).
Переходим на 24 кадр и делаем новый 25 кадр, затем возвращаемся на 24 и отключаем обводку. Переходим на 25 кадр и выставляем время 0,1сек.
Создаем новый 26 кадр и нажимаем на кнопку создания промежуточных кадров. И выставляем количество кадров – 10.
После переходим на 26 кадр и отключаем обводку. 27 кадр – не трогаем, 28 – отключаем и так далее до конца.
Заходим File /Save for Web….( Файл/ сохранить для Web…) (Alt+Shft+Cntr+S).
Анимированный юзербар 2
В этом уроке мы рассмотрим, как создать динамический анимированный юзербар с помощью программы Photoshop. В данном уроке будет использоваться Фотошоп С5 / Photoshop CS5.
В этом уроке мы рассмотрим, как создать динамический анимированный юзербар с помощью программы Photoshop. В данном уроке будет использоваться Фотошоп С5 / Photoshop CS5.
Для создания анимированного юзербара нам потребуется картинка с персонажем. Желательно чтобы персонаж был в профиль, однако можете и поэкспериментировать….
Итак, выбрав картинку, создаем новый документ (Ctrl + N), размером 350х40px.
И переносим картинку на созданный документ. Устанавливаем ее так, что бы четко было видно глаза.
Создаём новый слой.
Выбираем инструмент Paint Bucket (Заливка). В параметрах выставляем Pattern (Узор) и выбираем в выпадающем списке текстуру. Заливаем новый слой. И выставляем параметры для слоя Subtract, Opacity 25% и Fill 66%.
Теперь нам понадобиться узор с косыми линиями (который можно скачать:
). Узор размером 450*40 и сделан специально больше для создания анимации.
Перетаскиваем узор на юзербар и устанавливаем на начало левого края.
Расположение узора на юзербаре: все, что находиться на желтом фоне, находиться за пределом юзербара и будет в дальнейшем двигаться при анимации.
Выставляем для слоя параметры Soft Light (мягкий свет) и прозрачность слоя 70%
Теперь пишем любое слово, желательно шрифтом гранж.
Создаем новый слой. Выделяем прямоугольным выделением часть юзербара и заливаем белым цветом. Выставляем прозрачность слоя 40%.
Теперь передвигаем слой с косыми линиями влево, аккуратно с помощью клавиши влево на клавиатуре. Двигать нужно до тех пор, пока линии не станут в то же положение что и на первом кадре. На рисунке показано, как будет располагаться слой с косыми линиями за пределами юзербара.
Теперь нажимаем на кнопку создания промежуточных кадров. И выставляем количество кадров – 19.
Затем идем на 21 кадр и удаляем его.
Теперь начинается самое сложное… Нам нужно заставить буквы скакать из одной стороны в другую…
Идем на первый кадр. Выбираем в палитре слоев слой с буквами и дублируем его 15 раз (всего получиться 16 слоев с текстом).
Первый слой нам понадобиться для 1,2,3,4,5,6,7,8,15,17,19,20 кадров (поэтому я его назвала BAKEMONO 8-15-17-19-20).
Второй слой – для 9 кадра (BAKEMONO 9).
Третий слой – для 9 и 18кадров (BAKEMONO 9-18).
Четвертый и пятый – для 10 кадра (BAKEMONO 10).
Шестой и седьмой – для 11 кадра (BAKEMONO 11).
Восьмой, девятый и десятый – для 12 кадра (BAKEMONO 12).
Одиннадцатый и двенадцатый – для 13 кадра (BAKEMONO 13).
Тринадцатый, четырнадцатый и пятнадцатый – для 14 кадра (BAKEMONO 14).
Шестнадцатый – для 16 кадра (BAKEMONO 16).
Желательно, что бы вы так же проставили цифры кадров в названии слоя с буквами, что бы ни путаться.
Отключаем все слои кроме самого первого и переходим на него.
С 1 по 7 кадр положение букв мы не трогаем.
Переходим на 8 кадр и подымаем слой с буквами вверх.
Переходим на 9 кадр, отключаем слой BAKEMONO 8-15-17-19-20, и включаем слои, которые соответствуют девятому кадру, то есть BAKEMONO 9 и BAKEMONO 9-18.
С помощью трансформации (Ctrl+t) выставляем положение слов как на скрине.
Для нижнего слоя (BAKEMONO 9) выставляем прозрачность 50%.
Переходим на 10 кадр, и включаем слои, которые соответствуют 10 кадру.
С помощью трансформации (Ctrl+t) выставляем положение слов как на скрине. Для нижнего слоя выставляем прозрачность 50%.
Те же операции проводим с 11 кадром.
Переходим на 12 кадр, и включаем 3 слоя, которые соответствуют 12 кадру.
С помощью трансформации (Ctrl+t) выставляем положение слов как на скрине. Для двух нижних слоев выставляем прозрачность 50%.
Переходим на 13 кадр, и включаем два слоя, которые соответствуют 13 кадру.
С помощью трансформации (Ctrl+t) выставляем положение слов как на скрине. Для нижнего слоя выставляем прозрачность 50%.
Переходим на 14 кадр, и включаем 3 слоя, которые соответствуют 14 кадру.
С помощью трансформации (Ctrl+t) выставляем положение слов как на скрине. Для двух нижних слоев выставляем прозрачность 50%.
Переходим на 15 кадр и подымаем слой вверх.
Переходим на 16 кадр, отключаем слой BAKEMONO 8-15-17-19-20, и включаем слой BAKEMONO 16.
С помощью трансформации (Ctrl+t) выставляем положение слов как на скрине.
17 кадр не изменяем.
Переходим на 18 кадр, отключаем слой BAKEMONO 8-15-17-19-20, и включаем слой BAKEMONO 9-18.
19 и 20 кадр не изменяем.
Заходим File /Save for Web….( Файл/ сохранить для Web…) (Alt+Shft+Cntr+S).