графику и увеличить скорость их загрузки. Суть фрагментов состоит в том, что из одного большого изображения можно создать ряд фрагментов. При этом у каждого из них могут быть собственные свойства и параметры. Рассмторим типы фрагментов, которые можно использовать для редактирования графики.
В программе Photoshop существует три типа фрагментов:
User-slices (Пользовательские Фрагменты), получаются с помощью инструмента Slice Tool (Фрагмент), а в программе ImageReady – или из выделений или направляющих.
Layer-based Slices (Фрагменты Слоя), получаются при помощи преобразования слоя во Фрагмент. Они изменяются вместе со слоем и приобретают все те изменения, которым подвергся сам слой и связаны с ним.
Auto-slices (Авто-фрагменты) получаются автоматически в процессе деления изображения на Фрагменты. У них нет самостоятельных свойств и все Авто-фрагменты в изображении имеют одинаковые параметры и изменяются автоматически в процессе редактирования Пользовательских Фрагментов или Фрагментов Слоя. Чтобы этого избежать, необходимо превратить их в Пользовательские.
Subslices (Подфрагменты) – это вид Авто-фрагментов, которые получаются при пересечении Фрагментов или их частичного наложения друг на друга.
В этой статье мы с вами усовершенствуем свою технику нарезки изображений с помощью Photoshop'а. Как правило, необходимость в нарезке возникает при создании сайтов, когда на основе нарисованного дизайнером шаблона (как правило, это просто картинка) нужно создать веб-страничку.
1. Открываем наш шаблон, который нам предстоит нарезать:
2. Первым делом необходимо решить, каким образом мы будем нарезать. Это можно сделать даже на листе бумаги. Для примера, наш шаблон будет пока состоять из трех вертикальных блоков.
Верхний (поменьше) будет играть роль меню или head (так в html-верстке принято называть верхний блок - заголовок сайта). Средний (побольше) - будет содержать основную информацию (main). Нижний блок будет у нас footer:
3. А теперь немного расширим наш шаблон за счет добавления левого и правого колонтитулов:
Синим цветом выделен верхний (заголовок) и нижний колонтитулы. Красным - левый и правый колонтитулы Зеленым - секция контента сайта - его содержание.
4. Осталось только все эти блоки корректно вырезать. Вместо того, чтобы рисовать блоки в Image Ready, мы лучше воспользуемся функцией divide. Чтобы ее вызвать, выберем инструмент Slice и правым кликом внутри документа вызовем контекстное меню:
5. Наш шаблон состоит из 3-х горизонтальных блоков: Header, Content и Footer. Это означает, что с помощью функции divide нужно создать 3 блока. Для этого установите параметр "3" в окошке Divide Horizontally Into (как вызвать - см. п.4). должно получиться следующее:
6. Изменим высоту каждого из блоков:
7. Теперь нам надо разделить среднюю часть (Content) на три вертикальных блока: left vertical Bar, Content Box и Right Vertical Bar. Также делаем правый клик внутри среднего блока >> Divide slice >> Divide Vertically Into >> 3
8. Изменим ширину вертикальных блоков:
А теперь переходим от веб-дизайна к html-кодированию.
Из Photoshop'а переходим в Image Ready, выбираем инструмент Slice Tool (K). На нашем рисунке должны появиться наши границы разметки. Далее выбираем File > Save Optimized As... и сохраняем его в html.
9. Далее открываем полученный html файл в любом удобном для вас html редакторе (я использую блокнот). В html находим код, который отвечает за левый и правый блоки. Как подсказка - в названии картинки будут цифры 3 и 5 соответственно.
Az1aT ft. Ю.Б.-Папа ft. Адайхан - Журек сыр... 
