В этот раз мы поучимся идеально выравнивать объекты и распределять их в 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 сэкономит вам уйму времени!
Топ коментарі (0)