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

Ви склали оригінальний макет , що включає графічні елементи, і бажаєте виконати його верстку? Спочатку вам необхідно дізнатися, як нарізати макет , щоб кожен з графічних елементів згодом перебував на потрібному місці посеред, вгорі або знизу сторінки.
Інструкція
1
Вибираючи методики, як нарізати макет , пам'ятайте, що кожен верстальник при роботі з PSD- макет ами використовує власні способи його нарізки. Тому на першому етапі вибирайте лише найпростіші техніки, до яких належить і зручна для новачків нарізка створеного макет а з графікою «на шматочки». По-перше, спочатку уявіть подумки, на які частини ви будете ділити ваш макет , продумайте кожну його окрему частину, і лише потім приступайте до технічної частини самого процесу. Пам'ятайте, що PSD- макет ділиться на «шматки» залежно від його складності, розділяючи його на окремі елементи. При цьому кожен графічний елемент повинен бути незалежним від всіх інших деталей.
2
Вирішуючи, як розрізати макет з шапкою, що складається з кнопок, окремого фонового шару і текстових шарів, пам'ятайте, що в даному випадку всю шапку в якості картинки розрізати не можна. У такій ситуації краще розріжте на картинки окремо всі текстові шари, кожну кнопку, а також фоновий шар шапки. По-друге, нарізка макет а передбачає від верстальника вчинення дій в наступній послідовності. Якщо текст служить лише частиною декоративного оформлення, використовуйте перед версткою HTML/CSS.
3
Спочатку відкрийте сам макет в програмі Photoshop так, щоб праворуч з'явилася панель шарів, розглядається як кістяк, необхідний для початку здійснення верстки. У випадку, коли всі зображення клікабельні, відкривайте версію вашого макет а в повному дозволі. Далі зверстати всі графічні елементи таким чином, щоб виглядав так само, як і у форматі HTML, тому зберігайте кожен яскраво виражений елемент з графічним зображенням в потрібному форматі: GIF, JPG або PNG. Далі залишайте тільки той елемент, який збираєтеся вирізати, а всі інші шари просто відключайте, і переносите потрібний шар в заздалегідь створений в програмі Photoshop новий документ.
4
Для виділення необхідного графічного елементу використовуйте такий інструмент, як Rectangular Marquee Tool, що дозволяє позначити виділяється область пунктирною лінією. Після цього обріжте решту макет а аж до виділеного пунктиром елемента, використовуючи меню Image> Crop. Щоб позбутися від непотрібних шарів заднього плану, застосовуйте градієнтну заливку, відключаючи видимість фонових шарів. Далі виконайте обрізку кутів виділеної частини, а потім збережіть всі інші шари в прозорому вигляді.