Cree un conjunto de cursores de mano perfectos de píxeles en Adobe Illustrator

En los siguientes pasos, aprenderá a crear un conjunto de cursores de mano de píxeles perfectos en Adobe Illustrator. Para empezar, aprenderá cómo preparar su nuevo documento y cómo configurar una cuadrícula simple. A continuación, utilizando la herramienta Rectángulo, la herramienta Elipse y la herramienta Pluma junto con el efecto Esquinas redondeadas, aprenderá cómo crear las formas que conforman los cursores de mano. Continuando, utilizando técnicas básicas de construcción de formas vectoriales, un trazo simple, un degradado lineal, algunos efectos de Sombra y un simple efecto de Transformación, aprenderá cómo agregar color, resaltes y sombreado para los cursores finales..


1. Crear un nuevo documento y configurar una cuadrícula

Golpear Control + N para crear un Nuevo documento. Entrar 600 en el Anchura caja y 300 en el Altura cuadro luego haga clic en el Avanzado botón. Seleccionar RGB, Pantalla (72ppi) y asegúrese de que el Alinear nuevos objetos a la cuadrícula de píxeles la casilla no está marcada antes de hacer clic DE ACUERDO.

Habilitar el Cuadrícula (Ver> Mostrar cuadrícula) y el Encajar a la cuadricula (Ver> Ajustar a la cuadrícula). Necesitará una cuadrícula cada 1px, así que simplemente ve a Edición> Preferencias> Guías> Cuadrícula, entrar 1 en el Gridline cada caja y 1 en el Subdivisiones caja. También debe abrir el Información panelVentana> Información) para una vista previa en vivo con el tamaño y la posición de sus formas. No olvide configurar la unidad de medida en píxeles desde Editar> Preferencias> Unidades> General. Todas estas opciones aumentarán significativamente tu velocidad de trabajo..


2. Crea las formas de inicio

Paso 1

Elige el Herramienta Rectangular (M) y enfócate en tu barra de herramientas. Elimine el color del trazo, luego seleccione el relleno y establezca su color en rojo (R = 237 G = 28 B = 36). Mueve a tu mesa de trabajo, simplemente crea un 4 x 15px rectángulo y baja su Opacidad a 30%. Bajar la opacidad de la forma hará que le resulte más fácil ver la cuadrícula en la parte posterior, lo que le facilitará comprender la posición exacta de cada forma. Asegúrese de que su rectángulo todavía esté seleccionado y vaya a Efecto> Estilizar> Esquinas redondeadas. Entrar a 2px radio y haga clic DE ACUERDO.

Asegúrese de que el Herramienta Rectangular (M) permanece activo, crea un 6 x 10px forma, colóquelo como se muestra en la segunda imagen, baje su Opacidad a 30% y golpear Mayús + Control + E para agregar ese mismo 2px Esquinas redondeadas efecto. Crear un 6 x 9px forma, colóquelo como se muestra en la tercera imagen, baje su Opacidad a 30% y golpear Mayús + Control + E. Finalmente, crea un 6 x 7px forma, colóquelo como se muestra en la cuarta imagen, baje su Opacidad a 30% y golpear Mayús + Control + E.

Paso 2

Utilizando la Herramienta Elipse (L), crear un 4px círculo, rellénalo con el mismo rojo (R = 237 G = 28 B = 36), colóquelo como se muestra en la siguiente imagen y baje su Opacidad a 30%. Cambiar a la Herramienta Rectangular (M), crear un 8 x 10px forma, colóquela como se muestra en la siguiente imagen y baje su Opacidad a 30%.

Paso 3

Enfócate en el lado derecho de tu rectángulo y elige el Herramienta Pluma (P). Ajuste el color de relleno en negro, baje el Opacidad a 30% y cree una ruta "L" como se muestra en la primera imagen. Asegúrese de que esta nueva ruta permanezca seleccionada, agregue un cuarto punto de anclaje como se muestra en la segunda imagen y arrastre los controles 2px hacia arriba y 1px hacia la derecha. Mueva hacia arriba, agregue un quinto punto de anclaje como se muestra en la tercera imagen y arrastre los controles 2px hacia arriba. Sostener el Alt tecla de tu teclado, hacer clic en este quinto punto de anclaje entonces simplemente hacer clic en el punto de anclaje inicial para cerrar el camino.

Etapa 4

Enfóquese en el lado izquierdo de su rectángulo rojo, elija Herramienta Pluma (P) y crea un camino como se muestra en la primera imagen. Asegúrese de que esta nueva ruta permanezca seleccionada, agregue un cuarto punto de anclaje como se muestra en la segunda imagen y arrastre los controles 2px hacia arriba y 1px hacia la izquierda. Mueva hacia abajo, agregue un quinto punto de anclaje como se muestra en la tercera imagen y arrastre los controladores 4px hacia abajo. Sostener el Alt tecla de tu teclado, hacer clic en este quinto punto de anclaje entonces simplemente hacer clic en el punto de anclaje inicial para cerrar el camino. Finalmente, asegúrese de que la forma hecha en este paso se rellene con negro y baje su Opacidad a 30%.

Paso 5

Selecciona todas las formas creadas hasta ahora y Grupo ellos (Control + G). Mover a la Capas panelVentana> Capas), haga doble clic en este nuevo grupo y llámelo "puntero a manocursor". Duplicar este grupo (Control + C> Control + F), seleccione la copia y arrástrela hacia la derecha como se muestra en la segunda imagen. Volver a la Capas Panel y nombre a este nuevo grupo "PalmHandCursor". Continúe enfocándose en este segundo grupo, seleccione los cuatro rectángulos redondeados y simplemente elimínelos.

Paso 6

Centrarse en su "PalmHandCursor"Grupo y elige el Herramienta Rectangular (M). Crear un 4 x 13px Forma y colócalo como se muestra en la primera imagen. Rellénalo con rojo, baja su Opacidad a 30% E ir a Efecto> Estilizar> Esquinas redondeadas. Introduzca un radio de 2px y haga clic DE ACUERDO. Asegúrese de que el Herramienta Rectangular (M) permanece activo, crea un 4 x 14px forma, colóquelo como se muestra en la segunda imagen, baje su Opacidad a 30% y golpear Mayús + Control + E.

Crear un segundo, 4 x 14px forma, colóquelo como se muestra en la tercera imagen, baje su Opacidad a 30% y golpear Mayús + Control + E. Finalmente, crea un 4 x 11px forma, colóquelo como se muestra en la cuarta imagen, baje su Opacidad a 30% y golpear Mayús + Control + E. Centrarse en el Capas panel, seleccione los cuatro rectángulos redondeados hechos en este paso y simplemente arrástrelos dentro de "PalmHandCursor"grupo.

Paso 7

Duplicar (Control + C> Control + F) tu "PalmHandCursor"grupo, seleccione la copia y arrástrela hacia la derecha como se muestra en la segunda imagen. Regrese a la Capas Panel y nombre a este nuevo grupo "puño a mano cursor". Continúe enfocándose en este tercer grupo, seleccione los cuatro rectángulos redondeados junto con el 20px circula y simplemente bórralos.

Paso 8

Centrarse en su "puño a mano cursor"Grupo y agarra el Herramienta Elipse (L). Crear un 6px círculo, llenarlo de rojo, bajar su Opacidad a 30% y colóquelo como se muestra en la primera imagen. Elige el Herramienta Rectangular (M). Crear un 4 x 9px Forma y colócalo como se muestra en la segunda imagen. Rellénalo con rojo, baja su Opacidad a 30% E ir a Efecto> Estilizar> Esquinas redondeadas. Entrar a 2px radio y haga clic DE ACUERDO. Asegúrese de que el Herramienta Rectangular (M) permanece activo, crea un 4 x 10px forma, colóquelo como se muestra en la tercera imagen, baje su Opacidad a 30% y golpear Mayús + Control + E.

Crear un 4 x 9px forma, colóquelo como se muestra en la cuarta imagen, baje su Opacidad a 30% y golpear Mayús + Control + E. Finalmente, crea un 4 x 7px forma, colóquelo como se muestra en la quinta imagen, baje su Opacidad a 30% y golpear Mayús + Control + E. Centrarse en el Capas panel, seleccione los cuatro rectángulos redondeados y el 6px círculo hecho en este paso y simplemente arrástrelos dentro de la "puño a mano cursor"grupo.


3. Cree las formas del cursor de la mano del puntero principal

Paso 1

Selecciona tu "puntero a manocursor"grupo, vaya a Objeto> Expandir Apariencia luego abre el Pionero panelVentana> Pathfinder) y haga clic en Unir botón. Seleccione la forma resultante, aumente la Opacidad a 100% y centrarse en el Apariencia panelVentana> Apariencia). Retire el color del relleno, agregue un 1 pt Trazo y selecciónelo. Establecer el color en R = 70 G = 70 B = 70, alinéelo con el interior y abra el Carrera panelVentana> Trazo). Centrarse en el Esquina sección y simplemente marque la Round Join botón. Una vez que hayas terminado, ve a Objeto> Ruta> Trazo de esquema.

Elige el Herramienta Rectangular (M), crear dos, 1 x 3px formas, una 1 x 4px forma y un 1 x 5px forma. Rellena las cuatro formas con R = 70 G = 70 B = 70 y colóquelos como se muestra en la cuarta imagen. Una vez que haya terminado, seleccione todas las formas hechas en este paso y haga clic en el Unir botón de la Pionero panel.

Paso 2

Utilizando la Herramienta Rectangular (M), crear un 21 x 26px rectángulo, rellénelo con blanco, colóquelo como se muestra en la primera imagen y envíelo al dorso (Mayús + Control + [ ). Seleccione este rectángulo blanco junto con el contorno de la mano y haga clic en el Dividir botón de la Pionero panel. Asegúrese de que el grupo resultante esté seleccionado y simplemente presione Mayús + Control + G a Desagrupar eso. Seleccione la forma blanca exterior y elimínela, luego seleccione la forma blanca interna y reemplace la blanca con el degradado lineal que se muestra en la imagen final.


4. Agregue luces y sombreado para el cursor de la mano del puntero

Paso 1

Deshabilitar el Encajar a la cuadricula (Ver> Ajustar a la cuadrícula) luego ve a Editar> Preferencias> General y asegúrese de que el Incremento de teclado se establece en 1px. Vuelva a seleccionar la forma rellena con el degradado lineal y haga dos copias al frente (Control + C> Control + F> Control + F). Seleccione la copia superior y presione la flecha derecha una vez para moverla 1px a la derecha. Vuelva a seleccionar ambas copias y hacer clic la Frente menos botón de la Pionero panel. Seleccione el grupo de formas resultante, conviértalo en un Camino compuesto (Control + 8 o Objeto> Ruta compuesta> Hacer) y establece el color de relleno en R = 205 G = 205 B = 205.

Paso 2

Vuelva a seleccionar la forma rellena con el degradado lineal y haga otras dos copias al frente (Control + C> Control + F> Control + F). Seleccione la copia superior y presione la flecha izquierda una vez para moverla 1px a la izquierda. Vuelva a seleccionar ambas copias y haga clic en Frente menos botón de la Pionero panel. Seleccione el grupo de formas resultante, conviértalo en un Camino compuesto (Control + 8 o Objeto> Ruta compuesta> Hacer) y establecer el color de relleno en blanco.

Paso 3

Vuelva a seleccionar la forma rellena con el degradado lineal y vaya a Efecto> Stylize> Drop Shadow. Ingrese las propiedades que se muestran en la ventana izquierda (en la siguiente imagen), haga clic en DE ACUERDO e ir de nuevo a Efecto> Stylize> Drop Shadow. Ingrese las propiedades que se muestran en la ventana derecha (en la siguiente imagen) y haga clic en DE ACUERDO.

Etapa 4

Habilitar el Encajar a la cuadricula (Ver> Ajustar a la cuadrícula). Utilizando la Herramienta Rectangular (M), crear un 1 x 3px dar forma y rellenar con R = 215 G = 215 B = 215. Coloque este pequeño rectángulo como se muestra en la siguiente imagen y vaya a Efecto> Distorsionar y transformar> Transformar. Ingrese las propiedades que se muestran a continuación y haga clic en DE ACUERDO.


5. Crea el cursor de mano de palma

Paso 1

Selecciona tu "PalmHandCursor"grupo, vaya a Objeto> Expandir Apariencia y haga clic en el Unir botón de la Pionero panel. Seleccione la forma resultante, aumente la Opacidad a 100% y centrarse en el Apariencia panelVentana> Apariencia). Retire el color del relleno, agregue un 1 pt Trazo y selecciónelo. Establecer el color en R = 70 G = 70 B = 70, alinéelo con el interior y compruebe el Round Join botón de la Carrera panel. Una vez que hayas terminado, ve a Objeto> Ruta> Trazo de esquema.

Elige el Herramienta Rectangular (M), crear dos, 1 x 8px formas y un 1 x 7px forma. Rellena las cuatro formas con R = 70 G = 70 B = 70 y colóquelos como se muestra en la tercera imagen. Toma el Herramienta de selección directa (A), céntrese en el lado superior del rectángulo izquierdo, seleccione el punto de anclaje izquierdo y simplemente arrástrelo 1px hacia abajo. Una vez que haya terminado, seleccione todas las formas hechas en este paso y haga clic en el Unir botón de la Pionero panel.

Paso 2

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


6. Crea el Cursor de Mano Puño

Paso 1

Selecciona tu "puño a mano cursor"grupo, vaya a Objeto> Expandir Apariencia y haga clic en el Unir botón de la Pionero panel. Seleccione la forma resultante, aumente la Opacidad a 100% y centrarse en el Apariencia panelVentana> Apariencia). Retire el color del relleno, agregue un 1 pt Trazo y selecciónelo. Establecer el color en R = 70 G = 70 B = 70, alinéelo con el interior y vaya a Objeto> Ruta> Trazo de esquema.

Elige el Herramienta Rectangular (M), crear tres, 1 x 4px formas y un 1 x 2px forma. Rellena las cuatro formas con R = 70 G = 70 B = 70 y colóquelos como se muestra en la tercera imagen. Toma el Herramienta de selección directa (A), centrarse en la parte superior del medio 1 x 4px rectángulo, seleccione el punto de anclaje izquierdo y simplemente arrástrelo 1px hacia abajo. Mover a la derecha 1 x 4px rectángulo, enfóquese en el lado superior, seleccione el punto de anclaje correcto y simplemente arrástrelo 1px hacia abajo. Una vez que haya terminado, seleccione todas las formas hechas en este paso y haga clic en el Unir botón de la Pionero panel.

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..


¡Felicidades! 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!