Список форумов   FAQ   Поиск  
  Вход
Список форумов World Wide Web Графика и анимация

Учимся делать юзербары (графические подписи для форума)

Вопросы по Photoshop, CorelDRAW, Illustartor, Flash и др

Учимся делать юзербары (графические подписи для форума)

Сообщение Expert » Вторник 11 Август 2009 16:51:45

Всем привет, сейчас я вам постараюсь обьяснить как делать юзербары.(кто не знает что это вот пример:#77)
  1. Заходим в фотошоп
  2. Создаём новый документ File->New, и пока забываем про него.
    #77
  3. Берем любую картинку и вырезаем нужную нам часть размером 350px X 19px и вставляем в новый документ который вы создали в 1 пункте.
    #77
  4. Выделяем Ctrl+A, Edit->Stroke и настраиваем как на скриншоте:
    #77
  5. делаем копию слоя.
    #77
  6. Дальше будем использовать простой карандаш (Pencil tool), выставляем размер 1px, цвет белый, Mode: Overlay, и проводим вдоль рамки еще одну рамку, ставим opacity 40%
    #77
  7. Используя шрифт Visitor пишем что хотим на нашем юбе размером 10px (ОБЯЗАТЕЛЬНО)
    На слое шрифта клацаем правым кликом, заходим в Blending Options и делаем рамку на тексте.
    #77

    И в итоге у меня получилось: #77
Картинки можно увеличить.
Вложения
visitor.zip
(26.02 КБ) Скачиваний: 211
Последний раз редактировалось Expert Четверг 30 Сентябрь 2010 07:37:24, всего редактировалось 11 раз(а).
Причина: Перезалил картинки
Expert

 
Сообщения: 973
Зарегистрирован: Среда 15 Октябрь 2008 19:05:17
Откуда: Новомосковск

Сообщение Expert » Среда 12 Август 2009 07:52:11

Ну что кто то покажет свои работы?
ЗЫ. забыл скинуть шрифт, шрифт можно скачать в первом сообщении.
Последний раз редактировалось Expert Среда 12 Август 2009 20:12:07, всего редактировалось 1 раз.
Expert

 
Сообщения: 973
Зарегистрирован: Среда 15 Октябрь 2008 19:05:17
Откуда: Новомосковск

Сообщение Expert » Среда 12 Август 2009 16:01:50

[spoiler=Делаем Эффект дождя для userbar'a, bigbar'a...]
  1. Итак создаем на готовом юб новый слой, заливаем его черным цветом, применяем на него Filter->Noise->Add Noise (Фильтр->Шум->Добавить шум) с параметрами Amount (Количество) - 400%, Uniform и Monochromic (Униформа и Одноцветный).

    #77
  2. Затем применяем Filter->Blur->Motion blur (Фильтр->Смазывание->Смазывание Движения) с дистанцией 20 и нужным вам наклоном (я ставлю -60 градусов).

    #77
  3. Ставим на палитре слоев Blending Mode на Screen (Режим смешивания - Экран). Это сделает все черное прозрачным.

    #77
  4. Заходим в Image->Adjusmstments->Levels (Ctrl+L; Изображение->Регулировки->Уровни) и настраиваем ползунки по желанию.

    #77
  5. Для анимации дождя повторяем пункты 1-4 несколь раз. Только в фильтре Добавить шум ставим процент Количества на единицу меньше, чем в предыдущем слое (т.е. следующий слой будет с Количеством не 400%, а 399%). Я дошел до 395% ))).
  6. Теперь дело осталось за малым. Переходим в ImageReady и переключаем последовательно слои с каплями (именно переключаем - включаем следующий и выключаем предыдущий). Время каждого кадра - 0,1 сек.[/spoiler]

любые юзербары на ваш вкус, + можно научится делать свои с помощью фотошопа ;) userbars.ru
По возможности буду заливать туторы в эту тему...
В итоге получаем это:
Вложения
download.gif
Expert

 
Сообщения: 973
Зарегистрирован: Среда 15 Октябрь 2008 19:05:17
Откуда: Новомосковск

Сообщение Expert » Среда 12 Август 2009 19:06:40

Tutor by ASQX

#77
Expert

 
Сообщения: 973
Зарегистрирован: Среда 15 Октябрь 2008 19:05:17
Откуда: Новомосковск

Сообщение Expert » Среда 12 Август 2009 20:09:10

Волна

1) Открываем новый документ 350 х 350 ( обязательно )
2) Зальём фон черным для удобства
3) чертим белую полоску в 2 пикселя , по центру документа , горизонтально , при помощи карандаша или удобных вам инструментов
Вот так все выглядет на данном этапе :

#77

4) Копируем нашу полоску и применяем Filter >> Distort >> ZigZag , со следующими параметрами

#77

5) Берем полоску без примененного фильтра снова дублируем её и применяем тот-же эффект , но увеличивая параметр
"Amount" на единицу т.е. ставим 4
6) Проделываем операцию ?5 до тех пор пока параметр "Amount" не достигнет значения 11
7) Пронумеруем и разложим по порядку наши слои чтоб было наглядней для глаза при постройке анимации
8 ) Слой с полоской без фильтра удаляем
9) Применяем ко всем полоскам Filer >> Blur Gaussian Blur cо значением 0,4
10) Делаем новый документ 350 х 19 и переносим все слои с полосками на наш юзербар и распологаем таким образом :

#77

11) Теперь дело вкуса , дело за покраской. Применяем броский градиент фону
Я выбрал такой :

#77

12 ) Красим полоски : ставим режим смешивния на Overlay , и идем в Blendin options >> Outer Glow , применяем этот эффект ко всем слоям с полосками.

#77

13)Добавляем обьёма : Выделяем верхнюю половину юзербара и заливаем градиентом от белого к прозрачному и ставим

непрозрачность на 35 % процентов ( чем цвет фона темней тем меньше надо применять непрозрачности к обьёму
14) Рамка : Выделяем весь юзербар (ctrl+A) Edit >> Stroke 1 px цвет по вкусу , я выбрал 375bf9
15) Добавляем текса
16) Итак теперь сладенькое = ) наша анимация её величество
слои переключать надо только поочередно т.е. через слой не прыгаем ,в противном случае у нас получится прерывистая анимация , если хотим сделать просто проходяшюю волну то включаем все слои по очередно по одному до конца , потом обратно чтоб зациклить анимацию.
Но я решил что это скучно и захотел сделать эффект дрожания так-что наши слои мы будем включать не до конца то вверх до вниз опять-же не перепрыгивая через слои ,слой последнего кадра анимации должен находится обязательно рядом со слоем первого кадра анимации т.е. или перед ним , или до него , но не в ком случае он не должен совпадать с ним или быть дальше чем 1 кадр.

Ставим задержку кадра 0,004 для тех у кого гиф тормозит анимацию

наш эквалайзер-волна готов! ;) )

Save for web and Devises >> *Gif >> жмем ок

Вот моя первая работа сделанная по этому способу

#77

Источник: _ttp://ubforum.ru/topic10969.html
Expert

 
Сообщения: 973
Зарегистрирован: Среда 15 Октябрь 2008 19:05:17
Откуда: Новомосковск

Сообщение Expert » Среда 12 Август 2009 21:12:21

Define Pattern

File->New размером 3pxХ3px
#77
Edit->Define Pattern, имя пишем любое.

File->New размером 2pxХ2px
#77
Edit->Define Pattern, имя пишем любое.

File->New размером 3pxХ3px
#77
Edit->Define Pattern, имя пишем любое.


Цвет можно выбрать любой ;). Кто не знает для чего это, вот пример:
Вложения
forum_navy.jpg
Если нормально присмотреться, то вы увидите что то наподобие "сеточки"
Expert

 
Сообщения: 973
Зарегистрирован: Среда 15 Октябрь 2008 19:05:17
Откуда: Новомосковск

Сообщение Expert » Воскресенье 16 Август 2009 20:10:19

Смотреть можно на весь экран, качество нормальное.

Эффект Бегущее изображение по тексту
Видео-роликВИДЕО:

Лого фотошопа и имеджреди

#77
#77

Вот что будут делать в этом уроке:

Добавлено спустя 50 минут 54 секунды:

Ждите еще 2 видео-урока ;) .
Вложения
photoshop.gif
Expert

 
Сообщения: 973
Зарегистрирован: Среда 15 Октябрь 2008 19:05:17
Откуда: Новомосковск

Сообщение Expert » Вторник 18 Август 2009 08:58:17

Эффект размытого текста(анимация)
Видео-роликВИДЕО:

Эффект Печатной машинки
Видео-роликВИДЕО:
Expert

 
Сообщения: 973
Зарегистрирован: Среда 15 Октябрь 2008 19:05:17
Откуда: Новомосковск

Сообщение MaximalSpecial » Среда 19 Август 2009 10:52:15

Для ChaosKnight:

Как создавать саму анимашку?
Ну точнее я ее создал в имедж реди а сохранить не могу.. нет там в сохранении формата ГИФ.. подскажи как сохранить?)
MaximalSpecial

 
Сообщения: 875
Зарегистрирован: Вторник 01 Май 2007 19:08:51
Откуда: GlobalGathering

Сообщение Expert » Пятница 21 Август 2009 12:39:29

Для <3 Numb:
File->Save for Web & Devicec
Expert

 
Сообщения: 973
Зарегистрирован: Среда 15 Октябрь 2008 19:05:17
Откуда: Новомосковск

Сообщение Expert » Пятница 21 Август 2009 14:46:53

Tutorial UrbaN Strips

1) Создаём юзербар (Применяем что хотим и т.д.)

2) Откладываем юзербар в сторону и создаём ещё один документ

#77

3) Берем Line Tool #77 Выбираем такие настройки:

#77

4) Рисуем линию:#77

5) Теперь идём Edit-Define Pattern называем её strip Жмакаем ОК

6) Создаём ещё один документ:

#77

Идём в Edit-Fill и выбираем нашу заготовку Strip жмём ОК
У нас получится такая заготовка:

#77

7) Перетаскиваем это #77 на наш юзербар.

Нажимаем Ctrl+T и ровняем так:

#77

9) Создаём новый кадр #77 и в новом кадре ДЕРЖА ШИФТ перетягиваем вправо.

10) Идём на первый кадр нажимаем Tween #77 ставим 10 кадров нажимаем ОК, удаляем последний кадр и ваша анимация готова.

Результат:
#77
Expert

 
Сообщения: 973
Зарегистрирован: Среда 15 Октябрь 2008 19:05:17
Откуда: Новомосковск

Сообщение MaximalSpecial » Пятница 21 Август 2009 15:59:14

Вот моя первая робота))
Нажмите на картинку))
Вложения
music.gif
MaximalSpecial

 
Сообщения: 875
Зарегистрирован: Вторник 01 Май 2007 19:08:51
Откуда: GlobalGathering

Сообщение All Eyez on Me » Пятница 21 Август 2009 20:53:42

Аккуратненько...))
Но осциллограф не правильно построен.
И шрифт плохо читается.
All Eyez on Me

 
Сообщения: 2696
Зарегистрирован: Четверг 03 Июнь 2004 18:39:48
Откуда: Новомосковск

Сообщение Expert » Суббота 22 Август 2009 08:50:48

Для <3 Numb:
У тебя шрифт или жирный, или черного цвета+рамка черного цвета...
Expert

 
Сообщения: 973
Зарегистрирован: Среда 15 Октябрь 2008 19:05:17
Откуда: Новомосковск

Сообщение Bomba » Суббота 22 Август 2009 09:36:45

я чё-т не могу понять как вы делаете ? какие нужны программы?
Bomba

 
Сообщения: 270
Зарегистрирован: Суббота 25 Апрель 2009 19:29:18

След.

Вернуться в Графика и анимация

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

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

cron