Анимированный пунктир

автор сайта Razminka

В скобках указана версия программы

Пора браться за анимацию. И за web-дизайн пора браться. Вот и будем делать такие штучки для привлечения внимания - простенькие и симпатичные мини-анимашки.

1. Начинаем с того, что открываем новое изображение 150х20 пикселей. Так как изображение очень маленькое, работать с ним будет легче, если вы увеличите масштаб.
Создадим область, вокруг которой будут бегать точки. Для этого выделяем все изображение (Ctrl+A или инструмент Pick Tool или Select Tool, клик правой клавишей на изображении и выбираем All из выпадающего меню).
Кликаем правой клавишей и выбираем Expand/Shrink. Появится диалоговое окно Expand/Shrink Selection. В нем выставляем параметры: Shrink=2, Shape=box, нажимаем OK. Получилось!

2. Выделенная область - это основа нашей картинки. Идем в меню Edit--Fill (или Ctrl+F), чтобы залить ее цветом, текстурой или градиентом. Я выбрала градиент Multiple color. Не забывайте, что если кликнуть на образце градиента, то откроется диалоговое окно, где можно выбрать и настроить градиент. Настроек там много, но все очень понятные, поэкспериментрируйте сами, подберите себе что-нибудь по вкусу.
Залили цветом или градиентом? Замечательно. Теперь клик правой клавишей и Invert. Так мы получили рамку, в которой будут анимированные точки.

3. Теперь надо заполнить получившуюся рамку точками. Как будем поступать? Очень просто - создадим шахматку и зальем ею выделенную область.
Итак, создаем новое изображение 4х4 пикселя, фон - белый. Сразу же увеличиваем масштаб.
И рисуем клеточки. Инструмент Paint Tool--Paintbrush, на панели атрибутов инструмента или на появившейся Brush Panel выбираем размер кисти 2 пиксела, Soft edge=0, цвет - будущий цвет вашей анимации. У меня это - черный.

4. Рисуем два квадратика по диагонали. Кистью раз - и клетка вверху слева, кистью два - и внизу справа (или наоборот - кому как нравится).
Копируем шедевр в буфер - Ctrl+C (изображение не закрываем - еще пригодится) и возвращаемся к рисунку с градиентом.
Ctrl+F или меню Edit--Fill. Появляется диалоговое окно Fill, на закладке Image отмечаем опцию Clipboard (залить содержимым буфера обмена) и Tile the image (повторяющееся изображение).
Fill

5. Залили. Внимательно вгляделись. Это - первый кадр анимации. Для второго кадра надо черные точки поменять на белые и наоборот. Приступаем.
Сначала делаем дубликат изображения - Ctrl+D или меню Edit--Duplicate.

6. Готовим шахматку-2 - возвращаемся к рисунку с черно-белыми клетками.
На панели инструментов выбираем Transform Tool (горячая клавиша Q), на панели атрибутов инструмента находим кнопки, нажав на которые рисунок или поворачивается на 90 градусов, или зеркально отражается. Нажали - получили шахматку для заливки второго кадра.
pattern

7. Дальше - как в пункте 4. Скопировали в буфер Ctrl+C, вернулись к изображению с градиентом, Ctrl+F, отметили опцию Clipboard - залили.
Теперь мы имеем два изображения - два кадра. Нажимаем пробел, чтобы снять выделение и можем приступать собственно к анимации.

8. Компания Ulead сделала очень правильный ход. Если на компьютере установлено несколько программ от Ulead, то в каждой из них в строке меню появляется указатель Switch. Нажимаете - и появляется список программ. Обращаю внимание - не всегда этот указатель работает как переключатель между программами. Например, сколько GIF Animator не нажимай - столько раз он будет запускаться.
Запускаем GIF Animator, будем анимировать.

Если вы не поленитесь и сохраните изображения, которые вы сделали в PhotoImpact, то в GIF Animator-е вам практически не придется ничего доделывать.
Когда GIF Animator стартует, появится диалоговое окно Srartup Wizard. В нем выбираем Animation Wizard.
Открывается диалог Animation Wizard.

На первом шаге (Set Canvas Size) устанавливаем размеры рисунка (напоминаю - 150х20 пикселей).
На втором шаге (Select Files) если вы сохранили изображения, то добавляем их (кнопка Add Image), если не сохраняли - ничего не делаем, идем дальше.
На третьем шаге (Frame Duration) устанавливаем длительность кадра. По умолчанию стоит 4 кадра в секунду. Вы можете поменять значение и сразу же увидеть в Demo с какой скоростью будут сменяться кадры. Я оставила как было.

Если на втором шаге вы добавили изображения, то после того, как вы закончите с Animation Wizard вы получите готовую анимацию. Просмотреть ее можно, открыв вкладку Preview, а сохранить - кнопка Save на вкладке Optimize.
Если же вы никаких изображений не добавляли - придется слепить анимацию вручную. Ничего сложного, просто следуйте по порядку:

a. Не знаю, как у вас - а у меня GIF Animator всегда выделывает такой фортель - если на этапе Animation Wizard не были добавлены изображения, то какой бы Canvas Size в этом самом Wizard я не установила - новая анимация открывается в последнем использовавшемся размере. Чаще всего - баннер 468х60. Ничего, это все можно исправить.
По умолчанию новая анимация открывается на закладке Edit. И справа - Object Manager Panel. Посмотрите-ка на размеры объекта. Если он больше, чем 150х20 (наша будущая анимация) - ничего пока не трогаем, если меньше - увеличиваем размер: меню Edit--Canvas Size или Ctrl+G.
b. Переходим в PhotoImpact к одной из наших картинок. И - копируем Ctrl+C
c. Возвращаемся в GIF Animator. Вставляем - Ctrl+V
d. Снова переходим в PhotoImpact, но уже к другой картинке. Копируем Ctrl+C
e. Возвращаемся в GIF Animator. Создаем новый кадр - меню Frame--Add Frame или Ctrl+Alt+F. Вставляем картинку Ctrl+V
f. Подгоняем размер в GIF Animator-е. Увеличиваем масштаб (меню View--Zoom Out , или инструмент Zoom Out на панели инструментов, или просто + на цифровой клавиатуре). Потом на панели инструментов находим Selection Tool - Rectangle, выделяем нашу картинку, потом меню Edit--Crop Canvas (или Ctrl+R) - и обрезаем, подгоняя анимацию под размеры нашей картинки.
g. На вкладке Preview посмотрели на анимацию, порадовались, пошли на вкладку Optimize и сохранили.

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

<все уроки> <следующий> <на главную>