Фигуры и инструменты

1. Фрейм

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

Фрейм задает рабочую область на холсте. В Pixso фреймы можно вкладывать друг в друга, создавая сложную структуру.

Во фрейме доступны сетки макета, автомакет, ограничения и прототипирование.

1.1 Создание фрейма

Используйте один из способов:

1. Нажмите A или F.

2. Выберите инструмент Фрейм на панели инструментов.

3. Создайте фрейм нужного размера:

• щелкните по холсту, чтобы создать фрейм 100 × 100;
• нажмите и потяните указатель, чтобы задать произвольный размер;
• выберите предустановленный размер в меню на правой панели.

4. Чтобы создать фрейм вокруг объектов, выделите их, щелкните правой кнопкой мыши и выберите Создать фрейм из выделения. Горячие клавиши: Ctrl + Alt + G или Option + Command + G.

1.2 Свойства фрейма

Радиус скругления: скругляет углы фрейма.

Обрезать содержимое: скрывает объекты, выходящие за границы.

Сетка макета: задает визуальную структуру дизайна.

Ограничения: определяют поведение вложенных объектов при изменении размера фрейма.

Автомакет: создает динамический фрейм, который подстраивается под содержимое.

Заливка: сплошной цвет, градиент или изображение PNG, JPEG и SVG.

Обводка: создает границу фрейма.

Эффекты: добавляют тень или размытие.

Прототип: создает переходы между фреймами.

Горячие клавиши:

• выбрать вложенный объект: Enter или Return;
• выбрать следующий объект: Tab;
• выбрать предыдущий объект: Shift + Tab;
• выбрать родительский объект: Shift + Enter.

1.3 Вложенные фреймы

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

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

Дочерний объект — любой объект внутри фрейма.

1.4 Изменение размера фрейма

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

1. Перетаскивание: выберите фрейм и потяните угол или край. Чтобы временно игнорировать ограничения вложенных объектов, удерживайте Ctrl/Command.

2. Панель свойств: измените ширину и высоту в разделе Фрейм. Поддерживаются операции +, −, *, / и %.

3. Подогнать под содержимое: нажмите Ctrl + Alt + Shift + R или Option + Command + Shift + R либо соответствующую кнопку.

2. Фрейм и группа

Фреймы и группы объединяют несколько слоев в один объект.

2.1 Фрейм

• Чтобы добавить слой, перетащите его во фрейм.
• Чтобы удалить слой из фрейма, перетащите его наружу.
• Чтобы разгруппировать содержимое, выберите фрейм и команду Разгруппировать выделение или нажмите Command/Ctrl + Shift + G.

2.2 Группа

• Выделите слои, щелкните правой кнопкой мыши и выберите Сгруппировать выделение или нажмите Command/Ctrl + G.
• Чтобы разгруппировать, выберите группу и команду Разгруппировать выделение или нажмите Command/Ctrl + Shift + G.

Примечания:

1. Первое нажатие по слою внутри группы выбирает всю группу.
2. Чтобы выбрать отдельный слой, дважды щелкните по нему или выберите его на панели слоев.
3. Границы группы автоматически подстраиваются под перемещение вложенных слоев.
4. Слои можно перемещать внутрь и наружу группы на панели слоев.
5. Группы можно вкладывать друг в друга.

3. Векторы

3.1 Создание векторного слоя

• Используйте инструмент Перо.
• Используйте инструмент Фигура. Удерживайте Shift, чтобы зафиксировать пропорции 1:1.

3.2 Редактирование вектора

В режиме векторного редактирования можно выбирать и настраивать отдельные точки, линии и фигуру целиком, а также добавлять точки инструментом Перо.

Чтобы войти в режим:

• выберите контур и нажмите Return/Enter;
• или выберите контур и нажмите значок редактирования на панели инструментов.

• Чтобы выйти, снова нажмите Return/Enter или Готово на панели инструментов.

4. Заливка областей вектора

Выберите векторный слой и войдите в режим редактирования. Нажмите инструмент Заливка на панели или клавишу B, затем щелкните по замкнутой области векторной сети.

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

Чтобы изменить цвет области, выберите ее инструментом Курсор и задайте цвет на панели Заливка.

5. Кривая Безье

Выберите векторный слой и войдите в режим редактирования. У кривой отображаются управляющие маркеры. Для угловой точки без маркеров выберите инструмент преобразования на панели или удерживайте Ctrl/Command и щелкните по точке, чтобы создать кривую Безье.

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

6. Скругление

Радиус любой вершины меняется на правой панели. Если выбран весь контур, скругляются все углы; в режиме редактирования можно настроить одну точку.

7. Оформление концов линии

Концам любого незамкнутого контура можно назначить стиль.

• Контур с двумя конечными точками:

Стили начальной и конечной точки отображаются на правой панели и настраиваются отдельно.

• Контур более чем с двумя конечными точками:

Стили концов доступны в разделе Дополнительные свойства на правой панели.

Если выбран весь контур, настраивать конечные точки отдельно нельзя. Выберите нужную точку в режиме редактирования вектора.

8. Инструмент «Перо»

• При первом использовании толщина линии по умолчанию равна 1 px.
• Выберите Перо в меню верхней панели или нажмите P.

• Цвет, толщину и оформление концов настройте на панели Обводка.
• Перо остается активным, пока не выбран другой инструмент или не нажата клавиша Esc.
• Удерживайте Shift, чтобы провести прямую линию.

9. Инструмент «Фигура»

Доступны шесть фигур: прямоугольник, линия, стрелка, эллипс, многоугольник и звезда.

• Прямоугольник: выберите инструмент или нажмите R.

• Линия: выберите инструмент или нажмите L.

Свойства линии настраиваются на панели Обводка.

• Стрелка: выберите инструмент или нажмите Shift + L. Свойства также настраиваются на панели Обводка.

• Эллипс: выберите инструмент или нажмите O. Из эллипса можно создавать сектор, кольцо и разомкнутое кольцо.

1. Нарисуйте эллипс.

2. При наведении появится маркер сектора.

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

4. Три появившихся маркера позволяют менять размер сектора, положение выреза и внутренний радиус кольца.

• Многоугольник: выберите инструмент. Один управляющий маркер меняет скругление, другой — количество углов.

10. Инструмент «Масштабирование»

Когда активен инструмент Перемещение, откройте его меню или нажмите K, чтобы выбрать Масштабирование.

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

11. Булевы операции

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

Булева группа ведет себя как одна фигура с общей заливкой и обводкой и может участвовать в других булевых операциях. Рассмотрим два частично перекрывающихся прямоугольника.

• Объединение: все выбранные фигуры образуют одну внешнюю область; перекрывающиеся внутренние отрезки не учитываются.

• Вычитание верхнего слоя: верхние фигуры вычитаются из нижней.

• Пересечение: остается только общая область фигур.

• Исключение: отображаются только неперекрывающиеся области.

12. Маски

12.1 Создание маски

Шаг 1. Выберите объект-маску и расположите его под остальными объектами.

Шаг 2. Выберите все слои, которые должны входить в маску.

Шаг 3. Щелкните правой кнопкой мыши и выберите Создать маску, нажмите одноименную кнопку на верхней панели или используйте Ctrl + Alt + M / Command + Option + M.

Шаг 4. Маска создается с учетом порядка слоев. Порядок можно менять на левой панели, изменяя результат.

Шаг 5. Непрозрачность маски должна быть больше 0%, иначе эффект не отображается.

12.2 Отмена маски

Сначала выберите маску. Проверить выбор можно на левой панели.

Затем используйте один из способов:

• снова нажмите Создать маску на верхней панели;

• щелкните слой маски правой кнопкой мыши и выберите Отменить маску.