Вам понадобится
  • - редактор растровой графики Adobe Photoshop.
Инструкция
1
Откройте файл шаблона в графическом редакторе Adobe Photoshop. Выберите в меню пункты File и Open либо нажмите комбинацию клавиш Ctrl+O. В диалоге, появившемся после этого, перейдите в директорию с файлом, выделите его в списке и нажмите кнопку «Открыть».
2
Выберите удобный масштаб просмотра изображения шаблона. Воспользуйтесь инструментом Zoom Tool или пунктами контекстного меню. Следует выбрать масштаб, позволяющий позиционировать курсор с точностью до пикселя. Это необходимо для точной установки опорных линий.
3
Сформируйте набор опорных линий над изображением шаблона. Включите отображение линеек в окнах документа, если оно еще не включено. Для этого нажмите Ctrl+R либо выберите в меню пункты View и Rulers.
4
Для добавления горизонтальной опорной линии подведите курсор мыши к верхней линейке. Нажмите и удерживайте левую клавишу. Двигайте курсор мыши вниз, в область изображения. Аналогично, используя правую линейку, можно добавить горизонтальные линии.
5
Добавьте необходимое количество опорных линий и позиционируйте их по границам разделения областей шаблона. Линии должны проходить через все места, по которым необходимо разрезать шаблон. Они должны ограничивать все изображения и логические области (логотип, шапка сайта, горизонтальные и вертикальные меню, и т.д.), которые будут представлены на web-странице.
6
Активируйте инструмент Slice Tool. Его кнопка находится на вертикальной инструментальной панели.
7
Создайте необходимое количество областей разрезания при помощи инструмента Slice Tool. Выберите удобный масштаб отображения шаблона. Мышью задавайте границы областей. Направляющие линии, добавленные на третьем шаге, обеспечат точное позиционирование границ создаваемых объектов. При необходимости скорректируйте уже существующие области при помощи инструмента Slice Select Tool.
8
Измените свойства областей разрезания, если это требуется. Активируйте инструмент Slice Select Tool. Кликните правой кнопкой мыши по нужной области. В контекстном меню выберите пункт Edit Slice Options. В появившемся диалоге Slice Options выберите тип области (изображение, пустая область, таблица), режим заполнения фона, укажите, если это надо, имя, целевой URL, содержимое атрибута alt и другие значения. Нажмите кнопку OK.
9
Разрежьте шаблон. Выберите в меню пункты File и Save for Web & Devices, либо нажмите клавиши Shift+Ctrl+Alt+S. В диалоге Save for Web & Devices укажите формат и параметры сжатия изображений, на которые будет разрезан шаблон. Нажмите кнопку Save. Отобразится диалог Save Optimized As.
10
В выпадающем списке «Тип файла» выберите пункт HTML and Images (*.html), в поле «Имя файла» введите имя файла, в который будет помещена HTML-разметка шаблона. В списке Slices выберите пункт All Slices. Укажите директорию для выходных данных и нажмите кнопку «Сохранить».
11
В целевой каталог будет помещен HTML-файл, представляющий собой, фактически, готовый шаблон web-страницы. В подкаталоге images будет находиться набор изображений, на которые был разрезан исходный шаблон.