Spanish (Español) translation by Cristian Marroquin (you can also view the original English article)
Bienvenido a este tutorial donde crearás un set de iconos abstractos en Adobe Illustrator. El tema en el cual estamos trabajando será en ajedrez. En este tutorial aprenderás el proceso paso a paso sobre cómo crear un set de iconos abstractos usando formas y herramientas básicas.
Para más ejemplos de sets de iconos abstractos, mira en GraphicRiver, donde encontrarás una gran variedad de diferentes iconos abstractos.
1. ¿Cómo Preparar un Nuevo Archivo de Proyecto?
Paso 1
Comencemos preparando un Nuevo Documento en Adobe Illustrator (Archivo > Nuevo o Control-N). Para este tutorial, usaremos la configuración de abajo:
- Número de Mesas de Trabajo: 1
- Anchura: 850 px
- Altura: 850 px
- Unidades: Píxeles
En la pestaña de Avanzado, usa la siguiente configuración:
- Modo de Color: RGB
- Efectos de Rasterización: Pantalla (72 ppp)
- Modo de Previsualización: Por Defecto
Paso 2
Ve a Edición > Preferencias > General y pon el Incremento de Teclado a 1 px.
Paso 3
Ve a Unidades y usa la configuración de abajo.
- General: Píxeles
- Trazo: Puntos
- Texto: Puntos
2. ¿Cómo Preparar Capas?
Paso 1
Luego, necesitarás estructurar el proyecto creando capas. Selecciona el panel Capas y crea dos capas. Nómbralas de la siguiente manera:
- Capa 1: Fondo
- Capa 2: Iconos
Paso 2
Asegúrate de que selecciones la capa de fondo para comenzar a crear el fondo.
3. ¿Cómo Crear el Color de Fondo?
Paso 1
Con la capa seleccionada, da clic sobre la Herramienta Rectángulo (M) y crea un área rectangular de 850 x 850 px para colocar tus iconos en ellos. Esto debe ajustarse a toda el área de la Mesa de Trabajo.
Paso 2
Asegúrate de que el rectángulo esté aun seleccionado; da clic sobre la Herramienta de Degradado. En la sección de ángulo, selecciona 45° desde el menú desplegable.
Paso 3
Selecciona dos colores para el degradado. Para este tutorial, usaremos los siguientes:
- R: 70
- G: 82
- B: 162
Paso 4
Para el segundo color, usaremos los siguientes:
- R: 138
- G: 105
- B: 173
Paso 5
El fondo final debe verse como la imagen de abajo. Bloquea la capa de fondo dando clic sobre el icono de bloquear y da clic sobre la capa para comenzar a crear los iconos.
4. ¿Cómo Crear el Icono de Peón?
Paso 1
Escoge la Herramienta Pluma (P) y ajusta la configuración del trazo de la siguiente manera:
- Anchura de Trazo: 6
- Tapa: Extremo Redondeado
- Vértice: Unión
- Alineado de Trazo: Trazo Alineado al Centro
Paso 2
Comienza seleccionando la Herramienta Elipse (L) y creando un pequeño círculo. Para crear un círculo perfecto, mantén presionado Mayus en el teclado mientras das clic y arrastras con el mouse.
Paso 3
Selecciona la Herramienta Pluma (P) y crea dos líneas debajo del círculo.
Paso 4
Selecciona la Herramienta Rectángulo Redondeado (M) y crea una forma debajo de las dos líneas. Puedes ajustar la curvatura de los vértices presionando Flecha Arriba o Flecha Abajo sobre tu teclado, mientras creas la forma (dando clic y arrastrando con el mouse).
Con la forma aun seleccionada, cambia a un relleno de forma.
Paso 5
Duplica la forma copiando (Control-C) y luego pegando en lugar (Control-Mayus-V).
Añade un trazo a la segunda forma con un ancho de 20 pt. Para los mejores resultados, alinea el trazo hacia afuera.
Paso 6
Con la segunda forma aun seleccionada, ve al menú superior y selecciona Objeto > Expandir para abrir la ventana Expandir. Asegura de que ambos Relleno y Trazo estén seleccionados, y luego da clic en OK.
Paso 7
Esto creará una forma del trazo. Asegúrate de que la forma aun esté seleccionada, y, usando el Buscatrazos, da clic en Unir. Esto combinará la forma.
Paso 8
Cambia la forma a un trazo usando la Herramienta Cuentagotas (I) y alinea el trazo hacia afuera.
Paso 9
Usa la Herramienta Elipse (L) para crear un círculo pequeño en la parte inferior para completar el icono del peón.
5. ¿Cómo Crear el Icono de Torre?
Paso 1
Para comenzar a crear el icono de la torre, usa la Herramienta Rectángulo (M) para crear una forma de rectángulo pequeña.
Paso 2
Crea una forma de rectángulo un poco más grande y ponlo en Trazo usando la Herramienta Cuentagotas y seleccionando uno de los trazos que usamos anteriormente sobre el icono del peón.
Paso 3
Usa la Herramienta Rectángulo (M) para crear un rectángulo pequeño encima. Luego usa la Herramienta Elipse (L) para crear un pequeño círculo en la parte inferior (mientras presionas la tecla Mayus sobre el teclado para crear un círculo perfecto).
Paso 4
Usa la Herramienta Rectángulo (M) y sigue los pasos debajo para crear la parte superior del icono de la torre.
Paso 5
Selecciona todas las formas en el Paso 4 y da clic sobre el Buscatrazos > Unir.
Paso 6
Esto combinará todas las formas.
Paso 7
Con esta nueva forma seleccionada, cámbialo a un trazo usando la Herramienta Cuentagotas (I) para asegurar que la anchura del trazo sea la misma.
Paso 8
Para crear los semi-círculos, necesitas comenzar a crear un círculo usando la Herramienta Elipse (L). Coloca un rectángulo sobre el círculo usando la Herramienta Rectángulo (M).
Paso 9
Selecciona las dos formas (asegurándote de que el rectángulo esté encima del círculo) y luego selecciona Buscatrazos > Menos Frente.
Paso 10
Esto borrará la forma de rectángulo y la parte del círculo que está superpuesta.
Paso 11
Duplica el semi-círculo copiando (Control-C) y luego pegando (Control-V).
Paso 12
Selecciona el duplicado del semi-círculo y luego da clic-derecho sobre él. Desde el menú, selecciona Transformar > Seleccionar. Escoge eje Vertical a 90° y luego da clic en OK.
Paso 13
Asegúrate de que ambos semi-círculos estén alineados horizontalmente opuestos uno del otro.
Paso 14
Pon los semi-círculos en cualquiera de los lados de la forma para completar el icono de la torre.
6. ¿Cómo Crear el Icono del Caballo?
Paso 1
Para comenzar a crear el icono del caballo, crea un suplicado de la torre. Con el icono duplicado, usa la Herramienta Selección (V) o la Herramienta Selección Directa (A) para borrar las formas medias del icono.
Paso 2
Usa la Herramienta Polígono para crear un triángulo. Mientras usas la Herramienta Polígono, presiona la Flecha Arriba o la Flecha Abajo sobre el teclado para incrementar o disminuir el número de lados.
Para crear un triangulo equilátero, mantén presionada la tecla Mayus mientras creas la forma.
Crea un triángulo equilátero más pequeño y ponlo en el medio.
Paso 3
Rota los semi-círculos en cualquiera de los lados del triángulo para que los trazos estén alineados diagonalmente (clic-derecho > Transformar > Rotar).
Paso 4
Para crear la cabeza del icono del caballo, usa la Herramienta Rectángulo Redondeado y la Herramienta Elipse (L) para crear las formas de abajo.
Paso 5
Usa la Herramienta Rectángulo (M) y coloca dos rectángulos derriba de las formas com ose muestra abajo.
Paso 6
Usa la Herramienta Menos Frente sobre las formas que se superponen.
Paso 7
Esto creará un borde recto donde las formas solían superponerse. Mueve las dos formas para que se parezcan a la imagen de abajo.
Paso 8
Usa la Herramienta Menos Frente de nuevo para borrar el lado izquierdo de la forma y cámbialos en un trazo.
Paso 9
Selecciona ambas formas y usa Buscatrazos > Unir para combinarlos en una sola forma.
Paso 10
Selecciona la Herramienta Añadir Punto de Ancla (+) y añade un punto cerca del vértice izquierdo de la forma. Luego usa la Herramienta Selección Directa (A) para arrastrar la esquina superior izquierda hacia la izquierda para crear la oreja.
Paso 11
Usa la Herramienta Selección Directa (A) y borra el punto mostrado en la imagen de abajo.
Paso 12
Usa la Herramienta Pluma (P) y dibuja tres puntos extras sobre el lado derecho de la forma.
Paso 13
Selecciona los puntos de curva y arrástralos hacia el medio usando el mouse para crear el cuello del caballo. Mantén presionada la tecla Mayus sobre el teclado para seleccionar puntos múltiples.
Paso 14
Una vez que estés feliz con la manera en que la cabeza del caballo se mira, usa la Herramienta Elipse (L) para crear el ojo (recuerda mantener presionada Mayus sobre el teclado para crear un círculo perfecto).
Paso 15
Añade una línea debajo de la cabeza y ve debajo de las formas anteriores para crear el icono del caballo.
7. ¿Cómo Crear el Alfil?
Paso 1
Para comenzar a crear el icono del alfil, crea un duplicado del icono del caballo. Con el duplicado, usa la Herramienta Selección (V) o la Herramienta Selección Directa (A) para borrar las formas superiores (la cabeza del caballo) del icono.
Paso 2
Usa la Herramienta Elipse (L) y mantén presionada la tecla Mayus para crear un círculo perfecto encima del icono.
Paso 3
Usa la Herramienta Selección Directa (A) para moverte encima del punto superior del círculo. Esto creará una forma como de huevo.
Paso 4
Selecciona las manecillas laterales con la Herramienta Selección Directa (A) y ve hacia el medio para crear una forma como de lagrima.
Paso 5
Usa la Herramienta Elipse (L) para crear un círculo y ponlo encima de la forma de lagrima. Luego usa la Herramienta Pluma (P) para crear una cruz, y ponla dentro de la forma de lagrima para crear el icono del alfil.
8. ¿Cómo Crear el Icono de la Reina?
Paso 1
Para comenzar a crear el icono de la reina, crea un duplicado del alfil. Con el duplicado, usa la Herramienta Selección (V) o la Herramienta Selección Directa (A) para borrar la parte superior y media de las formas del icono.
Esto dejará solo dos círculos en la parte inferior y los semi-círculos sobre los lados.
Paso 2
Rota los semi-círculo un poco. Para hacer esto, da clic-derecho sobre las formas, y luego ve a Transformar > Rotar, siguiendo la imagen de abajo.
Paso 3
Usa la Herramienta Elipse (L) para crear dos círculo, con el círculo exterior usando un trazo y el círculo interior usando un relleno. Recuerda mantener presionada la tecla Mayus sobre el teclado para crear un círculo perfecto.
Paso 4
Usa la Herramienta Elipse (L) para crear dos círculo que se superpongan lado a lado encima de las otras formas.
Paso 5
Usa la Herramienta Elipse (L) para crear un círculo pequeño encima.
Paso 6
Para crear la base de la corona, usa la Herramienta Pluma (P) o la Herramienta Rectángulo (M) para dibujar la forma como se ve en la imagen de abajo. Cuando usas la Herramienta Pluma, puedes mantener presionada la tecla Mayus sobre el teclado para dibujar una línea recta vertical u horizontalmente. Esto facilitará el alineado.
Desde aquí, usa la Herramienta Selección Directa (A) para seleccionar el punto de curva (mantén presionada la tecla Mayus para seleccionar puntos múltiples) y mueve los puntos hacia el centro con el mouse para transformar los vértices en curvas.
Paso 7
Completa el icono de la reina colocando la corona encima de las formas, como se muestra en la imagen de abajo.
9. ¿Cómo Crear el Icono del Rey?
Paso 1
Para crear el icono del rey, duplica a la reina. Con el duplicado, usa la Herramienta Selección Directa (A) para borrar los círculos medios de la forma.
Paso 2
Usa la Herramienta Selección Directa (A) para borrar la forma de círculo pequeño encima de la corona.
Paso 3
Usa la Herramienta Forma Rectangular (M) para crear dos cuadrados (uno con contorno más grande y el otro con forma de relleno más pequeña). Pon el cuadrado más pequeño dentro y en el medio del cuadrado más grande.
Desde aquí, selecciona ambos cuadrados y rota 45° (clic-derecho-Transformar-Rotar) y coloca ambos cuadrados en el centro del espacio del icono.
Paso 4
Usa la Herramienta Pluma (P) para crear una pequeña cruz encima de la corona.
¡Impresionante! ¡Has Terminado!
¡Felicidades! Has terminado este tutorial. Siéntete libre de compartir tus propias creaciones debajo. Espero que hayas encontrado este tutorial útil y que hallas aprendido muchos nuevos consejos y trucos que puedas usar para tus ilustraciones futuras. ¡Nos vemos luego!
¡Aprende Más Habilidades de Icono!
Si te gustó este tutorial y estás buscando aprender nuevas habilidades, revisa estos tutoriales. Expande tus conocimientos yendo a través de estas guías.
Mira mi video sobre Animar Iconos en Adobe Illustrator y After Effects:
O ¿porqué no miras estos tutoriales?
10 Consejos para Crear Iconos Sorprendentes
Nuevo Curso: Animar Iconos con Adobe Illustrator y After Effects
Comparar dos Métodos para Crear Iconos: Trazados vs. Trazos de Desplazamiento
Nuevo Curso: Diseñar Elementos de Interfaz de Video Juegos en Adobe Illustrator
Escalar Iconos Correctamente en Adobe Illustrator
By
