Если вы создали большой и
сложный рисунок для своей
страницы, то имеет смысл его
нарезать на несколько
маленьких, которые затем
поместить в таблицу с
невидимыми разделителями (border=0).
Зачем это надо? Во-первых,
скорость загрузки такой
страницы увеличится, за счет
параллельной загрузки сразу
нескольких файлов. Во-вторых,
если правильно подойти к делу,
то суммарный размер нарезанных
картинок можно сделать меньшим,
чем исходного файла. Допустим,
на всей картинке у вас
используется 256 цветов и вы
записываете ее в
соответствующий файл gif. Теперь
если вы правильно порежете
картинку, то обнаружите, что в
отдельных областях достаточно
128 или 64 цветов (правильная
нарезка как раз и состоит в
выделении областей с небольшим
количеством цветов). Убирая
лишние цвета, вы уменьшите
размер файла. Эта же техника
позволит сделать как бы единую
gif-картинку, содержащую больше
256 цветов - думаю понятно как.
Если кто не знает, поясняю -
формат gif может показывать не
больше 256 цветов, но эти цвета
могут быть любыми из TrueColor (16 млн).
Описания цветов, используемых
на картинке, хранится в самом
файле в проиндексированном
виде, например так - цвет номер 0
имеет RGB составляющие 0,0,0 (черный),
а номер 2 -255, 255, 255 (белый).
Соответственно, чем больше
цветов вы используете на
картинке, тем больше размер
файла. Если у вас на картинке
используется только 16 цветов, а
вы записали файл gif в 256-цветном
режиме, то лишние цвета просто
занимают место в таблице,
увеличивая размер.
Возможен еще такой вариант -
картинка может содержать
комбинацию фотореалистичных
участков с большим количеством
цветов и плавными переходами и
участков с малым количеством
цветов и резкими границами да
еще и прозрачностью. Как
известно первые лучше
записывать в jpeg, последние - в gif,
вот так и режем (честно говоря, я
ни разу не видел, чтобы так
делали, но сам применял).
Теперь о самой нарезке - берем в
правую руку скальпель, в левую -
стакан со спиртом (ой, простите
увлекся). Значит так - первый
вариант - резать в Photoshop. Для
этого надо расставить в
изображении guides (ну не знаю как
это будет по-русски - ну пусть
направляющие) - это
горизонтальные и вертикальные
линии, не влияющие на само
изображение. В первую очередь
выберите режим показа guides - (View /Show
guides или Ctrl+;) и показа линеек (View/Show
Rulers или Ctrl+R). Теперь на линейке
нажимаем на мышь и тянем ее с
нажатой кнопкой на изображение
- появляется синенькая линия -
вот это guide и есть.
Теперь, если вы выберете
инструмент перемещения, guides
можно таскать туда-сюда или
уничтожать (чтобы временно
убрать показ guides, но не
уничтожать их перейдите в режим
Hide guides). Расставьте guides так, как
вы собираетесь порезать
картинку. Следующий момент -
включаем режим "прилипания"
инструментов к guides (View/Snap to Guides).
Теперь все инструменты
выделения будут липнуть к
расставленным направляющим.
Все что осталось сделать -
выделить соответствующие
области и скопировать их в
отдельные файлы (или наоборот
сделать так сказать crop) и
записать их. При записи лучше
пользоваться не самим Photoshop'ом,
а какой-нибудь программой,
позволяющей оптимизировать
размер файла - например
замечательной программой Smart
Saver фирмы Ulead.
Для автоматической нарезки
картинок существуют и
специальные программы - Adobe
ImageReady, Macromedia Fireworks и Image cutter (последняя
freeware, остальные shareware). Я работал
только с Image Ready, так что речь
пойдет о ней. В общем все
делается так же, как в Photoshop (они
вообще очень похожи) -
расставляете guides, а потом
программа сама разрежет по ним
картинку и даже создаст html-код
для таблицы. Все быстро и
здорово, но как всегда
автоматика справляется с делом
несколько хуже - Image Ready не
позволяет оптимизировать
размер таблицы цветов в каждом
отдельном куске gif'a - дело в том,
что таблица цветов строится
одна для всего изображения еще
до нарезки. Так что если вы
хотите добиться
супервысококачественных
результатов используйте
Photoshop+Smart Saver, а для быстрой
работы - Image Ready. Предлагаю еще
промежуточное решение - режете
в Image Ready и задаете сохранить
нарезанные куски ни в gif и ни в
jpeg, а в TrueColor PNG-формате (новый
такой очень многообещающий
формат, в том числе
поддерживает полупрозрачность
(!)). Потом открываете PNG файлы и
оптимизируете их до нужного
количества цветов по
отдельности.
В сложных случаях приходится
нарезать изображение на
большое количество кусков. Для
их компоновки можно
использовать вложенные друг в
друга таблицы или атрибуты тэга
table, позволяющие объединять
столбцы (colspan) и строки (rowspan).
