Настройки макета

1. Измерение расстояния между слоями

На холсте можно измерять расстояние между следующими объектами:

• векторными фигурами и контурами;
• текстовыми слоями;
• фреймами;
• компонентами;
• экземплярами;
• группами;
• направляющими.

2. Измерение расстояния между объектами

Расстояние можно измерить, даже если объекты вложены в другие фреймы, группы или компоненты.

1. Выберите первый объект на холсте.
2. Удерживайте Alt в Windows или ⌥ Option в macOS.
3. Наведите указатель на второй объект.
4. Pixso покажет красную линию между объектами и расстояние рядом с ней.

3. Измерение расстояния между вложенными слоями

1. Выберите первый объект на холсте.
2. Удерживайте Ctrl + Alt в Windows или ⌘ Command + ⌥ Option в macOS.
3. Наведите указатель на второй объект.

Pixso покажет красную линию между объектами и расстояние рядом с ней.

4. Автомакет

Автомакет — свойство фрейма или компонента, которое помогает дизайну адаптироваться к размеру и составу слоев. Элементы автоматически перестраиваются при добавлении новых слоев, изменении текста или размера объектов.

Автомакет можно использовать, чтобы:

• создать кнопку, размер которой меняется вместе с текстом;
• создать список, адаптирующийся к изменениям проекта;
• построить целый интерфейс на основе фреймов с автомакетом.

4.1 Добавление автомакета

Автомакет поддерживается только во фреймах. Если выбранные слои не находятся во фрейме, Pixso автоматически создаст вокруг них новый фрейм.

Автомакет можно применить к:

• новому или пустому фрейму;
• фрейму с содержимым;
• компоненту или группе компонентов;
• слою или группе объектов.

Доступны следующие способы:

1. Нажмите Shift + A.

2. Нажмите + рядом с разделом Автомакет на правой панели.

3. Щелкните фрейм или объект правой кнопкой мыши и выберите Добавить автомакет.

4.2 Свойства автомакета

Фрейм с автомакетом имеет дополнительные свойства. После применения автомакета режим расположения и значения можно настроить на правой панели.

Примечания:

1. Автомакет работает в одном направлении: горизонтальном или вертикальном. Для двух направлений используйте вложенные автомакеты.

2. Расстояние между объектами можно настраивать отдельно для разных направлений автомакета.

3. Можно настраивать внутренние отступы между объектами и границами фрейма. Если все четыре отступа одинаковы, отображается одно значение; если различаются — смешанное состояние.

После настройки отступов размер фрейма с автомакетом автоматически меняется вместе с внутренними элементами.

5. Распределение и выравнивание

1. Фиксированный интервал: элементы распределяются с указанным расстоянием.

Доступны позиции: сверху слева, сверху по центру, сверху справа, по центру слева, по центру, по центру справа, снизу слева, снизу по центру и снизу справа.

2. Равномерное распределение: расстояние между объектами автоматически рассчитывается по размеру фрейма.

Направления выравнивания зависят от направления автомакета:

• горизонтальный автомакет: слева, по центру, справа;
• вертикальный автомакет: сверху, по центру, снизу.

3. Ограничения в автомакете делятся на ограничения фрейма и ограничения объектов внутри него.

Примечание: во фрейме с автомакетом нельзя:

• добавлять сетку макета;
• применять ограничения к объектам;
• использовать умное выделение для объектов.

6. Умное упорядочивание

Умное выделение позволяет быстро менять порядок и интервалы двух и более слоев. С его помощью можно:

• выравнивать вертикальные и горизонтальные интервалы;
• создавать равномерные или неравномерные сетки;
• перестраивать слои в строки, столбцы или сетку;
• копировать и удалять слои с автоматическим перераспределением остальных.

Это упрощает сложные операции и ускоряет создание макета.

6.1 Использование умного выделения

Чтобы умное выделение стало доступно, интервалы между слоями должны быть одинаковыми, а сами слои должны перекрываться по оси X, Y или обеим осям.

Если интервалы различаются, сначала используйте инструмент упорядочивания.

Одномерное умное выделение упорядочивает слои в строку или столбец, двухмерное — одновременно в строки и столбцы, например в сетку или таблицу.

1. Выберите слои. Они могут иметь разные размеры и формы; поддерживаются отдельные слои, группы, фреймы и компоненты.

2. Pixso добавит маркеры умного выделения и розовый круг в центре каждого объекта.

3. При наведении на выбранный объект появляются дополнительные розовые маркеры для изменения вертикальных и горизонтальных интервалов.

6.2 Изменение слоев в умном выделении

После создания умного выделения можно перемещать, добавлять и удалять слои, не снимая выделение. Доступны следующие действия:

• настройка интервалов;
• перемещение и изменение порядка;
• копирование;
• изменение размера;
• удаление.

Нужный слой выбирается розовым круглым маркером в его центре.

1. Настройка интервалов

Изменяйте вертикальные или горизонтальные интервалы перетаскиванием розовых маркеров либо вводом точного значения на правой панели.

Точное значение задается на правой панели.

2. Перемещение и изменение порядка

• Нажмите розовый круг в центре слоя.
• Перетащите слой в нужное место внутри умного выделения.
• Отпустите кнопку мыши. Остальные слои сохранят упорядоченную структуру.

3. Копирование слоев

• Нажмите розовый круг в центре слоя.
• Используйте горячие клавиши:

macOS: Command + D

Windows: Ctrl + D

• Копия появится рядом с исходным слоем, а остальные слои автоматически сдвинутся.

4. Изменение размера

Размер выбранных слоев можно менять, сохраняя одинаковые интервалы.

5. Удаление слоев

• Нажмите розовый круг в центре слоя.
• Нажмите Delete или Backspace.
• Остальные слои перестроятся и займут освободившееся место.

7. Линейки и направляющие

Линейки помогают точно располагать слои и объекты.

7.1 Добавление направляющей

Сначала включите линейки. Если они не отображаются, нажмите Shift + R или включите их в меню.

Нажмите левую кнопку мыши на левой или верхней линейке, перетащите направляющую на холст и отпустите в нужном месте.

Направляющую можно добавить на холст или внутрь фрейма.

7.2 Удаление направляющей

Перетащите направляющую обратно на линейку или выберите ее и нажмите Delete либо Backspace.

8. Сетка макета

8.1 Что такое сетка макета

Сетка помогает выравнивать объекты внутри фрейма и задает визуальную структуру дизайна. С ней макеты остаются согласованными на разных платформах и устройствах.

Сетка макета не зависит от пиксельной сетки, разрешения и размера экрана.

Ее можно применить только к фрейму — как верхнего уровня, так и вложенному.

Сетка помогает:

• поддерживать единообразие на разных платформах;
• сократить количество решений при построении макета;
• быстрее создавать модели и вайрфреймы;
• использовать разные схемы: галереи, сетки значков и макеты целых страниц.

Выберите фрейм или компонент и нажмите + рядом с разделом Сетка макета на правой панели.

К одному фрейму можно добавить несколько сеток для многомерной структуры.

8.2 Свойства сетки макета

Доступны три типа: обычная сетка, столбцы и строки.

• Для обычной сетки можно задать размер ячейки и цвет.

• Для столбцов и строк можно настроить количество, тип, ширину, поля и интервалы.
• Доступны типы: слева, справа, по центру и растянуть. В режиме растяжения Pixso распределяет элементы по фрейму с учетом полей и интервалов. Эти настройки обычно используются вместе с ограничениями объектов.

8.3 Видимость сетки макета

Показать или скрыть сетку можно горячими клавишами:

macOS: Command + G

Windows: Ctrl + Shift + 4

9. Ограничения

Ограничения определяют, как слои ведут себя при изменении размера родительских объектов.

9.1 Горизонтальные ограничения

При изменении ширины фрейма можно:

• сохранять расстояние от слоя до левого края;
• сохранять расстояние до правого края;
• сохранять расстояние одновременно до левого и правого края, из-за чего слой растягивается или сжимается по оси X;
• сохранять положение слоя относительно горизонтального центра;
• масштабировать размер и положение слоя пропорционально размеру фрейма.

9.2 Вертикальные ограничения

При изменении высоты фрейма можно:

• сохранять расстояние от слоя до верхнего края;
• сохранять расстояние до нижнего края;
• сохранять расстояния до верхнего и нижнего краев, из-за чего слой растягивается или сжимается по оси Y;
• сохранять положение слоя относительно вертикального центра;
• масштабировать размер и положение слоя пропорционально размеру фрейма.

9.3 Применение ограничений

Ограничения можно применять к любому слою внутри фрейма, кроме слоев во фрейме с автомакетом. К слоям вне фрейма они не применяются.

• Ограничения можно задать вложенному фрейму.
• Для слоя можно одновременно настроить горизонтальные и вертикальные ограничения.
• К группе ограничения не применяются.

Чтобы настроить ограничения:

1. Выберите слой или родительский слой во фрейме. Синие пунктирные линии на холсте покажут текущие ограничения.

2. Настройте горизонтальные и вертикальные ограничения в разделе Ограничения на правой панели.

3. Выберите нужные варианты в раскрывающемся меню.

4. Ограничение также можно выбрать нажатием линии в интерактивной схеме.

5. Чтобы слой не перемещался при прокрутке, включите Фиксировать положение при прокрутке.

9.4 Временное игнорирование ограничений

Чтобы изменить размер фрейма или слоя без учета ограничений, удерживайте:

• macOS: Command во время изменения размера;
• Windows: Ctrl во время изменения размера.