Formas y herramientas

1. Marcos

Puedes añadir capas directamente al lienzo o crear marcos para diseñar para dispositivos y tamaños de pantalla concretos.

Un marco delimita una zona de diseño. En Pixso puedes anidar marcos dentro de otros para construir interfaces más complejas.

Los marcos admiten cuadrículas de diseño, Auto Layout, restricciones y prototipos.

1.1 Crear un marco

Puedes crear un marco de estas formas:

1. Pulsa A o F.

2. Selecciona Marco en la barra de herramientas.

3. Con la herramienta activada, elige cómo definir el tamaño:

• Haz clic en el lienzo para crear un marco de 100 × 100.
• Haz clic y arrastra para definir un tamaño personalizado.
• Elige un tamaño predefinido en el menú del panel derecho.

4. Para crear un marco alrededor de objetos existentes, selecciónalos, abre el menú contextual y elige Enmarcar selección. También puedes pulsar Ctrl + Alt + G o Option + Command + G.

1.2 Propiedades del marco

Los marcos ofrecen estas propiedades:

Radio de esquina: redondea las esquinas.

Recortar contenido: oculta los objetos que sobresalen de los límites del marco.

Cuadrícula de diseño: ayuda a organizar visualmente el contenido.

Restricciones: definen cómo responden los objetos secundarios cuando cambia el tamaño del marco.

Auto Layout: crea marcos que ajustan su distribución en función del contenido.

Relleno: aplica un color sólido, un degradado o una imagen PNG, JPEG o SVG.

Trazo: añade un borde o contorno.

Efectos: aplica sombras o desenfoques.

Prototipos: crea interacciones que conectan los marcos del lienzo.

Atajos:

• Seleccionar un elemento secundario: Enter o Return
• Seleccionar el siguiente elemento: Tab
• Seleccionar el elemento anterior: Shift + Tab
• Seleccionar el elemento principal: Shift + Enter

1.3 Anidar marcos

Al crear un marco dentro de otro, se establece una jerarquía:

Marco de nivel superior: se encuentra directamente en el lienzo, sin estar dentro de otro marco, grupo u objeto. Su nombre aparece en negrita en el panel de capas y también se muestra sobre el lienzo.

Marco anidado: está dentro de otro marco, ya sea de nivel superior o anidado. Puede contener otros elementos y, al mismo tiempo, depender de un marco principal.

Elemento secundario: cualquier objeto contenido en un marco.

1.4 Cambiar el tamaño de los marcos

Puedes cambiar el tamaño o la proporción de un marco como harías con otros objetos. Dispones de estas opciones:

1. Arrastrar los bordes: selecciona el marco en el lienzo o en el panel izquierdo y arrastra una esquina o un borde. Para ignorar las restricciones de los elementos secundarios, mantén pulsada Ctrl/Command mientras arrastras.

2. Editar los valores del panel: modifica la anchura y la altura en la sección Marco del panel derecho. Puedes introducir operaciones con +, −, *, / y % para calcular los valores.

3. Ajustar al contenido: adapta el marco al tamaño de las capas que contiene mediante el atajo Ctrl + Alt + Shift + R u Option + Command + Shift + R o el botón correspondiente.

2. Marcos y grupos

Los marcos y los grupos permiten reunir varias capas y tratarlas como una unidad.

2.1 Marcos

• Arrastra una capa hacia dentro para añadirla al contenedor.
• Arrástrala hacia fuera para retirarla.
• Para desagrupar un marco, selecciónalo y elige Desagrupar selección en el menú contextual, o utiliza Command + Shift + G o Ctrl + Shift + G.

2.2 Grupos

• Selecciona las capas y elige Agrupar selección en el menú contextual, o utiliza Command + G o Ctrl + G.
• Para desagrupar, selecciona el grupo y elige Desagrupar selección, o utiliza Command + Shift + G o Ctrl + Shift + G.

Nota:

1. al hacer clic por primera vez en una capa de un grupo, se selecciona el grupo completo.
2. Para seleccionar una capa individual, haz doble clic o elígela en el panel de capas.
3. Los límites del grupo se adaptan cuando sus capas cambian de posición.
4. También puedes arrastrar capas en el panel de capas para introducirlas en un grupo o sacarlas de él.
5. Puedes anidar grupos dentro de otros grupos.

3. Vectores

3.1 Crear una capa vectorial

• Utiliza la herramienta Pluma.
• También puedes utilizar Formas. Mantén pulsada Shift al dibujar para conservar una proporción de 1:1.

3.2 Editar una capa vectorial

En el modo de edición vectorial puedes seleccionar y modificar puntos, segmentos o la forma completa. Ajusta los puntos y líneas existentes o utiliza la pluma para añadir otros.

Para entrar en este modo:

• Selecciona un trazado y pulsa Return/Enter.
• Selecciona un trazado y haz clic en el icono que se muestra en la barra de herramientas.

• Para salir, pulsa Return/Enter de nuevo o haz clic en Listo en la barra.

4. Relleno

Selecciona una capa vectorial y activa la edición vectorial. Haz clic en el cubo de pintura o pulsa B. Después, haz clic en una región cerrada de la red vectorial para rellenarla.

Cada región cerrada e independiente puede tener un relleno diferente.

Para cambiar el color de una región cerrada, selecciónala con la herramienta Cursor y elige un color en Relleno.

5. Curvas de Bézier

Activa la edición de una capa vectorial. Las curvas muestran sus manejadores. Si el punto es una esquina sin manejadores, utiliza la herramienta Curvatura o mantén pulsada Ctrl o Command y haz clic en el punto para mostrarlos y crear una curva de Bézier.

Arrastra los puntos de control para ajustar la curva.

6. Esquinas redondeadas

Modifica el radio de esquina en el panel derecho para redondear vértices. Si seleccionas todo el trazado, el cambio afecta a todas las esquinas. En el modo de edición puedes elegir un punto y ajustar solo su radio.

7. Estilo de los extremos

Puedes aplicar un estilo a los extremos de un trazado abierto.

• Trazados con dos extremos:

Al seleccionar un trazado de dos extremos, sus propiedades aparecen en el panel derecho y puedes configurar cada extremo por separado.

• Trazados con más de dos extremos:

Al seleccionar un trazado con más de dos extremos, encontrarás estas opciones en Propiedades avanzadas del panel derecho.

Para configurar un extremo individual, selecciona su punto vectorial; no basta con seleccionar el trazado completo.

8. Utilizar la pluma

• La primera vez que utilizas la pluma, su grosor predeterminado es de 1 px.
• Selecciónala en el menú de la barra superior o pulsa P.

• Ajusta el color, el grosor y los extremos desde el panel Trazo.
• La herramienta permanece activa hasta que elijas otra o pulses Esc.
• Mantén pulsada Shift para dibujar una línea recta.

9. Utilizar las formas

Pixso incluye seis formas predeterminadas: rectángulo, línea, flecha, elipse, polígono y estrella. Se encuentran en Formas.

• Rectángulo: selecciona Rectángulo o pulsa R.

• Línea: selecciona Línea o pulsa L.

Después de dibujarla, ajusta sus propiedades en Trazo.

• Flecha: selecciona Flecha o pulsa Shift + L. Al igual que con las líneas, puedes modificar sus propiedades en Trazo.

• Elipse: selecciona Elipse o pulsa O. También sirve para crear sectores circulares, anillos y arcos. Sigue estos pasos:

1. Dibuja una elipse.

2. Sitúa el cursor sobre ella para mostrar el punto de control del sector.

3. Arrastra ese punto hacia arriba o abajo para abrir una sección.

4. Aparecerán tres controles para ajustar la amplitud del sector, su posición y el radio interior.

• Polígono: selecciona Polígono. La forma dispone de dos controles: uno ajusta el redondeado y otro el número de lados.

10. Utilizar Escalar

Con la herramienta Mover activa, abre su menú desplegable o pulsa K para acceder a Escalar.

La herramienta Escalar cambia proporcionalmente todos los elementos de una capa. Puede aplicarse a marcos, grupos, componentes, instancias, texto, desenfoques y vectores.

11. Operaciones booleanas

Puedes combinar formas con cuatro operaciones: unir, restar la capa superior, intersecar o excluir.

Un grupo booleano se trata como una única forma con propiedades de relleno y trazo compartidas. Puede combinarse con otros grupos booleanos. Con dos rectángulos parcialmente superpuestos, cada operación produce lo siguiente:

• Unir: combina las formas seleccionadas. El contorno exterior reúne los trazados de las capas y elimina los segmentos internos superpuestos.

• Restar la capa superior: conserva la forma inferior y elimina de ella las zonas ocupadas por las capas superiores.

• Intersecar: conserva únicamente las zonas donde se superponen las capas.

• Excluir: conserva solo las regiones que no se superponen.

12. Máscaras

12.1 Crear una máscara

Paso 1. Coloca el objeto que actuará como máscara detrás de los demás.

Paso 2. Selecciona todas las capas que formarán parte de la máscara.

Paso 3. Abre el menú contextual y selecciona Crear máscara, utiliza Crear máscara en la barra superior o pulsa Ctrl + Alt + M / Command + Option + M.

Paso 4. La máscara se genera según el orden de las capas. Puedes cambiar ese orden en el panel izquierdo para modificar cómo afecta a cada una.

Paso 5. La opacidad de la máscara debe ser mayor que el 0 % para que se muestren sus objetos y efectos.

12.2 Quitar una máscara

Selecciona la máscara y comprueba en el panel izquierdo que has elegido la capa correcta.

Después:

• Haz clic de nuevo en Crear máscara en la barra superior para desactivarla.

• O abre el menú contextual de la capa y selecciona Quitar máscara.