Як розрізати шаблон

Відкрийте файл шаблона в графічному редакторі Adobe Photoshop. Виберіть в меню пункти File і Open або натисніть комбінацію клавіш Ctrl + O. У діалозі, що з`явився після цього, перейдіть в директорію з файлом, виділіть його в списку і натисніть кнопку "відкрити".

Виберіть зручний масштаб перегляду зображення шаблону. Скористайтеся інструментом Zoom Tool або пунктами контекстного меню. Слід вибрати масштаб, що дозволяє позиціонувати курсор з точністю до пікселя. Це необхідно для точної установки опорних ліній.

Сформуйте набір опорних ліній над зображенням шаблону. Увімкніть відображення лінійок в вікнах документа, якщо воно ще не включено. Для цього натисніть Ctrl + R або виберіть у меню пункти View і Rulers.

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

Додайте необхідну кількість опорних ліній і позиціонують їх по межах поділу областей шаблону. Лінії повинні проходити через всі місця, за якими необхідно розрізати шаблон. Вони повинні обмежувати всі зображення і логічні області (логотип, шапка сайту, горизонтальні і вертикальні меню, і т.д.), які будуть представлені на 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 перебуватиме набір зображень, на які був розрізаний вихідний шаблон.