Propiedades

Producto

✍️

Nota

Ten en cuenta que Phase recibe pequeñas actualizaciones y mejoras constantemente. Nuestros tutoriales pueden ser un poco diferentes de la aplicación actual.

El panel de propiedades es nuestra puerta de entrada a la precisión y el control. Puedes usarlo para ajustar elementos, modificar su apariencia y configurar interacciones con facilidad. Las propiedades disponibles pueden variar según el elemento que hayamos seleccionado.

Posición y Tamaño

1. Alineación y Distribución Rápida

Haz clic en estos íconos para ajustar la posición de un elemento en relación con el diseño total o el contenedor en el que se encuentra actualmente.

Si se seleccionan múltiples elementos, se pueden distribuir vertical u horizontalmente con los íconos de la derecha.

2. Posición

Mueve un elemento para que se alinee exactamente con el lado o el centro en el eje X o Y. Para saber dónde está el diseño, referencia esto o cambia los números para moverlo.

3. Tamaño

Ve cuán grande es un elemento o ajusta rápidamente su longitud y ancho. El ícono de "Bloqueo de radio" a la izquierda del ancho se puede activar para que, al modificar una dimensión, la otra cambia proporcionalmente.

4. Rotación

Gira un elemento para verlo desde un ángulo diferente. Esto se puede modificar directamente o rotando el elemento desde las esquinas de su cuadro delimitador, arrastrando el ícono de flecha curva.

5. Radio de Esquina

Redondea las esquinas de una forma ajustando este valor a cualquier número mayor que 0.

Desbordamiento y Puntos de Ajuste (Nodos)

El panel de propiedades cambia ligeramente según el tipo de elemento que se está modificando.

Al ajustar un Contenedor, los ajustes de la función desbordamiento aparecen en el panel de propiedades debajo de los controles de posición y tamaño.

De manera similar, si estamos ajustando un trazo, las opciones de los nodos se vuelven disponibles.

Para más información, visita las páginas correspondientes de las funciones mencionadas y así obtener instrucciones detalladas sobre cómo utilizarlas.

Transformación

El panel de origen se puede expandir o contraer, lo que nos permite ahorrar espacio en el panel de propiedades si no usamos frecuentemente las funciones dentro de él.

1. Origen

Una de las funciones más comunes en el panel de transformación está relacionada con la función Origen, también conocido como el punto de anclaje. Contamos con una sección dedicada a la función Origen, que tiene detalles sobre cómo ajustar y utilizar sus características.

2. Escala

Utiliza la escala para cambiar las dimensiones de un elemento estirándose a lo largo de los ejes X y Y. Esto es similar a editar el ancho y la altura directamente, pero la diferencia es que escalar puede crear abultamientos y segmentos asimétricos en líneas y bordes.

3. Inclinación

Dale una inclinación a un elemento ajustando su valor de Sesgado. Ajusta la inclinación ya sea horizontalmente (X) o verticalmente (Y) dándole un ángulo proporcional al campo respectivo.

Colores y Borde

1. Opacidad

El selector de porcentaje de opacidad establece cuán opaco o transparente es el elemento. La selección desplegable establece el Modo de Mezcla, que es cómo el color del elemento afecta a las formas que están detrás de él. Los modos de mezcla se describen con más detalle a continuación.

2. Rellenos

Cada capa de relleno añade color en el área de un elemento. Haz clic en el ícono de (+) para añadir una capa, y podemos ajustar el valor del color hexadecimal, así como la opacidad.

Cuando hacemos clic en el cuadro de color, aparece la ventana del selector de color.

Desde el selector de color, es posible elegir cualquier color que se ajuste al estilo de un proyecto determinado. Para seleccionar rápidamente un color que ya existe en el lienzo, utiliza la herramienta cuentagotas.

Por defecto, los valores de color se muestran según sus valores hexadecimales (HEX). Cambia el modo de color haciendo clic en el menú desplegable y elige entre RGB, HSL o HSB.

Los valores se pueden modificar directamente debajo del menú desplegable, y de manera similar, la opacidad también se puede editar.

Los rellenos son colores sólidos cuando se crean por primera vez, pero un degradado se puede editar haciendo clic en los botones en la parte superior de la pantalla. Los degradados se explican con más detalle más adelante en esta página.

3. Bordes

Los bordes, también conocidos como contornos, son colores adicionales que se pueden añadir al exterior de un elemento. Al igual que con los Rellenos, haz clic en el ícono de

para añadir un borde. Se pueden aplicar los mismos ajustes de color y opacidad que con los Rellenos, y también se pueden usar los mismos degradados.

El Ancho del Borde

se puede cambiar debajo del porcentaje de opacidad, en el lado derecho.

Además, es posible cambiar la posición del borde en relación con los límites exteriores de la forma.

Haz clic en el ícono con los 3 puntos para revelar un conjunto de opciones especializadas para los bordes. Estas opciones se explican en la sección de Detalles del Borde.

4. Efectos

En la parte inferior del panel de propiedades se encuentra la opción efectos. Por ahora, el único efecto en Phase es recortar trazado. Con este efecto, es posible revelar u ocultar porciones de una forma o línea, dando la ilusión de movimiento o transformación.

Recortar trazado es una función muy útil para animaciones, por lo que hemos escrito un artículo detallado sobre ello. Consulta el artículo sobre recortar trazado para obtener más información.

Detalles del Borde

1. Join Shape

Los vértices que conectan las líneas son puntos de unión, y tanto la apariencia como el tamaño de esos puntos se pueden ajustar.

Ángulo de Miter: La opción predeterminada de punto de unión hace que las líneas se encuentren en un ángulo recto, creando una unión puntiaguda.
Redondeado: Se crea una esquina curva donde se encuentran las líneas. Esta opción se usa a menudo para crear un aspecto más suave y orgánico.
Biselado: Las líneas se encuentran en un ángulo, y la esquina se bisela o aplana. Esta opción se usa comúnmente para crear una apariencia limpia y moderna.

✍️

Nota

La unión de formas no afecta a los óvalos y trazos que consisten en dos puntos.

2. Línea punteada y 3. Espacio

El borde puede volverse discontinuo ajustando tanto los valores de Línea punteada como Espacio. Si alguno de los valores es 0, el borde permanece completo.

El valor de Línea punteada controla la longitud de los segmentos de línea, y el valor de Espacio afecta el tamaño del espacio vacío entre los segmentos.

4. .Ángulo de Miter

Esta configuración nos permite combinar las formas de unión miter y biselado.

Cualquier unión que tenga un ángulo menor que el valor establecido aquí se biselará. Por otro lado, cualquier unión con un ángulo superior al valor utilizará una forma de inglete 45°.

5. Extremos

Extremo Recto	Extremo Redondeado

Se puede controlar la apariencia de los extremos de nuestros trazos.

Extremo Recto: La línea se corta exactamente en el punto final con un borde rectangular.
Extremo Redondeado:Un círculo se extiende desde el punto final con un diámetro igual al ancho del borde, dando al extremo un aspecto curvado.

✍️

Nota

La configuración de extremos solo afecta a trazos que tienen puntos finales salientes.

Degradados

Estos son efectos visuales que implican transiciones suaves entre dos o más colores. En lugar de un cambio brusco de un color a otro, un degradado crea una mezcla o progresión gradual de colores.

1. Tipos

Las formas al frente ocultan las formas detrás tanto como su opacidad lo permita.

Lineal	Radial	Angular	Diamante

Los degradados añaden profundidad, dimensión e interés visual a nuestros diseños. En Phase, los podemos encontrar en el menú de color, cada uno representado por un ícono único:

Sólido: El área está completamente rellenada con un solo color; no se aplica degradado.
Lineal: Un degradado fluye en una dirección.
Radial: Un degradado se extiende igualmente desde el centro de la forma.
Angular: Una línea se extiende desde el centro del elemento y un degradado gira desde esa línea alrededor del punto central.
Diamante: Un degradado se extiende desde el centro con un peso adicional en cuatro direcciones para formar una forma de diamante.

2. Ubicación del Punto de Degradado

La función de Ubicación del Punto de Degradado ofrece múltiples métodos para un control preciso, permitiéndonos ajustar nuestros degradados con flexibilidad. Aquí tienes una guía paso a paso para sacar el máximo provecho de esta funcionalidad:

Selecciona un elemento en el lienzo.
Haz clic en el cuadro de color en la sección de 'Relleno'.
Elige un tipo de degradado.
Mueve el punto más a la izquierda en el control deslizante para establecer el color de inicio. Esto determina dónde comienza el primer color en el degradado.
Mueve el punto más a la derecha para establecer el color final. Esto determina dónde termina el último color en el degradado.
Haz clic en cualquier lugar del control deslizante para añadir puntos intermedios.

Esta funcionalidad ofrece opciones de control versátiles. Puedes arrastrar el punto a lo largo del control deslizante o utilizar el escalado interactivo haciendo clic y arrastrando los indicadores de porcentaje hacia la izquierda o hacia la derecha. Además, los puntos más grandes en los elementos se pueden arrastrar directamente, ajustándose dinámicamente junto con el movimiento del control deslizante.

3. Degradado Invertido

Este botón invierte el orden de los puntos de color, lo que resulta en un efecto visual donde los colores transicionan en la dirección opuesta. Afecta a cada degradado de manera diferente.

Linear Gradient	Radial Gradient	Angular Gradient	Diamond Gradient

Los degradados invertidos ofrecen a los diseñadores una herramienta versátil para personalizar y experimentar con sus diseños, fomentando la exploración creativa y el descubrimiento de efectos visuales únicos. Pueden ser empleados de manera estratégica para cambiar los puntos focales, como se ve en un degradado radial donde invertirlo dirige la atención hacia el centro, creando un énfasis distintivo. Los diseñadores a menudo aplican degradados invertidos a elementos de fondo para mejorar el diseño general.

Modos de Mezcla

Los modos de mezcla son herramientas dinámicas que desbloquean una gama de efectos transformadores en los diseños. Estos elementos versátiles se pueden usar para realzar el contraste, introducir mezclas vibrantes y elevar el impacto visual general de cualquier diseño con un toque creativo. Explora la diversa gama de estilos para aportar matices y sofisticación a los proyectos.

Normal

Las formas al frente ocultan las formas detrás en la medida en que su opacidad esté configurada.

Oscurecer

Si la capa frontal es más oscura que la capa de abajo, reemplaza los colores por la diferencia en luminosidad entre las dos.

Aclarar

Es lo opuesto de Oscurecer; si la capa frontal es más clara que la capa de abajo, reemplaza los colores por la diferencia en luminosidad entre las dos.

Saturar Color

En el área de la forma frontal, el contraste de color aumenta y luego las capas se multiplican entre sí para obtener tonos más oscuros y saturados basados en una cantidad exagerada de diferencia de color.

Sobreexposición de Color

Invirtiendo las operaciones de Saturar Color, esto invierte los colores, multiplica su luminosidad y reduce su contraste. Los colores resultantes son más claros y menos saturados, pero los tonos medios son más saturados en relación con los reflejos.

Multiplicar

Multiplica la luminosidad de las capas frontal y posterior, y luego reemplaza las capas de atrás por el producto de los colores. Esto resulta en colores más oscuros.

Superponer

El opuesto de Multiplicar, esto invierte los colores y luego multiplica su luminosidad. Las capas se reemplazan por el producto de los colores, resultando en colores más claros.

Superposición

La forma frontal aparece sutilmente sobre las capas detrás de ella. Esto se realiza aplicando dos efectos combinados: si el color frontal es más oscuro, se usa Multiplicar a media intensidad, y si el color frontal es más claro, se aplica Superponer a media intensidad.

Luz Suave

Una versión más suave de Superposición, este efecto aplica valores a mitad de camino entre Aclarar y Oscurecer en las capas detrás de la forma frontal.

Luz Fuerte

Para crear un efecto de Superposición más intenso, los cálculos del cambio de color se basan en los productos combinados de los estilos Multiplicar y Superponer. Esto resulta en un ajuste de mayor contraste.

Diferencia

Los valores de color RGB de las capas inferiores se restan de la capa superior. Si la forma superior es de un color claro, las capas inferiores se invierten, y si la forma superior es muy oscura, entonces ocurre un cambio mínimo en el color inferior.

Exclusión

sta es una versión atenuada del efecto Diferencia. En los extremos del espectro de blanco y negro, no hay cambio o se invierten los colores, respectivamente.

Sin embargo, a medida que el color de la capa superior se acerca al gris, el color resultante también se aproxima al gris. Típicamente, este estilo tiene un efecto de desaturación suave.