У підготовці веб-сайту важливим етапом є верстка дизайн-макету, і провести верстку неможливо, не знаючи технології правильного розрізання зображення на фрагменти. Для цього краще всього використовувати графічний редактор Adobe Photoshop, який дозволить найбільш точно розрізати зображення на частини, і згодом ви з допомогою таблиці зможете об’єднати всі фрагменти малюнка в одне ціле.
Інструкція
- Відкрийте зображення в Adobe Photoshop, заздалегідь продумавши, з яких частин буде складатися сайт, а значить, на які частини треба поділити вихідний малюнок. Почніть із створення направляючих ліній для нарізки малюнка на фрагменти. Наметове всі напрямні лінії, виберіть на панелі інструментів опцію Slice, або викличте її натисканням клавіші К.
- Обведіть область, виділену напрямними лініями, щоб з’явилася синя рамка, в якій ви побачите номер фрагмента. Обведіть такий рамкою всі фрагменти, виділені лініями напрямних, а потім, використовуючи інструмент Slice Select, клацніть на кожен фрагмент, якщо хочете змінити його розмір.
- Після використання цього інструменту колір рамки змінюється з синього на жовтий, і ви можете переміщати межі кожного фрагмента за допомогою курсору миші за бічні сторони і кути. Переключитися між режимами Slice і Slice Select можна оперативно, утримуючи клавішу Ctrl.
- Змінюйте розміри виділених областей так, щоб вони не перетиналися, і при цьому не утворювали проміжків між кордонами. Виділивши всі фрагменти і нарізавши малюнок на потрібну кількість областей, збережіть їх.
- У тих областях, де кілька фрагментів становлять однотонний фон, ви можете замінити їх одним однотонним фрагментом, а також оснастити прозорим малюнком у форматі gif.
- Використання формату gif у верстці веб-сайту надає певну перевагу — це зменшує розмір сторінки сайту, а також дозволяє встановлювати деякі об’єкти поверх фону, не приховуючи його.
