Líneas de 1px y creación de iconos con Illustrator
6 seguidores
Buenas.
Soy nuevo con Illustrator (Freehand RIP) y ahora mismo lo estoy utilizando para la creación de una serie de iconos que utilizaré en una web (32x32).
El tema es que estoy teniendo muchísimos problemas para ajustar líneas de 1 px de ancho. Me estoy planteando cambiar de chip y hacerlo todo con flash, que para esas cosas se que va bien.
¿Podríais decirme si es posible trabajar ágilmente con Illustrator para crear iconos a nivel de píxel?
almostdesign
clonn
La verdad que me extrañaba el problema ¿Te servirá de algo la "pixel preview" que tienes en el menú view?
En el caso de las líneas yo supongo que te conviene utilizar rectángulos y darle el punto de anclaje en una de las esquinas.
Con <em>pixel preview</em> se ve como la imagen que postee al principio. Queda alineado al pixel pero tiene algunos errores (que luego al exportar desaparecen).
Para las líneas no tengo problema. Es como antiguamente en flash, fijándose de que los strokes de las formas vayan <em>exteriores</em> o <em>interiores</em> a la misma.
danielsandesign
La verdad que me extrañaba el problema ¿Te servirá de algo la "pixel preview" que tienes en el menú view?
En el caso de las líneas yo supongo que te conviene utilizar rectángulos y darle el punto de anclaje en una de las esquinas.
almostdesign
Ok, ya lo tengo!!
Hay que olvidarse de que lo que se ve en la preview (freehand flashback) y tirar para alante. Luego cuando terminas guardas como bitmap (al menos como png funciona) y todo perfecto.
almostdesign
joshuatree
Lo que necesitas para lo que quieres hacer es Fireworks. Su habilidad para suavizar o poner bordes duros a los trazados vectoriales es algo que no tienen ni PS ni AI. Trust me ;)
No te voy a decir que no lo había pensado. Necesitaba alguien que me lo recomendase :P
almostdesign
ga-rule
Lo que te pasa es que al hacer una linea de 1 px en illustrator (o en cualquier otro programa vectorial) la línea se cuadra en un punto fijo, pero hace medio pixel hacia cada lado de la línea.
Me explico como el culo, pero tengo más razón que un santo!
Pero puedes decirle que haga la línea exterior o interior, y te evitas ese problema.
Si en esa imagen que os puse antes hubiera metido la linea con medio pixel para cada lado, en vez de salir un poco ida para abajo, habría salido mitad y mitad.
joshuatree
Lo que necesitas para lo que quieres hacer es Fireworks. Su habilidad para suavizar o poner bordes duros a los trazados vectoriales es algo que no tienen ni PS ni AI. Trust me ;)
ga_rule
Lo que te pasa es que al hacer una linea de 1 px en illustrator (o en cualquier otro programa vectorial) la línea se cuadra en un punto fijo, pero hace medio pixel hacia cada lado de la línea.
Me explico como el culo, pero tengo más razón que un santo!
almostdesign
La verdad es que si tengo que ir a photoshop para limpiarlo, casi que prefiero hacerlo directamente con PS.
De todos modos, muchas gracias por el link. Había buscado mucho sobre el tema por google pero no había encontrado nada tan claro y conciso.
rey_maria
Siempre puedes limpiar la imagen resultante en el photoshop. Coges un pincel cuadrado de 1px y corriges eso gris pintándolo de amarillo.
Si no estás cómodo haciéndolos en photoshop, puedes crearlos en lo que quieras y luego las imperfecciones sí que puedes tratarlas en el photoshop.
De todos modos te paso este link de un tutorial para hacer iconos con photoshop que me pareció bastante bueno. En fin, el blog en general es bastante práctico e interesante.
http://www.webdesignerwall.com/tutorials/how-to-design-mini-icons/
Saludos!!
almostdesign
dagi3d
no entiendo muy bien porque si quieres diseñar a nivel de pixel, trabajas con illustrator... para eso mejor hacerlo en photshop, ¿no?
Porque con Photoshop se trabaja muy lento a la hora de dibujar formas. Había pensado que un programa vectorial actual, como Illustrator me permitiría más agilidad.
clonn
¿Qué problemas tienes exactamente? ¿Podrías poner un ejemplo?
Nunca hice ese tipo de curro en AI, pero no veo el problema. Usaría las smart guides (command + U) para tener más precisión, o una grilla... Lo estoy probando y lo veo bien.
Tengo hecha la grilla de 1 px y pongo todos los elementos con valores fijos de píxeles, pero tengo pequeños problemas que me echan el trabajo a la basura. Te pongo una imagen para que veas como, por ejemplo, el negro de los bordes superiores contamina un poco los píxeles del amarillo.
http://www.clientes.almostdesign.com/misc/dmstk/problema-ai.gif
danielsandesign
¿Qué problemas tienes exactamente? ¿Podrías poner un ejemplo?
Nunca hice ese tipo de curro en AI, pero no veo el problema. Usaría las smart guides (command + U) para tener más precisión, o una grilla... Lo estoy probando y lo veo bien.
dagi3d
no entiendo muy bien porque si quieres diseñar a nivel de pixel, trabajas con illustrator... para eso mejor hacerlo en photshop, ¿no?