altПриветствуем вас в разделе уроков нашего сайта!
Очень надеемся, что наши уроки вам пригодятся, помогут воплотить в жизнь ваши небольшие графические фантазии :)

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

Внимание! Копирование уроков сайта разрешено только при согласии администрации и при наличии в скопированном уроке прямой (кликабельной!) ссылки на оригинал-урок. 

Подробнее ...
 
Волна в программе Fanta Morph
Автор: Gold_lily   

В этом уроке мы рассмотрим , как в программе Fanta Morph сделать вот такую волну вокруг серфингиста:


 alt

 

С чем мы познакомимися в этом уроке: особенности работы с программой морфинга

Потребуется знание уроков: Программа Abrosoft FantaMorph

 


1. Итак, имеем вот такой исходник:

 

alt

 

2. Открываем его в Adobe Photoshop и доводим до ума.
Я обрезала картинку, чтобы моя волна была полностью видна; добавила яркости, контраста, и применила фильтр Sharpen (резкость).

 

Примечание: о том, как сделать все это, читайте в уроках статики - "Как обрезать картинку?", "Как изменить размер картинки?", "Игра цвета", "Резкость аватары".


Вот, что получилось:


alt


Сохраняем картинку в формате jpeg с помощью команды "file - save as...".

3. Открываем программу Fanta Morph.

1) При открытии появляется окно Project Wizard.
Выбираем «Сreate a new project» («создать новый проект») и жмем «Next» (дальше):

 

alt

 

2) Далее нам предлагают выбрать тип проекта. В нашем случае логично было бы выбрать «Warp» ( «деформация»), где используется одно изображение, которое автоматически вставляется сразу в 3 окна. НО, методом проб и ошибок было выяснено, что в этом случае получается довольно таки резкая деформация, которая выглядит небрежно в случае с водой. Поэтому мы выбираем «Morph» («морфинг»), как будто будем работать с двумя картинками и, таким образом, получим лучший результат. А если вам нужно создать фильм из более, чем двух картинок, выбирайте «Multiple morph» («многократный морфинг»). Итак, мы выбрали «Morph», и жмем «Next».


alt

 

3) Тут нам предлагается импортировать наши изображения . Жмем на кнопку с точками и показываем программе путь к картинке, она появляется во левом окне программы. Жмем на следующую кнопку с точками и снова показываем тот же путь, та же картинка появляется в правом и нижнем окнах. А мы снова нажимаем «Next».

 

alt



4) Программа предлагает поработать с изображениями: обрезать либо применить контраст, осветление и т.д. Игнорируем, ибо наша картинка уже доработана, и … жмем «Next».

 

alt

 

5) Нам предлагают установить размер и длину фильма. Размер оставляем исходный, так как будем дорабатывать аватар в Adobe Photoshop. Количество кадров устанавливаем 15. Идем дальше.

 

alt


6) Предлагается установить эффекты фильма. Не будем, идем дальше.


alt



7) Тут программа предлагает воспользоваться классическим набором точек для лица, отказываемся, ибо у нас не лицо. Жмем «Finish».

 

alt


8) Окно исчезает, а мы начинаем работу.
Между верхними панелями видим такую панель: 

alt

Жмем кнопку с плюсиком "Add Dot/Line" ("добавить точку/линию") – это кнопка добавления точек.
В левом окне расставляем точки.
Сначала точками "обводим" серфингиста:

 

alt


Обратите внимание, что в правом окне точки расставятся автоматически в тех же местах.

А затем расставляем остальные точки на волне так, что бы было, куда их потом сдвинуть в правом окне:

 

alt



В правом окне получаем то же самое: (на картинке я отметила несколько точек цифрами)

 

alt



Теперь жмем на кнопку со стрелкой "Edit dots" (редактировать точки) на панели между верхними окнами. В правом окне стрелкой сдвигаем точки в тех направлениях, куда, по логике, должна двигаться вода в такой волне.


Внимание!
Не трогайте точки, которыми «обведен» серфингист, иначе он будет размываться вместе с волной.


Вот как сдвинула я:

 

alt

 

Все точки сдвинулись:

 

alt

 

Теперь можно обратить внимание на нижнее окно и панель рядом с ним:

 

alt


В этом окне мы можем увидеть результат нашей работы. Для этого жмем на кнопку «Play» и смотрим. Обратите внимание на маленькие значки с лампочками над кнопкой «Play». Я отметила левый верхний - "auto loop" (авто петля). Он проигрывает анимацию без остановки, друг за другом.

Если результат не очень нравится
, можно сделать следующее:
- добавить точек туда, где не хватает движения;
- убрать лишние точки;
- поставить точки там, где движения не нужно и не трогать их в соседнем окне (я таким образом разделила волну в том месте, где она сливается с со своим основанием, что бы не было лишнего сдвига)


Если результат нравится, жмем на среднюю кнопку из тех, что снизу окна «Export movie» (экспортировать фильм).
Появляется одноименное окно :

 

alt


В нем нужно выбрать экспортируемый формат:

 

alt 

 

Здесь два вариантоа действий, используйте тот, что вам привычнее и удобнее.
- Можно выбрать Animated GIF  и открывать сохраненную анимацию в Имедж риди как обычно.

- Можно сохранить фильм, как отдельные кадры – «Image Sequence». (как показано на скрине выше) Мне куда проще поступить так. Я сохраняю 15 кадров в отдельную папку, нажав кнопку «Export».

Наша работа в программе Fanta Morph закончена.


4.  Теперь открываем наш проект в Adobe Photoshop. А точнее Image Ready.

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

 

1) если вы сохранили вашу анимацию как гиф файл:

- откройте его в имедж риди

- в панели "animation" (анимация) с помощью клавиши Ctrl выделите кадры через один и удалите их.

 

2) если вы сохранили отдельные изображения:

- откройте папку, в которую вы сохранили эти изображения

- удалите в папке точно также изоображения через одно
- откройте имедж риди и с помощью команды "file - Import - folder as frames" (файл - импорт - папка как кадры) откройте свои изображения как анимацию.

 

alt

5. Проставляем видимость слоев.

Далее в Image Ready в окне "Animation" (анимация) на первом кадре делаем видимым (глаз около слоя) только первый слой. Затем дублируем кадры с помощью кнопки "Duplicate current frames" (дублировать текущий кадр), и на каждом новом делая видимым следующий слой. Т.е. на первом кадре - только 1 слой, на втором кадре - только второй слой, на третьем - видимый только третий, и т.д. У меня получилось 7 кадров:

 

alt

Время задержки на каждом кадре я поставила 0,2 секунды.
Затем я уменьшаю изображение до 100 на 100 пикселей. Получаю вот такой аватар:



alt


6. "Вес" пика.
Но он «весит» 53 кб, что меня категорически не устраивает. Способы облегчения юзерпика описаны в уроке "Оптимизация анимации".

В нашем случае я наложу текстуру в виде марки, которая скроет пустоватые, на мой, взгляд, края, а заодно, немалую часть анимации и сразу уменьшит вес моего аватара до 42 с копейками кб. Но и это для меня многовато и я ослаблю Dither (дизеринг) до 97%, и получу 39,6 кб.


Такой вес меня вполне устроит. И вот наш результат:

alt



По тому же принципу сделаны и эти 3 юзерпика:

 

alt alt alt

 

P.S. Если у вас возникли какие-то вопросы по уроку – опишите в комментарии подробно вашу проблему, мы обязательно поможем вам разобраться! И не забудьте подписаться  на комментарии к уроку, если хотите получить ответ на свой вопрос как можно скорее.

Лучшее "спасибо" за урок - ваш комментарий! :)