Нарезка рисунков или "как стать хирургом"
Обычно создание дизайна начинается с набросков. Лично я открываю Paint, наношу некоторые штрихи, обрисовывающие структуру, после чего запускаю Photoshop, sTile и другие инструменты необходимые для полноценной работы. Когда графические элементы созданы и упорядочены, наступает время безжалостной оптимизации. Если конце данного процесса вы получили рисунки неплохого качества при минимальном объеме, можете считать, что дело сделано. Но есть небольшие тонкости, которые позоволяют срезать лишние килобайты от, казалось бы, итак предельно оптимизированного объекта. Такой процесс называется делением или "нарезкой" графики.
Из названия термина можно сделать простые, но правильные выводы: рисунки делятся на куски и позволяют создать довольно компактную и оперативную структуру. Как же подобный эффект достигается и в чем его суть? Главный и, пожалуй, самый заметный плюс нарезки заключается в том, что большой объект "шинкуется" на определенное количество маленьких. Что же это дает? Давайте разберемся. Если картинка внушительных размеров грузится долго, то синхронная подгрузка размельченного аналога происходит гораздо быстрее. Думаю, это понятно, ведь в таком случае загружается не один рисунок, а все его части одновременно. Второй момент, который многие часто упускают из внимания состоит в том, что если правильно нарезать графику и грамотно оптимизировать каждую часть оной, то суммарный объем элемента уменьшится на порядок. Об этом мы и поговорим.
Чтобы глубже понять суть проблемы, разберемся с понятием формата. Как вы, я полагаю, заметили, самыми распространенными графическими форматами в Сети являются GIF и JPG. Отличительным признаком первого является то, что он способен показывать только 256 цветов из 16 млн. возможных. Каждый цвет, участвующий в картике, имеет свое место и определяется тремя цифрами в формате RGB (например, 255.255.255 - белый). Разумеется, чем больше оттенков, тем больше размер файла. Если вы сохранили рисунок сосоящий из 16 цветов в формате 256-цветного, объем файла будет гораздо больше реально допустимого. Получается, что неиспользованные 240 цветов все-таки описаны в файле, но никак не используются. Задача оптимизации - вырезать этот хлам и, по возможности, заменить лишние оттенки на родственные, пусть и более грубые.
Если мы имеем дело с фотореалистичной картинкой, где используются плавные цветовые переходы, то, понятное дело, 256 цветами тут ограничиться нельзя. В таких ситуациях на помощь приходит формат JPG. Очень часто приходится иметь дело с графическими элементами, где есть как насыщенные, так и скудоватые оттенками области. В такой ситуации хорошую роль сыграет нарезка. Места, обделенные большим количеством цветов мы отрезаем от областей противоположного характера и получаем 2 куска одного рисунка (естественно они будут сохранены в различных файлах). После чего, первый перегоняем в GIF, а второй - в JPG. Эффект от таких манипуляций довольно ощутим, а если сайт и вовсе перегружен графикой, то скорость загрузки проекта увеличится на порядок.
Как выяснилось, нарезка - очень неплохой метод оптимизации, но какими средствами она достигается? Это же не какой-то кусок колбасы, а значит скальпель можно сразу отложить в сторону и направить взор на программный фронт. Первым в списке следует Adobe Photoshop. В меню вызываем View > New Guide после чего, не обращая внимания ни на какие параметры, жмем "Ok". Появляется синия полоса, которую можно двигать во всех направлениях. Перемещая направляющую, вы добиваетесь того, чтобы она стала линией среза между областями насыщенного и скудного цветосодержания. Обычно оперируют сразу несколькими "Гидами", которые можно уничтожать и создавать вновь. После того, как направляющие расставлены, вызываем View/Snap > to Guides. Теперь все инструменты выделения будут "прилипать" к "Гидам". Осталось лишь выбрать ту или иную область, разделенную направляющими и скопировать ее в отдельный файл. Вот и вся нарезка.
Photoshop - это, конечно, хорошо, но есть средства поудобнее, например Image Ready. Он входит в стандартую поставку первой программы, а значит достать IR не проблема. Перейдем к сути. Нарезка начинается при помощи тех же самых "Гидов", но плюс заключается в том, что программа сама режет картинку, создает HTML-код и размечает таблицы. Но если копнуть глубже, то эффективность такого подхода уже не будет очевидной. Дело в том, что Image Ready строит таблицу цветов для изображения вцелом, не принимая во внимание никакой нарезки. То есть с оптимизацией возникнут проблемы. Что ни говори, автоматика - она и в Африке автоматика, поэтому я советую все же использовать Photoshop. Есть правда и другие программные средства, но суть остается прежней.
После того, как рисунки нарезаны и оптимизированы подобающим образом (лучший оптимизатор, безусловно, все тот же Image Ready), можно приступать к их позиционированию. Но это уже проблемы верстки, с которыми каждый человек справляется по-своему.
