Con este tutorial me gustaría que le muestre algunos trucos sobre cómo crear líneas limpias y bordes cuando se trabaja con la tendencia de diseño plano, en Adobe Illustrator. Estilos de capas simples y reutilización Estilos gráficos para ayudar a su flujo de trabajo son más eficientes, por lo que debe ser capaz de crear un conjunto de iconos de juego en ningún momento.
1. Configuración del documento
Para empezar, vamos a crear una tabla de arte que es 500 x 500px . Ya que nuestros iconos son bastante módulo y tener un montón de líneas rectas que sería mejor trabajar con una rejilla para asegurar perfectas formas nítidas píxeles. Así que vamos a crear una red que es 1px y luego mostrar y ajustar a la cuadrícula como se indica a continuación.
2. Crear un icono Ampliar
Al hacer sus iconos intentan tener en cuenta el uso del icono de sí mismo y en el que se colocará. Para estos iconos estaré pegando con un tamaño general de 128 x 12 píxeles , que es bastante común en el mundo icono. Ya que estamos siguiendo la tendencia de diseño plano que me quedo con los colores básicos y los ángulos de 45 º nítidas con sombras exageradas.
Paso 1
Voy a ser la creación de la estructura metálica 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 a seleccionar la herramienta Rectángulo redondeado y crear un rectángulo de 20 x 80px y encaje a la junta técnica.
Paso 2
A continuación, seleccione la herramienta Elipse (L) y crear varios círculos concéntricos. El primero es 70 x 70px , entonces 55 x 55 px , entonces 40 x 40px , y, finalmente, 15 x 15px . Ahora les brinda a medida que aparece a continuación.
Paso 3
Seleccione la herramienta Rectángulo (M) y dibujar algunas que cubren la mitad de las formas que acabamos de crear. Vamos a utilizar estos para recortar off formas que más tarde se convertirán en zonas de sombra. La altura / anchura no importa, simplemente garantizar que se alinean exactamente con el centro de las otras formas. También estaremos haciendo una sombra proyectada para dibujar un cuadrado y girarlo 45 º y colocarlo de manera que el borde de la línea diagonal se encuentra con el fondo del círculo más externo y el rectángulo redondeado inferior.
Paso 4
Uso de la Pathfinder Panel usaremos una combinación de Unite , Minus delantero y se cruzan de cambiar estas formas de rectángulo en nuestras superposiciones sombra. Recuerde que al utilizar estas herramientas que afectará la forma por lo que tendrá que duplicar estos objetos con el fin de crear el resultado deseado. En la siguiente captura de pantalla que he aplicado el color rojo para el objeto y la capa blanca serán nuestras sombras más adelante.
Paso 5
Ahora tendremos que hacer que la sombra proyectada. Comience por duplicar la más manija inferior y mayores formas de círculo y luego se unen en un solo objeto. Duplicar esta nueva forma y empujar hacia la izquierda 15px . Visite Objeto> Fusión> Opciones de fusión ... y escriba las medidas suficientes para que haya una transición sin problemas (me he pegado con 50 ), y luego hacer la mezcla. Ahora Expandael objeto y unir para formar una sola forma. Amplíe la forma de activar la herramienta de selección directa (A) y seleccione los puntos adicionales que no son necesarios y eliminarlos, asegurándose de cerrar los caminos ( Comando + J ) una vez que haya terminado. Finalmente alinear este objeto a la parte posterior de todas sus otras formas, si no lo ha hecho.
Paso 6
Ya que nuestros iconos son sólo "Sorta Flat ', vamos a hacer algunos toques de luz. Seleccione las principales formas de elementos (los de rojo) y duplicar dos veces. Con las flechas del teclado, empujar la parte superior la mayoría duplicado durante 1px . La dirección mueve sin querer la parte superior mayoría de los elementos depende de la dirección es el color. Por lo tanto, para la forma de la manija inferior, empujar hacia la izquierda, pero por la forma redonda interior, empujar hacia la derecha hacia la zona roja.Seleccione las dos duplicaciones y utilizar menos frontal para dejar una pequeña porción de lo más destacado. Esto se puede ver en verde en la imagen de abajo.
Paso 7
Con nuestros principales formas completado estilo que vamos a ellos. Seleccione todos los elementos que componen la lupa y girarlas 45 º en sentido antihorario.
Ahora selecciona todos los elementos que componen las sombras. Estas son las partes blancas en el mango y los anillos exteriores, así como la larga sombra del molde. Llenar estos con negro mate y soltar elOpacidad al 15% , y asegúrese de eliminar cualquier borde que pueda tener. Una vez hecho esto, vaya a la ventana> estilos gráficos y, cuando aparezca la ventana haga clic en el nuevo botón del elemento en la parte inferior derecha junto al icono de la papelera para crear un estilo gráfico de este efecto.
Paso 8
Seleccione el área de la manija y vaya a su apariencia (Ventana> Apariencia) del panel e introduzca la información se muestra a continuación. El color base será de un color gris plana, a continuación vamos a añadir otra capa encima de eso llena de un negro a conjunto blanco de la pendiente de 45 º con unaopacidad del 25% y el modo de mezcla ajustado a Overlay . Una vez completado salva esto como unestilo gráfico también.
Paso 9
Seleccione la parte inferior más círculo y vamos a estar aplicando más o menos el mismo estilo, sólo vamos a utilizar un tono más claro de gris. Una vez más, salva esto como un estilo gráfico .
Paso 11
Seleccione el círculo más interno que será nuestro objetivo. El mismo estilo se utilizará para esta forma también, sólo que en lugar de gris, vamos a utilizar un color de acento del azul. Asegúrese de crear también un estilo gráfico de esto también.
Paso 12
Por último, vamos a añadir nuestros mejores momentos. Seleccione todos los elementos verdes y llenarlos con blanco plano y luego soltar la opacidad a 25% . Asegurarse de guardar esto como un estilo gráficotambién. El último círculo a la izquierda en la forma es un toque de luz dura, así que lo dejamos como blanco al 100% , sólo asegúrese de y quite la frontera.
3. Crear un icono de engranaje
Paso 1
Vamos a crear las muescas para nuestra forma de engranaje. Seleccione la herramienta Rectángulo redondeado y crear un rectángulo de 20 x 110px y encaje a la junta técnica. Ahora duplicar esta forma tres veces más y girarlas a 45 º ángulos para hacer una forma de flor.
Paso 2
A continuación, seleccione la herramienta Elipse (L) y crear varios círculos concéntricos. El primero es 90 x 90px , entonces 60 x 60 píxeles , y, finalmente, 30 x 30px . Ahora les brinda a medida que aparece a continuación.
Paso 3
Seleccione la forma de la flor y el fondo más círculo y unir ellos. A continuación, seleccione el círculo más pequeño y duplicarlo. Ahora seleccione uno de los pequeños círculos duplicados y las formas más grandes y menos frontal para dejar un todo en el medio.
Paso 4
Ahora vamos a hacer algunas sombras de nuevo. Comience por crear rectángulos que cubren la mitad de las formas. Ya que tenemos finaliza la carga extra también vamos a añadir algunas sombras a los. Alinee las esquinas de las sombras engranaje en el punto en que el círculo se encuentra con el lado del engranaje.
Paso 5
Ahora crea la sombra proyectada. Duplicar la forma de engranaje inferior y empujarlo sobre 15px como nuestro icono anterior. Licúe las dos formas a continuación Expandir y Unite ellos.
Paso 6
Ahora crea los más destacados. Recuerde que debe empujar hacia el color rojo
Paso 7
Finalmente, gire las formas 45 º y aplicar nuestro estilo gráfico de antes. Este icono es bastante fácil, así que sólo vamos a utilizar el estilo más oscuro gris, asegurándose de invertir el gradiente para el círculo interior.
4. Crear un icono de ojo
Paso 1
El icono del ojo utiliza una gran cantidad de círculos. Por lo tanto, seleccione la herramienta Elipse (L) y crear varios círculos concéntricos. El primero de ellos 120 x 120px , entonces 50 x 50px , y, finalmente, 20 x 20 píxeles . Ahora les brinda a medida que aparece a continuación.
Paso 2
Seleccione el círculo más grande y cambie a la herramienta Convertir punto de ancla (Mayús + C) .Seleccione los dos puntos en la izquierda y la derecha y haga clic en para hacerlas puntas afiladas. Ahora selecciona la herramienta de selección directa (A) empujar el anclaje superior curvada hacia abajo 20 píxeles . Repita esto para la parte inferior y, solamente, empujar hacia arriba en su lugar.
Paso 3
Ahora seleccione todas estas formas juntos y girarlo 45 º en sentido horario. Después de que consigamos nuestras sombras y luces en su lugar vamos a rotar de nuevo por lo que son en la perspectiva correcta.
Paso 5
Crear las sombras y luces, como hemos hecho antes. Dividir las formas en un medio con rectángulos y el uso de la Pathfinder panel.
Paso 6
Seleccione todas nuestras formas de nuevo y gira de nuevo 45 º , a continuación, aplicar los estilos gráficos. Con nuestro color gris más claro para la parte principal del ojo, el azul con el gradiente invierte para el iris y un gris oscuro que vamos a presentar ahora para el alumno.
5. Crear un Icono de chat
Paso 1
Estamos a medio camino hecho con nuestra icon set! Vamos a crear una que representa el chat o comentarios. Con la herramienta Rectángulo redondeado crear un rectángulo de 80 x 75px
Paso 2
Ahora, con la herramienta Rectángulo (M) crear un rectángulo de 25 x 15px luego alinee a la parte inferior y 15px a la derecha.
Paso 3
Con la herramienta Elipse (L) crear tres círculos que son 15 x 15px y alinearlas al centro del rectángulo redondeado como se ve a continuación.
Paso 4
Active la herramienta de selección directa (A) y seleccione el punto inferior izquierdo que forma el rectángulo inferior y luego retírela para formar un triángulo rectángulo, asegurándose de cerrar el trazado cuando haya terminado.
Paso 5
Seleccione el rectángulo redondeado y el triángulo y unir para hacer una forma completa. Una vez unidos, duplicar este discurso de forma de burbuja y colocarlo en forma horizontal y empujar hacia abajo y hacia la derecha 15px debajo de las otras formas.
Paso 6
Al igual que hicimos con el icono del ojo, seleccionar todas las formas a continuación, girar 45 º . Vamos a trabajar en las sombras y se destacan en este ángulo para que cuando giramos de nuevo que están lanzados correctamente
Paso 7
Como en los iconos anteriores vamos a crear bordes afilados para indicar sombras y luces. Sea consciente de sus sombras. Desea crear la ilusión de que los círculos están echando una muy larga sombra a través de la burbuja y que la burbuja superior está proyectando una sombra sobre la inferior. Para las sombras de los círculos Simplemente usaré un rectángulo que es la misma altura que el círculo y lo suficientemente amplia como para encajar en la burbuja y luego quitar el exceso.
Paso 8
Ahora gire las formas de ida y aplicar los estilos gráficos. La burbuja de fondo será nuestro gris más oscuro, mientras que el superior será nuestro gris más claro y los puntos será nuestro color azul acento
6. Crear un icono de reloj
Paso 1
Vamos a pasar a nuestro reloj. Con la herramienta Elipse (L) crear varios círculos concéntricos. El primero de ellos 100 x 100px , entonces 75 x 75px , y, finalmente, 10 x 10px . Ahora les brinda a medida que aparece a continuación.
Paso 2
Ahora vamos a crear las manecillas del reloj. Seleccione la herramienta Rectángulo (M) crear un rectángulo de 10 x 30px , otro que es 10 x 20 píxeles , y otra que es 2 x 30 px . Ahora orientarlas de manera que la parte inferior de los rectángulos se encuentra con el medio de los círculos.
Paso 3
Cambie a la herramienta Rotar (R) y seleccione el rectángulo largo y delgado. Coloque el cursor sobre el punto central de la forma a continuación, haga clic y arrastre ese punto hasta la parte inferior del rectángulo asegurando que está estancias en el centro y se ajusta a la parte inferior. Ahora girar la forma135 º en sentido horario. Repita este paso para la pieza rectángulo corto, sólo giran en sentido contrario a las agujas del reloj.
Paso 4
Seleccione el círculo pequeño en el centro y la mano larga y delgada unir juntos y ponerlos por encima de las otras manos. Ahora seleccione todas las formas y girar 45 º
Paso 5
Cortar las formas en la mitad de lo que hemos hecho antes y crear nuestra sombra proyectada, así como los aspectos más destacados. Para el más destacado sin embargo, me gustó la idea de tener un punto culminante en el área oscura que caería en la sección inferior. esto le da un toque de dimensionalidad que no estaría allí debe usar la forma en que hemos estado haciendo.
Paso 6
Gire las formas de ida y aplicar los estilos gráficos . La cara será el gris claro, el borde exterior, y los minutos y las manos horas será nuestro gris más oscuro, y la segunda parte será nuestro color de acento
7. Crear un icono de calendario
Paso 1
Para nuestro último icono vamos a crear un calendario. Seleccione la herramienta Rectángulo redondeado y crear un rectángulo de 90 x 80px .
Paso 2
Duplicar el rectángulo redondeado y ajustarla a la esquina inferior derecha. No hay puntos para que no se alinearán exactamente, pero la característica de rotura deben a saber cuando estás cerca. Una vez allí, empujar el duplicado y hacia la izquierda 20 píxeles . Ahora en el Pathfinder panel de elegir Divida la lista de iconos en la parte inferior. Luego cambiar a la herramienta de selección directa (A) y seleccione la forma del fondo fuera y retírela. A continuación, retire la esquina derecha inferior curvada para que uno se queda con una recta de 45 º borde.
Paso 3
Seleccione la herramienta Rectángulo (M) crear un rectángulo de 90 x 25px y alinear a la parte superior de la figura. Después de duplicar el fondo gran rectángulo redondeado seleccionar tanto el rectángulo recto superior y una redondeada y utilizar Intersección de la Pathfinder panel.
Paso 4
A continuación, cree dos rectángulos redondeados que son fuertes 15 x 30px y las esquinas son redondeadas suficiente para hacer una forma de píldora. Entonces ellos alinear a la parte superior del elemento como se ve a continuación.
Paso 5
Cambie a la herramienta Texto (T) y escriba un número. Cualquier persona que desee, voy a utilizar "9", ya que es el primero que vino a mi mente. Para el tipo de letra que vamos a utilizar "Helvetica" con un tamaño de 50px . No vaya a Objeto> Expandir y convertir el tipo a un trazado.
Paso 6
Seleccione todas las formas y girarlo 45 º . Ahora agregue sus sombras y luces como lo hemos hecho antes. Tenga en cuenta que el pliegue que hemos creado en la esquina inferior proyecta una sombra. Para ello sólo tendremos que hacer un rectángulo que es la misma altura que el pliegue y se cruzan desde la duplicación del rectángulo inferior.
Paso 7
Finalmente girar las formas de ida y aplicar los estilos gráficos. La parte inferior rectángulo redondeado será nuestro gris claro, el pliegue será un plano blanco, las formas de pastillas serán nuestros gris oscuro, el rectángulo superior será nuestro acento de color, y el número será el mismo gris oscuro de nuestro alumno en el icono del ojo que hemos creado.
Fuente:enlace
No hay comentarios:
Publicar un comentario