Статья 8. Инструмент «Раскройка» или как в Фотошопе разрезать фоновое изображение.

Раскройка изображения на части используется для уменьшения времени загрузки изображения находящегося на веб-странице.Раскроить изображение достаточно просто. Для этого нужно воспользоваться инструментом «Раскройка» находящимся в левой палитре инструментов.(версии фотошоп CS 3 и выше) Раскройку можно произвести как произвольно, выделяя нужный фрагмент,  так и по выставленным заранее направляющим.
Открою изготавливаемый макет шаблона и отключу все слои в папке «header»  кроме слоя «background» – фон.

Как видите у нас имеется вот такая чистая фоновая картинка без блоков логотип, навигация, поиск, авторизация и прочих необходимых атрибутов.

Далее устанавливаю направляющие по своему усмотрению.

Включу инструмент «Раскройка»  и в свойствах выбираю «фрагменты по направляющим».

Появятся вот такие разделительные линии и номера будущих фрагментов.

Далее меню Файл-Сохранить для WEB и устройств.

Как видите после сохранения мы имеем необходимые нам фрагменты. Картинка разрезана на фрагменты по выставленным нами направляющим.   Загружаю все фрагменты  в папку  «background» -»header»

В итоге мы имеем разрезанное на фрагменты фоновое изображение, что существенно уменьшит скорость загрузки веб-страницы.  А вообще если честно,  дизайнеру это делать совершенно ни к чему.  Это работа верстальщика. И он сам по своему усмотрению разрежет картинку на части для использования фрагментов как фона создаваемых блоков. ( логотипа, поиска, навигации, авторизации и других) . А в общем «шапочка» создаваемого нами макета шаблона для сайта готова и мы с лёгким сердцем перейдём к оформлению блоков боковой панели  «sidebar» сайта.   Всё это в следующей статье.   А пока…  Удачи!  :)