Цього разу ми повчимося ідеально вирівнювати об'єкти і розподіляти їх в Sketch 3. Я буду використовувати прості приклади, щоб детально роз'яснити ці опції - деякі з них вас здивують!
1. Вирівнювання одного шару на артборде
Це, можливо, найпростіший прийом з наявних.
Подивіться в верхню частину інспектора: ви побачите кілька кнопок для вирівнювання. Шість кнопок, розташованих ліворуч (вирівняти по лівому краю, горизонтально, по правому краю, по верхньому краю, вертикально і по нижньому краю) служать для вирівнювання шарів між собою, але якщо у вас виділений всього один об'єкт, він буде вирівняний щодо артборда. Ось як це працює?
Як я згадував, ви можете використовувати ті ж кнопки, якщо ви обираєте декілька об'єктів, щоб вирівняти їх відносно один одного. Але що, їли ми хочемо вирівняти кілька об'єктів щодо артборда?
2. Вирівнювання декількох шарів на артборде
Щоб вирівняти декілька об'єктів щодо артборда, згрупуйте їх в єдину групу шарів. Група буде працювати як один об'єкт при використанні кнопок вирівнювання.
Проте, угрупування в такий спосіб не завжди підходить. Давайте я покажу інший підхід.
Виділіть шари, які потрібно вирівняти на артборде, утримуйте alt. щоб кнопки вирівнювання в інспектора змінили свій вигляд. Тепер ви можете вирівняти шари по артборду! Врахуйте, що потрібно виділити шари в рамках одного артборда. інакше ця опція буде недоступна.
У цьому прикладі виділено три шари:
Цей метод також застосуємо і до груп стилів; тобто ви можете виділити кілька груп стилів, утримувати кнопку alt і вирівнювати їх на артборде.
3. Вирівнювання щодо певної верстви
Інша ситуація: Я хочу, щоб все було вирівняно до якогось конкретного об'єкту. Спочатку потрібно зрозуміти, що за замовчуванням Sketch завжди вирівнює до найбільш віддаленого від центру шару з виділених. Цей шар в даному випадку виступає «ключовим об'єктом».
Отже, щоб вирівняти всі виділені об'єкти по верхньому краю, знаходиться обхект в найдальшої верхньої позиції, і він береться за ключовий об'єкт. Ось приклад вирівнювання трьох об'єктів до верхньої правої позиції (червоний квадрат - це наш «ключовий об'єкт»):
Буде здорово, якби ми могли змінювати ключовий об'єкт, щоб він відповідав нашої мети. І ось як це зробити: заблокуйте шар, який хочете використовувати як ключовий об'єкт, потім виділіть знову всі верстви. (Ви можете виділити тільки заблоковані шари через список шарів).
У наступному прикладі синій квадрат вже заблокований, так що він і буде нашим новим ключовим об'єктом. А тепер вирівняємо знову до верхнього правого кута:
Я знайшов цей зручний прийом завдяки SketchTips. І ви можете використовувати плагін Align To від Люсьєна Лі, щоб отримати той же результат.
4. Вирівнювання векторних точок
Порада. Ви можете використовувати кнопки вирівнювання для вирівнювання декількох векторних точок, коли перебуваєте в режимі редагування (Edit mode). Виділіть векторний об'єкт, двічі клікніть, щоб перейти в режим редагування (також можете використовувати іконку Edit на головній панелі інструментів) і виділіть всі векторні точки, які потрібно вирівняти.
5. Розподіл шарів
Якщо знову подивитися вгору панелі інспектора, ви помітите, що я не згадав ще дві іконки вирівнювання зліва. Ці кнопки служать для розподілу об'єктів по горизонталі і вертикалі. Ми також можемо розподілити їх рівномірно, що дуже зручно! Скажімо, у нас виділено кілька фігур, і нам би хотілося розподілити їх рівномірно по горизонталі. Використовуйте кнопку Distribute Horizontally (друга зліва) або меню Arrange> Distribute> Horizontally.
Крайній лівий і крайній правий шари залишаться на своїх місцях, а шари між ними будуть рівномірно розподілені між ними (на однаковій відстані одна від одної). Ви можете зробити те ж саме і по вертикальній осі за допомогою кнопки Distribute Vertically (перша зліва).
6. Розподіл шарів з фіксованим відстанню
А що, якщо я хочу, щоб всі ці шари були на відстані 20 пікселів один від одного? Тут опції розподілити по вертикалі / по горизонталі вже не допоможуть.
У цьому випадку можете використовувати інструмент для створення сітки Make Grid (Arrange> Make Grid), щоб задати вертикальний і горизонтальний відступ між об'єктами. Може, спочатку буде важкувато зрозуміти, давайте я покажу ще один анімований приклад:
Тут я хотів розподілити чотири різних шару так, щоб між ними було по 20 пікселів. Я зробив сітку з одним рядком (щоб вирівняти всі шари по горизонталі) і чотирма колонками (одна колонка для кожного шару). Потім я встановив межі колонок на 20 пікселів, щоб отримати потрібні відступи. Якщо я захочу розподілити шари по вертикалі, то мені потрібно буде зробити сітку з чотирьох рядків (з межами осередків 20 пікселів) і однієї колонкою.
Якщо цей метод здався вам не дуже зручним, скористайтеся плагіном SketchDistributor. Ця опція дозволяє вам розподіляти об'єкти із заданими інтервалами.
Сподіваюся, ці поради принесуть вам користь. Такі прийоми для вирівнювання і розподілу об'єктів в Sketch заощадить вам багато часу!