Як нарізати макет

Як нарізати макет

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

Інструкція

для новачківнарізка1. Вибираючи методики, як нарізати макет, пам 'ятайте, що кожен верстальник при роботі з PSD-макетами використовує власні способи його нарізки. Тому на першому етапі вибирайте лише найпростіші техніки, до яких належить і зручна створеного макета з графікою "на шматочки". По-перше, спочатку уявіть подумки, на які частини ви будете ділити ваш макет, продумайте кожну його окрему частину, і лише потім приступайте до технічної частини самого процесу. Пам 'ятайте, що PSD-макет поділяється на "шматки" залежно від його складності, поділяючи його на окремі елементи. При цьому кожен графічний елемент повинен бути незалежним від усіх інших деталей.


2. Вирішуючи, як розрізати макет з шапкою, що складається з кнопок, окремого фонового шару та текстових шарів, пам 'ятайте, що в даному випадку всю шапку як картинку розрізати не можна. У такій ситуації краще розріжте на зображення окремо всі текстові шари, кожну кнопку та фоновий шар шапки. По-друге, нарізка макета передбачає від верстальника вчинення дій у наступній послідовності. Якщо текст є лише частиною декоративного вигляду, використовуйте перед версткою HTML/CSS.

3. Спочатку відкрийте сам макет у Photoshop так, щоб праворуч з 'явилася панель шарів, яка розглядається як кістяк, необхідний для початку здійснення верстки. У випадку, коли всі зображення клікабельні, відкривайте версію вашого макета в повній роздільній здатності. Далі зверстайте всі графічні елементи таким чином, щоб виглядати так само, як і в форматі HTML, тому зберігайте кожен яскраво виражений елемент з графічним зображенням у потрібному форматі: GIF, JPG або PNG. Далі залишайте лише елемент, який ви бажаєте вирізати, а всі інші шари просто вимкніть, а потім переносіть шар в заздалегідь створений у Photoshop новий документ.

4. Щоб вибрати потрібний графічний елемент, скористайтеся таким інструментом, як Rectangular Marquee Tool, що дозволяє позначити область пунктирної лінії. Потім обріжте частину макета до виділеного пунктиром елемента, використовуючи меню Image > Crop. Щоб позбутися непотрібних шарів заднього плану, застосовуйте градієнтну заливку, вимикаючи видимість фонових шарів. Потім виконайте обрізку кутів виділення, а потім збережіть всі інші шари прозоро.