Share
Los iconos son parte inseparable de un diseño de GUI (interfaces gráficas de usuario). Estuve descargando, comprando y creando íconos por años, luego un día decidí hacer mi propio conjunto de íconos usables. Algo para ayudar a otros diseñadores de GUI a hacer que el trabajo sea más rápido y mejor. Este artículo explica en detalle el proceso de creación y las fases por las que pasé con este proyecto, y puede actuar como guía cuando decida hacer algo similar. Descendí más de una ruta creativa antes de finalizar esta fuente de "Iconos de diseño de GUI".
Como este artículo es un poco más largo, lo he dividido en capítulos. Puede utilizar estos enlaces para saltar al capítulo deseado.
Estuve dibujando bocetos de interfaces gráficas de usuario literalmente durante años, y esta idea estuvo todo el tiempo en mi cabeza. Pensé en hacer una regla (plantilla) con cada icono que se usa con frecuencia en el diseño de GUI?
Seamos realistas, he perdido la oportunidad de ser el primero. Alguien más ya había hecho esto. Encontré una bonita regla de acero inoxidable (plantilla) de DesignCommision (ver foto), que puedes comprar en uistencils.com.
Lo ordené inmediatamente. Después de verlo en vivo, estaba aún más decidido a hacer uno por mi cuenta. Mi idea era ejecutar esto de manera un poco diferente, con plástico. No hay nada malo con el acero inoxidable. Es brillante, moderno, es bonito. Pero no puedes verlo, los bordes son afilados, y destruye los lápices y raspa los dedos (no es tan malo, pero trabajar con ellos no es muy cómodo).
Al principio había un papel, un montón de papel, lápices, puntas de fieltro y mucho tiempo. Mientras tanto (en el tiempo de no dibujar) estaba explorando varias GUI, buscando lo que puede ser útil y terminé con muchos papeles llenos de dibujos. Estos también se pueden ver aquí (click para ver foto más grande). Una vez que decidí que ya tenía suficientes bocetos, marqué todos los iconos que podría intentar recrear en la computadora. Aquí es donde salté a la segunda fase..
El tiempo necesario para los bocetos no era nada comparado con el tiempo empleado en Adobe Illustrator. Como puede ver, los iconos son bastante simples, pero debe preocuparse por la máxima precisión, la menor cantidad de puntos posible (sin puntos innecesarios) y, lo más importante, la coherencia en el estilo..
Si observas de cerca la regla de DesignCommision, esta es la mayor imperfección: los iconos no tienen un estilo unificado. La mayoría de los íconos son simples, pero el ícono del usuario tiene un esquema muy detallado. La mayoría de los iconos tienen un tamaño similar, pero el botón de reproducción es demasiado grande (y ancho). La mayoría de los íconos están hechos de líneas rectas, pero la "i" y los íconos de los libros están redondeados sin razón ... y así sucesivamente.
Permítame mostrarle el proceso de creación de dos iconos: el icono de candado y el icono de animación de carga. Al principio, creé dos guías (de forma bastante aleatoria) en el documento, y he tratado de mantener los tamaños de los iconos en estas guías. No es que todos los íconos sean de la primera guía a la segunda, sino para mantener aproximadamente la misma escala..
Lo más rápido para crear iconos es imaginar el icono como un compuesto de formas básicas. Siempre es más rápido eliminar la mitad de un círculo que dibujar el semicírculo a mano (con la herramienta Pluma). Mantener el trabajo con la herramienta Pluma al mínimo le ayudará a crear formas precisas en un corto período de tiempo. En lugar de usar la herramienta Pluma, intente pensar en formas básicas usadas y las herramientas Pathfinder para separarlas según sea necesario.
El icono de candado desbloqueado es aún más simple (y más rápido) de crear.
No crea que puede hacer que todo sea perfecto en el primer intento, al igual que los íconos de los candados. De hecho, he impreso muchos papeles para ver los íconos en tamaño más grande y en papel (lo creas o no, el papel es aún mejor para los ajustes). Después de eso, agregué algunos detalles, ajusté algunas áreas y eliminé algunas partes. Y luego se aplican estos cambios en Illustrator..
Las imágenes de abajo muestran mi proceso. Después de imprimir los íconos en un tamaño más grande, escogí el marcador del mismo color (no preguntes por qué es gris, simplemente me gusta) y agregué algunas partes en las que no estaba satisfecho. Yo tambien
marcó otras imperfecciones con un marcador rojo (como cambio de tamaño, peso del golpe, etc.). por borrando, He usado la cinta correctora blanca o solo un trozo de pegatina blanca.
Como puede ver a continuación, los iconos más simples son solo líneas en varias longitudes y ángulos, pero con el mismo peso.
Ahora volvamos a la creación. Veamos cómo crear otro ícono - usado para cargar animaciones.
Ajustar este ícono es incluso más sencillo porque se crea a partir de solo dos líneas, todo lo que necesita hacer es:
Una de las principales ventajas de estos iconos debería haber sido la posibilidad de combinarlos. Por ejemplo, para colocar un pequeño signo más junto al ícono del usuario para tener un ícono de agregar usuario, o una pequeña cruz sobre el ícono de la carpeta para crear un eliminar carpeta icono. Y así. A continuación se muestra un ejemplo de una lupa, que puede combinar con un signo más y menos..
Mi plan original era agregar números, que se podrían colocar, por ejemplo, sobre el icono del calendario o en el icono de la burbuja de comentarios.
Así es como se ve en el ícono de Illustrator, en / encima / al lado del cual he colocado algunos íconos pequeños de ejemplo para probar la apariencia.
Para evitar la confusión entre el icono que se dibuja y el que se acaba de copiar, he cambiado el color del copiado a un gris más claro..
Y ahora para probar ...
… E imprimiendo, ajustando y cambiando..
Mencionaré brevemente una función muy útil en Adobe Illustrator. Artboards, que se introdujeron en Illustrator CS4, le permite tener varias páginas en un documento. Puede decir: nada nuevo en productos competitivos, pero considere la posibilidad de diferentes tamaños de páginas y diferentes posiciones. Puede agregar las páginas, ya que está agregando las páginas en su trabajo. Y entonces estaba agregando y agregando las mesas de trabajo ...
... y estaba moviendo los iconos no utilizados de lado, mientras movía los últimos en las nuevas mesas de trabajo.
Me ayudó mucho, especialmente con la impresión y las correcciones. Sin tableros, tendría que usar capas o un documento grande (pero no se puede imprimir una parte de este gran lienzo fácilmente).
Quería hacer que la regla fuera realmente multiusos. Estaba pensando en todas las formas posibles de hacerlo aún mejor. Por ejemplo con la adición de líneas divisorias. En Illustrator es realmente simple, solo dibuja una línea y luego agrega un efecto Zig Zag para hacer una línea irregular (a), una línea en zigzag (b), configura correctamente las opciones en la ventana de Trazo para hacer que las líneas salten (c) o punteado (d).
Tal vez te hayas dado cuenta, que durante la creación del icono de candado, dejamos el ojo de la cerradura en blanco, por lo que parece el agujero, pero no lo es. Simplemente puede detectar esto cambiando el color de la capa subyacente.
No importaba antes, pero para el producto final, necesitamos iconos en un solo color, sin trazo ni efecto, e idealmente como un solo objeto. Para lograr esto, usaremos dos funciones Expandir apariencia y Expandir, y la paleta Pathfinder. Aquí está el proceso:
Si nos movemos una docena de días más tarde, entramos en la fase donde terminé y preparé todos los íconos de esta manera. Así que he creado un nuevo documento del tamaño de la regla de la plantilla y comencé a colocar estos iconos. Como beneficio adicional, he añadido algunos botones.
Ya que es una regla de plantilla que se cortará, los iconos no pueden tener flotante partes - porque no hay forma de cómo hacerlo. Como puede ver en la siguiente imagen, si desea hacer algo como yo, debe borrar estas partes (partes cruzadas) o unirlas con líneas finas (con un círculo).
Aquí están estas "líneas de unión" en detalle; vea el ícono de la antena. También puede notar que el icono de relleno de la batería ya se ha eliminado..
La regla en su aspecto final en Illustrator se ve así. Todo lo que necesitaba era encontrar a alguien para fabricarlo..
He enviado muchos correos electrónicos para encontrar la compañía adecuada. Al principio, parecía que no habría ningún problema con su fabricación. Luego descubrí que había un problema, y uno grande. Los iconos eran demasiado pequeños (a veces el láser corta la parte incorrecta). Toda la regla era demasiado gruesa (a veces demasiado gruesa para poner un lápiz), y el número de cortes hizo que el precio del producto final fuera poco realista..
Después del entusiasmo inicial, solo tuve una muestra, muchos papeles impresos y la aversión de hacer cualquier otra cosa con este proyecto. Así que puse este proyecto en espera, ya que había muchas más cosas agradables que hacer ...
Después de unos meses de abandono, comencé a pensar nuevamente en el proyecto. La regla se ha ido, ¿qué pasa con otra cosa con estos iconos? ¿Qué pasa con una fuente, algo así como Devanados, ¿Pero con el estilo? los
El entusiasmo estaba de vuelta, y estaba trabajando de nuevo. Como verá en un momento, es divertido crear una fuente a partir de iconos preparados como estos..
Para el trabajo de fuente fue necesario crear otro documento (con solo una mesa de trabajo), con un tamaño de 1000 por 1000 pt..
Después de eso, comencé a copiar los íconos del documento original en capas separadas y cambié el tamaño de estos íconos para que coincidan con el tamaño del documento (para llenar bien el documento). Dado que todos los iconos ya estaban sin trazos y efectos, el cambio de tamaño era una cuestión de un solo clic. Además de colocar los iconos pequeños en el medio del documento, solo use la paleta Alinear. Seleccione Alinear a mesa de trabajo y haga clic en Centro de alineación horizontal y Centro de alineación vertical para alinear todo.
Ahora estaba mostrando los iconos grandes uno por uno y colocándolos en la ubicación correcta frente a los iconos pequeños (en caso de que estos iconos grandes se puedan combinar con los iconos pequeños). Hice esto a mano. Como puede ver en la siguiente imagen, el icono para comentarios se desplaza hacia la parte inferior, mientras que el icono para el documento se desplaza hacia la parte superior. La última parte de la imagen muestra el icono del calendario con todos los iconos pequeños que se muestran para evitar que los contornos se superpongan.
El ícono de fuego muestra que tenemos un documento con un tamaño de 1000 por 1000 pt, pero en casos raros podemos sobrepasar los límites. Para el icono de marcador (y algunos otros iconos especiales), no necesitamos preocuparnos por todos los iconos pequeños. En el orificio lateral solo podemos colocar un signo más, un signo menos y una flecha..
Exportar iconos para FontLab
Una vez que todos los íconos se colocaron en el lugar correcto, llegó el momento de sacarlos de Illustrator. Por supuesto, de una manera que pueden usarse en software para crear fuentes (en nuestro caso, FontLab, pero es igual para todos los demás programas).
Hacer esto a mano para casi 200 íconos llevaría horas de trabajo, ¿por qué hacer esto cuando se puede usar un script? No es parte de Illustrator, pero utilicé un script. Que está disponible para aquellos que ordenan la fuente..
Trabajar con script es realmente fácil. Cárguelo, ejecútelo y tendrá todas las capas exportadas como archivos EPS. Y hemos terminado con Illustrator..
Bueno, crear una fuente en FontLab no es para un artículo, es un tema para un gran libro. Pero crear una fuente de "dingbats" a partir de iconos EPS preparados es fácil. Como verá, cualquier otro software de creación de fuentes haría el trabajo, ya que solo necesitamos cargar los archivos EPS en caracteres individuales y establecer el ancho.
Al principio tenemos una fuente nueva, vacía..
Para crear un nuevo carácter, haga doble clic en cualquier cuadro, luego configure el tamaño (ancho) en 1000 (igual que hicimos en Illustrator).
Importar el archivo EPS deseado y ... eso es todo.
El procedimiento es un poco diferente con los iconos grandes. Queremos mostrarlos detrás de los pequeños, por lo tanto, necesitamos que no ocupen espacio. Por eso fijamos su ancho a cero.
Una prueba rápida con la ventana Vista previa mostrará si funciona correctamente. En la ventana de vista previa, comencé con el carácter "k" (icono de carpeta, que debería tener un ancho de cero). Esto significa que el segundo carácter "V" (icono para recargar), comienza a mostrarse desde el principio y, por lo tanto, sobre el icono anterior..
Y eso es todo. Después de una hora de hacer clic, la fuente está lista, así que lo único que queda es configurar el nombre y exportarlo.
Las siguientes fotos muestran las pruebas de las vistas previas de Microsoft Word..
Y ahora tenemos una fuente completa..
Gracias por leer su camino a través de un artículo tan largo. Espero que hayas aprendido algo nuevo e inspirador hoy. Como puede ver en el artículo, mis planes originales eran bastante diferentes, pero la fuente resultante resultó excelente. A veces comienzas en una dirección creativa y terminas por un camino creativo diferente..
La fuente "Iconos de diseño de GUI" está disponible para su compra en myfonts.com.
Suscríbase a Vectortuts + RSS Feed para estar al día con los últimos tutoriales y artículos de vectores..
Accentsconagua