Уроки photoshop нарізка psd-файлу - способи і методи оптимізації процесу

Напевно, мало хто любить верстати дизайни в Photoshop. Якщо бути точніше, мова йде не про саму конвертації PSD в веб-сайт, а про конкретний процесі нарізки файлу і експорту зображень інструментами Photoshop. В цілому, процес дуже виснажливий, адже треба відокремити кожен елемент дизайну і вручну його експортувати.

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

Три типу нарізки в Photoshop

Три типу? Це було найцікавішим, з чим ми зіткнулися в процесі дослідження. Коли особливо не вдаёшься в це з головою, сидиш і думаєш, що є лише один метод. Але це не так.

Три різних типи полягають в: різко вручну, Автоматичної різання та різання на базі шарів. Для початку давайте поговоримо про тих двох, про яких ви, ймовірно, вже чули: Ручна різання і Автоматична. Вони дуже схожі між собою. Якщо бути точніше, то один тип відбувається з іншого.

Як відомо, для того, щоб розрізати PSD, спочатку береться інструмент різання (Slice Tool - C) і малюється короб навколо області, яку потрібно експортувати в окреме зображення. Додавши відрізки / області для всіх елементів, які вам потрібні в окремих зображеннях, ви можете істотно оптимізувати і прискорити процес експорту.

Коли ви створюєте відрізок, у вас мусить виходити щось, що відображено на зображенні нижче.

Тут ми намалювали короб навколо логотипу в верхній частині сторінки. Ця дія виробляє як ручну різання, так і кілька автоматично зроблених відрізків. Коли ви створюєте відрізок, Photoshop розцінює це так, як ніби вашою метою є поділ цілісного PSD-файлу на кілька серій відрізків. Це трохи набридає, і пізніше ми обговоримо варіанти, як уникнути цього. А зараз вам потрібно врахувати, що кожен раз, коли Photoshop робить такий висновок, межі вашого відрізка розширюються, тим самим створюючи кілька інших областей. Це відображено на зображенні вище.

Прийоми при роботі з Ручний та Автоматичної нарізкою

Так як зараз мова йде про ручний і автоматичної різанні, давайте виділимо найочевидніші і не дуже очевидні властивості, за допомогою яких ви зможете визначити, які інструменти і опції є у ​​вашому арсеналі.

Переміщення і редагування відрізків

Як тільки ви створили відрізок, перед вами повинна з'явитися панель опцій, схожа з панеллю вільної трансформації (Free Transform). За допомогою цієї панелі ви зможете рухати і редагувати відрізок. Ви також можете скористатися інструментом виділення відрізка (Slice Select Tool), щоб переконатися, що ви редагуєте саме цей відрізок, а не створюєте нові. Цей інструмент можна знайти в випадаючому меню інструменту створення відрізків (Slice Tool).

Перетворення автоматичних відрізків в ручні

Протягом всього процесу різання файлу будуть створюватися автоматичні відрізки, вони будуть відокремлюватися від інших відрізків. Далі ми розглянемо процес експорту даних відрізків в окремі файли або ігнорування певних файлів при експорті, а зараз давайте розглянемо процес перетворення автоматичних відрізків в ручні.

Процес дуже простий. Для початку, вам потрібно виділити автоматично створений відрізок, скориставшись інструментом виділення відрізків. Далі виберіть автоматично створений відрізок, який вам потрібно перетворити, і натисніть кнопку «Promote», розташовану ближче до верхньої частини.

Ось і готово! Тепер автоматичний створений відрізок повинен змінитися в кольорі, вказуючи на те, що тепер це ручний відрізок. Тепер у вас набагато більше можливостей щодо його редагування і експорту.

Якщо у вас є серія об'єктів, розташованих по горизонталі, вертикалі або по сітці, вам не обов'язково створювати область різання навколо кожного з об'єктів. Замість цього, ви можете створити один відрізок, який охоплював би всі об'єкти, і наказати Photoshop'у зробити всю іншу роботу.

Для того щоб зробити це, для початку вам потрібно створити великий відрізок, намалювавши короб навколо всіх об'єктів. Далі, за допомогою інструменту виділення відрізків, клікніть по кнопці «Divide» у верхній частині сторінки.

Це повинно викликати діалогове вікно поділу відрізка. Використовуючи це віконце, ви без праці можете додати додаткові вертикальні або горизонтальні відрізки. Якщо вони не хочуть дотримуватися правого боку, ви можете направити їх вручну після натискання кнопки «ОК».

Відрізки по напрямних

Багатьом з вас напевно зручніше працювати з напрямними, ніж з інструментами для різання в Photoshop. В цілому, вони майже однакові, тільки система напрямних за загальним визнанням здається трохи рівніше.

Якщо ви дієте таким же методом, то це сильно спрощує процес створення відрізків. Просто виставте напрямні так, щоб можна було розрізати ваш PSD-файл і ігноруйте інструменти для різання. Далі, після того, як ви закінчите, виберіть інструмент для різання, і натисніть кнопку «Розрізати по напрямних» (Slices from Guides), яка розташована в верхній частині.

Перше, з чим ви зіткнетеся, якщо ви ніколи раніше не займалися різкою файлів, це те, що всі файли експортуються з абсолютно безглуздими і неідентифіковані іменами. Для того щоб виправити становище, вам потрібно впевнитися в тому, що ви задали ім'я кожному відрізку. Яке б ім'я ви не задали відрізку, воно потім буде присвоєно і експортувати файлу.

Для того щоб дати назву відрізку, просто двічі клацніть по вмісту обраним інструментом створення відрізків. Це викличе діалогове вікно нижче.

Тепер, не дивуйтеся! Навіть якщо ви виберете опцію CSS, Photoshop все одно навряд чи створить диво-сайт для вас. Вам набагато зручніше і вигідніше буде зробити все власними руками або хоча б в Dreamweaver'е. Це ми все ведемо до того, що цих опцій краще уникати зовсім.

Відрізки, засновані на шарах, і чому це кращий варіант

Одна річ, яка робить процес різання трохи приємніше - це різка, заснована на шарах. Це щось на зразок ручного різання, тільки з деякою перевагою.

Як видно з назви методу, ці відрізки не ґрунтуються на коробі, як в першому випадку. Тут суть полягає в тому, що краю відрізка дотримуються межами шару. Для того щоб реалізувати різання, засновану на шарах, виберіть шар на панелі шарів, перейдіть в меню і виберіть пункт Layer> New Layer Based Slice. Врахуйте, що це буде працювати, навіть якщо у вас обрані відразу кілька шарів - кожен шар буде перетворений в окремий відрізок!

Очевидно для того, щоб все це працювало правильно, вам потрібно гранично чітко розподіляти елементи по верствам. Тут набагато більше часу потрібно на розподіл об'єктів по верствам і папок, але це набагато менша проблема, повірте досвіду!

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

Проте, метод різання, заснований на шарах цілком прийнятний. Коли ви обробите всі верстви, ваші відрізки будуть створені автоматично. Якщо ви додасте ефект, який змінює межі (наприклад, зовнішнє світіння), відрізок автоматично розширюється, щоб охопити його. Якщо ви деформуєте шар до 30% від його початкового розміру, то і відрізок піде автоматично.

Очевидно, є серйозна причина застосування методу різання, заснованої на шарах, так як він дозволяє зберегти достатньо часу, особливо, якщо доведеться щось переробляти.

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

Наприклад, подивіться на зображення нижче (воно сильно спрощено, але ви точно зрозумієте, про що йде мова). Тут потрібно було створити всього три відрізка, але Photoshop автоматично створив 12!

Не знаємо, як у вас, але наші верстальники не люблять створювати веб-сторінки, схожі на величезну колекцію зображень, збудованих впритул один до одного. Тому нам і не потрібні ці додаткові відрізки! Нам не потрібно взагалі експортувати ці області в зображення, вони лише додають шуму в інтерфейс. Коли ми зустрічаємо документи такого типу, різка перестає подобатися геть.

Для того щоб уникнути цього, ми можемо просто взяти інструмент виділення відрізків, і натиснути кнопку приховування автоматично створених відрізків (Hide Auto Slices), розташовану у верхній частині екрану. Це дозволяє нам прийти до того, про що йдеться в назві, тобто приховати всі ці непотрібні відрізки.

Ось цей ключовий момент, коли різка дійсно допомагає. Без різання, вам доведеться зберігати всю вашу композицію окремими порціями. Робочий процес буде являти собою щось на кшталт: створення виділення, вирізання, оптимізація під веб, збереження, скасування вирізання, і так по колу. Стільки непотрібних етапів! Давайте подивимося, як справа йде з різкою.

Після того, як ви остаточно вказали всі відрізки, ваш файл PSD готовий до експорту. Тепер ви можете пройти в меню Файл (File) до пункту збереження для веб і пристроїв (Save for Web and Devices). Ймовірно, ви вже знайомі з цим пунктом, але він трохи відрізняється, коли у вас є вже розрізаний документ.

Якщо у вас є створені відрізки, превью документа відображає одразу їх усі (на жаль, превью також включає і непотрібні автоматично створені відрізки). Тут ви просто можете клікати, вибираючи кожен відрізок, і оптимізувати настройки для кожного індивідуально. Налаштування включають тип файлу, його якість і так далі. Тобто за один присід ви можете експортувати всі три відрізки в JPG і PNG, і кожен з них з тією якістю, яке ви вважаєте прийнятним.

Після того, як ви виставили всі відповідні налаштування, можна просто натискати кнопку збереження. З'явиться діалогове вікно, яке дозволить вам вибрати папку для розміщення готових зображень. Пам'ятайте, що ви вже встановили все настройки і назви відрізків, так що залишайте все як є. Ключовий момент тут полягає в тому, щоб переконатися, що ви експортуєте як всі призначені для користувача відрізки, так і вибрані відрізки.

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

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

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

І, нарешті, при експорті документа з відрізками, вибирайте пункт збереження для веб, і оптимізуйте кожен відрізок окремо. Також переконайтеся, що ви експортуєте тільки ручні відрізки і вибрані відрізки, так автоматично створені відрізки лише займатимуть місце на жорсткому диску.

Можливо, це навіть більше інформації, ніж ви хотіли знати про різанні в Photoshop, але сподіваємося, що дана інформація насправді допоможе вам в подальших проектах, і ви зможете отримати всі переваги різних типів різання.