Пишущее перо анимация для презентации. Использование привязок для линий. На черной бумаге будут лучше видны линии

Первая часть урока - анимация текста -

Во второй части урока мы добавим анимацию ручки (пера).

М ы же с вами создадим анимацию чуть-чуть сложнее - будем «писАть» пером и чернилами. Поэтому д ля освоения урока надо приготовить дополнительные материалы - клипарт пера и чернильницы .

1 . Откройте в программе сохраненный в формате psd документ с анимацией текста. Прежде чем продолжить работу, откройте палитру «Анимация » и проверьте - у вас активным должен быть кадр 1 (чтобы в дальнейшем вы не сбили уже готовую анимацию). Перейдите в палитру слоев и давайте спрячем в папку все слои, относящиеся к тексту (в этой части урока они не будут задействованы). Для этого выделите самый верхний слой, зажмите клавишу Shift и затем выделите предпоследний слой. У вас должны выделится все слои, кроме фонового . Затем войдите в меню «Слои » → «Сгруппировать слои » или нажмите на клавиатуре комбинацию клавиш Ctrl + G. Готовую папку для удобства переименуйте в «Текст ». При активном слое данной папки с помощью инструмента «перемещение» опустите ваш текст немного ниже, чтобы было больше свободного места для пера.

2 . Перенесите в документ клипарт чернильницы и переименуйте слой. С помощью «трансформирования» (Ctrl + T ) задайте ей нужный размер.

3 . Чтобы чернильница не стояла на бумаге, давайте немного расширим холст снизу. Создайте новый слой ниже фонового (при активном фоновом слое зажмите на клавиатуре клавишу Ctrl и нажмите на иконку «новый слой » внизу палитры слоев). Затем войдите в меню «Изображение » → «Размер холста... ». В открывшемся окне внесите изменения, которые на моем скрине выделены красным (размер по высоте можете поставить свой, но не сильно большой). Если сделали все правильно, у вас должен холст документа расшириться книзу.

4 . Залейте данный слой белым цветом и переместите клипарт чернильницы в один из нижних углов. Теперь перенесите в документ клипарт пера. Уменьшите его с помощью «трансформации» до нужного размера.

5 . В нашей анимации у пера будет 4 разные позиции - оно будет лежать , мы окунем его в чернильницу , и при написании слова у него будет 2 угла наклона . Поэтому создайте 3 копии слоя «перо». С помощь «трансформации» (Ctrl + T ) на каждом из этих слоев измените положения пера.

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

Я задала вот такую цветовую маркировку и в дальнейшем буду ссылаться на нее.

6 . Перо на слое, помеченном красным маркером (оно лежит), переместите в противоположный от чернильницы нижний угол. Перо на слое, помеченном зеленым маркером, переместите к чернильнице и жестким «ластиком» сотрите кончик пера.

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

Надо определить заранее, в каких частях текста будем ставить перо с небольшим углом наклона, слой которого помечен синим маркером, на остальных кадрах анимации будет задействовано перо с основным углом наклона, слой которого помечен фиолетовым маркером. Я выбрала в моем тексте для пера с синим маркером начальные элементы букв С, Л и «хвостики» буквы О.

8 . На этом подготовительная часть урока завершена и переходим к анимации. Закройте «видимость» с лоев с перьями.

Откройте палитру «Анимация » (покадровая) через меню Окно . Проверьте, чтобы стояла «постоянная» анимация. Создайте копии первого и последнего кадра, ваша анимация при этом увеличится на 2 кадра.

Зачем мы их делаем ? На первом кадре наше перо будет лежать , на втором кадре (копии первого) мы окунем его в чернильницу, и «писАть » оно начнет с 3 кадра. На предпоследнем кадре мы напишем пером полный текст , а на последнем (это созданная нами копия текста) мы положим перо ...

9 . Итак, на первом кадре закройте «видимость» всех с лоев с пером, кроме помеченного красным маркером (на картинке у вас должны остаться фоновые слои, чернильница и лежащее перо, текст скрыт) .

На кадре 2 закройте «видимость» слоя с красным маркером и откройте слой с зеленым маркером - окунем наше перо в чернильницу .

Н а последнем кадре также откройте «видимость» слоя с красным маркером (текст написан, перо отложено ).

10 . Теперь в вашей анимации найдите кадры, открывающие те части текста, которые будут «написаны» пером на слое с синим маркером (мы определили их в п. 7 ). Перейдите на первый из этих кадров (у меня это кадры 3 , 8 , 17 и 27 ). Откройте «видимость» слоя с синим маркером. Переместите перо в нужную вам позицию. Аналогично открывайте другие кадры и перемещайте перо...

11 . На всех оставшихся кадрах будет открыта «видимость» слоя с фиолетовым маркером. Открывая последовательно кадры, перемещайте перо в нужную позицию.

12 . Теперь включите анимацию и посмотрите, нравится ли вам время отображения кадров (при необходимости, измените время; как это делать, описано в первой части урока ) . По следний кадр должен быть самой длительной задержки , чтобы можно было прочитать текст. У промежуточных кадров , на которых «пишется текст», время отображения должно быть одинаковым .

В своей анимации первому кадру я поставила 0,5 сек, второму кадру (перо в чернильнице ) - 1 сек., последнему , с полным текстом - 2 сек. Остальным кадрам (в моем примере 3 - 27 ) я поставила время отображения 0,1 сек.

13 . Прежде чем сохранять анимацию, не забудьте сохранить документ в формате psd , он нам еще понадобится в третьей части урока .

Теперь сохраним работу в формате gif : «Файл» - «Сохранить для Web и устройств...»

Вот итог моей анимации.

На этом вторая часть нашего урока завершается. В общем, анимацию «письмо от руки » можно считать готовой, но, если вам интересно освоить анимацию «исчезновение текста с листа» , приглашаю на третью часть урока. Она будет опубликована в ближайшие дни, следите за анонсом рассылки.

Буду рада, если Вы покажете результат освоения урока в комментарии к данной теме (анимацию можно загрузить на любой хостинг картинок или на наш сайт в «Мои файлы»).

Надеюсь, что урок понравился, и с его помощью Вы откроете для себя новые возможности программы Фотошоп!
Все вопросы по уроку, пожалуйста, задавайте в

Клиент просит анимации ручки, пишущей слово “ yes ” . Модель ручки уже есть, задача в анимации пера по пути, и синхронизации появления надписи с движением пера. Эти задачи и ряд других будут решены в пособии по анимации надписи.

Уровень мастерства: Новичок. Время урока: 15 минут.

Рисование пути на бумаге

Настройка:

File write_on_start.max.

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

Перед рисованием пути будет изменен цвет бумаги, чтобы лучше видеть линию.

Изменение цвета бумаги:

В окне выделен объект paper , его параметры видны на панели Modify.

Материалы сцены показаны в Material Editor. Сфера материала paper выделена.

На черной бумаге будут лучше видны линии.

Для бумаги будет сделано еще одно изменение.

Добавление бумаге сегментов :

После закрытия Material Editor правый щелчок по имени окна и выбор Edged Faces.

В этом режиме в окне видны черные сегменты бумаги и их края.

В свитке Parameters на панели Modify ввод Length Segments и Width Segments = 8 .

Увеличено число сегментов

При рисовании линии будет нужна привязка к граням.

Использование привязок для линий:

В меню Customize выбор Grid and Snap Settings. На панели Snaps щелчок Clear All, включение Face и закрытие диалога.

Все настройки сделаны; теперь можно рисовать слово “yes ”.

Примечание : Можно также включать и выключать привязку клавишей S .

Курсор привязки к граням

Щелчок с подтягиванием создает закругление сплайна. Смещение курсора, снова щелчок с подтягиванием создает сегмент с закруглением. Ввод точек с созданием буквы Y . (На рисунках показаны этапы рисования буквы.)

Примечание : Клавишей Backspace можно удалить в процессе построения последнюю введенную вершину линии. Можно также подравнять вершины позже.

Щелчки с подтягиванием создают линии с закруглением.

Видны сегменты ломаной линии, особенно на хвостике буквы “Y”. Число сегментов для сглаживания линии можно позже увеличить.

Создание углов:

Для создания излома в вершине следует просто щелкнуть без подтягивания. Например, при переходе в букву “ e ” и в букву “ s ” нужен угол. Правый щелчок заканчивает ввод сегментов.

Простой щелчок в начале буквы “ e ”.

Правый щелчок в конце .

Выключение инструмента Line правым щелчком в окне.

Сохранение работы: Save as my_write_on.max .

Анимация пера по пути

Теперь путь на бумаге нарисован, можно анимировать ручку с применением Path Constraint.

Настройка:

Перевод ползунка в кадр 0 .

Замена материала и цвета:

Анимация ручки с помощью Path Constraint :

Клавишей H вызов диалога Select Object и выделение nib (перо) в списке. Включение Display Subtree в нижней части диалога. Щелчок Select.

Компоненты ручки ручка, вставка и перо (wood , cork , nib ), уже собраны в иерархию для анимации. Это показывают отступы в списке. Перо (nib ) является предком иерархии. При анимации предка дочерние объекты деталей ручки будут следовать за ним.

Теперь в окне выбрано перо ручки.

В меню выбор Animation > Constraints > Path Constraint.

При перемещении курсора в окне будет видна штриховая линия от пера к курсору.

Перевод курсора на объект Line 01 и выбор его щелчком в качестве пути.

Перо отскакивает в начало пути. Ручка пока утоплена в бумагу.

Ручка прыгает в начало пути.

Поворот ручки .

В просмотре перо следует по пути.

Перо следует по пути .

Теперь следует создать растущую линию, следующую за кончиком пера. Для этого будет использован модификатор PathDeform.

11-07-2011, 19:00

Итак, приступаем...

1. Открываем в программе Фотошоп фоновое изображение.
2. Возьмем перышко на прозрачном фоне, в интернете их много, переносим его на слой с фоном, получаем 2 слоя. Идем Редактирование - Свободное
трансформирование
и уменьшаем или увеличиваем наше перо - тянем за уголки, не забывая удерживать клавишу Shift.

3. Теперь пишем инструментом Текст наше слово -я взяла лето. Щелкаем по слою с текстом правой кнопкой мышки и выбираем растрировать текст.

4. Добавим стиль тень к слою с текстом,щелкнем по слою два раза и выбираем тень, поэкспериментируйте здесь с настройками.

5. Копируем слой с текстом 4 раза, нажав Ctrl + J - зависит от количества букв в вашем слое, а слой с перышком перенесем на самый верх.

6. Открываем анимацию, нажимаем на треугольничек в окне анимации и выбираем - Создать кадры из слоев. Кадр с фоном и пером - удаляем.

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

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

9.Переходим в третий кадр - включаем глазок на слое с фоном, выключае глазок на слое с текстом выключаем и переходим на слой с текстом выше,включаем глазик

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

11.Переходим в третий кадр - включаем глазок на слое с фоном,слой с текстом оставляем этот же, а перышко здесь инструментом Перемещения опустим пониже,просто положим его.

Этот урок создан для таких-же чайников, как я. Фон создала заранее. И так:
1. открываем фоновую картинку. В окне "слои" кликаем мышкой 2 раза и нажимаем на "ок".

2.В списке кистей находим "ПЕРЯ"- feathers выбераем ПЕРО которое вам нравится.

3. В окне "слои" создаём новый слой и ставим ПЕРО. А потом кликаем2 раза на этом-же слое и в окне "стиль слоя" обозначаем птичкой "сатин".

4. Становимся на "Т" в меню и делаем надпись. Я написала "Мерси".В окне "слои" кликаем 2 раза на слой "Мерси" и на этот раз добавляем тень.

5. Нажатием на CTRL + J делаем 5 копий слоя "мерси":

6. Мы опять в окне "слои" Layers. Создаём папку. Потом нажав на первый слой "мерси" и одновременным нажатием на Shift и последний слой "мерси" перетаскиваем мышкой всех в папку.

7.Переходим в окне "анимация". В углу нажимаем на триугольник,и в списке находим "Make Frames From Layers". Откроются все слои, которые у нас в окне "слои".
Первые два слоя удаляем.

8. В окне "анимация" нажимаем на первый и Shift + последний слой. А в окне "слои" делаем видимым слои "ПЕРО" и Фон.

9. В меню виберим "Т" . и в окне "анимация" и в окне "слои" выбераем первый слой "мерси", и удаляем все букви слова "Мерси" кроме первой, значит оставляем "М". Удаляем быквы как обычно с кнопкой "Backspace" на клавиатуре.
После этого переходим на второй слой "мерси" в обеих окнах и тем-же способом удаляем буквы, все кроме первых двух "Ме".... и т.д. и так продолжаем до 5-го слоя.

10.Вернёмся в окно "анимация". И папке и слоы ПЕРО поменяем места перетаскиванием, так что-б ПЕРО оказалось сверху!

11. Удостоверимя что в окне "слои" стоим на ПЕРО. перходим в окно "анимация" на первый слой и с исползованием Ctrl переносим Перо ближе к букве "М". Переходим на второй слой, повторяем тоже самое: перетаскиваем Перо ближе к последней букве.

12.В окне "анимация" стоя на последнем слое, делаем невидимым все слои "мерси" из окна "слои"

13. И вернулись в окно "анимация". красными кружками показанно как создаём копиу последнего слоя. Синими кругами обозначенно как изменить время каждогослоя по вашему усмотрению.

14. для 6-го слоя сделаемвидимым слой "мерси"

15.для последнего 7-го слоя закрываем все глазки в окне "слои".
Сохранение анимации комбинацией несколкик кнопок.......... или в меню "файл" выбераем "сохранить для ВЕБ......
Откроется новое окно, где сможете нажав на маленький треугольник,проверить полученную анимацию перед сохранением.

Вот и наш результат. По моему получилось не плохо Друзья