Untitled Document

## Нарезка изображения

Нарезка нужна для того, чтобы одно изображение разделить на несколько изображений. В дальнейшем эти изображение могут быть скомпонованы на web-странице с использованием таблиц или CSS.
Очень часто нарезка используется для панелей навигации (кнопки), в оформлении которых требуется использовать графические элементы.
Обычно порядок действий такой:

- Разметка изображения
- Экспорт результатов нарезки
- Размещение результатов нарезки на web-странице

Рассмотрим эти действия подробнее.
1. Разметка изображения
Для разметки в Adobe PhotoShop используется инструмент Slice Tool.
Способы разметки:

- Вручную
- С помощью направляющих
- Разделение фрагмента на несколько частей

А. Разметка вручную.
обвести нужные области, а затем скорректировать их инструментом Slice Select Tool
B. Разметка с помощью направляющих
Нужно предварительно создать направляющие, затем выполнить по ним нарезку, нажав в панели свойств кнопку “Slice From Guides”:

Результат:
C. Разделение фрагмента на несколько частей
Используется, когда нужно один фрагмент разделить еще на несколько одинаковых фрагментов, либо на фрагменты с заданными размерами. Очень удобен для панелей кнопок.

- инструментом “Slice Tool” очертить нужный фрагмент (в нашем случае – целую панель)
- включить инструмент “Slice Select Tool” и в панели свойств нажать кнопку “Divide”:
- Задать способ разбиения:

Результат:
2. Экспорт результатов нарезки
Когда всё готово, нужно экспортировать результат командой File > Save for Web, после чего выделить нужные фрагменты (а лучше выделить все, нажав CTRL-A), и задать параметры оптимизации.
Учтите, что для остальных фрагментов будут использованы другие настройки оптимизации (неизвестно какие), поэтому рекомендуется не полениться выделить фрагменты.
Затем следует задать папку, куда будет выполнен экспорт, а в настройках сохранения указать:
Тип файла: HTML and Images
Settings: XHTML
Почему XHTML? Потому, что в полученном коде не будут использованы устаревшие приёмы форматирования документа, которым не место в современном Web.
Если нужно получить в результате не табличный макет, а макет в виде слоёв CSS, то следует в Settings выбрать Other и включить опцию “Generate CSS”:
Нарезка завершена!
Теперь можно открыть полученный результат (например, в Dreamweaver) и скопировать код на свою страницу (не забыв скорректировать пути к файлам иллюстраций).

Конечно, существует множество других случаев нарезки, но о них я расскажу позже.