Автор: Алиса
В этом уроке мы подробно разберем все возможности оптимизации анимированного изображения. Рассмотрим варианты, когда "тяжелую" анимацию можно уменьшить в весе, а когда нет; какие способы уменьшения веса пика существуют, как правильно пользоваться настройками оптимизации.
Многих занимает вопрос - как в маленькую аватару, размером 100 на 100, поместить красочную и длинную анимацию, не испортив ее качества? Есть несколько секретов (которые, по-настоящему не секреты, а ньюансы ;) ), знание которых поможет вам в создании красивого анимированного аватара без потерь качества.
Но сначала, пожалуй, мы разберем с вами самые простые основы - как происходит сжатие в gif'е, как увидеть вес своего пика в программе и как использовать настройки оптимизации программы.
1. Когда нужна оптимизация?
Она нужна всегда! Если вы делаете свои пики в фотошопе и имедж риди и даже не задумываетесь об оптимизации, для вас может стать неприятным сюрпризом то, что оптимизация пика проходит ВСЕ РАВНО, но без вашего ведома, с использованием настроек "по умолчанию", которые могут недостаточно ужать вашу аватару, или, наоборот, перевыполнить программу и испортить качество пика, который мог бы быть качественнее.
Поэтому обязательно интересуйтесь весом своего пика и настройками оптимизации ДО сохранения своей анимированной работы!
И еще, помните: ЛЮБАЯ программа-аниматор, которая создает анимацию автоматом (Gif Movie Gear , дождь, снег, вода в Sqirlz Water Reflections, морфинг в FantaMorph и Sqirlz Morph и т.д.) испортит качество вашего пика! Обязательно заканчивайте работу с такими аватарами, вновь открыв их в Имедж Риди и оптимизировав.
2. Просмотр оптимизированного результата в Image Ready.
Допустим, работа над вашей аватарой готова. Как увидеть вес вашего пика ДО сохранения результата на жестком диске? Очень просто:
- Перейдите из фотошопа в Image Ready.
- В границах окна с вашей работой вы найдете несколько вкладок: Original, Optimized, 2-up, 4-up. Первая открыта по умолчанию и показывает вам пик в оригинальном виде, так, как выглядит он в программе. Чтобы увидеть оптимизированную версию пика (именно ту, которая будет сохранена на жестком диске) и вес аватара - выберите вторую вкладку - Optimized (оптимизированный). Качество картинки на глазах изменится на то, которое будет при сохранении с настройками оптимизации по умолчанию. Если картинка свое качество на первый взгляд не изменила - уже хорошо :) Значит следующий шаг - увидеть в какой вес укладывается наш пик. Хорошо конечно, когда пик красивый, но если он при этом весит 100 кб? Какой в нем толк, если его не поставить ни на один форум или сайт?
Примечание: Откройте вкладку 2-Up (2 варианта) в верхней части окна изображения, чтобы одновременно видеть исходное и оптимизированное изображение в области предварительного просмотра.
- Чтобы увидеть вес пика - расширьте окошко с аватарой примерно в два раза - в нашем случае (так как аватары маленькие) только тогда покажется строчка с нужными данными:
Обратите внимание - до знака \ мы видим вес до оптимизации, после него - с оптимизацией.
Напоминаю еще раз, что вес пика можно увидеть только после переключения на вкладку "optimized".
Теперь вы знаете какой вес у вашего пика. Изменяя настройки оптимизации в реальном времени будете видеть изменения в весе пика! Давайте же разберем теперь настройки оптимизации, грамотно применяя которые мы сможем уменьшить вес пика (или улучшить его качество, в зависимости от задачи) без особых усилий.
3. Настройки оптимизации.
Оптимизацию настроить можно в окне "Optimized" (оптимизация), которое вызывается командой "Window - Optimized". Вот оно:
Давайте разберем все его параметры.
1) Первой на наши глаза попадается вкладка "Preset" (назовем ее "программа").
Довольно полезное окно, оно необходимо для быстрого вытавления параметров оптимизации - выбрал нужный вариант, и галочки сами проставились там, где нужно. может понадобится вам уже после того, как поймете зачем нужны некоторые параметры оптимизации, название которых фигурирует в названиях этих preset'ов.
2) Далее идет "Format" (формат сохраненного результата)
Здесь мы видим нужный нам для анимации формат GIF, а также несколько форматов статичного изображения - Jpeg, PNG, BMP.
3) Следующий пункт - Color Table (Таблица цветов).
Здесь вы видим параметр "Reduction" (способ сокращения) и варианты:
- Perceptual (основанный на восприятии изображения) - использует максимально близкие цвета к тем, которые использованы на пике, главная задача этого способа - сохранить видимую целостность цветов на пике.
- Selective (Селективный) - работает по тому же принципу, что и первый, но, в отличие от него, нацелен, пржде всего, на работу с однотонными частями пика.
- Adaptive (Адаптивный) - использует не только "чистые" цвета с вашей аватары, но и пытается ухватить как можно больше оттенков для сохранения максимально похожего на оригинал изображения. Именно из-за этого Adaptive и плох и хорош для пиков одновременно - его качество пика превосходит остальные способы, но вес пика увеличивается на 2-5 кб, вы должны это знать.
- Web - создает таблицу цветов, подгоняя цвета изображения к тем, которые имеются в стандартной палитре Web. Данная опция формирует наименьшее количество цветов и, соответственно, наименьший по размеру файл, но качество изображения может быть хуже, чем при выборе других опций.
- Опция Custom (По выбору пользователя) оптимизирует цвета пика на основе тех настроек, чтобыли ранее выставлены и использованы пользователем в Photoshop или ImageReady.
От себя добавлю, что в анимации аватар я стараюсь придерживаться варианта Adaptive,
предпочитая экономить на других параметрах и пользуюсь секретами оптимизации. Чего и вам желаю ;)
4) Далее "Colors" (количество цветов).
С помощью этой панели мы можем уменьшить количество цветов на нашей аватаре. Как известно, в формате GIF - от 2 до 256 цветов. Если в вашем пике ммного однотонных участков, не присутствуют градиенты, или, более того, пик черно-белый - используйте 64 или 128 цветов. При прочих равных, снижение количества цветов сильно облегчит вес вашей аватары.
Но, конечно, не увлекайтесь. Уменьшение количества цветов может привести к тому, что оставшиеся цвета не будут соответствовать изначальным. Поэтому, включайте голову и не забывайте проверять все наглядно, активировав вкладку "optimized" у вашего изображения.
Примечание: вы - хозяева программы, помните об этом и не давайте ей все делать за вас :) Используя таблицу цветов, вы можете сами контролировать какие цвета на пике останутся, а какие можно удалить. Для этого щелкните по окошку "show the color table palette" (показать палитру таблицы цветов) рядом с параметров "Colors" (количество цветов), программа откроет вам окно "Color table":
В этой панели вы можете удалять по одному ненужные цвета (прослеживая изменения в оптимизации в реальном времени), а также можете заблокировать (с помощью кнопки с замком) те цвета, которые, по вашему мнению, удалять нельзя ни в коем случае.
5) Параметр "WEb Snap" (приведение к цветам WEB).
Есть основная таблица цветов для WEB. С помощью данного бегунка можно привести некоторые цвета с пика к web цветам. Использование этих цветов на пике - значительно облегчит анимацию. Но, к сожалению, сильно испортит ее качество. Поэтому приведением цветов к web используется в анимации редко и аккуратно. Особенную ценность может принести эита настройка, если ваша цель - облегчить анимацию всего на пару кб. (т.е. "впихнуть" самую малость ;) ).
6) Dither (Дизеринг). 
Очень полезная и интересная функция, целесозразность использования которой стоит определять в каждом конкретном случае. Дело в том, что дизеринг очень неплохо улучшает качество, сглаживая цвета, но, при этом, сильно увеличивает вес. (порядка 10 лишних кб). Как же работает дизеринг...
Ну, во-первых, дизеринг добавляет цвета-оттенки. Например, в вашей палитре сплошные желтые и синие цвета. Как вы можете получить зеленый цвет без введения его в палитру? С помощью дизеринга! Эта функция составляет зеленый цвет, с помощью чередования желтых и синих пикселей.
Во-вторых, дизеринг может смешивать рядом стоящие пиксели (таким же спсобом - чередуя соседние пиксели), создава при этом более плавный переход цветов.
Дизеринг смешивает пиксели тремя разными способами - "Noise" (шум), "Pattern" (узор), "Diffusion" (Диффузия). Каждый мешает пиксели в разном порядке.
Итак, делая вывод: если ваша задача облегчить анимацию - выбирайте параметр "No Dither". Тем более, что в нашем случае, когда работа идет с анимированной аватарой, столь тонкие изменения, как дополнительные оттенки, большой роли не сыграют (если кончено вы не пытаетесь "впихнуть" в gif градиент).
7) Transparency (прозрачность). 
Если ваша анимация по сути - изменение одного и того же предмета на одном и том же фоне - то неподвижные части пика (весь статичный фон) можно на кадрах вырезать, оставив только те небольшие участки, которые изменяются. Это самый сильный способ облегчить анимацию.
Он не поможет вам лишь в одном случае - если вы делаете анимацию перехода между двумя разными картинками, т.е. в той анимации, где нет единого неизменного фона.
Примечание: поле Matte (Кайма) около параметра прозрачности необходимо для указания цвета каймы вокруг картинки на прозрачном фоне. Например, вы хотите сохранить картинку не в привычном квадрате, а любой необычной формы. Так как картинка все равно остается по сути квадратной - незанятые изображением участки будут помечены как "прозрачные". Но формат гиф не может просто перейти от цвета к прозрачности, ему необходима кайма (по сути обводка картинки вашей странной формы). Цвет каймы задается исходя из того, на каком фоне потом будет использоваться ваша картинка. Если цвет фона неизвестен, выберите пункт None (Нет) в списке Matte, результатом будут жесткие, зазубренные границы.
Прозрачность - настройка, которую я советую вам использовать по умолчанию, так как вреда она вам непринесет точно, а пользу - от минимальной до вполне ощутимой :)
8) Поставив галочку около "Interlaced" (черезстрочно) вы разрешите детализировать (при загрузке страницы) ваше изображение в интернете постепенно, через строку. Этот параметр полезен для оптимизации сайта - пользователю не нужно ждать полной загрузки сайта, чтобы увидеть, что изображено на вашем гифе. Но, со стороны "облегчения" анимации все плохо - с включенной настройкой "Interlaced"аватара будет весить больше. Поэтому однозначное "нет" этому параметру применительно к анимации аватар.
9) Последняя, важная, настройка оптимизации - "Lossy" (потери).
Если вы применили уже все способы облегчения своей аватары, но вам так и не хватило для счастья несколько киллобайт - радуйтесь - вы можете заполучить их, воспользовавшись этой настройкой. Естественно, использование параметра lossy ведет к потерям в качестве, но незначительное снижение качества простить можно. Испотльзуйте не больше 10-15 % этой настройки.
http://artfulstudio.ru/images/stories/lessons/optimized/12.jpg
---------------------------------------
Вот и все настройки оптимизации. Итак, вы можете уменьшить вес своей аватары с помощью настроек оптимизации следующим образом:
- уменьшить количество цветов в пике
- привести некоторые цвета к web
- изменить способ сокращения
- убрать дизеринг оттенков
- использовать параметр прозрачности
- воспользоваться параметром "потери".
3.1. Создание "дроплета" для оптимизации.
Теперь, когда вы знакомы со всеми настройками оптимизации, я хочу рассказать вам о такой полезной вещи как "Droplet" (дроплет).
Возможно вы заметили вот этот значок на панели "Optimized":
Он называется "Create a droplet" (создать дроплет).
Допустим, вы настроили оптимизацию ровно так, как вам нужно - поставили галку рядом с прозрачностью, указали сколько цветов будет в пике, какие будут потери у изображения и т.д. А теперь, представьте себе, что у вас подобных пиков штук 100 - и все нужно поочередно открыть в программе, выставить настройки оптимизации и заново сохранить. Муторно? Не то слово!
Дроплет - это некое подобие "action", но еще лучше. Выставив все нужные настройки оптимизации нажмите вышеуказанную кнопку создания дроплета.
Программа спросит вас куда сохранить дроплет. Укажите любое удобное вам место на компьютере.
А теперь самое интересное. Для использования дроплера не обязательно наличие фотошопа или имедж риди на компьютере! Дроплер по сути своей - независмый исполняемый файл (мини-программа), которая выполняет только одну заложенную в нее функцию - в нашем случае сохраняет аватару в ином качестве. Вы можете передать готовый дроплер своим друзьям. на компьютер, где вообще нет фотошопа и он будет работать.
Как он работает? Очень просто. Все подлежащие изменению файлы просто ПЕРЕТАЩИТЕ на иконку дроплера. Тут же автоматически дроплет начнет работу - в той же папке, где находится дроплер будут появляться новые обработанные изображения.
Очень удобная функция для пакетных обработок. (массово изменить формат файлов тоже можно, например анимированные аватары превратить в статичные, сохранив первые кадры в формате png или jpeg отличного качества ;) )
4. Секреты Отпимизации
А теперь давайте рассмотрим самые действенные способы создания красивой и "легкой" аватары. Зная некоторые нюансы оптимизации gif файлов, мы можем предусмотрительно подготовить аватару к грамотной оптимизации.
Самый важный ньюанс облегчения аватары - понять как происходит оптимизация. Гиф оптимизирует каждый кадр по отдельности. Отсюда первым делом следует, что...
1. Удаление лишних кадров значительно облегчит анимацию.
Обязательно удаляйте те кадры анимации, которые не несут сильной смысловой нагрузки. Особенно, если дело касается анимации, созданной в программах-автоматах, создающих различные эффекты. Как правило, они создают в два раза больше кадров, чем необходимо для качественной анимации. Смело выделяйте в панели "Animation" кадры "через один" и удаляйте. По опыту вы довольно скоро выясните, что для анимации дождя достаточно двух-трех кадров, для воды - 7-10, для снега - 6-12 и т.д. Удаляйте кадры через один до тех пор, пока не увидите, что очередное удаление привело к скачку в анимации, резкому некрасивому движению. Верните последний удаленный кадр на место. Так вы достигли придела в количестве нужных кадров :)
Также это относится к случаю, когда вы делаете мини-мувик, т.е. аватару, вырезанную из видео. Старайтесь оставить в вашем движении самые ключевые кадры. Также удаляйте кадры через один (в видео, кстати, кадры нередко идут по два одинаковых подряд).
2. Удаление неподвижных частей на слоях.
В любой анимации, где движение происходит на одной и той же картинке, на одном и том же фоне - сильно облегчит анимацию удаление неподвижных частей на каждом кадре.
Для этого выбираем как фон самый нижний слой нашей анимации (тот слой, что стоит ниже всех в панели "layers"). Его мы трогать вообще не будем. А вот на остальных мы поочередно выделяем с помощью инструмента выделения lasso tool (лассо) ту часть картинки, где движения не происходит. Эту выделенную часть удаляете с каждого слоя, кроме последнего, выбранного нами фоном.
Вот так выглядит панель "layers" с "почищенными" слоями:
Такая анимация будет весить на 10-15 кб меньше, нежели если бы оставили все слои как есть.
Не поможет такой способ облегчения анимации только в случаях с морфингом и иными переходами между двумя РАЗНЫМИ картинками.
3. Искажение размеров изображения.
Естественно, что чем меньше область анимации на вашей аватаре - тем пик меньше весит. Поэтому, если первые два пункта не помогли вам исправить положение - примените кардинальный метод - уменьшите ту область, в которой происходит движение. Как примитивный пример - вы анимируете бабочку на цветке. Вы можете уменьшить эту бабочку (а остальное пространство удалить на слоях).
Если дело касается мини-мувика, все еще проще - уменьшите всю аватару целиком - скажем со 100 на 100 до 90 на 90, или еще меньше. Потом измените размер документа (canvas size) и на образовавшиеся пустое пространство вокруг вашей анимации наложите какую-нибудь текстуру (если идеально - черно-белую, или однотонную).
3) Уменьшение количества цветов, с помощью закрашивания неважных областей однотонным.
Еще один кардинальный метод уместить красивую большую анимацию в маленький аватар. Лучше оптимизируется та аватара, в которой используются большие однотонные куски, а не пестрые части изображения. Представим, что вы анимируете кошку, сидящую в
корзинке (момент из мультфильма "Коты-Аристократы"), а позади кошки и корзинке - пестрые обои в цветочек :) Так вот обои в цветочек - это куча лишней информации для оптимизации. Их можно закрасить каким-нибудь однотонным фрагментом (используя размытую кисть и слой-маски) или затемнить/засветлить практически до черного/белого с помощью иснтрумента "burn tool"/"dodge tool".
Этот способ, естественно, применяется как альтернатива удалению неподвижных частей на каждом кадре. Использовать и тот и другой способ одновременно - совершенно никакого результата :)
5. Грамотное использование плавного перехода.
Используйте плавный переход между кадрами (tween) в крайнем случае. А если используете - делайте немного промежуточных кадров. Чем их больше - тем тяжелее анимация.
Прежде чем сделать плавный переход - выделите и скопируйте на отдельный слой ту часть пика, которая будет изменяться. Сейчас приведу пример:
Допустим, вы анимируете ту же бабочку на цветке. У вас два слоя - на одном цветок и бабочка с закрытыми крыльями, на втором - цветок и бабочка, которой вы дорисовали открытые крылья. И теперь вы хотите сделать плавный переход между двумя этими бабочками. Сделайте вывод - двигаться будет только бабочка, цветок с фоном останутся неподвижными, значит они в плавном переходе участвовать не должны! Оставьте как есть один из слоев, а на втором удалите неподвижную часть изображения - цветок с фоном. Выставите видимость кадров - на первом только первый слой (на котором ничего не удалено), на втором кадре - и этот слой (который теперь служит фоном) и слой с удаленной частью. Между этими кадрами можно смело делать плавный переход. Можете быть уверенными - такой плавный переход будет весить в два раза меньше, чем плавный переход между двумя "цельными" слоями.
6. Аккуратное использование градиентов.
Постарайтесь исключить из анимационных работ градиенты. С количеством цветов в 256 сложно воспроизвести тонкие переходы цветов. Максимум - переход от белого к одному цвету.
7. Перевод изображение в черно-белое.
Если подобное позволяет ваша идея пика, конечно. Зато такая аватара не требует палитры в 256 цветов. Сделав ваш пик черно-белым, укажите в параметрах оптимизации ИМедж Риди, что вам необходимо всего 8-16 цветов и наслаждайтесь полученным весом :)
Кстати, вы можете переводить в черно-белое не обязательно всю картинку целиком. Довольно сильно помогает перевод в черно-белое тех частей пика, где много пестрых ненужных оттенков, градиентов и т.д. Убрав часть лишних цветов - вы облегчите свою анимацию.
Вот такие ньюансы работы с анимацией. Желаю вам успехов с оптимизацией ваших работ! Выкладывайте результаты своих трудов и задавайте любые интересующие вас вопросы!
P.S. Если у вас возникли какие-то вопросы по уроку – опишите в комментарии подробно вашу проблему, мы обязательно поможем вам разобраться! И не забудьте подписаться на урок, если хотите получить ответ на свой вопрос как можно скорее.
Лучшее "спасибо" за урок - ваш комментарий! :)
