Инструмент для WEB-креатива

Спецвыпуск Xakep, номер #021, стр. 021-084-5

Теперь мы создаем в окошке "Анимация" два состояния. В первом состоянии мы делаем видимым слой с нормальной рожей, во втором состоянии мы делаем видимым слой с улыбающейся рожей. Если теперь нажать play, то чел просто быстро улыбнется. А Имаджреди просто перескочит с одного слоя на другой. Но нам с тобой этого мало! Мы можем добавить между этими двумя состояниями дополнительные. Для этого надо нажать на специальную кнопку добавления состояний. Добавили, к примеру, еще пять состояний, и Имаджреди автоматически в этих промежуточных состояниях отобразит стадии рисования улыбки. То есть теперь наша рожа будет улыбаться постепенно. В первом состоянии уголки рта ели замажутся, во втором они скривятся, в третьем лыба начнет расползаться и так далее.

ЭФФЕКТ С ДВИЖЕНИЕМ

Вставкой дополнительных кадров-состояний хорошо пользоваться, когда у тебя куда-то чего-то летит. Допустим, ты хочешь, чтобы на твой баннер вылетали рекламные лозунги, окорочка, апельсины или просто ручные гранаты. Для этого тебе нужно два состояния: в первом летающие объекты будут на исходной позиции, а во втором ты эти объекты подвинешь. Теперь достаточно добавить промежуточные состояния, и Имаджреди сама рассчитает программу полета твоих злобных объектов.

ЭФФЕКТ С ИСЧЕЗНОВЕНИЕМ

Я рассказывал тебе о видимых и невидимых слоях. То есть я думал, что ты знаешь, как устроены слои в Фотожопе. На всякий случай напомню об этом. Каждый слой PhotoShop - независимая картинка. Если такие картинки лежат поверх друг друга, то видно только верхнюю. Чтобы увидеть нижние картинки, нужно сделать верхнюю прозрачной. То есть прозрачность каждого слоя ты можешь регулировать в настройках слоя. Еще ты можешь отметить, какие слои видно, а какие нет. Никто не мешает тебе устроить анимационный эффект, в котором один слой будет исчезать и появляться другой.

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

ЖМЕМ КАРТИНКИ

Допустим, ты уже много всего накреативил, и макет твоей будущей странички прикольный, красочный и умеет двигаться. Пора подумать о том, как ты все это будешь засовывать в HTML. Для того чтобы страничка грузилась у всех без проблем, она должна весить не больше 40 килобайт вместе с картинками. Для того чтобы картинки грузились быстро, их нужно оптимизировать. Оптимизировать придется JPG, в котором хранятся фотографии, и GIF, в котором хранятся рисунки и мультфильмы.