|
|
|
Первое знакомство с Adobe ImageReady
Прежде чем начать изучение основ смайлиководства, давайте немного познакомимся с одной из наиболее подходящей
программой для анимирования гифов (рисунков в формате GIF) Adobe ImageReady (в дальнейшем ImageReady).
|
Все уроки опираются на английскую версию ImageReady.
|
Когда вы первый раз запускаете ImageReady, открывается большое количество окон. Выберем в
меню Window (окно) только те, которые нам будут нужны для начала, отметив их
галочкой:
Я сгруппировал эти окна так, чтобы они занимали меньше места в нашем уроке, и открыл файл с заготовкой смайлика:
Окна Tools (инструменты) и Options обычны для любого графического
редактора, и мы будем обращаться к ним только по мере необходимости.
В окне Animation расположены кадры (frames) нашей анимации. При последовательной смене кадров
создается движение. Можно просто рисовать каждый кадр и добавлять его в анимацию.
Окно Layers (слои). Очень важное окно. Если вы разберетесь, как с ним работать, и как оно
связано с окном Animation - перед вами откроются новые уникальные возможности в создании анимаций!
Слои можно сравнить с шаблонами. Делая их видимыми или невидимыми с помощью кнопки  ,
накладывая друг на друга, изменяя прозрачность  ,
перемещая 
(окно Tools) - вы сможете создавать новые кадры, не тратя время на новые рисунки, т.е.
автоматизировать процесс.
Более подробно с инструментами и функциями ImageReady мы будем постепенно знакомиться в следующих уроках.
|
|
Важная рекомендация: сразу привыкайте к работе с помощью «горячих клавиш»,
их сочетания вы найдете во всплывающих подсказках инструментов и функций. Это сэкономит вам огромное количество времени.
|
Используем Tween
В этом уроке мы создадим сердитого смайлика с помощью функции Tween (промежуточные кадры).
|
|
Примечание: для использования «горячих клавиш» переключитесь на английский язык.
|
Нарисуем смайлика в любом графическом редакторе (я использую Paint):
Сам смайлик размером 15х15 пикселей. Выделим его, добавив по одному пикселю со всех сторон, и скопируем в буфер
обмена (Ctrl+C). Запускаем ImageReady. Открываем новый документ (Ctrl+N):
Когда в буфере обмена содержится рисунок, ImageReady предлагает установить для нового файла размеры этого рисунка:
Назовем файл «smile» и выберем прозрачный фон (Transparent) - OK .
Вставляем из буфера обмена (Ctrl+V) наш рисунок. С помощью инструмента Лупа (Z)
увеличиваем его, для удобства, и получаем:
Далее нам надо избавиться от белого фона, сделать его прозрачным. Для этого выбираем Волшебную палочку (W)
 ,
устанавливаем для нее опции
 ,
щелкаем палочкой по белому фону и нажимаем Delete на клавиатуре. Получаем:
Выделяем изображение полностью (Ctrl+A), копируем объединенные меню Edit > Copy
Merged (Ctrl+Shift+C) и вставляем в наш файл (Ctrl+V), образуя второй слой:
|
Вы можете в любой момент сохранить файл, с которым работаете: File > Save (Ctrl+S).
Рекомендую делать это после каждого этапа работы.
|
Откройте наш файл «smile», если вы его закрыли, сохранив.
Наш смайлик будет кипеть от злости, поэтому в слое 2 мы сделаем его красным.
Запомните! Инструменты Tools работают с тем слоем, который выделен щелчком
левой мыши в окне Layers. В нашем случае это Layer 2 (слой выделен синим цветом).
Переключаемся на инструмент Заливка (G)
 ,
устанавливаем опции
 ,
выбираем цвет переднего плана красным (щелкаем левой мышью:
- открывается окно выбора цвета).
Щелкаем заливкой по желтой области:
На данном этапе у нас все выглядит так:
В окне Animation дублируем фрейм:
Теперь у нас два одинаковых кадра:
Далее будьте внимательны!
Выделяем левой мышью кадр1 (он выделяется синим цветом). В окне Layers делаем
невидимым (кнопка )
Layer2, оставляя видимым Layer1:
|
|
Делая изменения в окне Layers, мы редактируем выделенный кадр в окне Animation!
|
Выделяем мышью кадр2. В окне Layers делаем невидимым Layer1, оставляя видимым Layer2:
Обратите внимание: в окне файла отображается выделенный в окне Animation фрейм (кадр).
Сохраните файл (Ctrl+S).
Теперь у нас есть исходный (кадр1) и конечный (кадр2) фреймы. С помощью функции Tween
мы автоматически создадим промежуточные кадры, и наш смайлик будет плавно менять желтый цвет на красный.
В окне Animation на каждом кадре (фрейме) стоит значение задержки. Именно столько времени
виден кадр до смены следующим:
Щелкаем левой мышью на значение задержки кадра1 - раскрывается меню:
Выбираем в меню значение 0,1 seconds .
На всех промежуточных кадрах автоматически установится задержка исходного фрейма.
Нажимаем кнопку Tween в командной строке окна Animation:
 - раскрывается окно расчета промежуточных кадров.
Выбираем количество промежуточных кадров «5», остальные параметры устанавливаем так, как показано на рисунке:
 - ОК .
Получаем:
Устанавливаем задержку для первого и конечного фреймов 2 sec . Обратите внимание:
в командной строке окна Animation должно стоять значение Forever:
- тогда анимация будет проигрываться бесконечно.
Выбираем инструмент Лупа (Z)
,
в ее опциях щелкаем по 
(фактический размер изображения) и все готово для просмотра нашей анимашки, осталось лишь нажать кнопку
Play
в командной строке окна Animation:
Сохраняем файл (Ctrl+S).
Теперь нам надо сохранить нашу анимацию в формат GIF. Файлы в формате GIF имеют небольшой размер (в
байтах), что очень существенно для их использования в интернете, и этот формат поддерживается всеми браузерами.
В окне файла переключаемся на вкладку Optimized :
В окне Tools щелкаем по кнопке Preview Document (Y)
для просмотра оптимизированной версии.
В меню File выбираем Save Optimized As (Ctrl+Shift+Alt+S)
и сохраняем. Обязательно сохраните файл в формате ImageReady (Ctrl+S) - может пригодиться, т.к. при сохранении в
GIF для каждого кадра образуется свой отдельный слой:
Вопрос оптимизации гифов довольно большой и сложный, и мы рассмотрим его в отдельном уроке.
А сейчас я покажу как с помощью наших двух слоев (Layer1 и Layer2) и функции Tween
сделать другую анимацию: красный и желтый смайлики будут гоняться друг за другом.
Начать мы можем уже не с самого начала, а с конца второй части нашего урока:
Чтобы смайликам было где разогнаться, увеличим размеры холста:
В меню Image выбираем Canvas Size -
открывается окно изменения размера холста. Высоту оставим прежней - 17 пикселей, а ширину увеличим до 60:
- ОК .
Дублируем кадр1:
Дублируем кадр с красным смайликом:
Для всех четырех кадров устанавливаем задержку 0,1 sec .
Выделяем Layer1 в окне слоев и кадр1 в окне Animation. Используя инструмент
Перемещение (V)
,
стрелкой на клавиатуре «Вправо» сдвигаем смайлика за правую границу кадра так, чтобы его не было видно:
На кадре2 смайлик тоже переместился вправо. Выделяем кадр2 и стрелкой на клавиатуре «Влево»
перемещаем смайлика в этом кадре за левую границу.
Оставляем выделенным кадр2. Щелчком по кнопке Tween в командной строке
окна Animation открываем окно расчета промежуточных кадров. Выбираем количество промежуточных
кадров «5» - ОК :
Кадры 1 и 7 можно удалить. Для этого выделите их по очереди и щелкните по «корзине» в
командной строке.
Повторяем все действия для кадров с красным смайликом (не забудьте для этого выделить Layer2 в окне
Layers). Вот, что должно получиться:
Просматриваем анимацию и сохраняем в формате ImageReady (Ctrl+S) и в формате GIF (Ctrl+Shift+Alt+S).
Вы можете экспериментировать: увеличивать число промежуточных кадров, изменять время задержки.
| |
|
|
|
