¡Las herramientas de figuras de Clipstudio son muy útiles para dibujar formas e interfaces!

En este tutorial, le mostraré cómo usar herramientas de figuras para dibujar interfaces de monitoreo, como:

• Radar

• GPS

• Onda de sonido

• Onda sinusoidal

 

¡¡Entonces anímalo para obtener este resultado genial !!

¡Empecemos!

Tutorial en video

Diseño de la interfaz de pantalla

Para diseñar la pantalla de la interfaz, saber cómo funciona le dará detalles más realistas a su diseño, puede encontrar la referencia en Internet o diseñar la suya propia basada en el instrumento real.

 

El propósito principal de la pantalla de la interfaz es mostrar la información monitoreada por los instrumentos. Por lo que debes prestar atención a la información que mostrará.

 

 

El radar es un instrumento que envía la onda de señal y la capta cuando se refleja en algún objeto para detectar la posición y la distancia (desde el radar).

 

El GPS es a lo que nos estamos acostumbrando en nuestros teléfonos, simplemente muestra la posición en el mapa desde la vista superior. Es posible que no necesite saber cómo funciona porque ya sabe cómo muestra su información.

Aquí les doy el diseño rápido basado en los instrumentos reales.

El diseño proporcionará datos como el instrumento real.

Radar: posición del ángulo (grados), marca del objeto y distancia desde el centro

GPS: Obstáculos en el mapa y distancia del punto de referencia

 

 

 

 

Dibujar la interfaz con herramientas de figuras: Radar

Cuando el diseño rápido esté listo, ¡dibujémoslo con herramientas de figuras!

 

Habilite la cuadrícula, vaya a [Ver> Cuadrícula]

 

Si la cuadrícula predeterminada no le parece clara, vaya a [Archivo> Preferencias] para cambiar su color.

En la pestaña [Regla / Unidad], puede cambiar el [Color de la línea de la cuadrícula] y el [Color de la línea divisoria de la cuadrícula]

También puede ajustar la opacidad de la cuadrícula en este menú.

 

Ahora la cuadrícula tendrá un aspecto más claro.

 

 

Ajuste la escala de la cuadrícula mediante el menú [Ver> Configuración de la barra de cuadrícula / regla]

 

Establezca el punto de inicio en [Centro], esto hará que la regla comience a alinearse en 0 en el medio del lienzo.

 

Ajuste el espacio de la cuadrícula si la configuración predeterminada es demasiado pequeña o demasiado grande para usted, si la cuadrícula es demasiado pequeña, será demasiado difícil ver la posición para comenzar a dibujar la figura

(aquí lo configuro en 200 para un tamaño de lienzo de 2000 * 2000 px).

Comencemos con la escala de distancia.

Crea una nueva capa vectorial

En la subherramienta [figura], seleccione elipse y desactive el suavizado

Habilite [Ajustar a la cuadrícula]

Dibuje el círculo comenzando en un punto de la cuadrícula en el borde, el círculo se ajustará a la cuadrícula

Con una cuadrícula, puede ver fácilmente el tamaño del círculo y si se alinea con el punto central del lienzo o no.

(puede mantener presionada la tecla [Mayús] cuando arrastra, para hacer el círculo con la proporción simétrica)

 

Para el círculo más pequeño, puede mover el punto de inicio a la siguiente intersección de la cuadrícula, la parte superior e izquierda del círculo se alinearán con la línea de la cuadrícula. Esto hace que sea muy fácil ajustar el círculo.

Esta es una referencia al punto de inicio de todos los círculos de mi diseño.

 

Divido el círculo interior con un espacio menos pequeño, por lo que uso el punto entre dos intersecciones de la cuadrícula (en las líneas divisorias de la cuadrícula)

 

Para cambiar el grosor de la línea del círculo, use la herramienta de objeto y seleccione el círculo.

Y en el panel de propiedades de la herramienta, puede ajustar el grosor de la línea en la opción [Tamaño del pincel]

 

 

Para colocar la escala de medición en el círculo, separe la escala de las secciones de grados más grandes y luego recórtela en las más pequeñas. (aquí utilizo espacios de 10 grados)

 

Cree una nueva capa para notar que el valor facilitará el trabajo

También noto las escalas de distancia.

Dibuja la línea separada para la escala,

Crea una nueva capa vectorial y dibuja un círculo que cubra todos los diseños.

Este círculo nos ayudará a rotar alrededor del punto central del dibujo.

Utilice el [bolígrafo Mili] o el [bolígrafo de relleno en mono] en la subherramienta [Marcador] para dibujar la línea de división.

Establezca el suavizado en [Ninguno]

 

Dibuja la línea de división de 90 y 180 grados.

Duplique la capa arrastrándola al icono de nueva capa.

Seleccione la capa y cree una transformación libre (presione [Ctrl + T] o vaya a [Editar> Transformar> Transformación libre])

 

Luego, en el panel de propiedades de la herramienta, cambie el ángulo de rotación a 30 grados

 

Confirme la transformación presionando [Enter]

 

Repita el paso, copie la capa nuevamente y gire a otros 30 grados

 

Obtendremos líneas de pasos de 30 grados.

 

Mantenga presionada la tecla [Mayús] y seleccione todas las capas, haga clic con el botón derecho y combínelas

Para pasos de 10 grados, duplico la capa nuevamente y repito los pasos, pero en lugar de 30 grados, solo giro 10 grados.

Opcional: utilice la herramienta [Objeto] y establezca el grosor y el color de la línea en el panel de propiedades de la herramienta.

Cuando termine, combine la capa de líneas de 10 grados juntas

 

Use el borrador duro, habilitó el borrador vectorial con el modo [borrar hasta la intersección]

 

Borre también el círculo exterior, obtendrá la separación de línea para la escala.

Repita el paso también con una separación de línea de 30 grados, luego cambie el color con la [herramienta Objeto]

Para el uso alternativo de crear un círculo sobre el dibujo, también puede usar la herramienta de selección, también se ajustará a la cuadrícula

 

Copie la capa de escala de 10 grados y dibuje [Elipse] sobre el dibujo.

 

Crea una transformación y gírala a 5 grados

¡Repítelo de nuevo y la escala está lista!

Nota: La desventaja de la selección que el círculo de proxy es que es posible que deba volver a dibujar la selección una y otra vez, pero puede usar lo que crea que es más fácil para usted :)

 

Creo líneas más largas en una escala de 30 grados copiando la capa, creo una transformación libre y ajusto un poco su tamaño

 

(Asegúrese de que [cambiar el ancho del vector] no esté marcado)

 

Para el número de escala, escríbalo con la herramienta de texto

Luego crea una nueva capa y dibuja el círculo que cubre el número y el dibujo completo.

Copie solo el texto y seleccione tanto el texto como la capa circular

Cree una transformación libre y gírela a 90 grados, luego edite el número

Luego copie ambas capas y repita los pasos con un giro de 90 grados

Repita los pasos nuevamente con 30 grados de rotación, ahora puede tener un número para todos los pasos de 30 grados

Ponga todos los números en una carpeta y cópielos nuevamente para una escala más pequeña

Ajusta un poco el tamaño de la fuente

Cree una transformación libre para la carpeta y ajústela al dibujo, asegúrese de que el centro de la transformación esté en el centro del dibujo.

Gírelo a la posición de la escala

Copiar carpeta y rotar nuevamente

Luego edite el número al grado de los pasos

Puede agrupar el número seleccionándolos y [clic derecho> Fusionar capas seleccionadas]

Aún le permitirá editar el número dentro del grupo con la herramienta [Objeto] y [Texto]

Opcional: ajuste un poco la opacidad de la escala pequeña para que la escala grande parezca más emergente

Agregue también el número de la línea de distancia

La balanza esta lista

 

Siguiente paso, crearemos el escaneo al radar.

Cree una nueva capa y dibuje un círculo blanco que cubra el área interior

 

¡IMPORTANTE !: apague el anti-aliasing

 

Convierta la capa en un objeto de archivo. Haga clic con el botón derecho en la capa [Objeto de archivo> Convertir capa en objeto de archivo]

El área debe establecerse en [Área de dibujo]

Abra el objeto de archivo.

Habilite y configure la cuadrícula para que comience desde el centro con un espacio un poco grande, para que pueda ver fácilmente el centro del círculo

 

Utilice la herramienta [Línea recta] para crear el área del degradado.

¡IMPORTANTE !: también apague el anti-aliasing aquí

 

 

Bloquear la capa transparente

 

Seleccione el gris -95% en la paleta de colores y dibuje una línea arrastrando desde el punto central hasta el borde

Seleccione el gris -50% y arrastre otra línea, comience desde el centro también y haga un espacio de ángulo entre la primera línea

Dibuja otra línea seleccionando el color gris más claro y comienza desde el punto central

(hay 4 líneas aquí, pero la última puede ser difícil de notar porque utilizo gris -5%)

 

En la pestaña de degradado, seleccione el degradado de forma libre, herramienta [Pintura normal]

 

Establezca la [Tolerancia] en 0

 

(si no se establece la tolerancia en 0, el degradado se filtrará cuando el valor del color sea demasiado claro, por ejemplo: en gris-5%)

 

Haga clic para llenar el área, creará el degradado por el valor de 2 líneas

 

Llena toda la otra área

También hay alguna opción para elegir la cantidad de gradiente entre 2 líneas.

 

Por ejemplo, [La sombra más clara] dará más proporción en la línea más clara que en la línea más oscura.

 

También puede ajustar la cantidad del valor ajustando el gráfico

Rellena toda el área, el resultado se verá así

Es posible que vea que la mayoría de las partes son grises, excepto algunas áreas con -5% de color gris.

Ajuste el brillo para que sea blanco, vaya a [Editar> Corrección tonal> Brillo / Contraste]

El área con gris claro se volverá blanca.

Elimine el área no deseada, seleccione [Polilínea] en la subherramienta [Área de selección]

 

Cree una selección que atraviese el área más oscura y el área blanca

 

Y elimínelo ([Ctrl + D] para anular la selección de la selección)

Conviértalo en una parte transparente, vaya a [Editar> Cambiar brillo a opacidad]

Guarde el archivo y vuelva al dibujo principal. Aparecerá automáticamente

(si no aparece, haga clic con el botón derecho en la capa [Objeto de archivo> Actualizar objeto de archivo])

Cambie el color de la capa haciendo clic en este icono en el panel de capas (o habilítelo en el panel de propiedades de la capa)

¡Establece el color en verde y el radar barrendero está listo!

 

Al convertirlo en un archivo de objeto, tendrá el límite de capa del lienzo del objeto.

Simplemente puede girarlo hacia el centro del radar.

 

Agregar objetos en la pantalla del radar

 

Cree una nueva capa vectorial y dibuje el icono de los objetos en el radar con la [Línea recta] o [Línea poligonal] en la subherramienta de la figura.

 

Utilice la herramienta [Objeto] para cambiar su tamaño y moverlo a la posición preferida.

Puede copiar y pegar el objeto seleccionado con [Ctrl + C] y [Ctrl + V]

El objeto copiado se colocará sobre el objeto original, se moverá a otra posición.

 

¡Cambie el color de la línea con la herramienta [Objeto] y listo!

Dibujar la interfaz con herramientas de figuras: GPS

Realice un boceto rápido del mapa que vamos a dibujar.

El área resaltada representará el terreno más alto en el mapa.

 

Recomiendo alinear la esquina del boceto con la línea de la cuadrícula, será fácil dibujar la cuadrícula del mapa en el siguiente paso

Dibuja el borde con la herramienta [Rectángulo]

Crea una nueva capa vectorial y dibuja la cuadrícula.

Hay varias formas de dibujar la cuadrícula, esto es lo que me gusta usar.

 

1. Dibuje con la herramienta [Rectángulo], hágalo más grande que el borde del marco

2. Dibujarlo con la subherramienta [Polilínea], dibujarlo continuamente cruzando el borde del marco.

Cuando termine, cree una selección un poco más grande que el borde del marco.

Haga clic en el icono inverso (o [Ctrl + Mayús + i]) para invertir la selección y eliminar el área no deseada del dibujo de la cuadrícula.

 

Utilice la herramienta [Objeto] para ajustar el tamaño de la línea.

 

Puede seleccionar las líneas, cortarlas con [Ctrl + X] y pegarlas en otra capa vectorial para separarlas y ajustar la opacidad por separado.

 

Este es el resultado

Agregue también el número para que se vea más realista

Cree una nueva capa ráster y dibuje el mapa con la herramienta [Relleno de lazo], al ajustarlo a la cuadrícula, creará un aspecto de píxel genial.

 

Dibuja primero el área resaltada

 

Luego dibuja otra área en una nueva capa, ajusta la capa [Opacidad] hacia abajo para ver la diferencia entre las 2 capas

Opcional: agrego el punto de referencia en el medio de la imagen, ¡y listo!

Dibujar la interfaz con herramientas de figuras: ondas

Para la onda de sonido, modificaré el pincel [Lápiz texturizado] para crear la onda de sonido.

 

Haga clic en el icono de detalle de la subherramienta para editar el pincel

 

Aquí están los pasos de configuración

 

1. Desactive el suavizado

 

2. Cambie el espacio al modo [Fijo] y agregue más espacio.

3. En la opción de la punta del pincel, cambie el grosor del pincel a 1000 con la dirección [Horizontal]

4. Establezca la dinámica de espesor en [Aleatorio] con un valor mínimo de 0 (haga clic en el icono pequeño detrás de la barra de configuración)

5. Desactive la dinámica del ángulo y cambie el ángulo a 90

El cepillo está listo para usar.

Registre el pincel en el ajuste preestablecido en el panel de detalles de la subherramienta, pestaña [Forma del pincel]

Cree una nueva capa vectorial y dibuje una línea recta con la subherramienta [Polilínea]

Haga clic para hacer varios puntos de control en la cuadrícula.

Haga doble clic para terminar de dibujar

 

Seleccione la línea con la herramienta [Objeto] y en el panel de detalles de la subherramienta, en la pestaña [forma del pincel], seleccione el pincel ondulado que creamos

Ahora obtienes una onda de sonido muy fácil

En la subherramienta [Línea correcta], use la herramienta [Ajustar ancho de línea] con la opción [Ampliar escala].

Haga clic en la línea para crear una amplitud diferente a la onda.

 

Para la onda sinusoidal, la dibujo con la herramienta curva Bézier.

Cree una nueva capa ráster y seleccione [Curva de Bazier] en la subherramienta [Figura]

 

Haga clic y arrastre para crear un brazo para el primer punto de control

Luego haga clic en el punto medio de la ola, creará una curva

(la distancia en el área vertical es de 6 bloques)

 

Haga clic y arrástrelo para reflejar con la primera curva, luego haga doble clic para confirmar la línea

 

Acerque y borre el área de la punta tanto en el punto inicial como en el final

Convierta la onda en la capa de material de imagen, haga clic derecho en la capa y [Convertir capa]

Colóquelo en la capa de material de imagen

 

 

Nota: también puede convertirlo en objeto, será fácil ajustar el ancho de la tinta más adelante.

 

Seleccione la capa con la herramienta [Objeto] y habilite la opción de mosaico y configure el modo de repetición

Desactive [Mantener relación de aspecto] y podrá estirarlo o comprimirlo.

Para fijar la onda en el área de visualización, dibuje la selección del rectángulo en el área que prefiera,

luego haga clic derecho en la capa [Máscara de capa> Máscara fuera de la selección]

¡Dibuja un borde para la ola y listo!

Para aplicar a la imagen principal, coloque todas las capas en una carpeta

Luego cópialo y pégalo en la imagen.

 

Seleccione la carpeta de capas y cree una transformación. Luego muévalo a la posición preferida

Puede cambiar el modo a sesgar, para alinearlo con el ángulo de la pantalla

Si alguna línea es demasiado delgada cuando se coloca en su posición,

Puede agregar el borde con el mismo color para hacer líneas más gruesas.

 

Animando las interfaces de monitoreo

¡En esta parte encantaremos el panel con sencillos pasos de animación!

 

En el panel [Línea de tiempo], haga clic en el icono [Nueva línea de tiempo]

(mostrar este panel por menú [Ventana> Línea de tiempo])

 

Aquí está la configuración básica para la animación en bucle que es compatible con Clipstudio Pro

Velocidad de fotogramas: 8 y tiempo de reproducción: 24

Usaremos esta configuración para todo el panel, comencemos con la animación de radar.

 

Seleccione el objeto de radar que preparamos y habilite el fotograma clave de la capa

 

Establezca el nuevo modo de fotograma clave en [Interpolación lineal]

Luego cree un nuevo fotograma clave en el fotograma 0 y 24

Cambie a la herramienta [Objeto] y haga clic en el objeto.

En [Ángulo de rotación], establezca el valor en -360.

 

Luego arrastre el fotograma clave un poco hacia atrás para eliminar el espacio entre el bucle

 

¡¡Esto hará que el radar se mueva !!

Opcional: para encantar la apariencia, también puede agregar el efecto de crecimiento en el objeto en el radar cuando también fue barrido.

Para hacer este efecto, cree un círculo de degradado de la misma manera que trabajamos con el barrido del radar, pero aumente el área oscura

Luego aplica efecto de desenfoque

Conviértalo en el archivo de objeto o la capa de material de imagen y luego configure el color de la capa en verde y verde más oscuro para el color activo e inactivo

Cree la selección desde la capa del símbolo, haga clic con el botón derecho y [Selección de la capa> Crear selección]

Luego enmascarar fuera de la selección

Para un objeto de animación con máscara, debe hacer clic en la miniatura de la capa para asegurarse de que esté activa con la capa, no con la máscara

Luego repita el paso de animar el barrido del radar (con el mismo valor), para que se muevan juntos

Para el mapa GPS, coloco la animación de enfoque como un círculo que se encoge en el centro de la imagen.

Dibuje un círculo en el medio de la imagen, conviértalo en una capa de material de imagen, luego habilite el fotograma clave de la capa

En el primer fotograma clave, aumente su tamaño hasta que sea más grande que el fotograma.

Y en el último fotograma clave, cambie su tamaño hasta el punto central

Luego colóquelo en el marco con máscara de capa

 

Haga una selección de rectángulo en el área del mapa

 

Deshabilite el fotograma clave de la capa, luego enmascare la selección exterior

Habilite el fotograma clave de la capa de nuevo y listo.

Para la animación de ondas sonoras, usaremos el método fotograma a fotograma.

Crea una nueva carpeta de animación

Pon la ola que creamos dentro de la carpeta de animación.

Luego haga clic derecho en la línea de tiempo y configúrelo para que aparezca en el marco

 

Utilice la herramienta [Ajustar ancho de línea] en la subherramienta [Corregir línea] para restablecer la línea

Utilice el modo [Fijar ancho] y [Procesar toda la línea]

 

Cambie el nombre de la capa a "01" y copie la capa, automáticamente se llamará "02"

 

Configurarlo para que aparezca en la línea de tiempo

 

Utilice el modo [Escalar el ancho] y deshabilite la opción [Procesar toda la línea] para ajustar la línea.

Repita los pasos para otro fotograma clave y listo.

Para la onda sinusoidal, debemos verificar el patrón donde la onda se repite

Para animarlo, simplemente habilite el fotograma clave de la capa, agregue el fotograma clave inicial y final.

Luego, en el último fotograma clave, mueva el objeto a su posición de repetición

Nota: mantenga presionada la tecla [Mayús] cuando se mueva le permitirá moverlo en alineación horizontal desde su posición anterior

Aplica la interfaz animada a tu arte

Antes de reunir todo, debe recortar el lienzo del archivo de interfaz y eliminar la capa de papel.

 

Para recortar fácilmente la imagen, haga una selección con la herramienta de rectángulo para cubrir toda el área de dibujo, luego [Editar> Recortar]

 

Elimina la capa de papel y está listo.

En el archivo principal, cree una nueva línea de tiempo con la misma configuración que el archivo de visualización (8 fotogramas por segundo / tiempo de reproducción de 24 fotogramas)

 

Luego importe la pantalla como objeto de archivo, vaya a [Archivo> importar> Crear objeto de archivo]

 

Puede ajustar su ángulo configurando el modo en la herramienta [Objeto] en [Inclinar]

Enmascare o reordene la capa para obtener el resultado correcto, ¡y listo!

Para el aspecto de holograma de la pantalla, consulte mi antiguo tutorial sobre cómo crear el efecto de holograma:

¡Espero que tengas algunas ideas para tu arte! ¡La herramienta de figuras es divertida! Pruébalo <3

 

¡Por favor, manténgase seguro y disfrute dibujando / animando!