Нарезка эскиза сайта.
Работа с инструментом "Slice" (фрагмент) и "Select Slice"

Множество разнородных графических элементов Web-страницы могут потребовать для оптимизации различных параметров, или даже форматов. В таких случаях большое изображение можно разрезать на фрагменты и задать для каждого фрагмента индивидуальные параметры.

Не стоит увлекаться резкой изображения на огромное множество мелких картинок. Чем больше графических фрагментов на сайте, тем продолжительнее будет время запросов к серверу, на котором находится сайт и тем дольше будет загружаться сайт. Это особенно заметно, если сайт находится на заграничных серверах.

На Web-страницах изображения часто используются для организации меню. Щелчок в разных участках изображения приводит в действие различные гипертекстовые ссылки, наиболее очевидным путем реализации такого элемента навигации является разрезание изображения на отдельные фрагменты (slice). После того как изображение разрезано, его можно собрать на странице, используя CSS редактор SiteEdit.

Определение фрагментов в Photoshop

1. Откройте изображение, эскиз сайта в формате .psd
2. Включите режим отображения фрагментов нажатием кнопки инструмента Slice (Фрагмент) на панели инструментов. Как видите, даже если изображение не разрезано, Photoshop считает его разрезанным, правда на единственный "кусок". Об этом говорит окаймляющая его рамка с порядковым номером фрагмента и специальной пиктограммой.
3. Работа с инструментом Slice (Фрагмент) похожа на работу с инструментом Crop (Обрезка): сначала вы строите рамку, а затем уточняете ее размеры и положение с помощью манипуляторов.
4. Поместите курсор инструмента Slice (Фрагмент) в левый верхний угол изображения; Нажмите левую кнопку мыши и перемещайте курсор вправо и вниз до тех пор, пока внутри рамки не окажется нужный Вам фрагмент. Затем отпустите кнопку мыши.

Автоматические фрагменты

Вы определили фрагмент, который хотели бы иметь в виде отдельного изображения (и файла). Поскольку фрагменты могут быть только прямоугольной формы, программа автоматически создала еще два фрагмента.

Пользовательские (созданные пользователем) и автоматические фрагменты имеют для Photoshop разные свойства.

Для первых программа не может изменить расположение и размер, а за размером и размещением автоматических фрагментов она следит сама. Если вы поменяете размер пользовательского фрагмента, то все соседние автоматические фрагменты сами изменятся таким образом, чтобы не возникало "дырок" и перекрываний.

Автоматические фрагменты имеют в левом верхнем углу пиктограммы серого цвета, а пользовательские - других цветов. Отображаются автоматические фрагменты более приглушенными цветами, чем пользовательские.

1. Выберите на палитре инструментов инструмент Slice Select (Выделение фрагмента). Он применяется для уточнения размеров и положения фрагментов.
2. Щелкните курсором мыши в пределах созданного вами фрагмента, чтобы выделить его. Изображение внутри выделенного фрагмента, будь он автоматическим или пользовательским, всегда показывается в оригинальной цветовой гамме. Его рамка приобрела восемь манипуляторов, которые служат для масштабирования.
3. Перетащите правый боковой манипулятор рамки немного вправо. Фрагмент увеличился по горизонтали. Автоматический фрагмент справа стал более узким, а фрагмент снизу - шире. Photoshop самостоятельно изменил их размеры так, чтобы количество фрагментов оставалось прежним. Верните пользовательскому фрагменту исходный размер. Программа снова скорректирует автоматические фрагменты.
4. Щелкните курсором мыши в пределах правого автоматического фрагмента. Изображение внутри фрагмента стало ярким, фрагмент выделен. Обратите внимание, что рамка автоматического фрагмента не имеет манипуляторов, поскольку его размер устанавливается программой.
5. В Photoshop автоматический фрагмент можно легко преобразовать в пользовательский. Выберите команду Promote to User-slice (Преобразовать фрагмент в пользовательский) из меню Slices (Фрагменты) или контекстного меню, открывающегося щелчком правой кнопки мыши в пределах автоматического фрагмента.
   Фрагмент приобрел манипуляторы масштабирования, и пиктограммы в его левом верхнем углу перекрасились в синий цвет.

Примечание

Пользовательские фрагменты могут располагаться не только встык, но и накладываться друг на друга. Какой из фрагментов окажется выше, задается командами, находящимися в списке Arrange (Монтаж) меню Slices (Фрагменты).

Команды Bring to Front (Самый верхний) и Send to Back (Самый нижний) помещают фрагмент поверх остальных или ниже всех соответственно. Команды Bring Forward (Сдвинуть вперед) и Send Backward (Сдвинуть назад) имеют смысл, только если перекрываются более двух фрагментов. В этом случае они располагают выделенный фрагмент выше или ниже текущего положения. Эти команды доступны также из меню палитры Slice (Фрагмент) и на панели свойств инструмента Slice Select (Выделение фрагмента).

Каринцев Алексей Иннокентьевич
(арт-директор компании Edgestile)