Если вы создали большой и сложный рисунок
для своей страницы, то имеет смысл его нарезать на несколько маленьких,
которые затем поместить в таблицу с невидимыми разделителями (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, вот так и режем (честно говоря, я ни
разу не видел, чтобы так делали).
Значит так с помощью Photoshopa разрезать изображение можно двумя
способами.
1-й способ подойдет
для более ранних версий и основан на самом, что ни наесть элементарном
способе. Для начала в изображении надо расставить guides ( направляющие)
- это горизонтальные и вертикальные линии, не влияющие на само
изображение. В первую очередь выберите режим привязки guides -
( Привязка или Ctrl+;) и показа линейки (Показать границы или
Ctrl+R). Теперь на линейке нажимаем на мышь и тянем ее с нажатой
кнопкой на изображение - появляется синенькая линия - вот это
guide и есть.
Теперь, если вы выберете инструмент перемещения, guides можно
передвигать с места на место или уничтожать (для этого просто
вытащите guides за пределы изображения) .Чтобы временно убрать
показ guides, но не уничтожать их перейдите в режим (Показать
направляющие или Ctrl+`). Расставьте guides так, как вы собираетесь
порезать картинку.
Следующий момент - проследите что б у вас был включен режим "прилипания"
инструментов к guides. Теперь все инструменты выделения будут
липнуть к расставленным направляющим. Все что осталось сделать
- выделить соответствующие области, сделать "обрезку"
и записать их. После этого делаете откат назад (используйте history)
и вырезаете следующий кусочек. При записи лучше пользоваться меню
Сохранить для Web Alt+Ctrl+Shift+S, позволяющим оптимизировать
размер файла.
Вот на рисунке изображен один из способов разрезки изображения.
2-й способ
более автоматизирован и практичен.
Для нарезки изображения достаточно выбрать инструмент "срез"
(slice) и выделяя квадратные области разметить всю картинку. Далее
выбрав инструмент "выбор среза" (slice select) более
точно подкорректируйте области среза.
Здесь как вы видите все очень просто и быстро. Дважды кликнув
на конвертике рядом с номером кусочка вы можете ввести название
картинки, url на который он будет ссылаться и т.д. что очень полезно
в web программировании.
Далее нажав "Сохранить для Web" (Alt+Ctrl+Shift+S) открывается
новое окно. В левой панели выберите инструмент "выбор среза"
(slice select) и выбирая по очереди каждый кусочек настройте под
него самые оптимальный параметр (как
это сделать смотри здесь). !!!
Важно так же следить, что бы в гонке за малым разметом картинка
не потеряла своей монолитности!!!!
Результат можно сохранить тремя способами: кусочки собраны в html
файле, только отдельные кусочки в тех форматаж которые вы установили,
только html.
|