Share
Con este tutorial me gustaría mostrarle algunos trucos para crear líneas y bordes limpios cuando trabaje con la tendencia de diseño plano, en Adobe Illustrator. Los estilos en capas simples y la reutilización de los estilos gráficos para ayudar a su flujo de trabajo son más eficientes, por lo que debería poder crear un conjunto de iconos coincidentes en un instante..
Para empezar, vamos a crear un tablero de arte que sea 500 x 500px. Dado que nuestros iconos son más bien módulos y tienen muchas líneas rectas, lo mejor sería trabajar con una cuadrícula para garantizar formas de píxeles nítidos perfectos. Así que vamos a crear una cuadrícula que es 1px y luego mostrar y Encajar a la cuadricula como se describe a continuación.
Mientras hace sus íconos, intente tener en cuenta el uso del ícono en sí y el lugar donde se colocará. Para estos iconos me quedaré con un tamaño general de 128 x 12px que es bastante común en el mundo de los iconos. Ya que estamos siguiendo la tendencia de diseño plano, nos mantendremos con colores básicos y ángulos de 45º con sombras exageradas..
Estaré creando la estructura de alambre de estos iconos con formas básicas y luego ajustaré el estilo de las formas con un puñado de Estilos gráficos. Así que para comenzar seleccione la Herramienta de rectángulo redondeado y crea un rectángulo que es 20 x 80 px y colócalo en el tablero de arte.
A continuación, seleccione la Herramienta Elipse (L) y crear varios círculos concéntricos. El primero es ser 70 x 70px, entonces 55 x 55 px, entonces 40 x 40px, y finalmente 15 x 15px. Ahora ordénalos como ves a continuación..
Selecciona el Herramienta Rectangular (M) y dibuja unas cuantas que cubran la mitad de las formas que acabamos de crear. Los usaremos para recortar formas que luego se convertirán en áreas sombreadas. La altura / anchura no importa, solo asegúrese de que se alineen exactamente con el centro de las otras formas. También haremos una sombra proyectada, así que dibuja un cuadrado y gíralo 45º y colóquela de modo que el borde de la línea diagonal se encuentre con la parte inferior del círculo más exterior y el rectángulo redondeado de la parte inferior.
Utilizando la Pionero panel utilizaremos una combinación de Unir, Frente menos, y Intersecarse para cambiar estas formas rectangulares en nuestras superposiciones de sombra. Cuando use estas herramientas, recuerde que afectará la forma, por lo que deberá duplicar estos objetos para crear el resultado deseado. En la captura de pantalla a continuación, apliqué el color rojo al objeto y la capa blanca será nuestra sombra más adelante..
Ahora tendremos que hacer la sombra del elenco. Comience duplicando la parte más inferior y las formas de círculo más grandes. Unir ellos en un objeto Duplica esta nueva forma y empújala a la izquierda 15px. Visitar Objeto> Mezcla> Opciones de mezcla ... e ingrese los pasos suficientes para que haya una transición suave (me he quedado con 50), entonces Hacer la mezcla. Ahora Expandir el objeto y Unir Para formar una sola forma. Acercar a la forma habilitar la Herramienta de selección directa (A) y seleccione los puntos adicionales que no sean necesarios y elimínelos, asegurándose de cerrar los caminos (Comando + J) una vez que haya terminado. Finalmente, alinee este objeto con la parte posterior de todas las demás formas, si aún no lo ha hecho..
Dado que nuestros iconos son solo 'Sorta Flat', hagamos algunos puntos destacados. Seleccione las formas del elemento principal (las que están en rojo) y duplíquelas dos veces. Usando las flechas en el teclado, mueva la parte superior del duplicado superior sobre 1px. La dirección en la que mueves el elemento más superior depende de la dirección del color. Por lo tanto, para la forma del asa inferior, gírela hacia la izquierda, pero para la forma redonda interior, empújela hacia la derecha hacia el área roja. Seleccione las dos duplicaciones y use Frente menos Para dejar un poco de luz. Puedes ver esto en verde en la captura de pantalla de abajo..
Con nuestras principales formas terminadas, vamos a estilizarlas. Selecciona todos los elementos que componen la lupa y gíralos. 45º a la izquierda.
Ahora selecciona todos los elementos que conformarán las sombras. Estas son las partes blancas en el mango y los anillos externos, así como la sombra proyectada larga. Rellene estos con negro plano y suelte el Opacidad a 15% y asegúrese de eliminar cualquier borde que pueda tener. Una vez hecho esto, vaya a Ventana> Estilos gráficos y cuando aparezca esa ventana haga clic en el Nuevo botón de elemento en la parte inferior derecha junto al icono de papelera para crear un estilo gráfico fuera de este efecto.
Seleccione el área de la manija y navegue a su Apariencia (Ventana> Apariencia) Panel e ingrese la información que se ve a continuación. El color base será un color gris plano, luego agregaremos otra capa encima de la rellena con un degradado de negro a blanco establecido en 45º con un Opacidad de 25% y Modo de fusión ajustado a Cubrir. Una vez completado, guarda esto como Estilo grafico también.
Seleccione el círculo más inferior y aplicaremos casi el mismo estilo, solo usaremos un tono de gris más claro. Una vez más, guarde esto como un Estilo grafico.
Seleccione el círculo interior y aplique el mismo estilo más claro que acabamos de hacer, invierta el gradiente para que sea de claro a oscuro.
Selecciona el círculo más interior que será nuestra lente. El mismo estilo también se usará para esta forma, solo que en lugar del gris, usaremos un color de acento azul. Asegúrese de crear también un Estilo grafico de esto también.
Finalmente, añadiremos nuestros puntos destacados. Seleccione todos los elementos verdes y rellénelos con blanco plano, luego suelte el botón Opacidad Abajo a 25%. Asegurándose de guardar esto como un Estilo grafico también. El último círculo que queda en la forma es un resaltado fuerte, así que lo dejaremos como blanco 100%, solo asegúrate de quitar el borde.
Vamos a crear las muescas para la forma de nuestro equipo. Selecciona el Herramienta de rectángulo redondeado y crea un rectángulo que es 20 x 110px y encajarlo en el tablero de arte. Ahora duplica esta forma tres veces más y gíralas en 45º ángulos para hacer una forma de flor.
A continuación, seleccione la Herramienta Elipse (L) y crear varios círculos concéntricos. El primero es ser 90 x 90px, entonces 60 x 60px, y finalmente 30 x 30px. Ahora ordénalos como ves a continuación..
Seleccione la forma de la flor y el círculo más inferior y Unir ellos. Luego selecciona el círculo más pequeño y duplícalo. Ahora seleccione uno de los círculos pequeños duplicados y las formas más grandes y Frente menos dejar un todo en el medio.
Ahora vamos a hacer algunas sombras de nuevo. Comience por crear rectángulos que cubran la mitad de las formas. Como tenemos los extremos de los engranajes adicionales, también agregaremos algunas sombras a esos. Alinee las esquinas para las sombras del engranaje en el punto donde el círculo se encuentra con el extremo del engranaje.
Ahora crea la sombra proyectada. Duplica la forma del engranaje inferior y pásala por encima 15px como nuestro ícono anterior. Mezcla las dos formas entonces Expandir y Unir ellos.
Ahora crea los aspectos más destacados. Recuerda empujar hacia el color rojo.
Por último, girar las formas. 45º y aplicar nuestro Estilo grafico desde antes Este icono es bastante fácil, así que solo usaremos el estilo gris oscuro, asegurándonos de invertir el gradiente del círculo interno.
Nuestro icono de ojo usa muchos círculos. Por lo tanto, seleccione la Herramienta Elipse (L) y crear varios círculos concéntricos. El primero es ser 120 x 120px, entonces 50 x 50px, y finalmente 20 x 20px. Ahora ordénalos como ves a continuación..
Seleccione el círculo más grande y cambie a la Convertir herramienta de punto de anclaje (Mayús + C). Seleccione los dos puntos tanto a la izquierda como a la derecha, y haga clic para hacerlos puntos agudos. Ahora seleccione el Herramienta de selección directa (A) empujar el anclaje superior curvado hacia abajo 20px. Repita esto para la parte inferior también, solo, empuje hacia arriba en su lugar.
Ahora selecciona todas estas formas juntas y gíralas 45º agujas del reloj. Después de que pongamos nuestras sombras y luces en su lugar, las rotaremos para que estén en la perspectiva correcta.
Selecciona el Herramienta Elipse (L) y crear un óvalo que sea 15 x 20 px y alinéelo como se ve abajo.
Crea las sombras y los resaltes como hemos hecho antes. Dividiendo las formas por la mitad con rectángulos y usando el Pionero panel.
Selecciona todas nuestras formas una vez más y gíralas de nuevo. 45º, A continuación, aplique nuestros estilos gráficos. Usando nuestro color gris más claro para la parte principal del ojo, el azul con el gradiente invertido para el iris y un gris oscuro que presentaremos ahora para la pupila.
Estamos a medio camino con nuestro conjunto de iconos! Vamos a crear uno que represente el chat, o los comentarios. Con el Herramienta de rectángulo redondeado crear un rectángulo que sea 80 x 75px
Ahora con el Herramienta Rectangular (M) crear un rectángulo que sea 25 x 15px entonces alinéelo con el fondo y 15px desde la derecha.
Con el Herramienta Elipse (L) Crea tres círculos que sean 15 x 15px y alinéelos al centro del rectángulo redondeado como se ve a continuación.
Habilitar el Herramienta de selección directa (A) y selecciona el punto inferior izquierdo que forma el rectángulo inferior, luego retíralo para formar un triángulo rectángulo, asegurándote de cerrar el camino cuando hayas terminado.
Seleccione el rectángulo redondeado y el triángulo y Unir Para hacer una forma completa. Una vez que estén unidos, dupliquen la forma de esta burbuja de diálogo, gírelo horizontalmente y empújelo hacia abajo y hacia la derecha. 15px debajo de las otras formas.
Como hicimos con el icono del ojo, seleccione todas las formas y luego gírelo 45º. Trabajaremos en las sombras y los resaltes en este ángulo para que cuando lo giremos hacia atrás se proyecten correctamente..
Como en los íconos anteriores, vamos a crear bordes afilados para indicar sombras y resaltes. Sé consciente de tus sombras. Quieres crear la ilusión de que los círculos proyectan una sombra realmente larga sobre la burbuja y que la burbuja superior proyecta una sombra sobre la inferior. Para las sombras proyectadas de los círculos, simplemente usaré un rectángulo que tiene la misma altura que el círculo y lo suficientemente ancho para que quepa sobre la burbuja y luego elimine el exceso.
Ahora rota las formas hacia atrás y aplica tus estilos gráficos. La burbuja inferior será nuestro gris más oscuro, mientras que la superior será nuestro gris más claro y los puntos serán nuestro acento azul.
Vamos a pasar a nuestro reloj. Con el Herramienta Elipse (L) Crea varios círculos concéntricos. El primero es ser 100 x 100px, entonces 75 x 75px, y finalmente 10 x 10px. Ahora ordénalos como ves a continuación..
Ahora vamos a crear las manecillas del reloj. Selecciona el Herramienta Rectangular (M) crear un rectángulo que sea 10 x 30px, otro que es 10 x 20px, y otro que es 2 x 30 px. Ahora alinéalos de modo que la parte inferior de los rectángulos se encuentre con la mitad de los círculos.
Cambiar a la Herramienta de rotación (R) y seleccione el rectángulo largo y delgado. Coloque el cursor sobre el punto central de la forma, luego haga clic y arrastre ese punto hasta la parte inferior del rectángulo, asegurándose de que se mantiene en el centro y se ajusta a la parte inferior. Ahora gira la forma 135º agujas del reloj. Repita este paso para la pieza de rectángulo cortocircuitada, solo gírela hacia la izquierda.
Seleccione el círculo más pequeño en el centro y la mano larga y delgada y Unir Juntarlos y colocarlos por encima de las otras manos. Ahora selecciona todas las formas y rota 45º
Corte las formas a la mitad como lo hemos hecho antes y cree nuestra sombra proyectada, así como los aspectos más destacados. Para el punto culminante, sin embargo, me gustó la idea de tener un punto culminante dentro del área oscura que caería en la sección inferior. Esto le da un toque de dimensionalidad que no estaría allí, debería usarse de la manera que hemos estado haciendo..
Gire las formas hacia atrás y aplique su Estilos gráficos. La cara será el gris claro, el borde exterior y las manecillas de minutos y horas serán nuestro gris más oscuro, y la manecilla de segundo será nuestro color de acento.
Para nuestro último icono creamos un calendario. Selecciona el Herramienta de rectángulo redondeado y crea un rectángulo que es 90 x 80 px.
Duplica este rectángulo redondeado y alinéalo con la esquina inferior derecha. No hay puntos a los que no se alineará exactamente, pero la función de ajuste le permitirá saber cuándo está cerca. Una vez allí, mueva el duplicado hacia arriba y hacia la izquierda 20px. Ahora en el Pionero panel elige Dividir De la lista de iconos en la parte inferior. Luego cambia a Herramienta de selección directa (A) y seleccione la forma del fondo exterior y elimínela. A continuación, retire la esquina inferior derecha curva para que quede con una escalera 45º borde.
Selecciona el Herramienta Rectangular (M) crear un rectángulo que sea 90 x 25px y alinearlo con la parte superior de la forma. Después de duplicar el rectángulo redondeado grande inferior, seleccione el rectángulo recto superior y el redondeado y use Intersecarse desde el Pionero panel.
A continuación, crea dos Rectángulos redondeados que son fuertes 15 x 30px y las esquinas son lo suficientemente redondeadas como para formar una pastilla. Luego alinéalos a la parte superior del elemento como se ve a continuación.
Cambiar a la Tipo de herramienta (T) y escriba un número. Cualquiera que desees, usaré "9" ya que es el primero que me vino a la mente. Para la fuente usemos "Helvetica" con un tamaño de 50px. No ir a Objeto> Expandir y convertir el tipo a una ruta.
Selecciona todas las formas y gírala. 45º. Ahora agrega tus sombras y luces como hemos hecho antes. Tenga en cuenta que el pliegue que creamos en la esquina inferior proyectará una sombra. Para esto solo haremos un rectángulo que tiene la misma altura que el pliegue y Intersecarse a partir de una duplicación del rectángulo inferior.
Finalmente gire las formas hacia atrás y aplique sus estilos gráficos. El rectángulo redondeado inferior será nuestro gris claro, el pliegue será blanco plano, las formas de las píldoras serán nuestro gris oscuro, el rectángulo superior será nuestro color de acento y el número será el mismo gris oscuro de nuestra pupila en el icono de ojo que creamos.
Y con eso nuestro conjunto de iconos está completo. Continué y agregué un color de fondo plano con un gris oscuro para que los iconos destaquen. Siéntase libre de espaciar estos como quiera en su tablero de arte.
Espero haber podido mostrarles que aunque los iconos planos son inherentemente "planos", no tienen que estar sin estilo. ¿Qué otros iconos puedes llegar a?
Accentsconagua