? ЯК нарізати макет :: ПЗ

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

Інструкція

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

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

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

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