Школа мобильного дизайна. Сборник лекций | SEclub.org
Школа мобильного дизайна. Сборник лекций
Все новые
Тема закрыта для обсуждения.
Всего сообщений: 95
*
Malcolm
11 дек 2008 в 20:03
Разумеется, поддержка этого формата не могла не появиться в темах SE. И вот здесь мы сталкиваемся с одним из его самых главных минусов: JPEG не поддерживает прозрачность. Это означает, что для элементов темы, в которых она требуется, JPEG не подходит. Кроме того, он плохо сохраняет четкие линии и плавные цветовые переходы. Однако если необходимо вставить в тему изображение, созданное, например, из фотографии, JPEG будет вне конкуренции и сэкономит тучу свободного места. Самое главное - только настроить качество правильно. А вот к тому, как это сделать лучше всего с учетом особенностей JPEG, о которых я сегодня рассказал, нам еще предстоит вернуться дальше.
*
Malcolm
12 дек 2008 в 20:02
§ 3.3 PNG - формат без потерь.
Пришло время рассказать о последнем, но не последнем по значению популярном формате хранения графики. Как я уже писал в лекции по GIF, формат был задуман как альтернатива GIF, свободная от патентов. В итоге первая версия появилась в 1996, а текущая версия, 1.2, была опубликована в 1999 и используется по сей день, став чуть ли не стандартом де-факто для 32-битных изображений. Название формата расшифровывается как Portable Network Graphics, также есть неофициальная расшифровка названия: PNG"s Not GIF. И действительно, PNG - это не GIF, формат обладает несравнимо большей гибкостью и функциональностью.
*
Malcolm
12 дек 2008 в 20:02
Прежде всего, это заключается в том, что PNG поддерживает несколько режимов работы. Всего их пять: монохромный (черно-белый), монохромный с альфа-каналом, RGB, RGB с альфа-каналом (RGBA) и индексированный цвет с палитрой, точь-в-точь, как в GIF. Обычно используется режим RGB с альфа-каналом, регулирующим прозрачность пикселей, однако в случае, если изображение, например, черно-белое, можно выбрать соответствующий режим и сэкономить на размере файла. Благодаря полноценному альфа-каналу прозрачность полностью поддерживается. К тому же, в отличие от GIF, палитра в индексированном режиме может содержать и полупрозрачные пиксели, есть даже возможность делать некоторые пиксели полностью прозрачными в RGB и монохромных изображениях.
*
Malcolm
12 дек 2008 в 20:03
PNG - это формат без потерь качества, он может сохранить изображение в точности так, как оно есть, в отличие от GIF (ограничение количества цветов) и JPEG (потери качества). В PNG используется сжатие по свободному от патентов стандарту DEFLATE, тому же самому, что и в zip-архивах. Также для улучшение сжатия к каждой строке изображения применяется фильтр. Они не уменьшают размер в байтах, но позволяют сжать сильнее. Всего в стандарте есть пять типов фильтров. Один тип - это просто отсутствие фильтрации, еще два кодируют разность между текущим и предыдущим байтом в той же или предыдущей строке. Есть фильтр, который берет среднее между этими двумя разностями, и есть интеллектуальный фильтр Paeth, который сравнивает три разности и берет наименьшую. Для каждой отдельной строки может быть использован свой фильтр, и это позволяет дополнительно увеличить сжатие.
*
Malcolm
12 дек 2008 в 20:03
Также PNG имеет очень хитрую структуру. Весь файл состоит из кусков (именно так, в спецификации используется термин chunk), каждый кусок содержит свою порцию информации. Есть отдельный кусок, например, для характеристик изображения, палитры, собственно сжатых данных самого изображении. Также с их помощью можно встроить прямо в файл данные о гамме, цветовом балансе, времени последнего измнения, описание файла (метаданные)... И, что самое главное, можно определять свои собственные куски. Именно так создатели уже описанного мной ранее формата APNG добились того, что программы, которые не поддерживают APNG, будут открывать первый кадр анимации, как будто это обычный PNG.
*
Malcolm
12 дек 2008 в 20:04
Формат превосходит GIF по всем параметрам, и если бы не поддержка анимаций в последнем, о GIF уже давно никто бы не вспоминал. Бытует такое мнение, что PNG сжимает хуже GIF, но это в корне неверно. Такой миф пошел из-за того, что берут изображение, сохраняют его в обоих форматах и смотрят на вес, не обращая внимания на то, как оно сохраняется в PNG. Дело в том, что зачастую программы не уделяют внимания тому, в каком режиме сохраняется PNG. Однако PNG поддерживает работу через палитру не хуже GIF, и если в PNG использовать индексированный цвет, GIF не будет иметь никакого преимущества. Конечно, если в изображении больше 256 цветов, произойдет потеря в качестве, поэтому здесь нужно выбирать, что важнее: точная и качественная цветопередача или файл меньшего размера.
*
Malcolm
12 дек 2008 в 20:04
В свете вышесказанного я советую всегда по умолчанию использовать PNG, прибегая к остальным форматам только тогда, когда это действительно оправдано. Для анимаций PNG, разумеется, совершенно не подходит, а JPEG сэкономит много свободного места при использовании фотографических изображений, если настраивать грамотно. Однако работа с прозрачностью, сохранение четких линий в изображениях, плавные цветовые переходы - это конек PNG, и в темах без этого формата просто не обойтись.
*
Malcolm
13 дек 2008 в 20:08
§ 3.4 Правила оптимизации файлов и настройки SETC.
В предыдущих лекциях мы обсудили, какие особенности есть у форматов, а теперь пришло время разобраться, как все эти знания можно применить на практике. При создании темы постоянно есть выбор: сделать качественней или сделать тему поменьше размером. Вот о том, как выдержать баланс, и пойдет сегодня речь.
*
Malcolm
13 дек 2008 в 20:08
Разумеется, прежде всего необходимо правильно выбрать формат для каждого изображения. Выбор осуществляется довольно просто: прежде всего смотрим, что у нас за изображение. Если анимация, то выбор один: GIF, поскольку другие форматы с анимацией не могут работать. В случае же обычной картинки, нужно посмотреть, что у нас на ней есть. Как я уже упоминал в предыдущей лекции, в случае, если на картинке прозрачность, плавные переходы цвета или четкие линии (проще говоря, изображение представляет из себя абстракцию), наилучший выбор - PNG. Но если изображение большое по размеру, прозрачности в нем нет, и сделано, например, из фотографии, то стоит поставить JPEG, тогда за счет легкого ухудшения качества (а может быть, и незаметного) сэкономится много свободного места.
*
Malcolm
13 дек 2008 в 20:09
Применительно к темам можно сразу назвать элементы, для которых стоит попробовать применить JPEG:
Standby
Desktop
Background
Title
Popup
Morelist
Input
Input Small
Activity Menu
Первые три элемента практически всегда непрозрачны, на них чаще всего используются фотографические изображения. Но остальные зачастую содержат прозрачность, поэтому JPEG для них в этом случае не подойдет. Я не стал перечислять маленькие элементы, потому что на них JPEG много места не сэкономит, а потери качества по сравнению с PNG могут оказаться заметны.
*
Malcolm
13 дек 2008 в 20:09
Теперь о том, как правильно сохранять форматы, я напишу все настройки относительно популярного Photoshop. Прежде всего, советую сохранять через меню File -> Save for Web and Devices, так в файлы не будет писаться всякий не нужный на мобильнике мусор. При сохранении JPEG самая главная настройка - качество. Нужно обратить внимание, что придвижении от максимального к минимальному вес сначала уменьшается сильно, а потери почти не видны. Ближе к середине ситуация меняется, и даже небольшие выигрыши в весе даются за счет заметных потерь в качестве. Я не советую ставить ниже 50% качества, иначе тема будет производить не очень приятное впечатление. Параметр Progressive нам совершенно не нужен, Optimized чуть-чуть снизит вес, но разницы почти никакой.
*
Malcolm
13 дек 2008 в 20:10
PNG можно сохранять в двух вариантах: PNG-24 и PNG-8. В первом случае сохраняется обычный PNG, во втором - в режиме работы с палитрой. Понятно, что последний вариант приводит к тому, что количество цветов уменьшается до 256, так что применять его стоит разве что когда заведомо известно, что их меншьше или столько же (что бывает редко). У PNG-24 практически никаких настроек нет, параметр Interlaced можно смело отключать, он нужен только при загрузке файла по сети, чтобы смотреть на изображение, пока файл еще не полностью загрузился.
Наконец, GIF имеет достаточно много настроек, с помощью которых можно регулировать процесс уменьшения цветов. Но, как я уже сказал, GIF стоит использовать для анимаций, и их создание будет подробно описано моим коллегой.
Скачать тему
Для полноценного использования разделов сайта войдите или зарегистрируйтесь.
Картинки и темы | Загрузки Seclub | Форум | Главная
18+ © Seclub.org 2003-2024