32.Обработка эскизов сайтов с использованием программы Photoshop (выделение фрагментов, обрезка, автоматическая генерация структуры web-страницы.

Нарезка эскиза сайта. Работа с инструментом "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 (Фрагменты) или контекстного меню, открывающегося щелчком правой кнопки мыши в пределах автоматического фрагмента.  Фрагмент приобрел манипуляторы масштабирования, и пиктограммы в его левом верхнем углу перекрасились в синий цвет.