Texturas y granulado en Illustrator para programación web
Buenos días.
Me estoy volviendo loca.
Estoy haciendo la dirección de arte de una app en ilustrador. Todo es vector.
En los fondos quiero añadir texturas de granulado y algo así como pintado sutil, rayado, algo rollo vintage o retro...
El tema es que todo esto necesita una programación, y que las capas pesen lo menos posible para que la app funcione correctamente y no tarde en cargarse.
Sabéis como hacer estas texturas? La solución sería hacer patrones. Pero todo queda muy regular entonces y no me sirve. Tampoco me sirven los filtros de granulado que vienen por defecto.
¿Alguna solución? En definitiva, ¿Cómo se han hecho las apps y webs que introducen esas texturas en sus fondos?
Os dejo una página que las incorpora, para que me entendáis.
http://pioneers.brancottestate.com
Muchas gracias de antemano. Ojalá alguien me ilumine! :-)
skeku
Mmm, me he descargado el patrón de fondo y es de 1300x1300, pesando unos 440kb. En concreto además el fondo va en formato jpg, no en png.
Lo de que no pese es para debatirlo :D La página en total supera ampliamente los 15-16 megas de descarga, lo cual es una burrada. Pero también entiendo que es una web más rollo "experiencial" y bueno...se han tomado esa licencia. A mí me va super fina, pero tengo una buena conexión. Con un ADSL de 3 megas no sé yo si tiraría tan bien. De ahí que le hayan metido un preloader al inicio. Sin una precarga, iría fatal.
Indagando un poco más espero que sea por alguna razón, pero el peso de los png se podría haber reducido muchísimo. He probado a optimizar un par de pngs que pesan más de 400ks y los he dejado en menos de 30 simplemente usando TinyPNG. Desconozco si hay alguna razón por no haberlo hecho pero si no hubiera ninguna razón, es un delito penalizar al usuario de esta forma :S
Vamos, que el ejemplo no es que sea la mejor referencia Pezzglobo. Prueba a hacer los patrones como quieras que queden y luego pásales un compresor como TinyPNG, OptiPNG o alguno similar. Y que te digan si tienes un peso de archivo máximo como tope para no estar bailando a "esto pesa mucho" o "esto no vale".
Otro "truco" para bajarles el peso a las imágenes rollo textura es en Photoshop > Imagen > Posterizar y juegas con los niveles que necesitas.
Mmm, quizá en CreativeMarket encuentres algún rollo de textura vector que te pueda encajar?
pezzglobo
En efecto, imaginaba que no utilizaban vectores. Pero mi pregunta es... ¿cómo pueden utilizar esa textura, y que la página cargue bien y no pese? Sé que utilizan imágenes de 500 x 500 px. Pero a los programadores a los que he consultado me dicen que necesitan un patrón para que la imagen no pese y la app cargue correctamente...
Lo suyo sería encontrar una solución para no hacer un patrón en vector, y que no pese, para que yo esté contenta, y ellos también! :-)
Mil gracias Skeku por contestar! :-)
skeku
A mí no me parece que el fondo de esa web que pones sea vector eh? A ver que echo un ojo al código... En efecto, son todo imágenes PNG. Supongo que habrá alguna cosa hecha con canvas directamente pero me resultaba muy extraño que fuese todo vector nada más entrar.