Spanish (Español) translation by CYC (you can also view the original English article)
En este tutorial aprenderemos a crear un conjunto de iconos simples pero con estilo de gemas planas en Adobe Illustrator. ¡Usando formas básicas y modos de mezcla, haremos que nuestras gemas preciosas brillen y brillen. No necesitas habilidades especiales de dibujo o dispositivos, así que vamos a empezar!
1. Forma un Diamante brillante perfecto
Paso 1
Inicia Adobe Illustrator y haz un Nuevo Documento (Control-N) de 600 x 600 píxeles, en Modo de Color RGB.
Paso 2
Para mayor comodidad, usaremos Guías de Reglas. Basta con hacer clic en las Reglas (Control-R) y arrastrar las líneas guía hacia la mesa de trabajo. Alínealas en el centro de la mesa de trabajo mediante el panel Alinear.
Paso 3
¡Ahora podemos empezar a hacer nuestro diamante! Comenzaremos con su parte inferior. Utiliza la Herramienta Polígono con 3 lados para crear un triángulo. Establece el radio a 150 píxeles y posiciona tu forma como se muestra en la captura de pantalla de abajo.
Paso 4
Duplica el triángulo y aplasta la copia manteniendo pulsada la tecla Alt y moviendo uno de sus lados más cerca del centro.
Paso 5
Crea la parte superior de nuestro diamante a través de un rectángulo con la Herramienta Rectángulo (M).
Toma la Herramienta de Selección Directa (A), selecciona el punto de anclaje superior derecho y muévelo más cerca del centro (mantén presionada la tecla Mayús para mover el punto horizontalmente). Repite los mismos movimientos para el punto de anclaje superior izquierdo del rectángulo. ¡Nuestra forma de diamante se hace cada vez más reconocible!
Paso 6
¡Vamos a hacer la parte superior de nuestro diamante más detallada! Inicia creando otro rectángulo, inscrito en el centro de la parte superior. Forma una pequeña forma de triángulo dentro de la forma recién creada y usa la Herramienta Reflejar (O) para reflejarlo sobre el eje horizontal.
Paso 7
¡Ahora podemos colorear nuestro diamante y hacer que brille! Usaremos la siguiente paleta:
Para tu comodidad, utiliza la Herramienta Cuentagotas (I) y selecciona los colores directamente de la captura de pantalla o utiliza los códigos de color RGB que aparecen en ella.
Comienza a colorear por la parte inferior y poco a poco pasa a los de la parte superior. Llena la forma del triángulo inferior con el color azul cielo (R=173, G=230, B=255) y la parte superior con un azul más claro (R=208, G=239, B=252). Llena esas formas en la parte superior con blanco puro y reduce ligeramente la transparencia de los objetos, estableciendo el valor de la opacidad a 50%, para que el diamante sea más realista y brillante.
Varía la opacidad de cada elemento para enfatizar los diferentes bordes de la gema.
Paso 8
¡Hagámoslo brillar! Toma la Herramienta Estrella y crea una estrella simple de 4 puntas. Ajusta la nitidez de sus esquinas y la longitud de sus rayos manteniendo pulsada la tecla Control mientras haces el objeto. Crea otra estrella en la parte superior de la primera y gírala a 45 grados con la Herramienta Rotar (R).
Paso 9
Cambia el color de relleno de nuestro brillo a blanco. Haz varias copias del destello y colócalos en la parte superior de la gema, jugando con su tamaño.
Paso 10
Ahora necesitamos agregar una forma de icono básico como fondo. Crea un círculo usando la Herramienta Elipse (L) y rellénalo con un gradiente lineal de violeta oscuro (R=95, G=61, B=129) en el fondo a lila (R=195, G=125, B=207) en la parte superior.
Paso 11
Lo último pero no lo menos importante es hacer un popular efecto gráfico de una larga sombra con estilo plano. Comienza formando un rectángulo de cualquier color con la Herramienta Rectángulo (M). Gíralo a 45 grados y alinea su lado con el borde derecho de tu diamante.
Ubica el objeto debajo del diamante (Control- [) para ocultar cualquier parte innecesaria del mismo. Selecciona el círculo de fondo y la forma del rectángulo y utiliza la Herramienta Creador de formas (Mayús-M) para eliminar la parte innecesaria haciendo clic en ella mientras mantienes pulsada la tecla Alt. Finalmente, rellena la forma con un gradiente lineal de azul grisáceo (R=154, G=176, B=197) a blanco. Cambia el Modo de Mezcla a Multiplicar, formando así una sombra, fundida por nuestro diamante.
¡Nuestro icono de diamante está listo! ¡Pasemos a la próxima joya!
2. Crea un vívido Rubí ardiente
Paso 1
Comienza formando un cuadrado con la Herramienta Rectángulo (M) y gíralo a 45 grados.
Paso 2
Toma la Herramienta Segmento de Línea (\), crea dos rectas líneas de cruce y ubícalas justo en el centro del cuadrado. Selecciona todo y utiliza la función Dividir en el panel Buscatrazos para dividir el cuadrado en cuatro secciones separadas.
Paso 3
Ahora podemos llenar cada parte con diferentes colores para enfatizar las facetas de nuestra gema. He utilizado la siguiente paleta para el rubí:
Paso 4
Necesitamos añadir más reflejos y destellos a nuestro rubí para mostrar su textura de vidrio. Para ello, copia y pega en el frente (Control-C > Control-F) y házlo ligeramente más pequeño que la forma original. Llena la nueva copia con un gradiente lineal de amarillo polvoriento (R=209, G=181, B=96) a negro y cambia el Modo de Fusión a Pantalla, de esta manera creando un destello. Utiliza la Herramienta Reflejar (O) para hacer la copia reflejada del destello en el otro lado de nuestra gema.
Paso 5
Sigue agregando detalles menores a nuestro rubí, haciéndolo más dimensional. Coloca un cuadrado más pequeño, gira a 45 grados, encima de la gema y alínealo con el centro de la imagen. Rellena la nueva forma con un gradiente lineal de color rosa oscuro (R=228, G=20, B=64) a rosa (R=225, G=107, B=126). Por último, decoraremos nuestro rubí con unas estrellas brillantes que hemos creado antes para el diamante.
Paso 6
Coloca el rubí en un círculo, rellénalo con un gradiente lineal de verde oscuro (R=81, G=163, B=37) a un color amarillo-verde más claro (R=201, G=230, B=85) para darle al icono un efecto popular de diseño plano con una sombra larga.
¡El ícono de rubí está terminado! ¡Prepárate para el siguiente, va a ser aún más divertido!
3. Haz una maravillosa Esmeralda brillante
Paso 1
Toma la Herramienta Rectángulo Redondeado y crea una forma de aproximadamente 233 x 233 píxeles de tamaño y radio de esquina establecido en 30 píxeles. Utiliza la Herramienta Convertir Punto de Ancla (Mayús-C), haciendo clic en los puntos de ancla uno por uno, para convertirlos en esquinas (o simplemente usa la opción Convertir puntos de ancla seleccionados en esquina en el panel de control para transformar todos los puntos en seguida). Ahora tenemos un cuadrado con las esquinas cortadas.
Paso 2
Añade más facetas a nuestra preciosa joya. Usa la Herramienta Polígono para crear un triángulo, transformarlo y colocarlo de manera que su esquina más nítida se enfrente al centro de las mesas de trabajo, como se muestra en la captura de pantalla.
Utiliza la Herramienta Reflejar (O) para reflejar y copiar las facetas en todos los lados de la forma básica de la esmeralda.
Paso 3
Aplica un ligero gradiente lineal de verde oscuro (R=21, G=155, B=24) a verde hierba más brillante (R=143, G=220, B=46) hasta la forma básica de la esmeralda y rellena las facetas con un gradiente desde verde grisáceo (R=148, G=199, B=65) hasta negro, cambiándolo al modo Pantalla.
Paso 4
Vamos a hacer nuestra gema más en forma. Forma otro triángulo encima de otras partes de la esmeralda, girando su esquina al centro de la mesa de trabajo. Elimina las partes innecesarias utilizando la Herramienta Creador de Formas (Mayús-M) y cambia el tamaño de la nueva forma, haciéndola ligeramente más pequeña que la base de la esmeralda.
Paso 5
Ahora podemos llenar la nueva forma con el mismo gradiente lineal que las facetas y cambiarlo al modo Pantalla (o simplemente usar la Herramienta Cuentagotas (I) con la configuración predeterminada para seleccionar la apariencia del objeto necesario). Duplica esta forma para colocar la copia en la parte superior de nuestra gema.
Paso 6
Duplica la forma básica de la esmeralda y vuelve a organizar su posición, llevándola al frente (Shift-Control-]) y colocándola encima de todos los demás objetos. Cambia el color de relleno a un gradiente lineal de verde pálido (R=201, G=235, B=120) a verde-chartreuse más oscuro (R=83, G=192, B=44). Finalmente, agrega destellos para hacer nuestra gema brillante y atractiva.
Paso 7
Añade un toque final al icono formando un círculo, rellénalo con un gradiente lineal de rosa oscuro (R=247, G=62, B=87) a rosa-Barbie más claro (R=255, G=132, B=185) y dibuja una sombra larga. ¡Ya terminaste con la esmeralda! Es hora de pasar a la próxima joya.
4. Renderiza un Zafiro claro brillante
Paso 1
Usaremos de nuevo la Herramienta Polígono para crear una forma básica de aproximadamente 130 píxeles de tamaño, pero esta vez vamos a establecer la cantidad de Lados en 8, formando así un octágono. Gíralo, si es necesario, para que sus esquinas estén alineadas con las guías. Crea una línea recta con la Herramienta Segmento de Línea (\) y utiliza la Herramienta Rotar (R), estableciendo el valor del Ángulo en 45 grados y pulsando el botón Copiar para duplicar la línea.
Paso 2
Continúa haciendo copias de la línea con la Herramienta Reflejar (O) para que crucen cada esquina del octágono, formando un racimo de rayos estilizados, convergiendo en el centro. Finalmente, selecciona las líneas y el octágono y usa la función Dividir en el panel Buscatrazos para separar el objeto.
Paso 3
¡Ahora la parte fácil! Sólo tienes que seleccionar cada trozo de nuestro octágono, uno por uno, y llénalo con varios tonos de azul. Aquí está mi paleta, los colores se aplicaron secuencialmente, moviéndose en el sentido de las agujas del reloj.
Paso 4
Completa la renderización de nuestro zafiro poniendo el octágono más pequeño en la parte superior y llénalo con un gradiente lineal de luz azul cielo (R=183, G=238, B=255) a azul más oscuro (R=38, G=183, B=255) . Condimenta tu joya con una pizca de chispas.
Paso 5
Completa el icono rellenando su base con un gradiente lineal cálido de naranja (R=255, G=132, B=0) hasta amarillo miel (R=255, G=242, B=88) y poniendo una sombra suave.
¡Gran trabajo! Nuestro zafiro ha terminado. Estamos listos para pasar al siguiente elemento del conjunto.
5. Moldea el reluciente y brillante Ámber
Paso 1
Comienza por hacer un simple cuadrado y ve a Objeto > Trazado > Añadir puntos de ancla. Selecciona el punto de ancla, que apareció justo en el centro de la parte superior del cuadrado y tira de él un poco. Repite lo mismo para el punto de ancla inferior, formando así un agradable hexágono extendido.
Paso 2
Dibuja varias líneas rectas que forman un grupo de rayos, que dividirá el objeto, como lo hicimos con la forma básica del octágono del zafiro.
Paso 3
Llena cada segmento con suaves colores ámbar de la paleta, haciendo la gema soleada y cálida.
Paso 4
Cubre la forma con otro hexágono de un tamaño más pequeño y rellénalo con un gradiente suave de amarillo brillante (R=255, G=232, B=54) a naranja pálido (R=255, G=178, B=72) profundizando el resplandor interior de la joya.
Paso 5
Termina nuestro ámbar con un par de chispas y termina el icono mediante la aplicación de un abundante gradiente azul de color más oscuro (R=66, G=135, B=155) en un lado y más ligero (R=87, G=241, B=255) en el otro.
Luce genial, ¿no? ¡Pasemos al último!
6. Forma una misteriosa Amatista brillante
Paso 1
Esta vez nuestra gema tendrá una forma de triángulo. Dibújalo con la ayuda de la Herramienta Polígono, estableciendo el tamaño a aproximadamente 150 píxeles y el valor de Lados a 3.
Paso 2
Ahora necesitamos crear otro triángulo, aplastarlo ligeramente y girarlo, colocándolo como se muestra en la captura de pantalla de abajo. Deja que uno de sus lados se alinee con el lado derecho de la forma básica de tu gema. Añade el triángulo similar para el lado izquierdo y para la parte inferior de la forma básica.
Paso 3
Rellena cada forma con diferentes tonos de color lila, de acuerdo con la siguiente paleta:
Duplica ambos triángulos laterales y haz que las copias sean ligeramente más pequeñas que el original. Llena la copia derecha con un gradiente lineal de color púrpura claro (R=197, G=132, B=209) a negro, estableciendo su Modo de Fusión en Pantalla. Usa el mismo método para la copia izquierda, aplicando un gradiente de violeta oscuro (R=115, G=56, B=181) a negro.
Paso 4
Para hacer que nuestra gema sea más dimensional, coloca un pequeño triángulo en la parte superior y rellénalo con un gradiente lineal de un lila-pale (R=232, G=181, B=255) a un púrpura más oscuro (R=172, G=77 , B =219). No te olvides de añadir algunos pequeños destellos.
Paso 5
Finaliza añadiendo la base del icono y rellénala con un gradiente lineal de color rojo-anaranjado (R=255, G=88, B=46) en el fondo a amarillo brillante (R=255, G=233, B=87) en la parte superior.
¡Parece que la amatista está terminada!
¡Guauu! ¡Tu conjunto de iconos planos brillantes de gemas está terminado!
¡Felicitaciones, acabas de crear todo el conjunto de iconos de joyas brillantes en un popular estilo plano! Espero que hayas disfrutado del proceso y encontrado algunos consejos y trucos útiles en este tutorial.
By
