Как резать графику для сайта в Photoshop

В процессе создания web-сайта может возникнуть необходимость разрезать одно большое изображение на несколько маленьких. Зачем это нужно? Во-первых, из соображений дизайна страницы. Во-вторых, не всегда все части изображения нужны и за счет порезки можно уменьшить общий размер всех кусочков, «выбросив» ненужные части изображения. Кроме того, глядя во время загрузки страницы на быстрое появление этих «кусочков», которые загружаются параллельно, создается впечатление быстрой загрузки страницы. Хотя при нынешних скоростях интернета это уже не так актуально, как раньше. Рассмотрим, как сделать порезку изображений в Photoshop. Используется версия СS4.

Для начала активизируем палитру Info (F8) — нам ведь нужно знать размеры областей резки. Для этой же цели можно сделать видимыми линейки (Ctr+R). Выбираем инструмент Slice (клавиша «К»). Расставляем этим инструментом квадратные области реза, контролируя, если необходимо, их размеры по линейкам и палитре Info. После завершения этих действий появится определенное количество областей реза, каждая из которых будет иметь свой номер, и обозначена конвертиком в левом верхнем углу. Затем, выбрав инструмент Slice Select, можно подкоректировать любую из областей. Щелкнув 2 раза мышью на конвертике можно вызвать меню Slice Options, задать каждой области имя, которое после оптимизации станет именем файла, и прочие атрибуты — url, target и т. д. Это все нужно в том случае, если сохраняться все части будут сразу в html файл. Если же нет — можно не заглядывать в это меню. Удалить существующую область можно, щелкнув на ней правой кнопокй мыши и выбрав в выпадающем меню Delete Slices. А чтобы соединить две cоседние области необходимо выделить их по одной с нажатой клавишей Shift и в том же меню выбрать Combine Slices.

Переходим к оптимизации. Вызваем окно «Save For Web & Devices (Сохранить для Web)» (Alt+Ctrl+Shift+S) и подбираем в нем удобный масштаб просмотра. Выбираем в панели с левой стороны окна инструмент Slice Select. Этим инструментом можно выбрать нужный сегмент изображения и настроить для него в опциях сохранения оптимальную степень сжатия, вид файла и т.п. Все линии реза можно скрыть, нажав на той же панели кнопку «Toggle Slices Visibility (Скрыть-показать границы резов)» либо клавишу «Q». При сохранении следует помнить о чувстве меры — важно не пережать отдельные части так, чтобы они потом явно выделялись среди соседних частей порезанного изображения. Помогут в этом расположенные в верхнем левом углу вкладки «2-Up» и «4-Up», позволяющие сравнить оптимизированный участок и оригинал.

После нажатия Save, в появившемся окне «Save Optimized As» выбираем один из вариантов сохранения результатов резки. В списке «Тип файла» можно выбрать «HTML and Images», «Images Only» и «HTML Only». В первом случае сохранение произойдет в виде html-файла, в который будут внедрены все сохраненные изображения, размещенные в отдельной папке Images. Во втором — сохранятся только сами порезанные и оптимизированные файлы. Выбрав третий вариант, вы сохраните только html-файл. Кроме того, в списке «Slices» можно выбрать опцию сохранения всех сегментов сразу (All Slices) либо выделенных в данный момент сегментов (Selected Slices). Вот, в принципе, и все.

Ссылка на статью при перепечатке обязательна.