web-stroytel

Как создать анимированный юзербар

В этом уроке мы создадим простейший userbar. Сделать его будем в Adobe Photoshop и дело не займет у нас никаких сложностей. Для начала надо создать основное изображене откроем:
File (Файл) -> New (Создать новый)
Зададим ему стандартный размер юзербара- 350x20px. Фон сделаем прозрачным: Background Contents выберите Transparent.
Должно всё выглядеть примерно вот так:

и получиться так:

Создадим дубликат слоя (Слой>создать дубликат слоя)

Теперь выберем инструмент градиент (G), установив 2 цвета и проведем градиент слева направа.
Вот примерный результат:

Далее можно создать новый слой и добавить на нем любое изображение. Сделайте так.

Добавим небольшую рамочку вокруг юзербара.

Создайте новый слой поверх всех. Нажмите Сtrl+А чтобы выделить все.
Перейдите в меню edit>stroke(Редактирование - Обводку). Размер поставьте 1px, внутри (inside), и черную.

Далее можно поээксперемнтировать с стилями (в мини окне правая кнопка мыши на нужном слое>параметры наложения>стили)

И добавить текст:

Нажмите на панели инструментов на"Т" (для быстрого вызова клавиша Т) и установите в настройках размер на 9 пикселей

Цвет текста зададим #d9d9d9 (светло серый)
И украсим его черной обводкой в 1 пиксель:

Вот результат:

Потом теперь можно сделать анимированный gif юзербар.Ведь первый кадр уже есть.
Существует много способов добиться анимации (вспомните, например flash), но сейчас воспользуемся самым простым из них.
Создайте несколько кадров для нашего будующего фильма, я хочу, чтобы изображение на юзербаре постепенно исчезало.
Для этого надо снова зайти в параметры наложения и постепенно уменьшать непрозрачность (основные функции>непрозрачность.) Сначала её поставим на 50%,затем на 25%, ну и наконец на ноль:

Так что изображение на нашем слое постепенно станет исчезать:

Теперь сохранив 4 изображеия с разной непрозрачностью можем переходить на любой сервис для создания фнимированных гифов.
Например, (ни копейки за рекламу) советую бесплатный онлайн сервис http://xgif.ru/

P.S.
xGif.ru позволяет создавать анимацию в онлайн. Анимация, анимированные аватары, анимашки, аватары, gif анимация, сделать анимацию, создать анимацию, сделать аватар, создать аватар - все это абсолютно бесплатно на xGif.ru. Анимация создается из ваших фото или любых других картинок! Необходимо загрузить несколько картинок, и ваша анимация будет создана за несколько секунд! Вы сможете использовать созданую gif анимацию в качестве аватаров на форумах и блогах! Это очень просто и абсолютно бесплатно. Не требуется установки какой-либо программы для создания анимации

Описание не врет, так что загружаем свои фотографии "из файла" (с компьютера) в нужной последовательности. Анимация будет создана!

Результат:

Регистрация

Поиск

Опрос:

Друзья

партнеры

Внимание!!

Статистика

Онлайн всего: 1

Гостей: 1

Пользователей: 0

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