0. Introducción

Con la nueva herramienta Alinear/Distribuir, puede posicionar y espaciar objetos de manera rápida y precisa entre sí. Esta guía le brindará los pasos completos para siete escenarios de uso diferentes en los que utilizar esta herramienta optimizará su flujo de trabajo y le brindará resultados bien organizados.

 

1. Comprender la herramienta

Antes de discutir los casos de uso, debemos entender cómo funciona la herramienta. Aquí explicaré cómo acceder a la paleta de herramientas y cuáles son las funciones de sus diversas secciones.

 

1.1. Apertura de la paleta Alinear/Distribuir

Para acceder a la paleta de alineación/distribución, debe utilizar Clip Studio Paint versión 2.0.

 

Vaya a [Ventana] y desplácese hacia abajo hasta la opción [Alinear/Distribuir] y haga clic en ella.

 

Esto abrirá la paleta de herramientas Alinear/Distribuir.

 

1.2. Seleccionando las Capas o Elementos del Vector

Saber cómo hacer selecciones más rápidas de objetos y capas agilizará su proceso de alineación/distribución. A continuación se muestran las cuatro formas principales de seleccionar elementos al aplicarles acciones de alineación y distribución.

 

1. Seleccione las capas deseadas de la paleta de capas o con la herramienta [Objeto]. Para la paleta de capas, simplemente marque todas las capas que desea alinear y distribuir.

 

2. Cuando utilice la herramienta [Objeto] para seleccionar la capa, haga clic en el objeto y se seleccionará la capa en la que se encuentra el objeto. Mantenga presionada la tecla Mayús para agregar más capas a su selección de esta manera.

 

3. También puede hacer selecciones más rápidas haciendo clic en un área transparente y arrastrando sobre los objetos cuyas capas desea elegir. Para ello, vaya a la paleta de herramientas de la herramienta [Objeto] y luego a su menú [Operación de parte transparente].

 

Marque [Seleccionar área arrastrando] y seleccione [Capa] en la subopción.

 

 

4. Para trabajar dentro de una capa vectorial, puede elegir individualmente seleccionar o no seleccionar los diversos elementos dentro de la capa y alinearlos y distribuirlos.

 

Para seleccionar de esta manera, cambie la configuración [Seleccionar área arrastrando] a [Objetos en esta capa] en el menú [Operación de la parte transparente] de la paleta de herramientas [Objeto].

 

Si solo selecciona las capas, todos los elementos de la capa se moverán como una sola unidad, como con las capas ráster.

 

1.3. Diferencia entre Alinear y Distribuir

Las opciones [Alinear] se encuentran en la segunda sección de la paleta Alinear/Distribuir, mientras que las opciones [Distribuir] se encuentran en la tercera sección.

 

[Alinear]:

 

[Alinear] alinea los objetos a lo largo de una línea recta para que un lado, borde o centro de cada objeto seleccionado toque esa línea invisible o visible. Los elementos pueden superponerse o tener un espacio desigual entre ellos.

 

Las siguientes son seis opciones de Alinear en la paleta de herramientas de izquierda a derecha:

 

1. [Alinear bordes izquierdos]: con esta opción, podemos alinear los bordes izquierdos de todos los objetos o capas seleccionados a lo largo de una línea recta.

 

 

2. [Alinear centros horizontales]: con esta opción, los centros horizontales de todos los objetos o capas seleccionados se alinean a lo largo de una línea recta.

 

 

3. [Alinear bordes derechos]: esta opción alinea los bordes derechos de los objetos o capas seleccionados a lo largo de una línea recta.

 

 

4. [Alinear bordes superiores]: con esta opción, los bordes superiores de los objetos o capas seleccionados se alinean a lo largo de una línea recta.

 

 

5. [Alinear centros verticales]: esta opción alinea los centros verticales de los objetos o capas seleccionados.

 

 

6. [Alinear bordes inferiores]: con esta opción, puede alinear los bordes inferiores de los objetos o capas seleccionados.

 

[Distribuir]:

 

[Distribuir] espaciará los elementos en el área permitida. El espaciado será igual en todos los objetos seleccionados y de acuerdo con los bordes o centros de los objetos.

 

Por ejemplo, si distribuyo los bordes izquierdos, la distancia entre los bordes izquierdos del primer y segundo objeto será igual a la distancia entre los bordes izquierdos del segundo y tercer objeto, y así sucesivamente.

 

Nota: debe seleccionar al menos tres objetos o capas para usar las opciones [Distribuir].

 

Las siguientes son las seis opciones de Distribuir de izquierda a derecha:

 

1. [Distribuir bordes superiores]: esta opción espacia los objetos o capas de manera que la distancia entre sus bordes superiores sea igual.

 

 

2. [Distribuir centros verticales]: con esta opción, puede igualar la distancia entre los centros verticales de los objetos o capas seleccionados.

 

 

3. [Distribuir bordes inferiores]: con esta opción, los bordes inferiores de los objetos o capas se espacian por igual.

 

4. [Distribuir bordes izquierdos]: esta opción crea la misma distancia entre los bordes izquierdos de los objetos o capas seleccionados.

 

 

5. [Distribuir centros horizontales]: con esta opción, el espacio entre los centros horizontales de los objetos o capas seleccionados se vuelve igual.

 

 

6. [Distribuir bordes derechos]: con esta opción, puede distribuir los objetos o capas seleccionados de modo que la distancia entre sus bordes derechos sea igual.

 

 

Si sus objetos son de diferentes tamaños, puede notar que el espacio en blanco entre los objetos no es igual. Abordaremos esta ocurrencia en la siguiente sección.

 

1.4. Diferencia entre distribuir y distribuir uniformemente

[Distribuir] espacia los objetos según las coordenadas de los objetos, como sus bordes o centros. Debido a esto, el tamaño de los objetos afecta el espacio en blanco visual entre ellos.

 

El objeto más grande parecerá más cercano al objeto de al lado y el objeto más pequeño parecerá más alejado del objeto de al lado (flechas moradas), aunque la distribución sea igual (flechas rojas).

 

Para distribuir uniformemente el espacio en blanco entre los objetos sin preocuparse por sus tamaños, necesitamos usar [Distribuir uniformemente]. Es la cuarta sección de la paleta [Alinear/Distribuir].

 

[Distribuir uniformemente] crea espacios iguales entre el inicio y el final de los objetos y los distribuye en el área permitida.

 

Las siguientes son las dos opciones de [Distribuir uniformemente]:

 

1. [Distribuir espacio vertical]: utilice esta opción para obtener el mismo espacio vertical entre objetos.

 

 

2. [Distribuir espacio horizontal]: utilice esta opción para obtener el mismo espacio horizontal entre objetos.

 

A veces, el área permitida es demasiado pequeña para que los objetos tengan un espacio en blanco después de distribuirlos. En tales casos, la distancia negativa entre los extremos y los comienzos de los objetos es igual.

 

1.5. Elegir una base de alineación

La base de alineación es el área que usted permite para alineación y distribución. Los objetos se alinean y distribuyen dentro de esa área. Puede ser todo el lienzo o un área definida por guías o selecciones.

 

[Base de alineación] es la primera sección de la paleta [Alinear/Distribuir].

 

Sus opciones son las siguientes de izquierda a derecha:

 

1. [Objeto de alineación]: cuando se utiliza esta opción, la alineación y la distribución se producen dentro del área cubierta por los objetos seleccionados. Esta área puede cambiar a medida que aplica varias opciones de alineación/distribución.

 

 

2. [Lienzo]: con esta opción, los objetos se alinean y distribuyen en todo el lienzo.

 

 

3. [Área de selección]: puede realizar una selección con la herramienta [Área de selección] y la alineación y distribución de su objeto permanecerán dentro de esa área (si no se realiza ninguna selección, el área cubierta por los objetos seleccionados es el área seleccionada ).

 

4. [Guía]: puede usar guías con esta opción para restringir el área cubierta al alinear y distribuir. En los lados donde no haya guías, el borde del objeto más lejano determinará el borde del área permitida.

 

5. [Auto]: esta opción tiene en cuenta el contexto. Si alguna guía está activa, se alineará de acuerdo con la [Guía].

 

Si se seleccionan varios objetos, se alinearán de acuerdo con [Objeto de alineación]. Si hay una selección, se alineará con el [Área de selección] y si no hay una selección de un área o varios objetos ni guías, se alineará con el [Lienzo].

 

Uso 1: ajuste al centro para motivos complejos

Además de la simple alineación y distribución de sus objetos, también puede usar esta herramienta para crear motivos complejos a partir de elementos más simples.

 

Primero, cree los elementos del motivo. Preferiblemente deben variar en tamaño. Una vez hecho, seleccione todas sus capas.

 

Ahora, haga clic en [Alinear centros horizontales] y luego [Alinear centros verticales] o viceversa. Esto alineará el centro de cada elemento con el centro del lienzo o área seleccionada y la superposición resultante creará un motivo complejo.

 

También puede probar diferentes variaciones de su motivo cambiando el orden de las capas.

 

También puede usar este método para ajustar con precisión un objeto singular al centro del lienzo o un área específica.

 

Uso 2: Ajustes para la creación de pinceles

Al crear un nuevo pincel, puede alinear y distribuir con precisión los elementos de la punta de su pincel sin necesidad de observar las cosas.

 

Alinear/Distribuir también lo ayudará a experimentar rápidamente con múltiples variaciones para su pincel.

 

Nota: Para conocer los pasos completos para crear pinceles, puede consultar la Sección 3 de uno de mis consejos anteriores:

 

Uso 3: Alinear texto (y [Alinear con píxeles de texto])

La alineación del texto presente en diferentes capas se ha hecho realmente fácil con la herramienta Alinear/Distribuir. Por ejemplo, cuando trabajo en una miniatura, puedo probar rápidamente mis opciones para alinear el texto y distribuir el espaciado dentro de mi área seleccionada para el texto (con base de alineación [Área de selección]).

 

Alinear a píxeles de texto:

 

Puede notar que a veces el texto no se alinea perfectamente (especialmente en el texto de diferentes tamaños).

 

Para solucionar esto, marque [Alinear con píxeles de texto] en la paleta [Alinear/Distribuir] y eliminará cualquier desviación no deseada del texto de la alineación precisa.

 

Uso 4: Distribución Diagonal

Si desea distribuir sus objetos en diagonal, es muy fácil hacerlo con la herramienta de alineación/distribución.

 

Primero, seleccione todos sus objetos o capas y haga clic en [Alinear bordes izquierdos] y [Alinear bordes superiores].

 

Luego elija [Distribuir espaciado vertical] y [Distribuir espaciado horizontal] o viceversa. Esto distribuirá sus objetos en una diagonal espaciada uniformemente.

 

El objeto en la capa más baja comenzará la diagonal descendente desde la esquina superior izquierda. Los objetos de las capas anteriores continuarán la diagonal descendente según la secuencia de capas hasta que el objeto de la capa superior finalice la diagonal en la esquina inferior derecha.

 

Al reorganizar las capas y repetir los pasos anteriores, puede ajustar la posición de sus objetos en la distribución diagonal.

 

Uso 5: creación de patrones

Vamos a crear un patrón simple. Para crear un patrón con Alinear/Distribuir, primero coloque los elementos o motivos del patrón en sus posiciones aproximadas con cada elemento en su propia capa. Establezca la [Base de alineación] en [Objeto de alineación] en la paleta de herramientas.

 

Seleccione la herramienta [Objeto] y vaya a [Operación del área transparente] en su paleta de propiedades de herramienta. Marque [Seleccione el área arrastrando] y seleccione [Capa] en la subopción.

 

A continuación, arrastre por la primera fila para seleccionar las capas en las que se encuentran los objetos de la fila. Alinee la fila con [Alinear centros verticales] y luego haga clic en [Distribuir espaciado horizontal] para espaciar los objetos de la fila de manera uniforme.

 

Repita para otras filas.

 

Del mismo modo, alinee y distribuya cada columna individualmente con [Alinear centros horizontales] y [Distribuir espaciado horizontal] después de seleccionar los objetos de columna con la herramienta [Objeto].

 

Ahora nuestro patrón está alineado y distribuido uniformemente, pero no está alineado en el centro del lienzo. Para mover todo el patrón, agruparemos las capas de elementos en una nueva carpeta. Para hacer esto, seleccione las capas, haga clic derecho y luego elija [Crear carpeta e insertar capa].

 

Sugerencia: si está trabajando dentro de una capa vectorial, seleccione la capa vectorial en lugar de los objetos dentro de ella.

 

 

Después de seleccionar la carpeta del patrón, cambie la [Base de alineación] a [Lienzo]. Luego, haga clic en [Alinear centros verticales] y [Alinear centros horizontales].

 

¡Su patrón ahora está completo y alineado centralmente con su lienzo!

 

Uso 6: hacer hojas de sprites

Las hojas de sprites se utilizan a menudo para animaciones de juegos de personajes u objetos. Es crucial que estén perfectamente alineados o podría estropear la animación.

 

Aunque las hojas de sprites pueden necesitar algunos ajustes de alineación personalizados según el movimiento que se cree, Alinear/Distribuir puede ayudarlo a alcanzar el resultado final más rápido.

 

Veamos cómo podemos crear rápidamente una hoja de sprites precisa con la ayuda de la herramienta Alinear/Distribuir. Estaré demostrando los pasos con una hoja de sprites para una animación de despliegue de corazón:

 

PASO 1: Abra la cuadrícula yendo a [Ver] y luego [Cuadrícula]. A continuación, abra [Configuración de cuadrícula/regla] desde el menú [Ver].

 

Ajuste los píxeles [Brecha] de modo que su imagen más grande pueda caber dentro de una de las celdas de cuadrícula más grandes que tienen contornos más gruesos.

 

PASO 2: Alinee sus sprites en las posiciones aproximadas que desea para ellos, cada uno en su propia celda.

 

PASO 3: Configure la [Base de alineación] en [Área de selección]. Seleccione el área cubierta por la primera fila con la herramienta [Área de selección] del rectángulo (mantenga [Ajustar a la cuadrícula] en la fila superior de iconos) y seleccione los objetos sprite de la fila con la herramienta [Objeto].

 

Haga clic en [Alinear bordes inferiores] (o [Alinear centros verticales], según sus necesidades) en la paleta [Alinear/Distribuir].

 

Repita para todas las demás filas.

 

PASO 4: Ahora necesitamos alinear los centros horizontales de todos los sprites. Primero seleccionaremos el área cubierta por la primera columna con nuestra herramienta [Área de selección] y el [Ajustar a la cuadrícula] activo.

 

Luego, seleccione todos los sprites en la primera columna con la herramienta [Objeto] y haga clic en [Alinear centros horizontales] en la paleta [Alinear/Distribuir].

 

Repita para todas las demás columnas de hojas de sprites.

 

La alineación principal de su hoja de sprites ahora está completa. Para mi hoja de sprites, los sprites individuales son demasiado variables en tamaño y forma para que las puntas de los corazones se alineen perfectamente. Con la ayuda visual de la cuadrícula y la herramienta [Objeto], ajustaré las puntas de los corazones para que caigan constantemente en un solo punto.

 

Como es evidente, gracias a la ayuda de la herramienta Alinear/Distribuir, solo necesito hacer ajustes menores a mi hoja de sprites alineada en lugar de intentar alinearla manualmente desde cero.

 

Uso 7: Crear objetos que contengan componentes alineados (y [Alinear con rutas vectoriales])

Al dibujar (especialmente escenas y fondos), podemos encontrar objetos que se componen de elementos alineados o distribuidos uniformemente. Pueden ser portones, vallas, armarios, marcos de cuadros, dianas, etc.

 

Align/Distribute es la herramienta perfecta para usar en tales casos. Por ejemplo, estoy dibujando una puerta doble enrejada. En primer lugar, quiero saber el centro de la puerta doble donde se encuentran las dos puertas. Para esto, utilizo el método 'ajustar al centro' discutido en Uso 1.

 

Para la parrilla, dibujo una sola unidad de parrilla en una nueva capa y copio y pego la capa unas quince veces. Ahora selecciono las capas con la herramienta Objeto. Con la herramienta [Área de selección], selecciono el área de una de las puertas.

 

Con la [Base de alineación] establecida en [Área de selección], hago clic en [Distribuir espaciado horizontal].

 

Alinear a rutas vectoriales:

 

La parrilla está distribuida uniformemente, pero hay un espacio en blanco en ambos extremos que no debería estar allí. Esto puede suceder si está utilizando capas vectoriales y puede corregirlo fácilmente seleccionando [Alinear con rutas vectoriales] en la paleta [Alinear/Distribuir].

 

Ahora selecciono [Distribuir espacio horizontal] de nuevo y la parrilla de la puerta se ha distribuido perfectamente en el área de selección.

 

Las capas todavía están seleccionadas, así que hago clic con el botón derecho en una de ellas y selecciono [Combinar capas seleccionadas] para que la grilla completa esté en una capa en lugar de estar dispersa en muchas capas.

 

Después de duplicar la capa de rejilla para la otra puerta, hacer algunos ajustes de diseño y transformar la perspectiva de una puerta, este es el resultado final:

 

Pensamientos finales

Eso es todo por el tutorial. Espero que este artículo le ayude a aprovechar al máximo esta nueva e impresionante función Alinear/Distribuir y las amplias posibilidades de su uso.

 

Gracias por leer. ¡No dude en hacerme saber si tiene alguna pregunta o comentario!