[ПОПСА] Проект по Обучению Простому Созданию Аватаров (уроки)

Предисловие:

Нет, не бойтесь, ничего общего с проектом фабрика звезд и его клонами - вас никто не будет заставлять бегать по сцене как угорелый и "петь" песни с идиотскими текстами.

Здесь, просто напросто, вас смогут научить делать аватарки с простой анимацией посредством небольших уроков, а если возникнут какие-либо вопросы или проблемы, то я постораюсь вам помочь их разрешить.

Для начала, вам необходимо скачать программу на которую будут опираться уроки данной темы.
Программа называется Ulead Gif Animator 5.05 (UGA5) и найти ее можно ЗДЕСЬ .

После того как будут выложены первые уроки, "ученики" проекта смогут выкладывать здесь работы по уроку и получить мои комментарии к ним.

Вы в любой момент можете присоединиться к нашему проекту.

Ссылки на уроки:
Урок №1-2 Важно: Чтобы отображались картинки, сделайте соответсвующую настройку у себя в профиле.

Целью 1-2 урока для вас является:
1. Cоздание анимированного аватара для форума ЕГ с анимацией вашего ника.
2. Выложить готовую работу, если хотите, чтобы ее оценили.

Урок №1
Создаем аватар с разными эффектами подписанного ника

1. На этот раз для примера я взял вот такой аватар:

•Открываем Ulead Gif Animator .

Жмем кнопку "Открыть файл" :

•Как вы можете видеть, картинка открылась и внизу вы можете видеть первый кадр вашей анимации.

•Жмем на кнопку "Создать анимацию текста" :

Откроется новое окно:

•В первой вкладке Text , вы сможете настроить такие параметры вашей надписи, как: размер шрифта, стиль шрифта и цвет шрифта.

•Во второй вкладке "Effect" , вы сможете настроить эффект появления вашей надписи и эффект исчезновения.

•В третей вкладке "Frame Control" , вы сможете указать скорость анимации. В первом поле указать время переходов между кадрами (в милисекундах), а во втором поле время задержки в центральном кадре (также в милисекундах).

•В четвертой вкладке "Neon" , вы сможете настроить подсветку вашей надписи, разобраться в настройках не должно составить труда.

•Жмем кнопку "Start Prewiew" (предварительный просмотр). Если вас все устраивает, то жмем кнопку "ОК" и выбираем "Create as Individual Object" .

Сохраняем готовый аватар. Как это сделать? Читай Урок 2: Оптимизация .

Готовый аватар выглядит примерно так:

Урок №2
Оптимизируем аватар под нужный размер.

1. Для примера возьмем вот такой аватар:

Допустим вам надо изменить размер аватара до 50x50 пикселов и весом меньше 7Kb .

2. Открываем эту аватарку в Ulead Gif Animator 'е
Жмем: Edit-Resize image...

3. Меняем значения размера аватара до 50 пикселов по ширине и высоте.

4. Заходим в вкладку Optimize .

Сейчас наш аватар весит 7,641Kb , а нам нужно, чтобы он был меньше 7Kb .

Меняем значения поля colors на 128 (допустим) цветов.

Теперь размер аватара составляет 6,067Kb - это нас вполне устраивает.

5. Сохраняем полученный результат нажатием на кнопочку Save и все, оптимизированный аватар готов.

Видите, все не так уж и сложно.

Советы к урокам от меня:
1. Можно удалить каждый второй кадр из анимации и выставить время перехода между кадрами побольше, тогда анимация будет весить меньше при небольшой потере качества.

2. Если уж совсем не получается оптимизировать под нужный размер, то можно в каждый кадр аватарки вставить черную рамку вокруг картинки, размером от 1 до 3 пикселей - это поможет сэкономить место, но на аватаре существенно не отразится, а будет выглядеть как обычная рамочка.

3. Оптимальной скоростью перехода между кадрами является 1 десятая секунды, то есть в программе это будет 10 сотых секунд.
Урок №3-4 Важно: Чтобы отображались картинки, сделайте соответствующую настройку у себя в профиле.

Целью 3 урока для вас является:
1. Cоздание анимированного аватара для форума ЕГ с переливом, отличным от приведенного в уроке примера.
2. Выложить готовую работу, если хотите, чтобы ее оценили.(Оптимизация по желанию)

Урок №3
Создаем аватар с переливом.

1. Чтобы начать создавать ваш маленький шедевр, надо найти статическое изображение, которое мы с вами будем анимировать. Для примера я взял аватар с глазом:

Открываем Ulead Gif Animator.

Жмем кнопку "Открыть файл" :

Как вы можете видеть, картинка открылась и внизу вы можете видеть первый кадр вашей анимации.

Жмем кнопку "Создать новый кадр"

Как вы видите, создался новый чистый кадр.
Снова жмем на первый кадр и копируем изображение из него во второй кадр. Для выделения достаточно щелкнуть один раз на картинке, которая находится в кадре. Выделив картинку жмем сочетание клавиш "Ctrl+С" (копировать) , изображение скопировалось в буфер-обмена. Выделяем пустой второй кадр и жмем сочетание клавиш "Ctrl+V" (вставить) .

Теперь у вас есть два абсолютно одинаковых кадра. Выделяем второй кадр. Делаем активным изображение в этом кадре. Для этого просто щелкаем на картинке которая находится в центре экрана(это собственно наше с вами изображение). Выбираем инструмент "Кисть" . Он выглядит так:

Дальше настраиваем размер, прозрачность и мягкость кисточки. Это делается с помощью этих кнопок:

Собственно:
Size - это размер кисточки.

Transparency - это прозрачность.

Soft edge - мягкость.

Устанавливаем их значение такие же, как на картинке.

Создаем новый слой во втором кадре, для этого жмем кнопку изображенную на картинке. Она абсолютно такая же как и кнопка "Создать новый кадр" :

Теперь дорисовываем во втором кадре в новом слое небольшой блик к глазу. Это выглядит так:

Нарисовали? Молодцы! Неважно, отблик может быть и чуть отличным от изображенного на рисунке.

Теперь делаем еще 7 новых кадров и копируем изображение из 1 кадра во все новые.

Также копируем отблик из второго кадра во все 7 созданных кадров.

Ну и наконец происходит нехитрая процедура: В 3 кадре передвигаем скопированный отблик от одного уголка глаза чуть в сторону другого, в 4 еще чуть ближе и так вплоть до 9 кадра, в котором отблик должен находится в противоположном уголке глаза. Вот как это выглядит:

Все, считайте, что аватар создан.

Осталось сохранить его, но для начала посмотрите что получилось. Для этого нажмите на кнопку:

Должно получится что-то вроде этого:

Чтобы сохранить аватар в формате Gif , откройте вкладку Optimize .

Вот как она выглядит.

Объясняю:

Present - выбрать стандартные цветовые палитры.

Colors - выбрать самому количество цветов.

Dither - сглаженность картинки.

Справа вы можете видеть картинку после оптимизации. Довольно таки удобно, так что не составляет труда найти эту "золотую середину": размер - качество.

Чем больше количество цветов, тем больше размер картинки. Старайтесь выбирать цвета так,чтобы они не шли в ущерб качеству аватара. Теперь осталось нажать кнопку "Save" .

Вот и все, теперь все зависит только от вашей фантазии.

Советы:
1. Чтобы настроить скорость вашей анимации, достаточно 2 раза кликнуть на кадре снизу - в последовательности кадров. И в появившемся окошке выставить время перехода. Также можно выделить сразу несколько кадров, и щелкнув правой кнопкой мыши по выделенным кадрам выбрать "Frame Properties" .

2. Поиграв с цветом перелива и его размером, можно добиться интересных эффектов, например - металлический отблеск.
Целью 4 урока для вас является:
1. Cоздание анимированного аватара для форума ЕГ c вспышкой в глазах, отличным от приведенного в уроке примера.
2. Выложить готовую работу, если хотите, чтобы ее оценили.(Оптимизация по желанию)

Урок №4
Вспышка в глазах

1. Открываем программу. Открываем аватар, который хотим заанимировать, желательно, чтобы на нем присутствовали чьи-нибудь глаза.

Я для примера взял вот такой:

2. Создаем новый кадр и копируем в него изображение из первого.
Выбираем инструмент кисть:

3. Выставляем параметры кисти, в этом кадре они должны быть такими:
Размер кисти - чуть больше глаз изображенных на аватаре (пикселя на 2-3 ).
Прозрачность - 10 -15 , не больше.
Мягкость - 100 .

Выставляем все параметры.
Ставим по точке на каждый из глаз:

4. Создаем третий кадр и копируем в него изображение из второго.
Меняем параметры кисти:
Размер - на 2-5 пикселей больше (в моем случае).
Прозрачность - ставим 25-30 .
Мягкость - 100 .

Выставляем новые параметры и в третем кадре поверх глаз ставим еще 2 точки:

5. Создаем четвертый кадр и копируем в него изображение из третего.
Меняем параметры кисти:
Размер - на 5-10 пикселей больше.
Прозрачность - около 50 .
Мягкость - 100 .

Выставляем новые параметры и в четвертом кадре поверх глаз ставим очередные 2 точки:

6. Создаем пятый и шестой кадры. В пятый копируем изображение из третего, а в шестой из второго кадра.

Примечание:
Это лишь пример, я решил остановится на таком варианте. А вообще кадров может быть и больше, все зависит от вас. Принцип остается таким же - после центрального кадра идут все изображения с первого до центрального (не включая его) в обратном порядке.

7. Включаем просмотр анимации и если вас все устраивает - оптимизируем и сохраняем наш аватар.

Результат:

Советы:
1. Можно выставить задержку в первом кадре, чтобы вспышка была один раз в некоторое время.

2. Лучше не перебарщивать с кадрами, их должно быть немного, потому-что анимация со вспышками занимает очень много места и если кадров будет очень много, то могут возникнуть сложности при оптимизации.
Урок №5 Целью 5 урока для вас является:
1. Создание моргающего аватара, отличным от приведенного в уроке примера.
2. Выложить готовую работу, если хотите, чтобы ее оценили.(Оптимизация по желанию)

Урок №5
Создаем моргающий аватар.

1. Открываем в UGA 5 любой статичный аватар на котором присутствуют глаза.
Я для примера взял вот такой аватар:

2. Выбираем инструмент "Selection Tool" .

С помощью него выделяем глаз на аватаре. Вырезаем его (Ctrl+X) .
Создаем новый слой:

И в него вставляем вырезаный глаз (Ctrl+V) .
Проделываем эту незамысловатую операцию на втором глазу (его также вставить в новый слой).

3. Создаем новый пустой слой.
И располагаем его так, чтобы основная часть картинки была поверх него, а два глаза ниже.

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

4. Располагаем веки так, чтобы они чуть прикрывали глаза.
Делаем дубликат первого кадра:

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

5. По желанию выставляем задержку на первом кадре, чтобы моргание происходило периодически.

Оптимизируем и сохраняем наш "шедевр".
Все.

Советы:
1. Рисуя веки, попробуйте сделать их как можно более реалистичными и схожими с картинкой, поэкспериментируйте с цветами.
Урок №6 Данный урок, требующий наличие программы "Sqirlz Water Reflections" ( Скачать (2.88мб) ), и конечно же мозга=)))

Анимация воды посредством программы "Sqirlz Water Reflections"
В этом уроке вы научитесь делать такие эффекты, как волны, рябь и т.п
И сразу с места в карьер:

1. Запускаем "Sqirlz Water Reflections".

2. Открываем файл формата jpeg в окно программы, делается это нажатием на кнопку Open an existing image file/Открыть изображение:

В своем примере я использовал вот такую вот картинку:

3. После открытия картинки жмем Start creating Outline/Начало операции выделения:

Можно сказать что это аналог фотошопного Polygon Tool'a . С помощью вот этого незамысловатого инструмента выделяем ту часть картинки, которую вы бы хотели анимировать, в нашем случае это вода. Заключаем всю водную часть нашей картинки в преславутую рамочку. Вот так примерно это выглядит:

Управились с выделением? Ну тогда идем дальше.

4. Левым кликом нажимаем кнопку Customize Basic Riples/Эффект "Водная гладь", вот так вот странно она выглядит:

Если вылезло странное окошко с циферками и ползунками - не пугайтесь, так и должно быть. Рассмотрим его в деталях...

5. Все пункты окошка по порядку:
Run Basic Ripples Only/Выполнить эффект - запустить просмотр сделанного вами эффекта. (Хватит на нее щелкать! Рано еще!

)

Следующий пункт - Motion Type/Тип движения . Буковки от A до E - разные типы движения воды. Вот теперь можете вдоволь пощелкать на желтую стрелочку , предварительно выбрав один из типов движения.

Набаловавшись и определившись какой эффект вам предпочтительней - продолжаем:

Wave Strength/Сила волны:
"...хочу быть владычицей морскою!", - к большому сожалению в те времена компьютеров не было и пришлось бабке довольствоваться корытом, в придачу ко всему еще и разбитым. Ну так вот, с помощью этой кнопочки вы сможете почувствовать себя эдаким Посейдоном.
Чем больше значение этого параметра, тем сильнее будет волноваться ваше виртуальное море: от полного штиля до средненьких волн.

Wave Separation/Разделение волн:
Этот параметр отвечает за то, на сколько ваше море будет рябить. Чем больше значение параметра, тем меньше ряби на воде.

Разрешу вам побаловаться с первыми двумя параметрами, дабы вы поняли, что и как. Как наэкспериментируетесь, проследуйте двумя строчками ниже.

Wave Contrast/Контраст волн:
Ну здесь и пьяному ежику все понятно: чем больше значение этого параметра, тем ярче ваше отражение в водичке.
Если, кто не понял о чем речь, то пощелкайте на желтую стрелочку, предварительно поменяв значение этого параметра.

Perspective/Перспектива:
Этот параметр отвечает за то, под каким углом к горизонту находится ваша водная гладь/на сколько уходит вдаль (по другому охарактеризовать не смог).
Проанализировав разные значения, вполне легко разберетесь. Дерзайте.

Blur/Размытие:
Наконец-то что-то попроще. Это размытие. Можно настроить четкость волн.

Texture (Speckle)/Текстура:
Отвечает за качество волнующейся поверхности. Выставив параметр на 0 - добьетесь максимального качества. Проводя дотошные аналогии с детищем Adobe, этот параметр вполне можно сравнить с эффектом "шума".

Transparency/Прозрачность:
Если вы активизировали предыдущий параметр, то с помощью этого можно настроить его прозрачность.

Underwater Scene Rippling/Поддводная сцена:
Чем больше значение, тем больше этих, так называемых "подводных разводов".

Пошалите со всеми параметрами, дабы понять их принцип действия.

Также, как вы верно уже заметили есть, вот такие вот, четыре кнопочки:

•Water Color and Darknees/Цвет воды: здесь можно настроить яркость и цвет вашего течения. Попробуйте.

•Edd Extra Waves/Добавить волну: с помощью этого можно сделать ваш мини шторм еще сильнее.

•Edd Flow/Добавить течение: стрелочка укажет вашей водичке направление течения.

Последняя кнопка не актуальна. С ее помощью можно выставить сглаживание вашего изображния. Я нашел альтернативное применение - выявление мощности вашего компьютера.

Закончив все приготовления и выставив оптимальные для вашей анимации параметры, со спокойной душой закрываем окошко с настройками.

6.Дальше жмем кнопку:

Выбираем Basic Ripples Only/"Водная гладь" .

7.Осталось лишь сохранить наши творения на жестком диске.
Выбрав один из трех предложенных форматов сохранения:

AVI, GIF или flash, в нашем случае это естественно GIF . Жмем на соответствующую кнопку.
Выставляем колличество кадров для нашей анимации, предварительно ответив "Ок" в выскочившем окошке.
Указываем нашей аватарке положенное ей место на винчестере, называем как-нибудь по ласковее и сохраняем.
Все.

Результат:

Записываемся...