V
voador
Beta
¡Usuario con pocos negocios! ¡Utiliza siempre saldo de Forobeta!
¿Qué queremos conseguir?
En ocasiones no encontramos la textura que necesitamos, o queremos una personalizada con nuestro logo, o algún motivo propio. Este tutorial va orientado tanto a diseñadores como a desarrolladores web que necesiten un fondo único y personalizado para su proyecto. Lo que queremos conseguir hoy es un fondo que podamos utilizar repetido en todas las direcciones, sin que aparezca ninguna junta ni efecto raro.
La técnica que muestro es muy útil en el caso de texturas, fondos geométricos, y casos en los que queremos dejar la imagen con el tamaño justo para hacerla más ligera.
Paso 1: Nuevo documento
Utilizaremos Photoshop. Creamos un documento, con las settings normales para web. Yo voy a utilizar uno de 30x30px
Paso 2: Crear el patron base
Lo primero, pintaré el fondo de la imagen con un color crema. Podéis utilizar la herramienta que más os guste.
Ahora nos centraremos en el centro del documento, lo que al final va a quedar como los extremos del mismo. Ya lo veremos un poco más adelante. Podemos utilizar unas guías para que nos quede más exacto. Tened presente que para que se os ajusten al centro de la imagen debe estar seleccionada la opción Ajustar del menú Vista. Para verlo mejor he hecho zoom sobre la ventana.
Podéis utilizar el motivo que queráis, yo en este caso voy a dibujar un fondo lleno de círculos, con lo que me sitúo en el centro con la herramienta Marco elíptico, pulso Control+Alt para crear una selección perfectamente circular y centrada, y creo una selección a mi gusto.
La relleno con color y el resultado es este:
Esto se puede conseguir de varias maneras, pero enseño una de ellas para los que no quieran pensar :topsy_turvy:
Paso 3: Hacerlo tileable
Una vez tengamos nuestra base, vamos a aplicar unos filtros para asegurarnos de que en la junta de la imagen va a quedar perfecta. Vamos al menu Filtro>Otro>Desplazamiento y ponemos los siguientes datos. En la imagen vemos el resultado que nos tiene que aparecer. IMPORTANTE: Asegurate de que la capa no está bloqueada o de lo contrario no funcionará. Si lo está, aparecerá un candado a la derecha de su nombre. Para desbloquearla pulsa Alt y haz doble clic sobre ella.
¡Ojo! Los 15px que pongo corresponden con la mitad del tamaño del documento. Si usais un tamaño distinto, cambiad este valor. Nuevamente lo repetimos con los siguientes valores y nos quedará como en la imagen siguiente.
¡Perfecto! Ahora ¿quién me puede decir que esta imagen no es completamente tileable? El siguiente paso es rellenar la zona central, para completar nuestro patrón. Podemos repetir la técnica de las guías mostrada antes para dibujar un nuevo círculo.
Paso 4: Definir el patrón
Este paso tiene mucha importancia ya que nos permite definir a Photoshop que lo que acabamos de hacer es un patrón. Vamos al menú Edición>Definir motivo y le ponemos un nombre en el cuadro que nos aparece.
Después de esto, podrémos utilizarlo en cualquier momento y cualquier proyecto que tengamos de una manera fácil y sencilla.
Paso 5: ¡Vamos a usarlo!
Para los que la quieran como fondo en su web, no tienen más que decinir su CSS para que se muestre repetida.
Para los diseñadores, hay muchas maneras de utilizarlo, por ejemplo con la heramienta Tampón de motivo podemos pintar con él como si fuera un pincel. La podéis encontrar donde la herramienta Tampón de clonar o el Bote de pintura con la configuración de la imagen.
Otra opción es utilizar efectos de capa y ponerle una superposición de motivo.
Esta misma técnica sirve para todos los tamaños y proporciones de documento. Hay veces que no es necesaria pero en otras ocasiones viene muy bien y es la manera más fiable de hacer un patrón. Sentios libres de experimentar con vuestras formas y colores ¡y a disfrutar!
Un ejemplo de utilización, para que veáis que como queda:
En ocasiones no encontramos la textura que necesitamos, o queremos una personalizada con nuestro logo, o algún motivo propio. Este tutorial va orientado tanto a diseñadores como a desarrolladores web que necesiten un fondo único y personalizado para su proyecto. Lo que queremos conseguir hoy es un fondo que podamos utilizar repetido en todas las direcciones, sin que aparezca ninguna junta ni efecto raro.
La técnica que muestro es muy útil en el caso de texturas, fondos geométricos, y casos en los que queremos dejar la imagen con el tamaño justo para hacerla más ligera.
Paso 1: Nuevo documento
Utilizaremos Photoshop. Creamos un documento, con las settings normales para web. Yo voy a utilizar uno de 30x30px
Paso 2: Crear el patron base
Lo primero, pintaré el fondo de la imagen con un color crema. Podéis utilizar la herramienta que más os guste.
Ahora nos centraremos en el centro del documento, lo que al final va a quedar como los extremos del mismo. Ya lo veremos un poco más adelante. Podemos utilizar unas guías para que nos quede más exacto. Tened presente que para que se os ajusten al centro de la imagen debe estar seleccionada la opción Ajustar del menú Vista. Para verlo mejor he hecho zoom sobre la ventana.
Podéis utilizar el motivo que queráis, yo en este caso voy a dibujar un fondo lleno de círculos, con lo que me sitúo en el centro con la herramienta Marco elíptico, pulso Control+Alt para crear una selección perfectamente circular y centrada, y creo una selección a mi gusto.
La relleno con color y el resultado es este:
Esto se puede conseguir de varias maneras, pero enseño una de ellas para los que no quieran pensar :topsy_turvy:
Paso 3: Hacerlo tileable
Una vez tengamos nuestra base, vamos a aplicar unos filtros para asegurarnos de que en la junta de la imagen va a quedar perfecta. Vamos al menu Filtro>Otro>Desplazamiento y ponemos los siguientes datos. En la imagen vemos el resultado que nos tiene que aparecer. IMPORTANTE: Asegurate de que la capa no está bloqueada o de lo contrario no funcionará. Si lo está, aparecerá un candado a la derecha de su nombre. Para desbloquearla pulsa Alt y haz doble clic sobre ella.
¡Ojo! Los 15px que pongo corresponden con la mitad del tamaño del documento. Si usais un tamaño distinto, cambiad este valor. Nuevamente lo repetimos con los siguientes valores y nos quedará como en la imagen siguiente.
¡Perfecto! Ahora ¿quién me puede decir que esta imagen no es completamente tileable? El siguiente paso es rellenar la zona central, para completar nuestro patrón. Podemos repetir la técnica de las guías mostrada antes para dibujar un nuevo círculo.
Paso 4: Definir el patrón
Este paso tiene mucha importancia ya que nos permite definir a Photoshop que lo que acabamos de hacer es un patrón. Vamos al menú Edición>Definir motivo y le ponemos un nombre en el cuadro que nos aparece.
Después de esto, podrémos utilizarlo en cualquier momento y cualquier proyecto que tengamos de una manera fácil y sencilla.
Paso 5: ¡Vamos a usarlo!
Para los que la quieran como fondo en su web, no tienen más que decinir su CSS para que se muestre repetida.
Para los diseñadores, hay muchas maneras de utilizarlo, por ejemplo con la heramienta Tampón de motivo podemos pintar con él como si fuera un pincel. La podéis encontrar donde la herramienta Tampón de clonar o el Bote de pintura con la configuración de la imagen.
Otra opción es utilizar efectos de capa y ponerle una superposición de motivo.
Esta misma técnica sirve para todos los tamaños y proporciones de documento. Hay veces que no es necesaria pero en otras ocasiones viene muy bien y es la manera más fiable de hacer un patrón. Sentios libres de experimentar con vuestras formas y colores ¡y a disfrutar!
Un ejemplo de utilización, para que veáis que como queda:
Muchas gracias por vuestra atención. Se admiten comentarios y aportes 😉
Última edición:
