Formato, Estilo y Color General

Una vez que los elementos de diseño – stencils, plantillas, imágenes e iconos – se añaden a la página, se denominan Objetos.

Todos los objetos – Stencils, Iconos e Imágenes – pueden estilizarse y personalizarse en el Panel de Formato – y comparten muchos de los mismos controles de formato.

Las imágenes también tienen herramientas de edición adicionales como recorte, eliminación de fondo y retoque, sobre las que puedes leer en Dar formato, editar y reemplazar imágenes.

En este artículo, te presentaremos el Panel de Formato y te mostraremos cómo personalizar los stencils usando los controles de formato general que se aplican a todos los objetos. También te mostraremos cómo guardar un estilo personalizado para un stencil en particular.

Algunos stencils tienen sus propios controles de formato adicionales específicos para su uso: Notas y Anotaciones, Smart Shapes, Gráficos, Tablas y todos los stencils de Diagrama y Basados en Texto. Cubriremos cada uno de estos casos específicos en los artículos posteriores de esta sección.

Panel de formato

Ve a la Barra Lateral Derecha y haz clic en la Pestaña de Formato. La pestaña se volverá azul y abrirá el Panel de Formato. El Panel de Formato también se abre automáticamente cuando haces doble clic en cualquier stencil que no sea de texto (mientras que hacer doble clic en un stencil de texto abrirá la Ventana de Formato Rápido de Texto).

El Panel de Formato está dividido en Secciones con controles de formato específicos. Las secciones son contraíbles, por lo que hacer clic en el nombre de una sección ocultará o revelará esa sección.

El panel siempre mostrará las secciones predeterminadas que son comunes a todos los stencils: Tamaño y Posición, Rellenos y Trazos, Opacidad, Sombra y Desenfoque.

Si un stencil tiene capacidades de estilizado adicionales específicas para su uso, el panel mostrará una sección dedicada con esas opciones. Cubrimos cada uno de estos casos en los artículos siguientes.

Seleccionar, dimensionar, posicionar, rotar y voltear

Cuando seleccionas un único objeto, el nombre del objeto se muestra en la parte superior del panel, justo encima de sus coordenadas. Esto facilita localizar e identificar ese objeto en el Panel de Esquema.

Cuando seleccionas múltiples objetos, el panel muestra el número de objetos en ese grupo, para ayudarte a confirmar tu selección antes de aplicar cualquier cambio de estilo o transformación.

Los controles de Tamaño, Posición, Rotar y Voltear están agrupados debajo de las coordenadas, y cada una de estas acciones puede realizarse tanto en el panel como en la página.

Tamaño

En la página, usa los controladores de redimensionamiento para cambiar el tamaño del objeto.

En el Panel de Formato, usa las entradas de Ancho y Alto para valores precisos y ajustes finos, y usa las teclas de flecha del teclado si quieres cambiar estos valores de forma incremental.

Bloquea las proporciones de un objeto con el botón Bloquear Relación de Aspecto. Una vez que un objeto está bloqueado, tendrás que desbloquear la relación de aspecto si quieres redimensionarlo en el eje horizontal o vertical.

Posición

En la página, selecciona un objeto y arrástralo a la posición deseada.

En el Panel de Formato, establece la posición del objeto introduciendo las coordenadas exactas en los campos de entrada. La posición del objeto se mide en píxeles de distancia desde los márgenes izquierdo y superior. Puedes usar las teclas de flecha del teclado para cambiar estos valores de forma incremental.

Rotar

En la página, haz clic en el controlador de rotación en la parte superior del objeto y arrastra para rotar.

En el Panel de Formato, introduce el valor de grados en el Campo de Entrada de Rotación. Puedes cambiar el valor usando las teclas de flecha del teclado.

Al hacer doble clic en el controlador de Rotación se restablece rápidamente el Ángulo de Rotación a '0'.

Voltear

Puedes voltear un objeto tanto horizontal como verticalmente.

En la página, selecciona un Controlador de Redimensionamiento y arrástralo a través de la línea central de ese objeto para redimensionar y voltear simultáneamente.

En el Panel de Formato, los Botones de Volteo vertical y horizontal voltean el objeto manteniendo su tamaño y relación de aspecto.

Transformación masiva

Nuestra herramienta de Transformación Masiva te permite dar formato a múltiples objetos simultáneamente. Esta función está habilitada de forma predeterminada y es específica del usuario (es decir, cuando la habilitas o deshabilitas, esa preferencia se aplica a todos tus proyectos).

Una vez que hayas seleccionado los objetos que deseas transformar, puedes aplicar el mismo tamaño (ancho y/o alto) o las mismas coordenadas X o Y. También puedes rotar o voltear masivamente, ya sea horizontal o verticalmente.

Esto ayuda a mantener las cosas ordenadas y organizadas – ya sea que estés trabajando en wireframes, diagramas o pizarras. El tamaño y la posición coherentes hacen que cualquier diseño sea más fácil de leer de un vistazo.

Para usar la herramienta de Transformación Masiva:

1. Verifica el Panel de Formato y asegúrate de que el botón de Transformación Masiva esté habilitado.
2. Selecciona múltiples objetos arrastrando el ratón sobre los elementos o usando Shift + Clic para seleccionarlos individualmente
3. Introduce nuevas dimensiones en las entradas de Ancho/Alto, o nuevas coordenadas en las entradas X/Y.
4. Si quieres deshabilitar la función de transformación masiva, simplemente haz clic en el botón nuevamente.

También puedes aplicar el tamaño o las coordenadas de un objeto al resto de los objetos en la selección:

1. Haz clic en cualquier objeto dentro de una selección para designarlo como objeto de referencia.
2. El objeto de referencia se resaltará con un marco azul grueso.
3. Las dimensiones y coordenadas del objeto de referencia se mostrarán en gris claro en las entradas.
4. Para aplicar cualquiera de esos valores a cada objeto en la selección, simplemente escribe esos números de entrada exactos sobre los grises y presiona la tecla Enter/Return.

Rellenos de color, trazos y degradados

Puedes aplicar cambios de color a Rellenos y Trazos de objetos usando el Selector de Color en la sección de Rellenos y Trazos del Panel de Formato. A medida que añades colores, la lista de Colores del Proyecto en la parte inferior del selector acumulará esas muestras.

Rellenos

Para rellenar un objeto con color, ve a la sección Rellenos y Trazos y haz clic en Color de Relleno para abrir el Popover del Selector de Color.

El Campo de Color acepta los siguientes formatos de color: HEX de 8, 6 y 3 dígitos, RGB, RGBA, HSL, HSLA, LAB, LCH, así como colores con nombre HTML (es decir, red, green, blue, tomato, etc.).

• Selecciona la Pestaña de Muestras para elegir un esquema de color de Moqups Clásico, Material Design, Bootstrap, iOS, HTML, TailwindCSS o colores IBM Carbon Design. Esta pestaña también muestra los colores que ya has utilizado en tu proyecto.

  o

• Selecciona la Pestaña del Selector para crear tus propios colores personalizados.

En ambas pestañas, puedes...

1. Introducir un código de formato de color
2. Ajustar la opacidad del color de relleno
3. Usar el cuentagotas para hacer coincidir un color; para activar el cuentagotas, usa nuestra extensión de Chrome o Firefox.

Trazos

El Trazo hace referencia a la línea del propio objeto.

Para ajustar el color del trazo, ve al Panel de Formato, y en la sección Rellenos y Trazos, haz clic en Color de Trazo. Aquí también puedes establecer la opacidad del trazo.

Debajo de la configuración de color, puedes elegir el Ancho del Trazo y establecer el Estilo de Trazo en Sólido, Punteado o Discontinuo.

Degradados

Los Degradados crean mezclas de colores graduales entre dos o más colores. Se pueden aplicar tanto a Rellenos como a Trazos.

Para aplicar un degradado...

1. Haz clic en el Color de Relleno o Color de Trazo
2. En la parte superior del Popover del Selector de Color, puedes elegir entre tres Tipos de Relleno: Sólido, Degradado lineal y Degradado radial.
3. Para degradados, selecciona el degradado Lineal o Radial.
4. El Control deslizante de Degradado tiene dos Paradas predeterminadas que se pueden mover hacia adelante y hacia atrás para ajustar el punto de inicio y fin del degradado.
5. Haz clic en una Parada para aplicar un color del Campo de Color. La Parada permanecerá azul mientras esté activa. Puedes realizar más ajustes de color a continuación usando los controles deslizantes de Tono u Opacidad, o seleccionando de una gama de muestras de color derivadas del color activo actualmente.
6. Para añadir más paradas, pasa el cursor en cualquier lugar a lo largo del Control deslizante de Degradado hasta que veas el ícono '+'; haz clic en el control deslizante para añadir una nueva parada.
7. Para eliminar una parada, arrástrala hacia abajo hasta que desaparezca.
8. Usa el ícono de Voltear a la derecha del Control deslizante de Degradado para invertir el orden de los colores.

Los controles en la esquina superior izquierda te permiten ajustar el Ángulo del degradado (para Lineal) o el Centro (para Radial). Para mayor precisión, puedes establecer el Ángulo Lineal por grado, o el Centro Radial por coordenadas X/Y en los campos de entrada correspondientes.

El degradado Radial también tiene una opción de Estiramiento que expande el degradado Radial hasta los márgenes del objeto.

Reemplazar colores

Esta función hace posible actualizar rápidamente tu esquema de color a medida que avanzas de wireframes de baja fidelidad a mockups de alta fidelidad – y finalmente a diseños y prototipos pulidos.

Puedes elegir reemplazar un color en todo un Proyecto Completo, en la Página Actual o dentro de una Selección específica de objetos.

Para reemplazar un color en el Proyecto Completo o en tu Página Actual:

1. Deselecciona todos los objetos de la página

2. Expande la sección Reemplazar Colores en el Panel de Formato

3. Selecciona Página Actual o Proyecto Completo

4. Marca las casillas para elegir Rellenos, Trazos o Color de Texto

5. Haz clic en el color del proyecto que deseas reemplazar

6. Selecciona el color de reemplazo de

   • Colores del proyecto
   • Muestras
   • Selector
   • Introduciendo un código hex

Para reemplazar un color dentro de una Selección de objetos:

1. Selecciona uno o más objetos

2. Expande la sección Reemplazar Colores en el Panel de Formato

3. Selecciona Página Actual o Proyecto Completo

4. Marca las casillas para elegir Rellenos, Trazos o Color de Texto

5. Haz clic en el color del proyecto que deseas reemplazar

6. Selecciona el color de reemplazo de

   • Colores del proyecto
   • Muestras
   • Selector
   • Introduciendo un código hex

Opacidad, sombras y desenfoque

Opacidad

El control deslizante de Opacidad ajusta la Opacidad global de un objeto completo o grupo de objetos. Si quieres personalizar la opacidad con mayor precisión, también puedes ajustar la opacidad del Trazo (ver arriba), junto con la Opacidad global, para un resultado visual combinado.

Sombra

Para añadir una Sombra a un objeto, navega al Panel de Formato y abre la sección Sombra.

Habilita la sombra para establecer el color, la opacidad, el ángulo, la distancia y el tamaño de la sombra.

Desenfoque

Para añadir un Desenfoque a un objeto, navega al Panel de Formato, abre la sección Desenfoque y habilita el control deslizante de Desenfoque. La función de Desenfoque es particularmente útil al simular una ventana emergente o modal.

Esquinas redondeadas

Puedes redondear las esquinas de un objeto tanto desde el Panel de Formato, en la sección de Esquinas Redondeadas, como directamente en la página, usando los controladores personalizados del objeto.

Para redondear esquinas desde el Panel de Formato:

• Usa la sección Esquinas Redondeadas e introduce valores en las entradas. De forma predeterminada, los cuatro campos de entrada están sincronizados. Al introducir un valor en una entrada, ese valor se propagará a las otras esquinas.
• Para introducir valores diferentes para cada esquina, deselecciona el ícono Sincronizar todas las esquinas ubicado entre las cuatro entradas.
• Habilita Escalar Radio si quieres que las esquinas redondeadas se escalen proporcionalmente a medida que redimensionas un objeto.

Para redondear esquinas directamente en la Página:

• Para redondear todas las esquinas simultáneamente, arrastra cualquiera de los controladores personalizados azul claro hacia el centro del objeto.
• Para redondear una esquina específica (solo el stencil Rectángulo) mantén presionado Option/Alt y arrastra el controlador relevante hacia el centro.

Copiar y pegar estilos

Una vez que hayas personalizado un objeto, puedes aplicar esa personalización a otro objeto o grupo de objetos.

Para copiar y pegar estilos:

1. Selecciona el objeto del que quieres copiar los estilos
2. Haz clic derecho y elige Copiar Estilos o presiona Alt/Option + C
3. Selecciona el objeto donde quieres aplicar esos estilos
4. Haz clic derecho y elige Pegar Estilos o presiona Alt/Option + V

Copiar propiedades

Si quieres copiar aspectos específicos del formato de un objeto, puedes usar la herramienta Copiar propiedades.

Para cada una de las secciones de estilo dentro del Panel de Formato, encontrarás un botón en la esquina superior derecha que copia la configuración de esa opción de formato en particular (es decir, Texto, Opacidad, Relleno, Sombra, etc.).

Para copiar propiedades de un objeto:

1. Selecciona el objeto del que quieres copiar sus propiedades
2. Abre el Panel de Formato y encuentra la sección de formato que quieres copiar
3. Haz clic en el botón Copiar propiedades
4. Selecciona el objeto donde quieres aplicar esos estilos
5. Haz clic derecho y elige Pegar Estilos o presiona Alt/Option + V

Guardar estilos personalizados para stencils

Cuando guardas un estilo personalizado para un stencil, cada vez que añades un tipo de stencil particular a la página, ese objeto adoptará tu estilo personalizado.

Para guardar un estilo personalizado para un tipo de stencil:

1. Estiliza un objeto stencil en la página usando el Panel de Formato
2. Selecciona ese objeto
3. Haz clic derecho para abrir el Menú Contextual
4. Elige Guardar Estilo Personalizado para ese tipo de stencil
5. Todos los objetos posteriores de ese tipo reflejarán ahora ese estilo

Para eliminar un estilo personalizado de un tipo de stencil:

1. Selecciona el objeto stencil en la página
2. Haz clic derecho para abrir el Menú Contextual
3. Elige Borrar estilo personalizado para ese tipo de stencil

Para eliminar estilos personalizados de todos tus tipos de stencils:

1. Selecciona el objeto stencil en la página
2. Haz clic derecho para abrir el Menú Contextual
3. Elige Borrar todos los estilos guardados

Preguntas y respuestas

¿Cómo puedo ver ejemplos de stencils que ya han sido formateados – ya sea en una página o dentro de un proyecto?

Nuestro sitio web tiene toda una sección dedicada a Plantillas prefabricadas. Allí encontrarás ejemplos y casos de uso diseñados profesionalmente en cuatro categorías: Wireframes y Mockups, Mapeo y Diagramación, Gráficos, Tablas e Infografías, y Planificación e Ideación. Al hacer clic en cualquiera de estas plantillas, se abrirán dentro de la aplicación Moqups, y te permitirán experimentar, personalizar y guardarlas.