Crear patrones de fondo con BgPatterns

Publicado por asktutorial.

Crear patrones de fondo con BgPatternsUna de las formas de mejorar el aspecto de nuestras páginas webs es el fondo o background, en el cual podemos poner, bien una imagen del tamaño del escritorio bien una pequeña imagen que se repite contínuamente haciendo el efecto de gran tela o un papel pintado.

Los hemos visto innumerables veces en las páginas webs que hemos visitado. Por ejemplo, si hemos entrado a diseñar nuestra página de Twitter quizás hayamos probado “Echa un vistazo a Themeleon“. Ahí se nos habrá abierto la página Colourlovers, ofreciéndonos en el recuadro Background la opción de Patterns, donde tras la selección de una pequeña imagen, nos aparecía debajo el efecto que produce como fondo.

En BgPatterns nos ofrecen la posibilidad de crearnos patrones de fondo a través de un sencillo interfaz de usuario (ventana), dividido en un menú de cuatro opciones: Colors, Canvas, Image y Patrón; más dos secciones en la parte inferior:

  • la primera en la izquierda, cambia según la opcion de menú que elijamos, y
  • la segunda en la derecha,  que permanece mostrándonos las modificaciones que vamos realizando al patrón de fondo, con dos botones:
    • el ojo, para previsualizar los cambios en la página, y
    • la flecha para descargarnos el patrón de fondo cuando lo tengamos diseñado.

Crear patrones de fondo con BgPatterns Colors

En Colors (colores) podemos definir tanto el color de fondo como el color del diseño que estemos utlizando. Haciendo clic sobre swap colors, los colores se intercambiarán.

Crear patrones de fondo con BgPatterns Canvas

En Canvas (lienzo) tenemos Size para darle mayor o menor tamaño al patrón, Texture Opacity donde podemos definir la opacidad del lienzo que estamos usando debajo y una pequeña colección de lienzos que se añaden al patrón para darle un aspecto más tridimensional.

Crear patrones de fondo con BgPatterns Image

En Image (Imagen) nos ofrecen una colección de 73 imágenes con diferentes motivos. Basta hacer clic sobre uno de ellos para verlo en nuestro diseño. Podemos modificar 3 cosas:

  • Image opacity, por si queremos que se mezcle con el color de fondo.
  • Location, para cambiar su posición.
  • Image scale, que nos permite cambiarle el tamaño.

Crear patrones de fondo con BgPatterns Rotation

Con la última opción, Rotation (rotar), podemos rotar la imagen insertada en el patrón de imágenes 360 grados haciendo clic sobre el pequeño círculo (vemos como el puntero del ratón cambia a una mano) y moviéndolo a la posición deseada. También podemos hacer clic directamente en las graduaciones que nos aparecen en el sentido contrario a las agujas del reloj.

BgPatterns es una utilidad sencilla de manejar, muy útil y divertida para, por ejemplo, explicar el concepto de patrones de imágenes y así poder abordar con mayor sencillez su posterior diseño.

Dejar un comentario

Tenga en cuenta: la moderación de comentarios está habilitada y puede retrasar su comentario. No hay necesidad de volver a enviar su comentario.

¡SUSCRÍBETE GRATIS!

Nosotros

AskTutorial nace en Junio del 2010 en la ciudad de Chicago, IL con el fin de crear Tutoriales Educativos en Español dirigidos a la comunidad de habla hispana en Estados Unidos y alrededor del mundo. Gracias a la excelente respuesta del publico que diariamente ve nuestros videos nos hemos extendido a no solo crear video tutoriales, si no tambien ofrecemos información relevante de acuerdo a sus preguntas.

Archivos / Mes

¡Suscribete GRATIS!

Sigueme en cualquiera de mis Redes Sociales para acceder al contenido de este sitio!