[ Новые сообщения · Участники · Правила форума · Поиск · RSS ]
  • Страница 1 из 1
  • 1
Создание анимированного юзербара
SHOCK Дата: Суббота, 10.04.2010, 8:37:05 | Сообщение # 1
Сержант
Группа: Пользователи
Регистрация: 06.04.2010
Пользователь №: 13
Сообщений: 179
[ 18 ]
10.04.2010 Суббота
Профиль
Группа: Пользователи
Регистрация: 06.04.2010
Пользователь №: 13
Сообщений: 179
Репутация: [ 18 ]
Не указано

Автор - SHOCK
Дата добавления - 10.04.2010 в 8:37:05
Шаг1. Открываем изображения для анимации.
Открываем ваши юзербары, я открыл три, созданных с помощью этого урока.
*Для более плавной анимации, проследите за тем, что бы на всех юзербарах блик находился в одном месте, как на моих:

Шаг 1. Создаем фон юзербара
Создаем новый файл "ctrl+N" с такими же параметрами как на картике ниже

Выставляем цвета, основной #369ecf; фоновый #1f5743.

С помощью инструмента "Градиент" (G) создаем фон нашего юзербара.

Шаг 2. Добовляем иконку Photoshop
Для того, что бы добавить иконку на наш юзербар, открываем файл с иконкой "ctrl+O":

С помощью инструмента "Перемещение" (V) переносим ее на наш юзербар и c помощью "Свободное трансформирование" "ctrl+T" уменьшаем иконку до нужных нам размеров (рекомендую зажать клавишу "shift", для соблюдения пропорций при масштабировании):

Теперь создадим объем иконке. В списке слоев правой кнопкой щелкаем на нашем слое и в списке выбираем "Параметры наложения".

В появившемся окне щелкаем на слово "Тень" и выставляем параметры как показано ниже:


Далее щелкаем на "Тиснение" и выставляем следующие параметры:


Получается примерно так:

Шаг 3. Создаем надпись Photoshop user
Берем инструмент "Текст" (Т) и пишем "PHOTOSHOP USER". Я использовал такие настройки: шрифт: "Vrinda", размер: "12px", цвет: "белый". Теперь заходим в "Параметры наложения" слоя с текстом, в самом конце списка выбираем "Обводка" и выставляем следующие параметры:


Результат:

Шаг 4. Создаем эффект "объемного стекла"
Создаем новый слой "shift+ctrl+N", выбираем инструмент "Овальное выделение" (М) и в верхней части нашего юзербара создаем овальное выделение. Закрашиваем выделенную область белым цветом.
Примерно так:


И получаем:

Вприципе на этом можно и остановиться, но давайте добавим полосочки, ставшие неотъемлемой частью всех юзербаров.

Шаг 5. Создание полосок.
Создаем новый документ "ctrl+N" с прозрачным фоном и размером 3х3рх:

Берем инструмент "Карандаш" (B) (если у вас при нажатии кнопки "B" выбирается кисть, а не карандаш, то еще нажмите "shift+b"), выставите размер карандаша 1px и нарисуйте три пикселя как показано ниже (для удобства рисования увеличьте документ до 1600%):

Теперь вверху нажимаем "Редактирование>Определить узор" и жмем ок:

Теперь этот файл можно не сохраняя закрыть и вернуться к нашему юзербару.
В списке слоев выбираем "Параметры наложения" для первого слоя, на котором находится фон, кликаем на "Перекрытие узора" и в окошке выбираем созданный нами узор:


Жмем ок и юзербар пользователя Photoshop готов!

ПРОДОЛЖЕНИЕ

С помощью инструмента “Move Tool” (V) переносим все юзербары на один файл (два на третий) и скрываем два верхних слоя:

Шаг 2. Создаем основные кадры.
Открываем “Image Ready” (Shift+Ctrl+M), создаем новый кадр и делаем видимым второй слой:

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

Шаг 3. Создаем промежуточные кадры.
Выбираем второй кадр и жмем на “Tween…

В появившемся окне, выставляем
Tween With: Previos Frame
Frames to Add: 3

Теперь выбираем следующий основной кадр (должен быть №6) и так же создаем промежуточные кадры для него и для всех последующих, получаем полосу анимации из 14 кадров.

Шаг 4. Выставляем время для кадров.
Зажмите "Ctrl" и на полосе анимации выделите все основные кадры (1,5,9,13), нажмите на “Selects frame delay time”, и выберите 1sec:

Также выделяем все промежуточные кадры и выставляем для них время 0,1.
Теперь так как у нас первый и последний кадр одинаковые, нужно какой то из них удалить, советую удалить первый.
Осталось только сохранить, жмем “Ctrl+Shift+Alt+S” и сохраняем в GIF.
Вуаля! ;=))

Все, кто использует CS3, вам не нужно запускать Image Ready, вместо него вам просто надо открыть окно анимации "Window>Animation (Окно>Анимация)




  • Страница 1 из 1
  • 1
Поиск:


Дизайн сайта полностью пренадлежит CS-NIKE
CS-NIKE.3DN.RU © 2010-1011 Хостинг от uCoz