Share
Este artículo está dedicado a un tema que está cerca de mi corazón pero al mismo tiempo me dio fuertes dolores de cabeza en los primeros días de mi proceso de diseño..
Si aún no lo ha adivinado a partir del título, bueno, es algo profundamente relacionado con el diseño de los iconos, más precisamente con los iconos de línea y los dos métodos bastante diferentes para producirlos: compensaciones frente a trazos. Entonces, ya sea que esté creando el suyo propio o modificando un paquete de iconos de Envato Market, este artículo lo ayudará.
Dicho esto, abroche el cinturón y repasemos los principales pros y contras de usar uno sobre el otro..
Bueno, esa es una muy buena pregunta, especialmente si recién estás comenzando como diseñador de iconos, ya que en algún momento recuerdo que me hice la misma pregunta..
Para aquellos que ya saben la respuesta, bueno, tengan paciencia con nosotros, ya que solo tomará un par de segundos para que todos los demás estén al día..
Los iconos de línea son iconos que delimitan las diferentes secciones de bloques de construcción de una composición, utilizando contornos o líneas más delgadas o gruesas..
Hay dos tipos principales de íconos de líneas, que en realidad son bastante similares, la diferencia clave es el uso o la falta de formas de relleno de colores..
Si decide ir completamente desnudo y usar solo líneas, o agregar detalles al llenar el espacio vacío entre esas líneas, todo depende de usted.
En este punto, es posible que las cosas no parezcan tan complicadas, al menos en la superficie, pero tan pronto como se realiza el proceso de creación de los íconos reales, las cosas pueden comenzar a ponerse un poco confusas. Esto se debe principalmente a que hay muchas voces con opiniones que hablan sobre los diferentes métodos para crear los íconos reales, pero no hay muchas que hagan una comparación directa de los dos procesos..
Así que pensé que podía intervenir y hacer este pequeño artículo escrito para hacer justicia a ambos métodos..
Bien, ahora sabemos qué son los íconos de línea, pero ¿cómo hacemos para crearlos??
Como mencioné en la introducción, hay dos formas básicas de crear estos iconos. La primera es usar rutas de desplazamiento, que requieren que crees una forma de base y luego le agregues un desplazamiento, que transformarás en una pieza de línea al recortar la forma más pequeña de la más grande..
El segundo se basa en el uso de formas básicas de Illustrator combinadas con el Herramienta Pluma (P) para crear rutas que usen solo trazos más finos o más gruesos, para que no haya rellenos.
Voy a repasar cada uno de ellos en los siguientes minutos, y tratar de arrojar la mayor cantidad de luz posible sobre ambos para que al final puedas decidir por ti mismo cuál es el que más te convenga..
En primer lugar, ¿qué significa la palabra "compensación"??
Bueno, cuando se usa como sustantivo, debo decir que realmente no he encontrado ninguna definición válida por ahí que se acerque a su uso en el diseño. Por otro lado, cuando se usa como un adjetivo, las cosas comienzan a tener un poco más de sentido ya que se colocan lejos de una línea central; fuera de centro "la explicación lo acerca más a la forma en que Illustrator lo usa.
Ahora, para ser honesto, no puedo decir que el manual oficial de Adobe Illustrator haga un muy buen trabajo explicando las cosas, ya que la herramienta aparece debajo de un título algo engañoso "Objetos compensados duplicados", que es un poco incorrecto..
Esto se debe a que los objetos resultantes no son en realidad duplicados, ya que un duplicado tiene las mismas características, por lo que el tamaño, el color y la forma son sus contrapartes originales. Creo que la palabra real que deberían haber usado es "copiar", ya que una copia puede ser "similar o idéntica" al original, que es en realidad lo que hace el offset de Illustrator.
Realmente creo que podrían haber hecho un mejor trabajo si hubieran nombrado algo simple como "La herramienta de ruta de desplazamiento" y describieran sus funciones utilizando un par de subtítulos y secciones diferentes..
Hacen las cosas un poco más claras una vez que comienzas a leer el cuerpo real del texto:
“Puede crear una réplica de un objeto, separarse del objeto seleccionado una distancia específica, utilizando el comando Desplazamiento de ruta o el efecto Ruta de desplazamiento. La compensación de objetos es útil cuando desea crear formas concéntricas o hacer muchas réplicas de un objeto con distancias regulares entre cada réplica ".
Todavía me pareció que la definición era un poco vaga, así que decidí intentar explicar el concepto observando de cerca el proceso real que sigue Illustrator para crearlo..
Por lo tanto, una ruta de desplazamiento es básicamente una copia de un objeto seleccionado que se ha creado al empujar su camino hacia el exterior de la forma original, lo que le brinda una versión ligeramente más grande de ese objeto que es idéntica en forma y color pero no en tamaño.
Ahora, no sé cómo crear múltiples formas concéntricas, pero esta herramienta puede ser perfecta para crear iconos de líneas..
Sí, hay algunos trucos que debes tener en cuenta al usarlos para este propósito, pero hablaré sobre ellos en los siguientes momentos..
Bueno, el proceso depende del tipo de ícono que vas a crear. Si recuerdas bien, en el primer capítulo hablé sobre los dos tipos de íconos de líneas que actualmente usan los diseñadores: líneas puras y desnudas o iconos de líneas con formas de relleno.
Dado que la herramienta Ruta compensada crea una copia de la forma original, eso implica que el proceso de creación de las líneas se centrará en el uso de dos objetos, idénticos en términos de forma pero diferentes en tamaño.
No importa el tipo de iconos de línea con los que decida trabajar, el proceso de creación del desplazamiento real es idéntico. Primero, creas tu forma original, y luego con ella seleccionada, vas a Objeto> Ruta> Ruta compensada donde será recibido por una pequeña ventana emergente con un montón de opciones.
El primero es Compensar que, como ya sabe, controla la distancia a la que Illustrator creará y posicionará la ruta de la copia.
La segunda opcion es Se une, que controla el aspecto general de las combinaciones finales de una forma, brindándole las siguientes tres opciones:
Dependiendo del estilo visual al que vayas, puedes elegir uno sobre el otro. Una cosa que debes tener en cuenta es que estos Se une solo se trabaja en formas que tienen uniones puntiagudas, y no en esquinas redondeadas.
Así, por ejemplo, si tiene un cuadrado y desea crear un desplazamiento y establecer sus esquinas en Redondo, Usted puede hacer eso fácilmente. Por otro lado, si tiene un rectángulo redondeado, el único tipo de Compensar que obtendrás es Redondo no importa lo que establezca el Se une opción a.
Esto no debería ser un problema ya que no vería a nadie ansioso por crear una forma de esquina redondeada con un extraño contorno de esquina en punta.
La tercera y última opción es Límite de Mitre. Intenté buscar una presentación oficial de Adobe de la opción, pero no pude encontrar una directa. En cambio, encontré una muy buena explicación de la Carreraes Límite de inglete de esquina, que supongo que funciona de la misma manera que la Compensars uno:
“El límite de inglete se controla cuando el programa cambia de una unión de inglete (puntiaguda) a una unión biselada (cuadrada). El límite de inglete predeterminado es 10, lo que significa que cuando la longitud del punto alcanza diez veces el peso de la carrera, el programa cambia de una unión de inglete a una unión de bisel. Un límite de inglete de 1 da como resultado una unión en bisel ".
Si prueba esto, puede encontrar que el predeterminado Límite de Mitre Para el Compensar es 4 (no 10) pero aparte de eso, son casi idénticos.
De acuerdo, es probable que nos hayamos vuelto un poco demasiado técnicos en el tema, pero quería explicar las cosas lo más detalladamente posible..
En este punto, sabemos cómo crear el desplazamiento, pero ¿cómo lo usamos para crear el icono de línea real? Primero te mostraré el proceso de la línea desnuda..
Para aquellos que preguntan por qué los llamo "iconos de líneas desnudas", digamos que encontré la expresión más fácil de entender para alguien que es nuevo en el juego. Dicho esto, no importa el tipo de icono que elija, ya sea desnudo o lleno, son iconos de dos líneas..
Ahora, ya que generalmente encuentro que los ejemplos son más explícitos que el texto puro, los guiaré a través del proceso de creación de un pequeño ícono de proyecto para su mascota..
Como necesitaba algo básico, que pudiera explicar fácilmente el concepto, decidí crear un pequeño ícono de documento, que es rápido y fácil de crear..
Al crear íconos, hay un par de cosas que el diseñador tiene que decidir. La primera decisión suele ser la de elegir el tamaño base para el icono. Este paso es realmente importante ya que querrá comenzar desde el tamaño más pequeño y crear versiones más grandes a partir de él, lo que, dependiendo de las necesidades de su proyecto, podría ser 32 x 32 px, 64 x 64 px, 96 x 96 px, etc.
Consejo rapido:Si se está preguntando por qué debería comenzar con un tamaño más pequeño y trabajar para llegar a algo más grande, es bastante simple: cuando crea iconos de píxeles perfectos que tienen valores de números impares (por ejemplo, 3) y elige un tamaño base relativamente más grande (64 x 64 px) pero luego decide que también quieres agregar uno más pequeño (32 x 32 px) entonces podrías notar que las cosas comienzan a romperse. Esto se debe a que un número impar dividido por la mitad le dará un valor decimal, que no se puede ajustar correctamente a la Pixel Grid.
Puedes leer más sobre el tema repasando algunos de mis otros tutoriales:
En nuestro caso, digamos que queremos ir con una base relativamente grande de 96 x 96 px.
Una vez que hayamos decidido nuestro tamaño, debemos comenzar a pensar en el peso de nuestras líneas. Este paso es igual de importante ya que necesitaremos crear la forma principal, asegurándonos de dejar un espacio entre él y los lados de nuestra 96 x 96 px rejilla, ya que aquí es donde las líneas serán posicionadas.
Esa brecha representará el grosor real de nuestras líneas, ya que aplicaremos una ruta de desplazamiento a la forma original, y luego crearemos el "icono de línea" recortando la forma más pequeña de la más grande usando Pioneroes Frente menos opción.
Para este ejemplo, iremos con un espesor de 4 px,lo que significa que nuestra forma principal tendrá un hueco de 4 px entre los lados superior e inferior de nuestra rejilla.
Si se pregunta por qué solo nos interesan los lados superior e inferior, es porque los iconos de los documentos suelen ser más altos pero un poco más estrechos en términos de ancho. Si este fuera un objeto diferente, podríamos haber tenido que considerar los lados izquierdo y derecho, ya que querrás que las cosas sean consistentes.
Ahora, comencemos a construir el icono dibujando un 64 x 88 px rectángulo redondeado con un Radio de esquina de 4 px, que colorearemos usando un tono de gris más oscuro y posicionándonos en el centro de nuestra cuadrícula.
Como puede ver, los lados superior e inferior de la forma tienen eso 4 px Brecha que usaremos como valor de nuestro offset..
Entonces, vamos a seleccionar la forma y crear el desplazamiento yendo a Objeto> Ruta> Ruta compensada y entrando 4 px en el Compensar campo de valor, dejando el Se une y Límite de inglete a sus valores por defecto.
Tan pronto como hacemos clic en DE ACUERDO, Illustrator creará nuestro objeto de desplazamiento, que tendrá exactamente la misma forma y color que la forma original de nuestro documento.
Ahora, para crear el contorno de la línea, simplemente seleccionaremos ambas formas y usaremos Pioneroes Frente menos Opción para cortar la forma más pequeña de la más grande..
Como puede ver, ahora tenemos una nueva forma que tiene un diseño versátil. 4 px contorno grueso.
Bastante guay cierto?
Ahora, terminemos el ícono, agregando un par de líneas de texto usando la Herramienta Rectangular (M) para que se vea como un documento real. Al crear las formas, asegúrese de que tengan la misma 4 px valor del grosor como contorno principal, ya que los íconos de líneas generalmente son consistentes en términos de grosor.
Entonces, en este punto, debe tener una idea básica de cómo crear “iconos de líneas desnudas” utilizando el increíblemente poderoso Herramienta de ruta de desplazamiento.
Ahora veremos cómo crear el mismo icono de documento, pero esta vez usaremos líneas en combinación con formas de relleno..
El proceso es casi idéntico; la única diferencia clave es que esta vez no cortaremos la forma más pequeña de la más grande. En su lugar, usaremos la más pequeña como una forma de relleno y la compensación como el contorno del icono..
Entonces, creemos lo mismo 64 x 88 px rectángulo redondeado con el Radio de esquina de 4 px, y posicionarlo hacia el centro de nuestra red..
Luego, con la forma seleccionada, vaya a Objeto> Ruta> Ruta compensada y darle un desplazamiento de 4 px Como hicimos con el icono anterior..
Una vez que hayas hecho eso, simplemente colorea la forma original con un tono de gris más oscuro para resaltarla de la mesa de trabajo, y luego agrega las pequeñas líneas de texto.
Como puede ver, ambos procesos son realmente fáciles de entender y aplicar, pero hay un par de cosas que debe tener en cuenta al usar el Ruta de desvío Herramienta para crear este tipo de iconos. Hablaremos de esos aspectos tan pronto como revisemos el Trazos Método para que podamos tener una perspectiva más amplia sobre los dos.
Este método es para muchos diseñadores el "correcto" ya que los "íconos de línea" deben crearse usando líneas / trazados reales y no rellenar formas. Probablemente sea una declaración justa, pero seamos honestos, a la mayoría de las personas que compran nuestros íconos realmente no les importa, ya que terminarán usándolos como archivos .png de todos modos.
En comparación con el método anterior, el proceso en sí no es tan diferente, ya que seguiremos usando algunos de IlustradorLas formas básicas como la Rectángulo (m) y Herramienta de rectángulo redondeado, Pero no vamos a cortar nada. En su lugar, transformaremos las formas en líneas, eliminando su color de relleno y dándoles un peso de trazo más delgado o más grueso.
Junto con las formas básicas, también usaremos el Herramienta Pluma (P) para agregar detalles y delimitaciones de sección a los íconos dependiendo de la complejidad de su composición.
Dicho esto, repasemos los procesos de creación de íconos de líneas desnudas y rellenas usando este método, creando el mismo ícono de documento pequeño.
No importa cómo vaya creando este tipo de íconos, siempre tendrá que decidir sobre el tamaño de su base y el grosor de línea que va a usar..
Ya que en este caso crearemos exactamente el mismo icono, nuestro tamaño seguirá siendo el mismo, por lo que 96 x 96 px, y así será nuestro grosor de línea (4 px).
Si para el método anterior necesitábamos crear dos formas, para esta solo necesitaremos una que transformaremos en el contorno del documento cambiando su color de relleno con su trazo.
Entonces, usando el Herramienta de rectángulo redondeado, seleccione el mismo color gris que antes y luego intercambie el relleno con el trazo presionando Shift-X. Como puede ver, esto eliminará cualquier color de relleno y le permitirá dibujar utilizando rutas, que es exactamente lo que queremos.
Consejo rapido: Los Shift-X El intercambio de color funciona siempre que no tenga colores asignados tanto al relleno como al trazo. Si tiene dos colores, entonces solo los invertirá, que no es lo que queremos cuando se trata de iconos de líneas. Por lo tanto, si tiene más de un color de relleno, debe asegurarse de eliminar el segundo..
Ahora, cambia el Carreraes Peso a 4 px y comience a dibujar la forma principal del ícono haciendo clic y luego arrastrando para que al final tenga una 68 x 92 px forma con un Radio de esquina de 6 px.
Si se pregunta por qué han cambiado los valores, eso se debe a que, en lugar de crear una forma de base y luego agregar un desplazamiento, crearemos el perfil del documento directamente con trazos. Ahora, si tuviéramos que mirar de cerca el contorno creado con el método de la ruta de desplazamiento, nos daríamos cuenta de que tiene un ancho de 72 px...
... y un exterior Radio de esquina de 8 px con tan solo 4 px para el interior.
La explicación es bastante simple. Como Illustrator, por defecto, alinea el trazo con el interior, eso significa que el grosor de la línea se dividirá por igual en cada lado de la ruta, por lo que 2 px por un lado y por otro 2 para el otro.
Ahora, aunque la forma tenga exactamente el mismo ancho que el contorno anterior creado con el método de compensación, si comprobamos la Transformar panel veremos que es Anchura el valor es en realidad menor, ya que Illustrator indica el tamaño de la ruta real y no el objeto. Si expandimos la ruta y la convertimos en una forma, tendría exactamente los mismos valores que el creado con el primer método, ya que Illustrator consideraría esos 2 px De cada lado (68 + 4 = 72).
En comparación con el método anterior en el que tenía que dejar un espacio que tenía exactamente el mismo valor que el grosor de la línea, esta vez tendrá que colocar la forma de modo que su trayectoria (que generalmente se representa por el color de la capa) se vaya una brecha de solo 2 px entre las secciones superior e inferior de la rejilla.
Consejo rapido: dependiendo de Peso de tu Carrera¸ siempre tendrá que asegurarse de que cuando esté diseñando el ícono en la cuadrícula, deje un espacio que tenga un valor de la mitad de la ruta Peso del trazo, ya que al dibujar las formas haciendo clic y arrastrando, Illustrator no cuenta el número de píxeles que salen de la línea del indicador de ruta. Así que debes asegurarte de tener eso en mente y dibujar dejando un pequeño espacio en el que los lados de tu camino coincidan con los bordes de la cuadrícula real, para que tu diseño se ajuste dentro de ese espacio..
Una vez que tengamos el bosquejo de nuestro documento, podemos seleccionar el Herramienta Pluma (P) y comienza a agregar el 4 px Líneas de texto grueso para terminar el icono..
Ahora que hemos visto cómo crear el icono de líneas desnudas, echemos un vistazo al proceso de creación de iconos de líneas con formas de relleno utilizando el mismo método.
Bueno, el proceso para crear este tipo de ícono es muy similar al de las líneas desnudas. La única diferencia es que tendrás que crear un duplicado de tu contorno principal y convertirlo en una forma de relleno intercambiando su color de trazo con su relleno.
Entonces, comencemos creando el esquema principal dibujando un 68 x 92 px forma con un Radio de esquina de 6 px. Si te sientes perezoso, simplemente puedes crear una copia de la que ya tenemos, ya que debería acelerar un poco las cosas..
Una vez que tengamos la forma colocada sobre la cuadrícula, necesitamos crear una copia de la misma (Control-C> Control-F) y luego voltea su trazo con su relleno presionando Shift-X. Luego simplemente cambie su color usando el mismo gris oscuro que antes, asegurándose de enviarlo a la parte posterior usando el Organizar> Enviar al fondo opción. Por último agrega las pequeñas líneas de texto y listo..
En este punto, repasamos cada uno de los dos métodos que podemos usar para crear íconos de líneas. Como prometí al principio de este artículo, ahora voy a hablar brevemente sobre las ventajas y desventajas de usar un método sobre el otro, para que al final, usted pueda decidir por sí mismo cuál es el más adecuado para usted..
No importa el tipo de icono de línea que esté creando, el Ruta de desvío El método puede ser fácilmente su herramienta "ir a", y no, no lo digo solo porque lo uso a diario. Lo digo porque hay varias cosas que realmente lo hacen destacar:
Como con cualquier herramienta, la Ruta de desvío tiene un par de desventajas que para algunos podrían ser un factor decisivo:
Incluso si el Ruta de desvío es una gran herramienta, eso no significa que el Trazos El método no puede ser una alternativa viable. Hay algunas ventajas que debe tener en cuenta antes de decidir si este método es adecuado para usted:
Ahora que hemos visto las partes buenas, tomemos un par de segundos y hablemos de las partes malas:
Así que ahí lo tienen, una comparación rápida pero profunda de dos métodos asombrosos para crear íconos de líneas que deberían indicar cuál se adapta mejor a su flujo de trabajo.
Como siempre, espero que hayas aprendido algo nuevo, y si tienes alguna pregunta o solo quieres compartir tus conocimientos, publica tu comentario en la sección a continuación y te responderé tan pronto como pueda.!
Accentsconagua