? ЯК розрізати шаблон :: ПЗ

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

Вам знадобиться

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

Інструкція

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