|
"Раньше мои волосы были сухие
и безжизненные,
а теперь мокрые и шевелятся!"
 Ну,
с фотошопом похоже, я закончил (хотя, если наберется достаточное количество
писем с просьбой о продожении освещения сего достойного продукта - то с
удовольствием...).
Adobe ImageReady v1.0 - Видимо, создатели сей софтины долго смотрели
на всяческие разные гиф-аниматоры и на мучения несчастных пользователей
при создании картинок с элементами мультипликации (заметьте - слово
"мультипликация" имеет забугорное происхождение, т.е. - "наложение"),
что плюнули на все и сделали нормальный продукт, имея который, даже самый
ленивый сможет теперь создать гифчик достаточной сложности особо не напрягаясь.
А вот я не зря употребил слово "мультипликация", ибо идеология самого Фотошопа
с его слоями идеально подходит для создания анимированных гифов. Чего,
кстати, мы и получили в имадж-реди. Практически один-в-один фотошоп. Классно.
Не надо переучиваться. (Да, кто не скачал прогу - в прошлом номере я
давал подробную ссылку).
Идея создания мультипликации следующая: давайте, возьмем несколько
картинок и будем их прокручивать (показывать) одну заместо другой нужное
количество раз. Ну, это собственно и есть анимированный гиф, а вот как
сделать то множество картинок!? При достаточно сложной картинке (анимированной
задачи) уже не обойдешься двумя-тремя картиночками (есть точка-нет точки).
Тут сильно напрячься надо. На что падает основная нагрузка разработчика?
Первую и последнюю картинку он, скажем, нарисует, а вот как быть, если
нужно сделать плавный переход между ними? Т.е. не два кадра, а 10 или 20?
Ну, хорошо, допустим нарисует, ну а совмещать как картинки? А палитру общую
подобрать? (у гифа-то 256 цветов всего). В общем, гемморою столько, что
коллекции готовых анимированных гифов идут нарасхват. А теперь, похоже
рутинные задачи, мешающие свободному полету мысли будет брать на себя машина.
Вернее, софт. То есть:
 Нововведения
такие: естественно, панель для анимации - раз, в каждой картинке менюшка
"Original/Optimized" - два, широкая работа с идексным цветом - три. Новоубирания
(слово такое) - куда-то пропало градиентное заполнение. Совсем.
Но это, я думаю, не так критично. Навигатора картинок нет. А я привык...
Итак, панель анимации представляет собой тулзу, которая показывает
состояния слоев на разных этапах анимации (прочитайте фразу еще раз
- это ключевой момент!). В этом-то вся фишка и заключается, а уж как
там имадж-реди потом преобразует все это в простой гиф - дело десятое.
Переключаясь на необходимые этапы (на картинке их например, всего два),
можно включать/выключать слои, двигать содержимое, менять прозрачность
и т.п. Что это дает? А вот что (1).
 |
| 1 |
Подойдем к созданию гифа с самой простой стороны: "как двигать буквы?",
например. Для этого, создайте новую заготовку, размером 200х100, скажем,
фон - белый. Напишите что-нибудь. У вас создастся текстовый слой (2), все
нормально, вроде бы все как в фотошопе.
 |
 |
| 2 |
3 |
А теперь, в окне аниматора (там должна быть всего одна картинка)
захватите картинку и тащите ее на кнопочку с новым листочком (около
корзинки). Получится второй дубль. Указатель будет стоять на нем же.
А теперь, возьмите и сдвиньте немного слой с буквами. И перейдите в окне
аниматора к первой картинке (3). Правильно. В первом состоянии положение
осталось прежним (3), а вот во втором (новом) - оно другое. Все, в принципе,
для объяснения принципа программы этого достаточно, но раз уж начали, то
"..уж позвольте, позвольте..." :-)))
Попробуйте "проиграть" получившийся мультик. Слово прыгает туда-сюда.  А
хотелось бы чтобы оно "ездило", да еще и плавно. Для этого есть специальная
тулза, Tween называется - то бишь "сглаживание". Что оно делает: берет
две картинки и создает заданное количество промежуточных картинок с состояниями
слоев, которые интерполируются, исходя из двух изначальных. На картинке
(1) так и есть - слово Position двигается плавно, а не просто - есть две
картинки и все... В меню Tween Вы можете видеть количество промежуточных
кадров и две опции - opacity и position (4). "Прозрачность" и "размещение".
 |
| 4 |
Position необходимо для задания смещения каждого кадра относительно предыдущего,
а вот opacity - тут чуток посложнее.
 |
 |
| 5 |
6 |
Создайте два текстовых слоя с разными надписями (5). Не получается?
Выключите на время первый текстовый слой, потом создавайте второй (это
похоже, бага, но может так и надо...). Теперь, когда есть два слоя
с текстом, сдублируйте кадр в окне аниматора. Так. Теперь в первом кадре
выключите допустим первый слой (просто ткните на "глазик"), а во втором
кадре выключите другой слой. Сделайте Tween по "прозрачности" (opacity),
кадров этак 5. Получится картинка (6). В окне аниматора, конечно, кадров
станет больше ровно на 5 штук. Несколько некрасиво, когда надпись плавно
"перетекает" в другую, а после этого рывком заменяется на предыдущую. Нет
проблем. Сдублируйте первый кадр, перетащите его в самый конец последовательности
кадров и сделайте Tween между ним и предыдущим кадром. Получится рисунок
(7).
 |
| 7 |
Причем, можете заметить, что если в первом кадре первый слой с текстом
включен, а второй выключен, то в последующих кадрах оба слоя включены,
но у каждого слоя изменяется Opacity (прозрачность), и с такими градациями,
которые пропорциональны числу заданных в Tween кадров. 5 кадров задано
- по 20% (100% разделить на 5). И тому подобное. Следующая картинка совмещает
в себе уже оба типа работы с кадрами (8).
 |
 |
| 8 |
9 |
Т.е. я сделал несколько слоев, в которых некоторым образом (9) подвигал
буквы, включая в разных кадрах необходимые слои, а Tween мне сам доделал
плавные движения букв. Да что говорить, закачайте анимированный гиф (8)
в имадж-реди и поглядите на раскладку. Причем, картинка (9) как раз и есть
эта "раскладка", т.к. в натуре слоев, конечно, меньше, просто в самом оконечном
гифе их будет столько, сколько кадров. А когда создаете мультик с самого
начала, количество кадров и количество слоев - совершенно разные вещи (!).
 |
| 10 |
Например, картинка (10) - при "разложении" самого гифа, слоев
получится много, а делалась она только с двумя слоями, да и то, можно было
с одним, шарик просто неудобно двигать. Я сделал несколько основных кадров
с разными ключевыми позициями шарика, а потом "сгладил" передвижения. Ммм..
что-нибудь этакое надо присобачить... точно... time passes... complete
- (11):
 |
| 11 |
Теперь же, при повороте букв "Click here to ENTER" пришлось дублировать
слои, в каждом из них немного поворачивая слой (12а), а в положениях кадров
анимации выбирая, какой слой будет видимым. Все проще, чем я написал :-))
Да, кстати, картинку (11) дарю всем, кто хочет - можете использовать ее
где и как Вам угодно. Gift ;-)
 |
 |
| 12 |
12а |
На рисунке (12) видны кадры, которые отображают "свои" реально видимые
слои. На рисунке (12а) показан кусочек из окна со слоями - в каждом слое
производились изВРАЩЕНИЯ текста.
Вращения, конечно, не предусмотрено в Tween, ну да всего не предусмотришь.
Я надеюсь, что в следующих версиях имадж-реди сделают нечто подобное, хотя
универсальным и мощнейшим средством был бы, несомненно, morphing. Напрашивается
просто.
Теперь о "прозрачности". Все просто: просто удалите (ластиком или "Clear"
выделения) ненужный цвет(а) в слое. Заметьте, что в опция оптимизации необходимо
отметить "Transparency" (часа два убил нафиг, пока не понял, почему у меня
гифы прозрачными не получаются :-)) По умолчанию почему-то не отмечен(!?).
У каждой каринки существует еще менюшка - "OriginalOptimized" - работать
лучше всего в Original. Optimized нужно уже в самом конце создания гифа,
чтобы посмотреть например, какого он размера получился. Сохранять гифы:
"File->Save Optimized As...".
 |
| 13 |
Причем, "разложить" на составляющие любой анимированный гиф и поизвращаться над
ним как угодно может теперь и младенец, что собственноручно мной и сделано
с известным гифом (13). Хотя положительных сторон, пожалуй, больше. Например,
если гиф очень нравится, но надписи слегка не те, или цвет не подходит.
Насколько эта возможность будет влиять на нарушение авторских прав,
я не берусь предсказать, но удар по объему страничек будет сделан нешуточный.
Ждите. Скоро будут странички, содержащие все, что можно анимировать, впрочем,
что нельзя анимировать - тоже :-)) Так что бум анимации, о которой так долго
говорили в интеренете, можно считать начатым с выпуском Adobe ImageReady.
Хотя версия настолько сыровата, что видно даже на первый взгляд, но делать
уже можно в принципе все. |
Пользуясь случаем хочу поблагодарить Алексея Франго из Иркутска (http://homepages.irk.ru/frango/af_arch.htm
- его проекты). На картинке - макет встроен в натуральный пейзаж посредством
фотошопа (ссылка на картинке - больший размер). Алексей любезно
согласился предоставить для выкладывания в он-лайн своего плагина RSB->HSB
(и HSB->RGB) для фотошопа. Чем он полезен? В младших версия фотошопа существовал
режим Mode->HSB, позволяющий переводить цветную картинку, разбитую как
обычно по каналам Red, Green, Blue в режим разбивки по каналам Hue, Saturation,
Brightness. И так как в новых версиях фотошопа (4 и 5) существует схожее
разбиение только в RGB раскладке (режима mode->HSB увы, нет), то и работать
с фильтром нужно только применимо к этим всем каналам. Т.е. с CMYK или
скажем, Lab colors скорее всего ничего не выйдет. Конечно, при наложении
фильтра вместо картинки получиться в большинстве случаев мешанина, но это
не так страшно, потому как поизвращавшись с каналами (HSB - они теперь
как бы вместо RGB) можно вернуть картинке первозданный вид (но только с
уже наложенным необходимым эффектом) обратным фильтром HSB->RGB. Вообще,
фильтр, как утверждает автор, был написан для 4-й версии фотошопа, но у
меня в 5-й пошел вполне. Прошу (20кб). Распакуйте
в директорию фотошопа, где у вас находятся фильтры. Да, чуть не забыл!
В режиме картинки PSD (т.е. со слоями) фильтр работать не будет, а вот
если загрузить какой-нибудь JPG например, очистить его и т.п. (и не создавать
слоев), то все будет нормально.
