Сейчас мы изучили множество методов создания анимации, но до сих пор не совсем понимаем окончательную форму анимации. Как вывести анимацию? Где он используется? На что следует обратить внимание во время использования? В этом уроке мы подробно разберем эти вопросы.
В настоящее время основным форматом анимированных изображений в системах Windows является GIF, который также можно отображать непосредственно на веб-страницах. В настоящее время это наиболее широко используемый формат анимированных изображений. В том числе анимация в популярных сейчас на мобильных телефонах MMS-сообщениях также относится к формату GIF. Формат GIF поддерживает как неподвижные, так и анимированные выражения. Будь то неподвижное или анимированное изображение, характеристики одинаковы.
Принцип реализации анимации формата GIF не сложен. Его можно понять как объединение нескольких неподвижных изображений (кадров) для отображения по очереди. Между этими картинками (кадрами) также существуют операционные связи, аналогичные операциям любого выбранного пути, а именно сложение, вычитание и исключение. Это сделано для оптимизации количества байтов анимации.
Если будет добавлен определенный кадр, предыдущий кадр будет сохранен, а содержимое этого кадра будет добавлено для формирования нового изображения. Например, типичным примером является обычная анимация индикатора выполнения, как показано на рисунке ниже. Предположим, что индикатор выполнения состоит из 3 кадров. С точки зрения теоретической формы кадра, которую мы видим, кажется, что сохраняются самые короткие и средние кадры. в этих 3 кадрах соответственно и изображение самого длинного индикатора выполнения. Но на самом деле второй кадр содержит только те пиксели, которых нет в первом кадре, а затем действует на первый кадр аддитивным образом, формируя изображение «1+2». То же самое касается и кадра 3. Эта оптимизация эффективно уменьшает количество байтов изображения.
Метод вычитания прямо противоположный. Он стирает определенные пиксели в предыдущем кадре изображения, что можно понять по «обратному индикатору выполнения». Метод исключения заключается в полном удалении предыдущего кадра. Он в основном используется, когда нет корреляции между двумя кадрами до и после. Например, при переходе от всего красного к полностью зеленому, если между ними нет одинаковых пикселей. предыдущий и следующий кадры, используется метод исключения.
В реальном производстве Photoshop автоматически решает, какой метод использовать, в зависимости от ситуации с изображением, без ручного вмешательства. Достаточно понимать эти методы расчета как знания. Его также можно использовать в качестве справочного материала при создании анимации.
Теперь давайте поговорим о следующей важной особенности формата GIF, которая заключается в ограничении количества цветов. GIF может поддерживать максимум 256 цветов , что означает, что изображение GIF может иметь максимум 256 цветов. Это особенно очевидно в статических GIF-файлах. Некоторые изображения с насыщенными цветами, например градиенты нескольких цветов, сложно идеально передать в GIF-файлах. Как показано на левом рисунке ниже, часть фотографии (обратите внимание, что это часть, а не полное изображение) представляет собой изображение в формате PNG24-бит и GIF256 без сглаживания и диффузного сглаживания. Вся фотография представляет собой витрину магазина, сделанную в Венеции, как показано ниже справа.
Хорошо видно, что 24-битный формат PNG имеет лучший цвет и может считаться исходным изображением. Формат GIF имеет плохую цветопередачу. Без размытия в некоторых областях исходного изображения с цветовыми переходами появляются цветовые пятна. При диффузном дизеринге пятна несколько осветляются, но зернистость становится тяжелее. Это обусловлено самим принципом дизеринга. Концепция сглаживания была представлена в базовом руководстве.
Следует отметить, что 256 цветов относятся ко всему изображению. Если все исходное изображение имеет размер, показанный ниже, разница между 256 цветами и исходным изображением не очень велика. Это связано с тем, что при уменьшении цветов до 256 цветов Photoshop упорядочит их в соответствии с цветами исходного изображения. Этот процесс также называется индексацией, то есть группирует похожие цвета в один.
Если цвета исходного изображения содержат несколько оттенков, то при усреднении 256 цветов число, отведенное одному оттенку, будет очень небольшим. Напротив, если оттенок исходного изображения в основном такой же или близкий, 256 цветов также могут быть выражены хорошо. Вот почему предыдущий 256 неимитационный цвет выглядел так, будто пятна были очевидны, но теперь пятна менее заметны. Поскольку исходное изображение первого содержит больше оттенков, некоторые цвета отнесены к синему, красному и т. д., а желтой фазе — меньше цветов. Исходное изображение последнего в основном имеет только желтую фазу, поэтому нет необходимости назначать цвета другим оттенкам.
На рисунке ниже представлена фотография улицы, сделанная в Пьяченке. Мы сравниваем разные ее части. Квадраты ниже представляют собой таблицы цветов, а цветовые блоки представляют 256 используемых цветов. Влияние цветового состава исходного изображения на показатель цвета легко увидеть по таблице цветов. На изображении слева больше оттенков, поэтому количество синих фаз, выделенных небу среди 256 цветов, меньше, и на изображении на небе присутствуют явные цветовые пятна. Изображение справа в основном содержит только часть неба, поэтому большая часть из 256 цветов присвоена синей фазе, что делает небо на изображении более качественным.
Используйте [Файл>Сохранить для Интернета и устройств] [CTRL+SHIFT+ALT+S], и появится окно настроек сохранения. Это наша наиболее часто используемая функция вывода, особенно в руководствах по расширениям веб-дизайна, которые мы изучим в будущем.
После входа в интерфейс настройки обратите внимание на красную стрелку. На вкладке «Оптимизация» вы должны увидеть фактический эффект после вывода, то есть эффект в браузере или программном обеспечении для просмотра изображений. Вкладка «Оригинал» представляет собой эффект в Photoshop и не может использоваться в качестве эталона. Об этом следует помнить.
Зеленая стрелка — это соответствующая область настроек, в которой мы устанавливаем формат изображения GIF, устанавливаем количество цветов 256 и отключаем параметр сглаживания. Его настройки соответствуют эффекту в левой части изображения выше.
Обратите внимание на указание количества байтов у синей стрелки, это очень важный показатель, поскольку мы должны сделать это число как можно меньшим, иначе мы не сможем эффективно использовать изображения или анимацию.
Чтобы уменьшить количество байтов, необходимо уменьшить количество цветов, и соответственно уменьшится количество цветовых блоков в таблице цветов. Но очевидно, что слишком мало цветов окажет существенное влияние на качество изображения и может легко образовать цветовые пятна. Хотя включение сглаживания может уменьшить цветовые пятна, оно также увеличит количество байтов. Это похоже на баланс между количеством байтов и качеством. Вы не можете иметь и то, и другое. Для изображений, предназначенных для передачи через Интернет, количество байтов часто имеет большее значение, поскольку у большинства посетителей не хватит терпения ждать несколько минут, пока отобразится веб-страница. Помимо изображений, веб-страницы имеют и другие коды, которые также должны занимать байты. Поэтому минимизация количества байтов является основным принципом. Конечно, этот принцип противоречит качеству изображения, которое требует от нас достаточных навыков, чтобы сбалансировать эти два качества в процессе концепции и производства. Эти методы включают в себя:
1. Не используйте в анимации слишком насыщенные цвета. Причина уже упоминалась: большее количество цветов приведет к снижению качества изображения после индексации и образованию неприглядных цветовых пятен. В этом случае лучше использовать один цвет. Хоть это и не будет достаточно красиво, но, по крайней мере, позволит избежать появления таких недостатков, как пятна.
2. Если необходимы насыщенные цвета, пиксели в насыщенно окрашенных частях анимации должны оставаться неподвижными. Поскольку между предыдущим и следующим кадрами GIF-анимации существует оперативная взаимосвязь, часть в неподвижном состоянии может использоваться в последующих кадрах, и нет необходимости сохранять эту часть изображения в этих последующих кадрах. Это позволяет эффективно уменьшить количество байтов, сохраняя при этом насыщенный цвет всей анимации. Напротив, если более богатые пиксели также перемещаются, то более богатые пиксели должны сохраняться в последующих кадрах, что значительно увеличит общее количество байтов анимации.
Сравнение двух анимаций ниже. Первая сохраняет внешнее свечение, проекцию и другие части шара неизменными, меняется только подсвеченная часть. Второй — общее движение мяча. При условии одинаковой частоты кадров, одинаковой длительности, 256 и отсутствия сглаживания количество байтов первого составляет 9,29 КБ, а второго — 57,1 КБ. Разница составляет целых 6 раз. Тогда время их передачи в сети будет отличаться в 6 раз.
Когда мы задумываем анимацию, мы должны заранее учитывать ее цель. Если она будет использоваться на веб-странице, мы также должны учитывать ее важность на веб-странице. Если она не очень важна и носит декоративный характер, постарайтесь уменьшить ее. байтов как можно больше. Этого можно достичь за счет двух аспектов: уменьшения количества цветов при хранении и хорошего планирования производства. Если вы встретите анимацию с важными инструкциями, которая должна быть красочной или динамичной, вам следует максимально уменьшить размер анимации. Поскольку общее количество пикселей в изображении небольшого размера также невелико, индексация с 256 цветами не будет такой тесной. Вы можете узнать это посредством собственных экспериментов.
Еще одной важной особенностью GIF является то, что он поддерживает прозрачность фона , что позволяет ему хорошо сочетаться с фоном веб-страницы. Вы также можете вывести GIF с прозрачным фоном, отключив фоновый слой. Однако прозрачность фона GIF может находиться только в двух состояниях: полностью прозрачном или полностью непрозрачном, но не полупрозрачном между ними. Следовательно, если границы изображения не являются горизонтальными, вертикальными или диагональными линиями под углом 45 градусов, из-за прозрачности будет формироваться явное сглаживание. Как показано на рисунке ниже, набор графики с разными границами отображается под разными цветами фона. Нетрудно увидеть разницу между ними.
Следует отметить, что принцип формирования неровностей краев — это не только проблема изображения, но и факторы, связанные с физическими ограничениями дисплея. Соответствующие знания упомянуты в базовом руководстве.
Для изображений с полупрозрачными пикселями (например, стилей тени), если вы хотите сохранить их как прозрачный фон, вам необходимо включить проект сглаживания прозрачности, чтобы можно было использовать крошечные разбросанные точки с разной плотностью для имитации полупрозрачности. . Как показано на рисунке ниже. Видно, что хотя GIF в разделе «Без прозрачности размывания» также имеет прозрачный фон, исходная полупрозрачная часть по-прежнему сохраняет белый цвет, поэтому ее можно применять только к белому фону. Последний можно применить к любому фону. Как показано ниже справа.
Следует отметить, что дизеринг прозрачности не является идеальным решением, можно даже сказать, что это очень плохое решение. Но из-за ограничений прозрачности самого GIF это тоже решение. В реальном производстве, если вы решите использовать формат GIF, вам следует избегать создания полупрозрачных пикселей на границах изображения. Другими словами, старайтесь избегать использования дизеринга прозрачности.
Еще следует отметить, что если выходная анимация имеет прозрачный фон, это может изменить взаимосвязь вычислений каждого кадра в непрозрачном состоянии, а также может привести к увеличению количества байтов анимации.
Теперь кратко поговорим об использовании анимации в качестве MMS-сообщений на мобильных телефонах.
China Mobile в настоящее время поддерживает максимум 100 тыс. MMS-сообщений. Лучше всего контролировать анимацию ниже 95 тыс. и оставлять место для текста и кода самого SMS. Еще следует отметить размер анимации. Различные модели мобильных телефонов имеют разные размеры анимации, которые могут идеально отображаться благодаря разному разрешению экрана. Так называемый идеальный дисплей означает, что разрешение экрана мобильного телефона такое же или больше размера анимации. Если размер анимации превышает разрешение экрана мобильного телефона, мобильный телефон уменьшит ее для отображения. Но качество уменьшенной анимации станет очень плохим. Общие размеры экрана:
128×128: распространено на ранних и нынешних мобильных телефонах бюджетного класса. Это базовый размер анимации MMS. Большинство анимаций MMS, загружаемых из Интернета, имеют этот размер, поскольку их можно запускать практически на всех мобильных телефонах, поддерживающих MMS.
128×160: Хотя в нем немного больше пикселей, чем в предыдущем, он в основном используется для отображения некоторой информации, поэтому большинство размеров анимации, которые можно запустить, по-прежнему составляют 128×128.
176×208, 240×320: обычно используется в мобильных телефонах с открытыми операционными системами, такими как Symbian и Windows Mobile, и может воспроизводить полноэкранную анимацию. Существуют также обычные мобильные телефоны, использующие это разрешение, но неизвестно, смогут ли они поддерживать полноэкранное воспроизведение.
480×640: распространено в моделях мобильных телефонов высокого класса. Хотя теоретически оно может поддерживать полноэкранное воспроизведение анимации одного и того же размера, из-за ограничений самого GIF плавность воспроизведения не гарантируется.
При создании анимации MMS следует учитывать размер 128×128, поскольку он обеспечивает наилучшую совместимость, а из-за небольшого размера количество байтов анимации для одного и того же контента меньше, чем у больших размеров. Конечно, если определено разрешение экрана ресивера, его можно сделать и сопоставимого с ним размера. Фон анимации лучше всего белый, чтобы не было явной границы. Потому что белый цвет также является цветом фона при отображении MMS-сообщений на мобильных телефонах, как и фон веб-страниц. Конечно, иногда необходимо намеренно создать ощущение границы (например, очертания печати). Вы можете принять собственное решение, исходя из конкретной ситуации. Кроме того, поскольку большинство мобильных телефонов не могут менять фон при отображении MMS-сообщений, нет смысла использовать прозрачный фон в анимации MMS-сообщений.
В правом нижнем углу окна «Сохранить для Интернета и устройств» есть кнопка «Централизатор устройств...». После ее нажатия вы можете просмотреть эффект анимации на выбранном мобильном телефоне. Как показано ниже. Вы можете выбрать его из списка устройств слева. На рисунке выбрано Nokia 3110. Adobe Device Central на самом деле представляет собой базу данных мобильных устройств, которая обеспечивает централизованную среду для тех, кто производит продукты для мобильных устройств. В дополнение к обычному дисплею он также может имитировать ситуацию с дисплеем, когда подсветка экрана мобильного телефона выключена, а наружный экран подсвечен. Однако эти особенности в настоящий момент для нас мало значимы.
Еще одна проблема, на которую следует обратить внимание, — это частота кадров анимации. На компьютере анимация со скоростью 30 кадров в секунду в принципе может воспроизводиться плавно, но процессор мобильного телефона не лучше, чем настольный компьютер, и его ресурсы ограничены. Частота кадров анимации должна быть установлена на уровне 2–5 кадров в секунду. Для мобильных телефонов с открытыми операционными системами, поскольку производительность их процессора выше, чем у обычных мобильных телефонов, можно установить частоту 10 кадров в секунду или выше. В то же время на эффект воспроизведения на мобильных телефонах также влияют такие факторы, как размер, общая продолжительность, количество байтов и т. д. Лучше всего опробовать анимацию на своем мобильном телефоне и убедиться, насколько она плавная.
Если вы хотите вывести анимацию разных размеров, лучше всего использовать векторный формат для производства, а векторный формат также является лучшим форматом для сохранения исходного изображения в соответствии с принципом «сохранения максимальной редактируемости», который мы всегда придерживались. выступал.