Generador de fondos de rayas de colores

Generador de fondos de rayas de colores

Si somos diseñador o maquetador web, es bastante habitual utilizar un fondo de rayas de colores en un proyecto web HTML. Una alternativa para hacerlo puede ser diseñar el fondo, guardarlo entero como una imagen y aplicarlo a la web. El problema que tiene esta opción es que la imagen pesará bastante y aumentará el tiempo de carga de la web.

La otra alternativa es recortar un trozo de ese fondo en el punto y cantidad de píxeles exactos para que después, a través de CSS, se pueda repetir horizontal y verticalmente. De las dos, ésta es la mejor opción, ya que al entrar en la web, sólo se tendrá que descargar un pequeño trozo de imagen y la velocidad de carga del fondo de colores será prácticamente inmediata.

Sin embargo, este método presenta un problemilla y es que, encontrar el punto exacto por donde recortar las rayas de la imagen puede volvernos un poco locos y tardar veteasabertu cuanto tiempo. Por ello, me gustaría resaltar una herramienta que nos resolverá todos estos problemas.

Se trata de una web llamada ‘Stripe generator 2.0‘. Aquí podrás crearte tu propio fondo de rayas con la forma y colores que desees. Después podrás exportar el fragmento para que por HTML y CSS lo pongas de fondo y lo repitas.

Como su funcionamiento es bastante sencillo, sin más preámbulos os dejo el enlace para que podáis hacer vuestra propia imagen de fondo: generador de fondos de rayas de colores

4 respuestas a «Generador de fondos de rayas de colores»

  1. Avatar de Anita
    Anita

    gracias!! ya me hecho mi fondo de rayas para mi portfolio, pero sin colores, en blanco y negro y anda muy way 🙂

    1. Avatar de Jesús Tovar

      Gracias a ti por el comentario, Anita. Espero que te haya servido.

  2. Avatar de Anónimo
    Anónimo

    el fondo de colores este en ke formato te lo guarda??

    1. Avatar de Jesús Tovar

      Pues, si mal no recuerdo, los fondos de rayas se guardaban como .png, aunque si lo necesitas en otro formato, siempre puedes cambiarlo usando algún programa de edición.
      Con Photoshop, por ejemplo, puedes convertirlo a .gif o .jpg. Es cuestión de que ajustes la paleta de colores según el caso. De todos modos, siempre puedes usar la opción guardar para web, que funciona muy bien.

      Espero que te sirva de ayuda.

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *