Главная » Анимированный юзербар - ARTful.ws - Форум » Регистрация » Вход Среда
2024-05-08
11:39 PM
[ Новые сообщения · Участники · Правила форума · Поиск · RSS ]
  • Страница 1 из 1
  • 1
ARTful.ws - Форум » Мастерская » Мастерская уроков » Анимированный юзербар
Анимированный юзербар
[Earine]Дата: Воскресенье, 2008-08-24, 8:15 PM | Сообщение # 1
Здесь уже давно
Группа: Проверенные пользователи
Сообщений: 219
Статус: Сейчас на сайте нет
Доброго времени суток.
В этом уроке учимся делать анимированный юзербар.

Шаг 1.
Создаем новый документ Файл – Новый (File – New; Ctrl+N) размером 350х19 пикселей и заливаем его черным цветом Редактирование - Выполнить заливку - Черный (Edit>Fill>Black).
Шаг 2.
Выбираем инструмент Прямоугольная область (Rectangular Marquee Tool; M). Делаем выделение так, что бы по краям оставалась невыделенная область размером в 1 пиксель. Удаляем выделенную область – жмем на Delete. Рамка готова. Снимаем выделение- Выделение –Отменить Выделение (Ctrl+D)


Шаг 3.
Создаем новый слой (Слой - Новый - слой или Shift+Сtrl+N) , ставим его ниже слоя с рамкой и делаем активным. Заливаем серым цветом: Редактирование - Выполнить Заливку - Серый 50% (Edit>Fill>50% Gray)

Шаг 4.
Снова создаем новый слой, ставим его выше созданного в Шаге 3 слоя. Заливаем его абсолютно любым цветом (Edit>Fill). Я выбрала красный.
Открываем Параметры наложения (Blending Options) (кликаем правой кнопкой по слою и выбираем нужное)и настраиваем стиль:
Параметры наложения:
Наложение градиента:
-Режим: Жесткий свет (Blend mode: Hard Light) При желании можно использовать другие режимы.
-Прозрачность: 45% (Opacity: 45%) При разных режимах – разная прозрачность.
- Градиент: Стальной прут (Gradient: Metals>Steel Bar)



Шаг 5.
Снова создаем новый слой и ставим его под слоем с рамкой. Заливаем его абсолютно любым цветом. (У меня все тот же красный)
Открываем Параметры наложения (Blending Options) и настраиваем стиль:
Внутреннее Свечение (Inner Glow):
- Режим: Линейный свет (Blend mode: Linear Dodge)
- Непрозрачность6 100% (Opacity: 100%)
- Цвет: Белый (Color: White)
- Размер:4 (Size: 4)
Шаг 6.
Создаем новый документ размером 1х2 пикселя. Выбираем кисть (Pencil Tool). Сбрасываем цвета (D) (Foreground Color должен стать черным, если это не произошло, делаем вручную).
Ставим точку в верхний пиксель документа. Редактирование- Определить узор- Ок (Edit>Define Pattern. OK). Закрываем документ (не сохраняя) и переходим обратно к юзербару.

Шаг 7
Снова создаем новый слой, ставим его выше всех слоев (кроме рамки). Заливаем недавно созданной текстурой: Редактирование – Выполнить Заливку. Выбираем узор. (Edit>Fill; Use: Pattern; Custom Pattern: выбираем нашу текстуру (должна быть последней)). ОК. Ставим Режим слоя на Мягкий свет (Blend Mode - Soft Light.)

Шаг 8.
Скачиваем шрифт visitor (советую кликать правой кнопкой и выбирать "Сохранить как"). Устанавливаем его. Выбираем Инструмент Горизонтальный текст (Horizontal Type Tool (T)).
Пишем им нужную вам надпись. Кегль12-14 на ваш вкус.
Шаг 9.
Теперь приступим к созданию анимации. Я советую перед тем, как добавлять объекты, объединить три нижних слоя. Оставляем видимыми те, которые объединяем и выполняем сведение. Слой - Объединить видимые (Shift+Ctrl+E). Как видите, у нас осталось 4 слоя.

Шаг 10.
Добавляем объекты. Объект должен быть над самым нижним слоем.

Шаг 11.
Теперь на добавленном слое и будем делать анимацию. (Я делаю самое обычное мигание, но можно сделать все что угодно – тот же принцип, что и при создании анимации на аватаре)
Я сделала дубликат, сменила режим наложения на Осветление. Теперь будем делать анимацию.

Прыгаем в Image Ready(у меня CS3 – поэтому никуда не прыгаю). Открываем окошко анимации. Делаем нужное количество дубликатов кадра. Выставляем видимость нужного нам слоя и нужное время.


Шаг 12.
Теперь можем сохранять получившийся юзербар.
Для Image Ready Файл - Сохранить оптимизированный (File – Save Optimized as).
Для CS3 – Файл – Сохранить для Web и устройств (File – Save for web… или Alt+Shift+Ctrl+ 5)

Вот и все. Если что-то не так - извините, первый в жизни урок.


Ненастощая фея с глазами зверя.
 
Lisandra_de_LioncourtДата: Понедельник, 2008-08-25, 1:23 PM | Сообщение # 2
Заслужил доверие
Группа: Проверенные пользователи
Сообщений: 842
Статус: Сейчас на сайте нет
А чем этот урок отличается от создания анимированного аватара? happy размером холста?

I'm Deviant here
 
[Earine]Дата: Понедельник, 2008-08-25, 3:58 PM | Сообщение # 3
Здесь уже давно
Группа: Проверенные пользователи
Сообщений: 219
Статус: Сейчас на сайте нет
Quote (Lisandra_de_Lioncourt)
размером холста?

Добавленные объекты могут быть разного размера)) А так, наверное ты права, что практически ничем)) wink


Ненастощая фея с глазами зверя.
 
AlisaДата: Понедельник, 2008-08-25, 9:24 PM | Сообщение # 4
Администратор
Группа: Администраторы
Сообщений: 4085
Статус: Сейчас на сайте нет
Lisandra_de_Lioncourt, еще полоски свойственные юзербарам. Да и анимация чаще всего - туда-сюда, т.е. картинка идет вверх и вниз. ну так часто встречается по крайней мере.

[Earine], спасибо за урок. но я пока не читала smile завтра с утра осилю и выскажусь smile


 
[Earine]Дата: Понедельник, 2008-08-25, 11:31 PM | Сообщение # 5
Здесь уже давно
Группа: Проверенные пользователи
Сообщений: 219
Статус: Сейчас на сайте нет
Quote (Alisa)
спасибо за урок

Рада стараться))
Quote (Alisa)
полоски свойственные юзербарам.

Да)) они могут варьироваться в зависимости от того, куда вы поставите пиксель)))


Ненастощая фея с глазами зверя.
 
LexicaДата: Пятница, 2008-09-26, 2:18 PM | Сообщение # 6
Без него - никуда
Группа: Со-администраторы
Сообщений: 1923
Статус: Сейчас на сайте нет
[Earine], хороший урок, большую работу ты проделала, но, к сожалению, скрины совершенно не наглядные sad . Слишком много места, не несущего полезной информации. Могла бы ты их переделать хотя бы в такой вид?

Если соберешься, то высылай мне в Личку. Или можешь выложить прямо здесь в новом посте, я тему потом подкорректирую и перенесу в анимационные уроки.

 
Gangsta_GirlДата: Вторник, 2008-10-07, 5:54 PM | Сообщение # 7
Зашедший из любопытства
Группа: Пользователи
Сообщений: 11
Статус: Сейчас на сайте нет
хороший урок, обязательно поробую)

My name is Nika ^^
 
NachtschattenДата: Среда, 2008-10-08, 4:17 PM | Сообщение # 8
Свой человек
Группа: Проверенные пользователи
Сообщений: 286
Статус: Сейчас на сайте нет
Quote (|Earine|)
размером 350х20 пикселей

По-моему, они обычно создаются 350x19 пикселей...
А урок понравился)


 
МальвинаДата: Четверг, 2009-02-12, 1:27 AM | Сообщение # 9
Здесь уже давно
Группа: Проверенные пользователи
Сообщений: 189
Статус: Сейчас на сайте нет
Quote (Nachtschatten)
По-моему, они обычно создаются 350x19 пикселей...

именно.. источники это и утверждают.. так же там написано что иногда новички в юзах допускают размер 350х20 вроде ка к1рх не меняет сути.. но такое изображение будет не верным

*оч прошу модератора исправить только этот момент)) он правда важен.. сама первые юзы деалала неверной высоты.. happy

Сообщение отредактировал Мальвина - Четверг, 2009-02-12, 4:28 PM
 
LexicaДата: Четверг, 2009-02-12, 10:23 AM | Сообщение # 10
Без него - никуда
Группа: Со-администраторы
Сообщений: 1923
Статус: Сейчас на сайте нет
Мальвина, исправила
 
ARTful.ws - Форум » Мастерская » Мастерская уроков » Анимированный юзербар
  • Страница 1 из 1
  • 1
Поиск:

Copyright ARTful.ws © 2024 

Для общения в чате
требуется авторизация
Автообновление (1 мин.)