В этом уроке научимся делать вот такое непрерывное движение без заметных переходов - наиболее реалистичное движение.

Итак, у нас есть вот такой исходник :

1. Открываем его в программе Adobe Photoshop командой File (файл)—Open (открыть) или Ctrl-O
Обрезаем с помощью инструмента Crop (обрезать):

У меня получилось так :

2. Работа со статикой. Я применю фильтр Sharpen (Резкость) командой Filter (Фильтры) – Sharpen (Резкость) – Sharpen (Резкость). И добавлю чуть контраста командой Image (Изображение) – Adjustments (Настройки) – Brightness/Contrast (Осветление/Контраст)

3. Выделяем руку с ножом. Удобным для вас способом выделяем руку с ножом и копируем выделенное на новый слой. Для этого щелкаем правой кнопкой мыши на выделенном объекте и в появившемся окне выбираем Layer via copy(скопировать на новый слой).

4. Применение фильтра Liquify(Пластика). Дублируем базовый слой с помощью команды Layer(Слой) -Duplicate layer(Дубликат слоя)

Применять фильтр Liquify(Пластика) будем уже на этом дублированном слое.
Примечание: в принципе, дублировать слой необязательно. Можно работать и исходным слоем, но я предпочитаю перестраховаться и оставить базовый слой нетронутым. В частности, для того, чтобы позже можно было увидеть результат работы с фильтром, сравнив с исходником.

Открываем окно Liquify(Пластика) командой "Filters" - "Liquify" (Фильтры - Пластика):

С помощюь инструмента Zoom Tool(Увеличение) увеличим картинку до 200%. Затем инструментом Forward Warp Tool ("Деформация") сдвигаем края нашей руки с ножом внутрь(сужаем ее). Это делается для того, чтобы позже, при движении слоя с выделенной нами ранее рукой, ее базовая копия не выглядывала бы из-под нее.

На картинке ниже я стрелочками показала в каком направлении нужно двигать края. Получаем такую изуродованную руку, зато теперь она нам не помешает.

При работе помним, что чем меньше выбранная кисть, тем дольше будем работать и тем аккуратнее получится.

5. Анимируем. Теперь действуем в зависимости от того, какая у вас версия AdobePhotoshop :

- Если AdobePhotoshop CS2, то переходим в Adobe Image Ready (нажав на кнопку перехода внизу панели инструментов) и выполняйте все описанные ниже действия в этой программе.

- Если AdobePhotoshopCS4, как у меня, то открываем окно анимации командой Window(Окно) – Animation (Анимация)

Появится вот такое окно:

В окне "Animation" (Анимация) дублируем наш исходный кадр с помощью кнопки "Duplicate current frame" (копировать исходный кадр):

И уже в этом дублированном кадре мы сдвигаем слой с рукой чуть вниз.

Внимание: в этом виде анимации мы по сути работаем только с одним слоем - слоем с объектом, который мы в начале выделили и скопировали на новый слой. То есть, если обычно в окне анимации у нас кадры с различными активными слоями и переходами медлу ними, то в данном случае у нас на первом кадре активен(выставлен значок глаза) верхний слой с рукой и на втором кадре активен он же, но на втором кадре мы его чуть сдвигаем вниз, имитируя движение руки с ножом. Вот как это выглядит:

На первом кадре:

На втором кадре:


Но рука уже чуть сдвинута

6. Работа с тенью. Теперь обратим внимание на то, что у руки есть тень. И она при движении руки тоже должна бы сдвигаться.
Выделяем участок с тенью инструментом Rectangular Marquee Tool(выделение прямоугольной области) и копируем выделенную часть на новый слой (щелкаем правой кнопкой мыши на выделенном объекте и в появившемся окне выбираем Layer via copy(скопировать на новый слой).

Открываем окно Liquify(Пластика) командой "Filters" - "Liquify" (Фильтры - Пластика)
С помощюь инструмента Zoom Tool(Увеличение) увеличим картинку до 300%. Затем инструментом Forward Warp Tool ("Деформация") сдвигаем тень чуть вниз.

7. Продолжаем анимировать. Теперь в окне анимации на втором кадре делаем активным еще и слой с тенью(на первом кадре его не должно быть видно).

Далее при активном первом кадре в окне анимации нажмем кнопку Tweens animation frames (Создать промежуточные кадры). В появившемся окне устанавливаем кол-во промежуточных кадров напротив надписи Frames to Add (Добавить кадров). Я поставила 2.

Делаем реверс. Чтобы движение руки было плавным, а не прерывалась в конце, выделяем последний кадр, нажимаем Tweens animation frames (Создать промежуточные кадры), но в появившемся окне выбираем First frame (первый кадр), тогда кадры вставятся между последним и первым кадром.
Вот как выглядит теперь окно анимации:

Всего у нас получилось 6 кадров.

8. Теперь нужно уменьшить изображение до 100 на 100 пикселей ( ну или сколько вам нужно). Для этого воспользуемся командой Image (Изображение) – Image Size (Размер изображения) или Alt-Ctrl-I. Появляется окно Image Size(Размер изображения):

В нем выставляем размеры: по 100 рх.

9.Сохраняем анимацию.

- В AdobePhotoshop до CS3 версии сохраняем анимацию в ИМедж Риди с помощью команды "File - Save Optimized as" (предварительно выставляем настройки оптимизации в одноименной окне - Optimized)

- В AdobePhotoshop CS3-CS4 вызываем окно оптимизации командой File (Файл) — Save for Web & Devices (Сохранить для Веб), открывается одноименное окно. В нем виден результат нашей работы и оптимизация настраивается в правой части этого окна: можно выставить кол-во цветов, дизеринг и т. п.

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

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

Таким же способом сделаны и эти юзерпики:

требуются модераторы



PlagiatNIK.ru - Ник Сатин защищен.