Как разрезать шаблон?

Профессиональные web-дизайнеры разрабатывают шаблоны сайтов, как правило, в мощных графических редакторах, таких как Adobe Photoshop. Результатом работы является файл с изображением, который в таком виде и предоставляется заказчику. Для того чтобы использовать готовый дизайн, то есть сверстать web-страницу, нужно разрезать шаблон.

Вам понадобится

• - редактор растровой графики Adobe Photoshop.

Инструкция

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

Добавьте необходимое количество опорных линий и позиционируйте их по границам разделения областей шаблона. Линии должны проходить через все места, по которым необходимо разрезать шаблон. Они должны ограничивать все изображения и логические области (логотип, шапка сайта, горизонтальные и вертикальные меню, и т.д.), которые будут представлены на web-странице.

Активируйте инструмент Slice Tool. Его кнопка находится на вертикальной инструментальной панели.

Создайте необходимое количество областей разрезания при помощи инструмента Slice Tool. Выберите удобный масштаб отображения шаблона. Мышью задавайте границы областей. Направляющие линии, добавленные на третьем шаге, обеспечат точное позиционирование границ создаваемых объектов. При необходимости скорректируйте уже существующие области при помощи инструмента Slice Select Tool.

Измените свойства областей разрезания, если это требуется. Активируйте инструмент Slice Select Tool. Кликните правой кнопкой мыши по нужной области. В контекстном меню выберите пункт Edit Slice Options. В появившемся диалоге Slice Options выберите тип области (изображение, пустая область, таблица), режим заполнения фона, укажите, если это надо, имя, целевой URL, содержимое атрибута alt и другие значения. Нажмите кнопку OK.

Разрежьте шаблон. Выберите в меню пункты File и Save for Web & Devices, либо нажмите клавиши Shift+Ctrl+Alt+S. В диалоге Save for Web & Devices укажите формат и параметры сжатия изображений, на которые будет разрезан шаблон. Нажмите кнопку Save. Отобразится диалог Save Optimized As.

В выпадающем списке «Тип файла» выберите пункт HTML and Images (*.html), в поле «Имя файла» введите имя файла, в который будет помещена HTML-разметка шаблона. В списке Slices выберите пункт All Slices. Укажите директорию для выходных данных и нажмите кнопку «Сохранить».

В целевой каталог будет помещен HTML-файл, представляющий собой, фактически, готовый шаблон web-страницы. В подкаталоге images будет находиться набор изображений, на которые был разрезан исходный шаблон.

Оцените статью!