Share
Lo que vas a crearHoy vamos a echar un vistazo a las diferentes formas de exportar iconos usando una herramienta que a menudo se teme, pero que llevará su productividad a otro nivel una vez que la domine. Esa herramienta no es otra que la Herramienta de corte, y créanme, si nunca lo ha usado antes, querrá leer este artículo, ya que explicaré todo lo que hay que saber al respecto cuando se trata de exportar iconos..
Ya sea que elija utilizar un paquete de íconos prefabricados o comenzar de cero, hoy le enseñaremos algunas consideraciones clave en las que debe pensar cuando exporte sus valiosos activos..
Antes de que nos pongamos todos técnicos, quiero tomar un par de segundos y explicar la razón para escribir este artículo en particular..
Así que en un tutorial anterior, hablé sobre el uso de Tableros y Capas como métodos para exportar nuestros preciosos íconos, pero para ser honesto, esos métodos pueden ralentizarte cuando tienes un paquete más grande. La idea era que quería / necesitaba presentar un proceso adecuado para principiantes que fuera fácil de entender, asumiendo que sabían cómo usar la herramienta más básica de Illustrator..
Ahora, si bien esos métodos pueden no haber sido los mejores de lo mejor en términos de productividad, fueron bastante sencillos de seguir y aplicar, y le dieron exactamente el mismo resultado..
Como algunos de ustedes pensaron que el proceso fue demasiado lento y doloroso, decidí mejorar mi juego y mostrarle la forma más rápida de exportar un paquete de iconos, utilizando un método un poco más avanzado..
Bueno, podría haberte dicho avanzado, pero para ser honesto, no es tan difícil una vez que juegas un par de veces..
Dicho esto, volvamos a nuestro tema principal y hablemos un poco sobre los cortes y cómo Illustrator los usa..
Puede pensar que una “porción” es una sección definida de una obra de arte que puede crear para exportar individualmente en lugar de exportar la pieza completa.
Inicialmente, se crearon segmentos para los diseñadores web, pero al igual que con la mayoría de las herramientas de Illustrator, éste encontró rápidamente un nuevo uso: la exportación de iconos.
Es bastante simple en realidad. Primero, pensemos en el Artboard como un trozo de papel sobre el que colocas tu obra de arte. Ahora, cuando creas una “sección”, en realidad estás delimitando un segmento de ese papel, creando un recorte que puedes eliminar libremente de la composición más grande.
Me gusta imaginar que el proceso es similar al de tomar un cortador y cortar los márgenes trazados de ese segmento, separándolos de la hoja de papel..
Con cada sector creado, Illustrator asigna un número, comenzando desde la esquina superior izquierda hasta el extremo inferior derecho. Al principio puede que no te importe mucho esta acción, pero con el tiempo llegarás a apreciarla, ya que comprenderás mejor lo que sucede con tu obra de arte..
Si nunca antes has creado una división, no te preocupes porque es bastante fácil de hacer. Hay tres formas de crear segmentos que debe tener en cuenta:
Esta primera opción es realmente fácil de entender, ya que le permite crear segmentos alrededor de los límites de uno o varios objetos.
Entonces, digamos que tenemos un par de íconos y queremos cortar el primero.
Para hacerlo, seleccionaremos el icono y luego iremos a Objeto> Rebanada> Hacer.
Esto separará de inmediato ese icono del resto creando una línea de delimitación alrededor de él..
Aunque hemos creado una división para un solo icono, Illustrator ha dividido las secciones restantes de la Mesa de trabajo en secciones más grandes, una para cada lado de la división del icono. Tenemos uno grande para el lado superior, uno más estrecho para el lado izquierdo, uno bastante ancho para el lado derecho y uno más estrecho para el lado inferior..
Ahora, si observa más detenidamente su Artboard, puede ver que estos segmentos están numerados, de una manera bastante sencilla, desde la esquina superior izquierda hasta la inferior derecha. Illustrator asigna números a sus divisiones para permitirle seleccionar cuáles de las divisiones desea exportar y cuáles no. Hablaré más sobre esto en el proceso de exportación..
Consejo rapido: Como puede ver, el límite de sector creado tiene una forma rectangular, ya que Illustrator crea la delimitación al observar el ancho y la altura totales del icono y no su forma. Esto es bastante comprensible, ya que si estuviera diseñando una página web, sería bastante difícil desglosar su composición utilizando más líneas orgánicas y luego volver a armarlas perfectamente..
Hay un par de cosas que debe tener en cuenta al utilizar este método. Si abres el Objeto> Rebanada menú, verás que tienes el Hacer opción que hemos utilizado anteriormente y una Crear desde la selección Una pocas filas más abajo. Mientras que los dos hacen lo mismo cuando solo tienes un objeto seleccionado, se comportan de manera totalmente diferente cuando tienes varios objetos seleccionados.
La diferencia clave entre los dos es que con Hacer puede crear segmentos alrededor de cada uno de los objetos seleccionados, mientras que con la Crear desde la selección opción que le indicará a Illustrator para crear cortes alrededor de la superficie total de todos los objetos seleccionados.
Ahora, si tuviera que crear un proyecto web (página web), el Crear desde la selección La opción estaría totalmente bien de usar, pero si está creando un paquete de iconos, siempre querrá ir con Hacer Ya que querrás exportar individualmente cada uno de tus íconos..
En comparación con el método anterior, el Guías uno es más meticuloso, ya que el proceso requiere que agregues manualmente guías verticales y horizontales a cada lado de la sección de la obra de arte que deseas delimitar.
Primero tienes que activar las reglas presionando Control-R (clic derecho> Mostrar reglas) y luego arrastre sus guías y colóquelas donde desee que caigan las líneas de división. Una vez que haya delimitado su sección usando las guías, puede ir a Objeto> Rebanada> Crear desde Guías para crear las rebanadas reales.
Si observa detenidamente la forma en que Illustrator agregó los números a los segmentos, verá que una vez que se delimita y asigna una sección, obligará a los otros a tomar el siguiente valor numérico sin importar el tamaño que tengan. Además, es bastante interesante ver que los cortes se crean alrededor de la superficie delimitada de los objetos y no en la intersección de las guías..
Este tercer método es probablemente el "top dog" cuando se trata de precisión, ya que le permite hacer clic y arrastrar para crear una selección de corte manual 100%. Para ser honesto, habrá situaciones en las que querrá tener más control sobre sus cortes, pero no me resulta tan útil a la hora de cortar un paquete de iconos grande, ya que llevaría mucho tiempo hacerlo..
Pero, en caso de que alguna vez necesites usarlo, debes saber cómo hacerlo. Primero necesitas agarrar el Herramienta de corte, que se encuentra por defecto en la barra lateral izquierda hacia su sección inferior, justo encima de la Herramienta de mano. Una vez que haya seleccionado la herramienta, puede ubicarse sobre la sección de la ilustración que desea delimitar, y luego simplemente haga clic y arrastre para crear una selección que se convertirá automáticamente en una división una vez que suelte el botón del mouse.
Comparado con una selección regular, el Herramienta de corte le permite mantener pulsado el Espacio Tecla para mover / reposicionar su selección, lo cual es bastante útil ya que a veces puede encontrar que ha comenzado con el pie equivocado..
Ahora, lo bueno de este método es que los cortes se crean instantáneamente, sin la necesidad de pasar a la Objeto> Rebanada submenú con el fin de Hacer o Crear una rebanada desde una Selección.
Su único inconveniente en el que puedo pensar es que es posible que no tenga una precisión del 100% hasta que encienda Vista previa de píxeles modo (Ver> Vista previa de píxeles o Alt-Control-Y), lo que le permite crear selecciones de píxeles perfectos, que para los diseñadores de hoy en día es una necesidad.
Hasta este punto, he hablado sobre los tres métodos diferentes que puede utilizar para crear segmentos. Ahora es el momento de ver qué método es el mejor cuando se trata de exportar nuestros pequeños iconos preciosos.
Vamos a empezar con el primer método. Como recordará, este se basa en el uso de uno o varios objetos para crear los cortes.
Ahora, digamos que tenemos el mismo paquete de íconos como antes, solo que esta vez queremos dividir y exportar todos los íconos de composición, no solo uno.
Bueno, normalmente solo seleccionarías todos los activos presionando Control-A y luego ir a Objeto> Rebanada> Hacer.
Entonces irías a Archivo> Guardar para Web, escoger Png como su formato deseado,establecer su Exportar opción a Rebanadas Seleccionadas y finalmente golpear Salvar.
El problema es que al principio podría pensar que todo salió bien, pero tan pronto como eche un vistazo a sus íconos (más precisamente su tamaño), puede encontrar que algo salió mal..
Eso es porque incluso si usaste una costumbre Cuadrícula para ajustar el tamaño de sus iconos, es posible que los recursos en sí mismos no sean del todo en términos de ancho y alto, y ya que utilizó los iconos como los objetos seleccionados y no como las cuadrículas reales, eso no debería ser una sorpresa.
El truco es usar las cuadrículas reales en lugar de los íconos y crear las rodajas a su alrededor. De esta manera sus iconos exportados serán exactamente como los quiere..
Ahora, en mi caso, por ejemplo, estoy usando un 48 x 48 px cuadrícula, pero tengo un versátil 2 px relleno añadido. Sin mencionar que mis iconos son un poco más cortos, con una altura de solo 40 px. Eso significa que si tuviera que crear los cortes utilizando los iconos mismos y luego exportarlos, mis iconos serían ligeramente más pequeños (44 x 40 px), ya que Illustrator usó el Anchura y Altura de mis activos en lugar de mis grillas (48 x 48 px).
Dicho esto, siempre debe tener una segunda capa con solo sus grillas y usarlas para crear las porciones para exportar correctamente sus activos..
Ahora, lo bueno es que una vez que creas las rebanadas y vas a Archivo> Guardar para Web, Illustrator le da la opción de seleccionar o eliminar manualmente los iconos que exporta. Entonces, por ejemplo, si decido que no quiero seleccionar el último ícono, simplemente puedo pasar sobre él y hacer clic izquierdo mientras presiono Cambio, y así sacarlo de mi exportación final..
De forma predeterminada, si selecciona todos sus íconos y luego los guarda, Illustrator mantendrá todos los cortes seleccionados. Puede ver si una porción está seleccionada observando su delimitación. Si la línea alrededor de su activo es roja (todos excepto el primer icono), entonces su objeto se agrega a la selección final; si es azul y ligeramente descolorido, entonces no lo es (el primer icono).
Puede deseleccionar partes de su paquete de iconos manteniendo presionada la tecla Cambio Tecla y clic izquierdo sobre ellos. Usted podría preguntarse por qué usamos el Cambio llave. Esto se debe a que, como Illustrator ya los tiene todos seleccionados, debe mantener presionada la tecla para mantener el resto de los activos seleccionados; de lo contrario, terminará con un solo icono activo..
Ahora, para ser honesto, no veo por qué lo haría, ya que una vez que haya terminado su paquete, estoy bastante seguro de que querrá exportar todos los activos, no solo algunos, pero pensé que sería bueno señalar eso afuera.
Tan pronto como llegues a la Salvar En el botón, Illustrator le pedirá una ubicación para almacenar sus archivos, lo que le da la opción de nombrar sus activos. Esta parte es un poco complicada ya que el nombre que asigne se transferirá a todos los iconos, que es lo que queríamos, pero los propios activos llevarán el número de sus rebanadas..
Puede simplemente exportar los archivos y luego cambiarles el nombre, o puede hacerlo directamente dentro de Guardar para Web emergente haciendo doble clic en cada selección de icono y dándole el nombre deseado.
No importa el método que elijas, aún tendrás que tomarte tu tiempo e ir a través de todos ellos para nombrarlos correctamente..
Ahora, para ser honesto, encuentro que esta opción es la mejor de las tres, ya que es súper rápida, y solo exporta sus iconos, por lo que no es necesario eliminar las secciones vacías de Artboard posteriormente.
Al igual que con el método anterior, las cosas son bastante sencillas. Primero creas los cortes usando las guías (Objeto> Rebanada> Crear desde Guías), y luego vas a Archivo> Guardar para Web.
Aquí hay un par de cosas que debes tener en cuenta. Si dejas el Exportar opción establecida en Rebanadas Seleccionadas como hicimos con el primer método, Illustrator exportará sus íconos, pero también exportará los segmentos vacíos entre ellos. Ahora, si no tienes un conjunto grande, entonces simplemente puedes deseleccionar esos cortes, pero si tienes algo más grande, puede resultar un proceso realmente doloroso..
Por otro lado, solo puede exportar los íconos y luego eliminar los sectores no deseados, pero nuevamente puede llevarle algo de tiempo..
Ahora, si tiene en cuenta que debe agregar manualmente las guías a cada lado de sus íconos, es bastante obvio que el primer método es más adecuado, ya que es sin complicaciones y mucho más rápido..
Si pensabas que el método de las Guías era lento y doloroso, este colocará el último clavo en tu ataúd, ya que te llevará años terminar..
A estas alturas, probablemente sepa que tiene que crear manualmente los segmentos para todos y cada uno de sus iconos, y luego ir directamente a Archivo> Guardar para Web.
Aquí se verá tentado a utilizar el Rebanadas seleccionadas de exportación opción, pero en comparación con los otros dos métodos, esto solo exportará la última porción de su Artboard. Eso significa que tienes que usar el Todas las rebanadas Opción, que por supuesto exportará todos los segmentos, ya sea que estén llenos de íconos o solo de espacio vacío.
Finalmente, tiene que recorrer toda la carpeta y eliminar todos los iconos innecesarios y cambiarles el nombre según sea necesario..
¿Así que recomiendo este método en absoluto? No. Entonces, ¿por qué lo mencioné? Bueno, me gusta ser lo más explícito posible cuando se habla de este tipo de herramientas y métodos..
Entonces, en este punto, realmente espero que sepa qué son los cortes y, lo que es más importante, cómo están hechos, para poder aprovechar esta herramienta y hacer que el proceso de exportación de sus iconos sea rápido y sin complicaciones..
Ahora, generalmente tiendo a dejar que la decisión sea suya, pero esta vez, tendré que ser áspera y decirle que utilice el primer método, el (los) Objeto (s), ya que es bastante obvio que es el único camino a seguir.
Dicho esto, me gustaría agradecerle por su tiempo y atención, y como siempre, hablaré con usted la próxima vez..
Accentsconagua