главная
>>> графика
>>>
нарезка
изображений для web
Если вы создали большой и сложный рисунок для своей
страницы, то имеет смысл его нарезать на несколько маленьких, которые
затем поместить в таблицу с невидимыми разделителями (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 за
пределы изображения) .Чтобы временно убрать показ guides, но не уничтожать
их перейдите в режим "Hide guides". Расставьте guides так,
как вы собираетесь порезать картинку. Следующий момент - включаем режим
"прилипания" инструментов к guides (View/Snap to Guides).
Теперь все инструменты выделения будут липнуть к расставленным направляющим.
Все что осталось сделать - выделить соответствующие области, сделать
crop и записать их. После этого делаете откат назад (используйте history)
и вырезаете следующий кусочек. При записи лучше пользоваться не самим
Photoshop'ом, а какой-нибудь программой, позволяющей оптимизировать
размер файла - например замечательной программой Smart Saver фирмы Ulead.
Для автоматической нарезки картинок существуют и специальные программы
- Adobe ImageReady, Macromedia Fireworks и Image cutter (последняя freeware,
остальные shareware).Они удобны тем, что вам достаточно только разметить
картинку, а остальное они сделают сами. ImageReady при этом еще и создаст
html-код таблицы. Казалось бы, все очень хорошо, но такой способ не
позволяет добиться максимального сжатия картинок, поэтому приходиться
выбирать между качеством Photoshop+Smart Saver и быстротой и удобством
программ для автоматической нарезки.
