¿Prueba si un BG repetirá el mosaico correctamente en Photoshop?

9

Con frecuencia estoy trabajando para crear texturas de fondo en Photoshop para usar en la web. Desafortunadamente, generalmente tengo que adivinar, o simplemente usar regalos de otros sitios web.

Me gustaría construir mis propias texturas en Photoshop y verificar si están en mosaico correctamente antes de exportar la imagen. ¿Hay alguna manera de hacer esto rápidamente? Recuerdo un método que usa offset, pero no estoy familiarizado con las herramientas.

A continuación hay un par de mosaicos de fondo de ejemplo para que pueda ver de lo que estoy hablando:

tile1

tile2

adobe-photoshop website-design background tiles Islas del destino
fuente

Respuestas:

17
  • Crea tu imagen. Por ejemplo, digamos que es 200px cuadrados
  • vaya a FILTROS> OTROS> DESPLAZAMIENTO y escriba números xey que tengan la mitad del tamaño de su imagen (en este caso, 100 px)
  • esto cambiará su imagen en esa cantidad de píxeles y colocará los píxeles que se movieron del lienzo al otro lado. Ahora verá una costura en el centro de su imagen donde el patrón no se repite completamente.
  • retoque esta costura para hacer una mezcla suave usando las herramientas que desee (la herramienta de clonación es una opción común).
  • guarda tu nueva imagen.

Para imágenes más complejas, es posible que deba hacer un desplazamiento final de aproximadamente 1/4 de las dimensiones de píxeles para retocar los bordes que podría haber pasado por alto la primera vez que cayeron cerca del borde del lienzo.

DA01
fuente
Gracias esto es perfecto! Exactamente lo que estaba buscando
Destiny Islands
5

DA01 responde cómo hacerlo, pero su pregunta es cómo probarlo. La respuesta a esa pregunta es:

  1. Selecciona tu capa de patrón
  2. Edita> Define Patrón
  3. Crear nueva capa
  4. Seleccionar todo
  5. Edición> Relleno> Patrón> Elija su patrón
  6. Golpee bien y vea si se ve bien
Ryan
fuente
2
ugh ¡Leí completamente la pregunta! Buen consejo. Otra opción es simplemente hacer un archivo HTML de prueba con un fondo repetitivo. Luego, vuelva a guardar el archivo y vuelva a cargar el navegador.
DA01
1
Sí, sabía cómo hacerlo en HTML / CSS, pero no sabía que Photoshop también podía probar. ¡Gracias por el consejo!
Destiny Islands
2

Tradicionalmente guardo la imagen como jpg o png y luego uso html básico para probar el mosaico.

<html>
<head></head>
<body style="background: url(image.jpg) repeat 0 0;">
</body>
</html>

Abra eso en un navegador y podrá ver el mosaico y simplemente vuelva a guardar "image.jpg" y actualice la página web para verificar las revisiones.

Scott
fuente
1

También hay otra forma de hacer esto, pero el límite es que todos los demás patrones deben ser del mismo tamaño que verá por qué.

Pasos:

  • Haga una caja de 200 px por 200 px.
  • Conviértelo en un objeto inteligente.
  • Duplica y alinea para que haya 3 cajas horizontalmente. Asegúrese de que no haya superposición ni espacios intermedios.
  • Duplique los tres cuadros seleccionados en 3 columnas verticales.
  • Si aún no está habilitado, habilite ventanas flotantes en Preferencia.
  • Haga doble clic y abra el objeto inteligente.
  • Alinee ambas ventanas para que pueda ver ambos archivos.
  • Rellene el objeto inteligente con el patrón que desee y véalo en acción en otra ventana simultáneamente.
Muhammad Umer
fuente
1

Hay una gran herramienta (gratuita para uso personal) llamada AMP Tile Viewer que le permite verificar rápidamente si una imagen es enlosable y cómo se verá en mosaico. Lo uso todo el tiempo y funciona muy bien. No es necesario hacer patrones en Photoshop que nunca usará o tendrá que eliminar después.

TaranQ
fuente
1

Escribí una extensión de Chrome llamada Vista de mosaico que le permite hacer clic derecho en una imagen y ver cómo se mosaico.

tknomad
fuente
También existe esta herramienta basada en la web que descubrí recientemente: tile.toyls.com
Thomas Guyot-Sionnest
0

La forma en que lo hago es guardar el mosaico como un jpg y configurarlo en mi escritorio. Bastante rápido y fácil.

jill
fuente