Share
Lo que vas a crearEl tutorial de hoy es un poco especial ya que te mostraré el proceso detrás del paquete de íconos que tuve el honor de crear para nuestro increíble pequeño equipo aquí en Envato Tuts +. Entonces, si te gusta el diseño de íconos, o simplemente quieres agregar a tu bolsa de trucos y consejos vectoriales, tómate una taza de café con hebilla, ya que este tutorial te mostrará todos los pasos que debes considerar cuando creando un nuevo paquete de iconos.
Si te gusta este tipo de iconos, deberías visitar Envato Market para inspirarte en el diseño de iconos..
Como siempre, lo primero que debe hacer al crear algo, ya sea un paquete de íconos o una ilustración, es asegurarse de que su documento esté configurado correctamente. Entonces, asumiendo que ya tiene Illustrator en funcionamiento, hagamos exactamente eso yendo a Archivo> Nuevo o presionando el Control-N atajo de teclado.
Como puedes ver, te encuentras con una pequeña ventana emergente que tiene muchas opciones, pero solo nos interesan algunas de ellas:
Y desde el Avanzado lengüeta:
Consejo rapido: puedes dejar el Efectos raster configuración para Pantalla (72 ppi) ya que esto no afectará el aspecto y la calidad general de su diseño, siempre y cuando no lo imprima. Si necesita que sea entintado en papel, es posible que desee utilizar un valor más alto, pero solo si su diseño lo utiliza. Efectos estilizados como Sombras sueltas, Resplandor interno / externo, etc., ya que estos tienden a verse pixelados cuando se imprimen usando un valor de ppi más bajo.
Para aquellos que se preguntan por qué puse el mío en 300, Bueno, digamos que para mí se ha convertido en un reflejo..
Una vez que haya configurado correctamente mi documento, el siguiente paso que generalmente tomo implica el proceso cuidadoso de crear y etiquetar mis capas para que pueda tener todo perfectamente organizado y al alcance de la mano..
Entonces, hagamos eso abriendo el Capas panel, y creando cinco capas que nombraremos de la siguiente manera:
Ya que Illustrator permite el uso de Grids, debe saber que le da la opción de ajustar su diseño a su Pixel Grid. Eso significa que sus formas se verán súper nítidas siempre que use el Encajar a la cuadricula / Pixel Grid opciones, ya que cada punto de anclaje se posicionará en la intersección central de cuatro píxeles, por lo que se ajustará a él.
Debido a que hay diferentes situaciones que requieren diferentes configuraciones de cuadrícula, a veces puede encontrarse en la posición de ajustar las que se ejecutan en su versión de Adobe Illustrator..
Personalmente, he optado por la configuración más baja y al mismo tiempo más precisa, porque siento que tengo más control sobre mis diseños..
Para cambiar estas configuraciones, debes ir a Edición> Preferencias> Guías y cuadrícula. A partir de ahí, aparecerá una pequeña ventana emergente, donde debemos ajustar lo siguiente:
Una vez que haya ajustado estas configuraciones, todo lo que necesita hacer para que todo el píxel sea nítido es habilitar la Encajar a la cuadricula opción ubicada bajo el Ver menú.
Consejo rapido: usted debe saber que el Encajar a la cuadricula opción se transformará en Ajustar a Pixel cada vez que entras Modo de vista previa de píxeles, pero eso está totalmente bien, ya que la mayoría de las veces volverá y avanzará con este modo de visualización.
Si está acostumbrado a mover las cosas con la ayuda de las teclas de flecha direccionales del teclado, es posible que desee cambiar la Incremento de teclado a 1 px para conseguirlo lo más preciso posible. Puedes hacer esto yendo a Edición> Preferencias> General> Incremento de teclado.
Si su versión de AI tiene el valor establecido en pt, simplemente vaya a Unidades y cambiar el General y Carrera unidades para Pixeles y eres bueno para ir.
Puedes leer más acerca de la cuadrícula y cómo crear ilustraciones con un píxel perfecto aquí:
Al crear cualquier icono, hay un par de cosas que siempre debe tener en cuenta, ya que estoy bastante seguro de que ayudarán a que el proceso creativo sea mucho más fácil..
Cada vez que comiences un nuevo proyecto, debes tomarte un par de minutos para enfocarte en el tamaño de tus íconos. Este paso es realmente importante, ya que querrá crear y usar una Cuadrícula base al elegir uno de los tamaños de iconos predeterminados disponibles en la actualidad (16 x 16 px, 32 x 32 px, 48 x 48 px, 64 x 64 px, 72 x 72 px, 96 x 96 px, 128 x 128 px, 256 x 256 px, etc.) que te ayudarán a crear un paquete coherente y cohesivo. Dependiendo de las necesidades de su proyecto, podría terminar usando tamaños más grandes o más pequeños, o incluso una combinación de los dos..
Ahora, para nuestro ejemplo actual, he decidido ir con un tamaño bastante grande de 96 x 96 px, ya que este tipo de icono sería algo que probablemente vería en un sitio web de aprendizaje en línea, como Envato Tuts+.
Por definición, una Cuadrícula base es una superficie de referencia delimitada con precisión que se construye y utiliza para guiar al diseñador a través del proceso de creación de los activos del paquete de iconos. Por lo general, la forma de la base de cuadrícula es un cuadrado perfecto, ya que permite una mejor planificación y estructuración de las formas y líneas en la superficie, en comparación con un círculo que nos da control total sobre el conteo de píxeles..
Por otro lado, el círculo como forma es más útil cuando se usa como una Rejilla de referencia, ya que permite la creación de cuadrículas detalladas y complejas y líneas de referencia que puede aprovechar para crear composiciones que tengan una "geometría perfecta". sentir a ellos.
Personalmente, prefiero limitar mis formas de cuadrícula y usar solo formas cuadradas, ya que generalmente puedo crear composiciones que tengan una sensación más orgánica, pero eso es solo yo. He visto a muchas personas que crean cosas increíbles utilizando Guías altamente detalladas..
Para nuestro ejemplo, vamos a mantener las cosas simples y construir cuatro cuadrículas base, una para cada icono.
Primero, asegúrese de posicionarse en la capa de cuadrículas de la base y luego utilice la Herramienta Rectangular (M) vamos a crear un 96 x 96 px cuadrado, que colorearemos utilizando un tono de gris relativamente claro (# E6E6E6).
Ahora, como a menudo me gusta darle un poco de relleno a mis íconos, crearemos un 92 x 92 px Cuadrado, con el que colorearemos. # F2F2F2 y posición sobre la anterior, asegurándose de alinearla con su centro.
Una vez que tenga la cuadrícula base y el relleno, agrupe las dos formas usando Control-G y cree tres copias más, que colocaremos a su lado derecho a una distancia de 60 px.
Tan pronto como tenga todas las cuadrículas de la base en su lugar, puede bloquear la capa para que no las mueva accidentalmente, y luego podemos comenzar a trabajar en el primer icono..
Primero, asegúrate de que estás en la capa correcta y luego haz zoom para tener una buena vista clara de la primera cuadrícula base.
Comenzaremos creando la sección inferior redonda, que alberga el pequeño símbolo vectorial..
Primero, toma el Herramienta Elipse (L) y dibuja un 60 x 60 px Forma, que colorearemos con un tinte naranja oscuro. # D8532A, y luego la posición hacia el lado centrado inferior de la más pequeña 92 x 92 px cuadrado, dejando un hueco de 4 px entre los dos.
Como queremos que todo sea lo más preciso y preciso posible, le recomendaría que utilice el Vista previa de píxeles modo (Ver> Vista previa de píxeles o Alt-Control-Y), ya que le permitirá ver la cuadrícula de píxeles subyacente, lo que le dará un control total sobre la posición de sus formas.
Tan pronto como tenga la forma en su lugar, dele un contorno usando la Ruta de desvío herramienta. Primero selecciona la forma y luego ve a Objeto> Ruta> Ruta compensada.
Darle un desplazamiento de 4 px.
Esto creará una nueva forma más grande que se colocará debajo de la que hemos usado para crearla..
Ahora, como puede ver, el círculo mantiene el mismo color, que es algo que vamos a querer cambiar ya que el contorno debe ser claramente visible.
Entonces, vamos a seleccionar la forma y cambiar su color a algo más oscuro (# 232323).
Tan pronto como tengamos el esquema, podemos comenzar a agregar detalles a la moneda de la medalla, y lo haremos al crear primero el resaltado del anillo..
Primero, crea una copia del círculo naranja (Control-C> Control-F) y luego usando el Herramienta Elipse (L) dibuja un 56 x 56 px Forma (en mi ejemplo, coloreada con un naranja más oscuro) que colocaremos sobre el más grande..
Ahora, con ambas formas seleccionadas, use Pioneroes Frente menos Opción para crear el recorte..
Seleccione la forma resultante y ajústela cambiando su color a blanco (#ffffff) y estableciendo su Modo de fusión a Cubrir mientras baja la Opacidad para sólo 30%.
Agregue dos resaltes diagonales, creando un rectángulo más ancho y uno más estrecho, que luego rotaremos a una 45° Ángulo y ajuste utilizando la misma configuración que usamos para el resaltado tipo anillo que acabamos de crear..
Como puede ver claramente, los resaltes diagonales van fuera de la superficie de la moneda, que es algo que debemos cambiar.
Lo haremos creando un 56 x 56 px círculo, que alinearemos cuidadosamente con la base de la medalla más grande, y luego, con el círculo y los puntos destacados seleccionados, lo haremos clic derecho> Hacer máscara de recorte.
Si te estás preguntando por qué usé una máscara de recorte más pequeña, la respuesta es porque no quería que los resaltes diagonales se superpongan con el anillo, lo cual, como se puede ver en la imagen de arriba, no se habría visto tan bien..
Como puede ver, esto ocultará automáticamente las secciones de los puntos destacados que estaban fuera de la base de monedas de la medalla, que es exactamente lo que queríamos.
A continuación, agregaremos algo de profundidad a la medalla al crear una serie de círculos más pequeños a los que agregaremos un montón de luces y sombras en forma de anillo..
Primero, creemos un 52 x 52 px forma# AD4222) a la que agregaremos una sombra similar a un anillo siguiendo el mismo proceso que antes, solo que esta vez usaremos Oscurecer como un Modo de fusión y mantener el Opacidad nivel hasta el fondo de 10%.
Continúe agregando detalles creando una 44 x 44 px circulo (# D8532A) a la que agregaremos un punto culminante similar a un anillo como hicimos con la sección más grande de la moneda de la medalla.
Agregue dos resaltes diagonales, asegurándose de enmascararlos para que no se superpongan con el circular que creamos en el paso anterior.
Crear un 28 x 28 px circulo (# D8532A) y colóquelo sobre el segundo par de luces diagonales, asegurándose de centrarlo en el resto de las formas de la moneda. Luego, agregue otro resalte con forma de anillo y un par de diagonales para obtener más profundidad..
Como puede ver, he colocado cada uno de los pares de luces diagonales de manera diferente para que den al espectador la ilusión de que la luz rebota en la superficie de la moneda..
Comience a trabajar en el vector interno, creando un 32 x 32 px circulo (# AD4222) que transformaremos al voltear su relleno con su trazo (Shift-X), y aplicando un 2 px Peso de trazo Que alinearemos hacia el exterior. Una vez que haya ajustado la forma, amplíela yendo a Objeto> Expandir> Rellenar y trazar.
Luego, comience a agregar los detalles restantes, como los puntos de anclaje y los controles inferiores, usando el Herramienta de rectángulo redondeado en combinación con el Rectángulo y Herramienta elipse.
Tómese su tiempo y, una vez que haya terminado, continúe con el siguiente paso.
Termina la ilustración interna de la medalla, agregando el rayo. Para hacer eso, crea dos 8 x 12 px los rectángulos y ajústelos eliminando el punto de anclaje superior izquierdo del primero y el inferior derecho del segundo seleccionándolos con la tecla Herramienta de selección directa y luego presionando Borrar.
Coloque las dos formas resultantes de modo que se superpongan hacia el centro, formando un 4 px plaza donde se intersecan.
Termine esta sección del icono creando dos luces en forma de estrella, que posicionaremos hacia la esquina superior derecha de la moneda de la medalla. Usaremos configuraciones ligeramente diferentes en comparación con los puntos destacados anteriores, ya que iremos con Luz dura como un Modo de fusión manteniendo el Opacidad nivel a un valor más alto de 50%.
Una vez que haya terminado de crear la sección inferior de la medalla, podemos continuar con la construcción de la cinta que normalmente la mantiene en su lugar..
Comience creando un 38 x 47 px rectángulo redondeado (# 364A5B) con un 19 px Radio de esquina, que ajustaremos mediante la selección y eliminación de su anclaje centrado superior utilizando el Herramienta de selección directa (A).
Una vez que hayamos ajustado la forma, debemos asegurarnos de que su trayectoria se cierre presionando Control-J (unir), y luego podemos agregar una 4 px contorno (# 232323) y colóquelo hacia la parte superior de la moneda de la medalla de modo que su sección inferior se coloque debajo de ella (clic derecho> Organizar> Enviar al fondo).
Comience a agregar detalles a la banda de la cinta creando un par de líneas verticales y horizontales (# 232323).
Una vez que haya agregado las líneas decorativas, comience a agregar algunos reflejos y una sombra y todo debería estar listo con este ícono. Eso significa que puedes agrupar todas sus formas de composición usando el Control-G atajo de teclado, y luego podemos pasar a la siguiente.
Una vez que haya terminado de crear el primer icono, podemos comenzar a trabajar en el segundo colocándonos en la capa apropiada.
Comience por crear el cuaderno en sí mismo, utilizando un 68 x 76 px rectángulo redondeado con un Radio de esquina de 4 px. Coloréalo usando # 364A5B, y luego seleccione sus puntos de anclaje correctos con el Herramienta de selección directa (A) y aumentar la redondez de 4 px a 8 px. Luego agrega un 4 px contorno (# 232323) y asegúrese de colocar las dos formas hacia la esquina superior izquierda de la cuadrícula.
Agregue un resaltado completo a la sección interior del cuaderno, usando Cubrir como el Modo de fusión y manteniendo el Opacidad nivel para 40%.
Continúe agregando detalles creando dos resaltes verticales y posicionándolos hacia el lado derecho del portátil.
Añadir un par de segmentos de línea (# 232323) hacia el lado izquierdo del cuaderno, para que dé la impresión de que fue cosido.
Crea un pequeño marcador hacia la esquina inferior izquierda dibujando un 6 x 4 px rectángulo# D8532A) a la que añadiremos un 4 px contorno y una sombra superior (Modo de fusión ajustado a Oscurecer, 20% de opacidad) y dos resaltados verticales.
Comience a trabajar en la ilustración de la pequeña portada creando el gorrito y la marca de verificación verde (# 7AAC41).
Tomar una copia (Control-C)de los dos reflejos en forma de estrella y la pasta (Control-f) sobre el lado derecho del cuaderno.
Utilizando la Herramienta de rectángulo redondeado crear un 4 x 16 px forma con un Radio de esquina de 1 px, coloréelo usando el mismo color que hemos usado para el contorno (# 232323) y luego colóquelo en el lado derecho del contorno del cuaderno. Asegúrese de alinear verticalmente los dos usando el Alinear panel.
Termine el icono creando un bolígrafo de aspecto elegante y colocándolo en el lado derecho del icono. Luego agrupa todos los elementos usando el Control-G atajo para que las cosas no se pierdan por accidente.
Como siempre, antes de comenzar, asegúrese de estar en la capa correcta y luego ubíquese sobre la cuadrícula base.
Comenzaremos creando la sección superior del sombrero, y lo haremos dibujando un 78 x 42 px rectángulo, el cual colorearemos usando # 364A5B y luego posicione hacia el lado superior de la cuadrícula base, dejando un espacio de 5 px entre los dos.
Ahora, ajustemos la forma agregando un punto de anclaje al centro de cada lado y luego eliminando los puntos de anclaje de la esquina seleccionándolos con la tecla Herramienta de selección directa (A) y luego presionando Borrar. Luego, agregue un 4 px perfilar la forma resultante utilizando el Ruta de desvío herramientaObjeto> Ruta> Ruta compensada).
Cree la sección inferior del sombrero y luego comience a agregar luces y sombras usando el mismo Modo de fusión y Opacidad Valores que hemos utilizado para los otros iconos..
Una vez que tenga las secciones superior e inferior del sombrero, puede comenzar a trabajar en la pequeña cadena, y lo haremos creando un 12 x 6 px Elipse que posicionaremos hacia el centro de la parte superior similar a un diamante..
Luego, usando el Lapicera,dibujar una línea limpia agradable usando una 2 px Peso de trazo. Agrega un 6 x 6 px círculo, que ajustaremos seleccionando su punto de anclaje superior y moviéndolo hacia la parte superior mediante 2 px utilizando la Herramienta de selección directa (A).
Ahora, antes de pasar a la sección inferior del ícono, podemos tomar rápidamente una copia (Control-C) de los reflejos en forma de estrella y posicionarlos (Control-f) hacia la esquina inferior derecha del sombrero.
Ahora podemos comenzar a trabajar en el pequeño diploma doblado, y lo haremos creando primero un 48 x 8 px rectángulo redondeado con un Radio de esquina de 2 px. Colorearemos la forma utilizando # CCD5DD y luego le daremos un esbozo de 4 px y posicionarlos hacia la parte inferior del sombrero, dejando un espacio de 3 px entre los dos.
A continuación, crea un poco más pequeño. 36 x 8 px segmento con un 1 px Radio de esquina que irá debajo de la sección superior del diploma doblado, y coloreará su relleno usando # 6E7378. Agrega lo usual 4 px contorno (# 232323) y envía ambas formas a la parte posterior usando el Organizar> Enviar al fondo opción.
Comience a agregar detalles al segmento superior del diploma mediante la creación de un montón de puntos destacados y una sombra sutil.
A continuación, tenemos que crear la pequeña cinta dibujando un 12 x 12 px circulo (# D8532A), a la que aplicaremos un 4 px delinear y luego colocar los dos en el segmento superior del diploma doblado, asegurándose de centrarlos. Luego, usando el Herramienta Rectangular (M), crear un 4 x 4 px cuadrado (# AD4222) dándole un contorno y luego posicionándolo justo debajo del segmento redondo de la cinta.
Tómese su tiempo y comience a agregar detalles a la cinta creando un par de luces y sombras, y finalmente agregando la pequeña marca de verificación..
Una vez que hayas terminado, no olvides agrupar todos los elementos de composición juntos (Control-G) y luego podemos pasar al icono final de este paquete.
Así que ahora hemos bajado a nuestro último icono, el iMac, lo que significa que, una vez más, debe asegurarse de estar en la última capa y luego hacer zoom en la cuadrícula para que pueda comenzar a construir con coherencia..
Utilizando la Herramienta de rectángulo redondeado, crear un 84 x 58 px forma con un Radio de esquina de 2 px, que colorearemos usando # 364A5B, y luego dale un contorno, asegurándote de colocar las dos formas hacia el lado superior de la cuadrícula base.
Cree una copia de la forma azul oscuro interior (Control-C> Control-F) y luego conviértalo en una pantalla quitando sus puntos de anclaje en el centro inferior y acortando su altura a solo 48 px, y luego finalmente colorearlo usando # 232323.
Una vez que hayas hecho eso, agrega un poco 4 x 4 px circule hacia el centro del segmento visible inferior, donde normalmente encontrará el famoso logotipo de Apple.
Avanza hacia la parte inferior y comienza a trabajar en la pierna del iMac dibujando un 20 x 8 px rectángulo, que ajustaremos seleccionando y empujando sus puntos de anclaje superiores hacia el centro mediante 1 px. Luego cree una copia de la forma y conviértala en un contorno cambiando su ancho de 20 a 28 px.
Una vez que haya hecho eso, asegúrese de colocar los dos debajo de la pantalla seleccionándolos y usando la tecla Organizar> Enviar al fondo opción, de modo que las partes superiores de las formas toquen el lado inferior del relleno interno del iMac.
Termina la pierna del iMac agregando un poco de 32 x 2 px base que tiene un fondo plano pero una Radio de esquina de 2 px en sus puntos de anclaje superiores. Colorea la forma usando # 364A5B y luego no te olvides de darle una 4 px contorno (# 232323).
Ahora es el momento de comenzar a agregar luces y sombras a nuestro pequeño ícono. Como de costumbre, tómate tu tiempo y haz que esta pequeña pieza de hardware salte con algunos detalles atractivos.
Empieza a trabajar en la pequeña interfaz creando un 52 x 32 px rectángulo redondeado con un Radio de esquina de 1 px, coloréalo con un tono verde (# 7AAC41) y luego coloque la forma en la pantalla del iMac, dejando un espacio de 8 px entre ella y la parte superior del contorno de la pantalla.
Crear tres 2 x 2 px círculos (# 232323) posicionado 2 px unos de otros, y colóquelos hacia la esquina superior izquierda de la interfaz verde, dejando un espacio de 2 px desde su lado derecho y 1 px desde su cima.
Luego, agregue un 52 x 2 px divisor de línea# 232323) para separar la barra superior del resto de la interfaz, y una pequeña 22 x 2 px rectángulo redondeado con un 1 px Radio de esquina hacia la parte superior de la barra.
Comience a agregar detalles a la interfaz agregando dos filas de líneas delimitadoras de botones en cada lado y una blanquecina (# CCD5DD) 38 x 18 px Lienzo hacia el centro de su sección inferior..
Comience a agregar detalles como luces y sombras para darle a la interfaz un aspecto más pulido.
Con un pincel artístico, agrega una pequeña línea diagonal hacia el centro del lienzo para que parezca que alguien está dibujando algo.
Utilizando la Herramienta de rectángulo redondeado, crear cuatro pequeños 4 x 4 px formas con un 1 px Radio de esquina posicionado 2 px uno del otro, y coloréalos usando naranja (# D8532A) para el estado latente / inactivo y verde (# 7AAC41) para el activo. Luego coloque los cuatro en el centro del iMac, justo debajo de la interfaz, dejando un espacio de 2 px entre los dos.
Dale a la pantalla un poco de pop agregando dos resaltes diagonales Cubrir como el Modo de fusión y bajando el Opacidad nivel para 40%. Una vez que tenga los puntos destacados en su lugar, enmascarelos utilizando una copia de la pantalla del iMac, que deberá ajustar acortando su ancho a aproximadamente 44 px.
Al igual que hicimos con todos los íconos anteriores, debemos agregar los resaltados en forma de estrella, tomando una copia y pegándola en la esquina superior derecha de la pantalla..
Ahora es el momento de darte un poco de libertad creativa y permitirte crear tus propios periféricos de aspecto atractivo. Ya sea que se trate de una persona con el mouse y el teclado, o con la pluma y la tableta, se vuelva un poco loco y cree algo que sea representativo de la forma en que trabaja de manera creativa..
Como siempre, una vez que haya terminado de crear
Accentsconagua