Unlimited PS Actions, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
  1. Design & Illustration
  2. Tools & Tips

Crear un conjunto de cursores de mano perfecta de píxeles en Adobe Illustrator

by
Read Time:12 minsLanguages:

Spanish (Español) translation by Bimo rhomdoni (you can also view the original English article)

En los siguientes pasos usted aprenderá cómo crear un conjunto de píxeles cursores de mano perfecta en Adobe Illustrator. Para empezar usted aprenderá cómo preparar su nuevo documento y cómo configurar una red simple. A continuación, utilizando la herramienta Rectángulo, la herramienta de elipse y la herramienta pluma junto con el efecto de esquinas redondeadas usted aprenderá cómo crear las formas que componen sus cursores de mano. Pasando, utilizando vectores básicos forma técnicas, un simple golpe, un degradado lineal, algunos efectos de sombra y un simple efecto de transformación del edificio usted aprenderá cómo agregar color, puntos culminantes y sombreado para los cursores de la mano final.


1. crear un nuevo documento y configurar una red

Golpe Control + N para crear un nuevo documento. Escriba 600 en el cuadro ancho y 300 en el cuadro de altura y haga clic en el botón avanzadas. Seleccione RGB, pantalla (72ppi) y asegúrese de que el alinear nuevos objetos al cuadro de la cuadrícula de píxeles desactivada antes de hacer clic en Aceptar.

Activar la cuadrícula (vista > Mostrar cuadrícula) y ajustar a la cuadrícula (vista > ajustar a la cuadrícula). Necesita una cuadrícula cada 1px, así que simplemente vaya Edición> Preferencias> Guías> Cuadrícula, ingrese 1 en la cuadrícula cada caja y 1 en el cuadro de subdivisiones. También debe abrir el panel Información (ventana > información) para la previsualización con el tamaño y la posición de las formas. No se olvide de establecer la unidad de medida en pixeles de editar > Preferencias > Unidades > General. Todas estas opciones aumentará significativamente su velocidad de trabajo.

Pixel Perfect Hand CursorsPixel Perfect Hand CursorsPixel Perfect Hand Cursors

2. crear las formas a partir

Paso 1

Elija la herramienta Rectángulo (M) y centrarse en la barra de herramientas. Quitar el color de trazo, seleccione el relleno y establezca su color en rojo (R = 237 = 28 = 36). Pasar a su mesa de trabajo, crear un rectángulo de 4 x 15px y bajar su opacidad al 30%. Bajar la opacidad de la forma hará más fácil para usted ver la cuadrícula en la parte posterior que hará más fácil comprender la posición exacta de cada forma. Asegúrese de que el rectángulo está todavía seleccionado e ir a efecto > Estilizar > esquinas redondeadas. Introduzca un radio de 2px y haga clic en Aceptar.

Asegúrese de que la herramienta Rectángulo (M) se mantiene activa, crea una forma de 6 x 10px, colóquelo como se muestra en la segunda imagen, bajar su opacidad al 30% y golpeó Mayús + Control + E para agregar ese mismo efecto de esquinas redondeadas de 2px. Crear una forma de 6 x 9px, colóquelo como se muestra en la tercera imagen, baja su opacidad a 30% y golpeó Mayús + Control + E. Por último, crear una forma de 6 x 7px, colóquelo como se muestra en la cuarta imagen, baja su opacidad a 30% y golpeó Mayús + Control + E.

Pixel Perfect Hand CursorsPixel Perfect Hand CursorsPixel Perfect Hand Cursors

Paso 2

Utilizando la herramienta elipse (L), crear un círculo de 4px, rellenar con el mismo rojo (R = 237 = 28 = 36), colóquelo como se muestra en la siguiente imagen y bajar su opacidad al 30%. Cambiar a la herramienta Rectángulo (M), crear una forma 8 x 10px, colóquelo como se muestra en la siguiente imagen y bajar su opacidad al 30%.

Pixel Perfect Hand CursorsPixel Perfect Hand CursorsPixel Perfect Hand Cursors

Paso 3

En el lado derecho de tu rectángulo y elija la herramienta pluma (P). Establece el color de relleno en negro, bajar la opacidad a un 30% y crear un camino de "L" como se muestra en la primera imagen. Asegúrese de que este nuevo camino se queda seleccionado, añadir un cuarto puntos de anclaje, como se muestra en la segunda imagen y arrastre 1px los 2px de mangos hacia arriba a la derecha. Subir, añadir un quinto punto de anclaje, como se muestra en la tercera imagen y arrastrar los 2px de mangos hacia arriba. Mantenga pulsada la tecla Alt de su teclado, haga clic en este quinto punto de anclaje y simplemente haga clic en el punto de anclaje inicial para cerrar el camino.

Pixel Perfect Hand CursorsPixel Perfect Hand CursorsPixel Perfect Hand Cursors

Paso 4

Centrarse en la parte izquierda de su rectángulo rojo, elija la herramienta pluma (P) y crear una ruta de acceso como se muestra en la primera imagen. Asegúrese de que este nuevo camino se queda seleccionado, agregue un cuarto puntos de anclaje como se muestra en la segunda imagen y arrastre los 2px de mangos para arriba y 1px a la izquierda. Mover hacia abajo, añadir un quinto punto de anclaje, como se muestra en la tercera imagen y arrastra las asas 4px. Mantenga pulsada la tecla Alt de su teclado, haga clic en este quinto punto de anclaje y simplemente haga clic en el punto de anclaje inicial para cerrar el camino. Finalmente, asegúrese de que la forma en este paso se llena con negro y bajar su opacidad al 30%.

Pixel Perfect Hand CursorsPixel Perfect Hand CursorsPixel Perfect Hand Cursors

Paso 5

Seleccione todas las formas creadas hasta ahora y agrúpalas (Control + G). Hacia el panel capas (ventana > capas), haga doble clic en este nuevo grupo y asígnele el nombre "pointerHandCursor". Duplicar este grupo (Control + C > Control + F), seleccione la copia y y arrastre hacia la derecha como se muestra en la segunda imagen. Volver al panel de capas y el nombre de este nuevo grupo "palmHandCursor". Continúe enfocándose en este segundo grupo, seleccione los cuatro rectángulos redondeados y simplemente elimínelos. 

Pixel Perfect Hand CursorsPixel Perfect Hand CursorsPixel Perfect Hand Cursors

Paso 6

En su grupo de "palmHandCursor" y elija la herramienta Rectángulo (M). Crear una forma 4 x 13px y colóquelo como se muestra en la primera imagen. Llenar con el rojo, bajar su opacidad al 30% e ir a efecto > Estilizar > esquinas redondeadas. Introduzca un radio de 2px y haga clic en Aceptar. Asegúrese de que la herramienta Rectángulo (M) se mantiene activa, crea una forma 4 x 14px, colóquelo como se muestra en la segunda imagen, bajar su opacidad al 30% y golpeó Mayús + Control + E.

Crear un segundo, forma 4 x 14px, colóquelo como se muestra en la tercera imagen, bajar su opacidad al 30% y golpeó Mayús + Control + E. Por último, crear una forma 4 x 11px, colóquelo como se muestra en la cuarta imagen, bajar su opacidad al 30% y pulsar Mayús + Control + E. enfoque en el panel capas, seleccione los cuatro rectángulos redondeados en este paso y simplemente arrástrelos dentro del grupo de "palmHandCursor".

Pixel Perfect Hand CursorsPixel Perfect Hand CursorsPixel Perfect Hand Cursors

Paso 7

Duplicar (Control + C > Control + F) su "palmHandCursor" del grupo, seleccione la copia y y arrastre hacia la derecha como se muestra en la segunda imagen. Volver al panel de capas y el nombre de este nuevo grupo "fistHandCursor". Seguir centrándose en este tercer grupos, seleccionar los cuatro rectángulos redondeados junto con el círculo de 20px y simplemente eliminarlas.

Pixel Perfect Hand CursorsPixel Perfect Hand CursorsPixel Perfect Hand Cursors

Paso 8

En su grupo de "fistHandCursor" y agarrar la herramienta elipse (L). Crear un círculo de 6px, llenar con rojo, bajar su opacidad al 30% y colóquelo como se muestra en la primera imagen. Elija la herramienta Rectángulo (M). Crear una forma 4 x 9px y colóquelo como se muestra en la segunda imagen. Llenar con el rojo, bajar su opacidad al 30% e ir a efecto > Estilizar > esquinas redondeadas. Introduzca un radio de 2px y haga clic en Aceptar. Asegúrese de que la herramienta Rectángulo (M) se mantiene activa, crea una forma 4 x 10px, colóquelo como se muestra en la tercera imagen, bajar su opacidad al 30% y golpeó Mayús + Control + E.

Crear una forma 4 x 9px, colóquelo como se muestra en la cuarta imagen, baja su opacidad a 30% y golpeó Mayús + Control + E. Por último, crear una forma 4 x 7px, colóquelo como se muestra en la imagen Quinta, bajar su opacidad al 30% y pulsar Mayús + Control + E. enfoque en el panel capas, seleccione los cuatro rectángulos redondeados y el círculo de 6px en este paso y simplemente arrastran dentro del gr "fistHandCursor" Oxford University Press.

Pixel Perfect Hand CursorsPixel Perfect Hand CursorsPixel Perfect Hand Cursors

3. crear las formas de Cursor de mano puntero principal

Paso 1

Seleccione su grupo de "pointerHandCursor", ir a objeto > expandir apariencia a continuación, abra el panel Buscatrazos (ventana > Pathfinder) y haga clic en el botón de Únete. Seleccione la forma resultante, aumenta la opacidad al 100% y centrarse en el panel apariencia (ventana > apariencia). Quitar el color de relleno, añadir un trazo 1pt y selecciónelo. Establecer el color a R = 70 G= 70 B= 70, alinearlo a dentro y abrir el panel trazo (ventana > trazo). En la sección de la esquina y simplemente marque el botón redondo Únete. Una vez haya terminado vaya a objeto > ruta > trazo de contorno.

Elija la herramienta Rectángulo (M), crear dos formas 1 x 3px, forma 1 x 4px y forma 1 x 5px. Llene todas las formas de cuatro con R = 70 G= 70 B= 70 y colocarlos como se muestra en la cuarta imagen. Una vez que haya terminado, seleccione todas las formas en este paso y haga clic en el botón unir desde el panel Buscatrazos.

Pixel Perfect Hand CursorsPixel Perfect Hand CursorsPixel Perfect Hand Cursors

Paso 2

Utilizando la herramienta Rectángulo (M), crear un rectángulo de 21 x 26px, rellenar con blanco, como se muestra en la primera imagen y enviarlo hacia atrás (Shift + Control + [). Seleccione este rectángulo blanco con el contorno de la mano y haga clic en el botón de división desde el panel Buscatrazos. Asegúrese de que el grupo resultante es seleccionado y simplemente golpeó Mayús + Control + G lo desagrupación. Seleccione la forma exterior blanco y eliminarlo luego la forma blanca interior y sustituir el blanco con el degradado lineal que se muestra en la imagen final.

Pixel Perfect Hand CursorsPixel Perfect Hand CursorsPixel Perfect Hand Cursors

4. Agregue resaltados y sombreado para el puntero Cursor

Paso 1

Desactivar ajustar a la cuadrícula (vista > ajustar a la cuadrícula) entonces vaya a Editar > Preferencias > General y asegúrese de que el incremento de teclado está ajustado en 1px. Seleccionar la forma de relleno con el degradado lineal y hacer dos copias de en frente (Control + C > Control + F > Control + F). Seleccione la copia superior y golpear la flecha derecha una vez para mover 1px a la derecha. Seleccionar ambas copias y haga clic en el botón menos frontal desde el panel Buscatrazos. Seleccione el grupo resultante de las formas, lo convierten en un trazado compuesto (Control + 8 u objeto > trazado compuesto > hacer) y el color de relleno a R = 205 G = 205 B= 205.

Pixel Perfect Hand CursorsPixel Perfect Hand CursorsPixel Perfect Hand Cursors

Paso 2

Seleccionar la forma de relleno con el degradado lineal y hacer otro dos copias en el frente (Control + C > Control + F > Control + F). Seleccione la copia superior y golpeó una vez la flecha izquierda para mover el 1px a la izquierda. Seleccionar ambas copias y haga clic en el botón menos frontal desde el panel Buscatrazos. Seleccione el grupo resultante de las formas, lo convierten en un trazado compuesto (Control + 8 u objeto > trazado compuesto > hacer) y el color de relleno blanco.

Pixel Perfect Hand CursorsPixel Perfect Hand CursorsPixel Perfect Hand Cursors

Paso 3

Vuelva a seleccionar la forma de relleno con el degradado lineal y vaya a efecto > Estilizar > sombra paralela. Entrar en las propiedades mostradas en la ventana izquierda (en la siguiente imagen), haga clic en aceptar y otra vez ir a efecto > Estilizar > sombra paralela. Entrar en las propiedades mostradas en la ventana derecha (en la siguiente imagen) y haga clic en Aceptar.

Pixel Perfect Hand CursorsPixel Perfect Hand CursorsPixel Perfect Hand Cursors

Paso 4

Permiten ajustar a la cuadrícula (vista > ajustar a la cuadrícula). Utilizando la herramienta Rectángulo (M), crear una forma 1 x 3px y llenarlo con R = 215 G = 215 B = 215. Colocar este pequeño rectángulo como se muestra en la siguiente imagen y vaya a efecto > distorsionar y transformar  > transformar. Entrar en las propiedades que se muestra a continuación y haga clic en Aceptar.

Pixel Perfect Hand CursorsPixel Perfect Hand CursorsPixel Perfect Hand Cursors

5. crear el Cursor de mano de Palm

Paso 1

Seleccione su grupo de "palmHandCursor", ir a objeto > expandir apariencia y haga clic en la botón desde el panel Buscatrazos. Seleccione la forma resultante, aumenta la opacidad al 100% y centrarse en el panel apariencia (ventana > apariencia). Quitar el color de relleno, añadir un trazo 1pt y selecciónelo. Establecer el color a R= 70 G= 70 B= 70, alinearlo a dentro y marque el botón redondo Únete desde el panel Trazo. Una vez haya terminado vaya a objeto > ruta > trazo de contorno.

Elija la herramienta Rectángulo (M), crear dos formas 1 x 8px y forma 1 x 7px. Llene todas las formas de cuatro con R= 70 G= 70 B= 70 y colocarlos como se muestra en la tercera imagen. Coge la herramienta de selección directa (A), se centran en el lado superior del rectángulo izquierdo, seleccionar el punto de anclaje izquierdo y simplemente arrastre 1px. Una vez que haya terminado, seleccione todas las formas en este paso y haga clic en el botón unir desde el panel Buscatrazos.

Pixel Perfect Hand CursorsPixel Perfect Hand CursorsPixel Perfect Hand Cursors

 Paso 2

Concéntrese en el contorno de la mano realizado en el paso anterior y repita las técnicas y efectos utilizados para el cursor de la mano del puntero.  Al final las cosas deberían verse como en la siguiente imagen.

Pixel Perfect Hand CursorsPixel Perfect Hand CursorsPixel Perfect Hand Cursors

6. Crea el Cursor de Mano Puño

Paso 1

Seleccione su grupo "fistHandCursor", vaya a Objeto> Expandir apariencia y haga clic en el botón Unir del panel de Pathfinder. Seleccione la forma resultante, aumente la opacidad al 100% y céntrese en el panel Apariencia (Ventana > Apariencia). Elimine el color del relleno, agregue un trazo de 1 pt y selecciónelo. Establezca el color en R = 70 G = 70 B = 70, alinéelo con el interior y vaya a Objeto> Ruta> Trazar contorno.

Elija la herramienta Rectángulo (M), cree tres, 1 x 4px formas y 1 x 2px. Rellene las cuatro formas con R = 70 G = 70 B = 70 y colóquelas como se muestra en la tercera imagen. Coge la herramienta de selección directa (A), enfócate en la parte superior del rectángulo de 1 x 4px medio, selecciona el punto de anclaje izquierdo y simplemente arrástralo 1px hacia abajo. Mueva hacia la derecha el rectángulo de 1 x 4 px, céntrese en el lado superior, seleccione el punto de anclaje correcto y simplemente arrástrelo 1 px hacia abajo. Una vez que haya terminado, seleccione todas las formas hechas en este paso y haga clic en el botón Unir del panel de Pathfinder.

Pixel Perfect Hand CursorsPixel Perfect Hand CursorsPixel Perfect Hand Cursors

Paso 2

Concéntrese en el contorno de mano realizado en el paso anterior y repita las técnicas y los efectos utilizados para los otros dos cursores de mano.  Al final las cosas deberían verse como en la siguiente imagen.

Pixel Perfect Hand CursorsPixel Perfect Hand CursorsPixel Perfect Hand Cursors

Felicidades  ya estas hecho 

Aquí es cómo debe verse. Espero que hayas disfrutado de este tutorial y que puedas aplicar estas técnicas en tus proyectos futuros. 

Si está interesado en crear el botón Suscribirse, consulte este ingenioso tutorial sobre cómo crear un botón con solo una línea de texto en el panel Apariencia.

Pixel Perfect Hand CursorsPixel Perfect Hand CursorsPixel Perfect Hand Cursors
One subscription.
Unlimited Downloads.
Get unlimited downloads