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

Con frecuencia trabajo 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 crear mis propias texturas en Photoshop y verificar si se colocan correctamente antes de exportar la imagen. ¿Hay alguna manera de hacer esto rápidamente? Recuerdo un método que usa compensación, pero no estoy familiarizado con las herramientas.

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

azulejo1

azulejo2

Respuestas (7)

  • crea tu imagen. Por ejemplo, digamos que es un cuadrado de 200 px.
  • vaya a FILTROS > OTROS > DESPLAZAMIENTO y escriba los números x e y que son 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 fuera del lienzo al otro lado. Ahora verá una costura que se extiende por el medio de su imagen donde el patrón no se repite completamente.
  • retoque esta costura para que sea una mezcla suave con 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 una compensación final de, digamos, 1/4 de las dimensiones de los píxeles para retocar los bordes que podría haber pasado por alto la primera vez que cayeron cerca del borde del lienzo.

Gracias esto es perfecto! Exactamente lo que estaba buscando

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

  1. Seleccione su capa de patrón
  2. Edita> Define Patrón
  3. Crear nueva capa
  4. Seleccionar todo
  5. Editar > Rellenar > Patrón > Elige tu patrón
  6. Presiona OK y mira si se ve bien
puaj. ¡Leí totalmente mal la pregunta! Buen consejo. Otra opción es simplemente crear un archivo HTML de prueba con un fondo repetido. Luego, siga guardando el archivo y recargando el navegador.
Sí, sabía cómo hacerlo en HTML/CSS, pero no sabía que Photoshop también podía probarlo. ¡Gracias por el consejo!

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>

Ábralo en un navegador y podrá ver el mosaico y simplemente volver a guardar "image.jpg" y actualizar la página web para verificar las revisiones.

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, verás por qué.

Pasos:

  • Haz un cuadro de 200px por 200px.
  • Conviértelo en un objeto inteligente.
  • Duplícalo y alinéalo para que haya 3 cajas horizontalmente. Asegúrese de que no haya superposiciones ni espacios intermedios.
  • Duplica los tres cuadros seleccionados en 3 columnas verticales.
  • Si aún no está habilitado, habilite las ventanas flotantes en Preferencias.
  • 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.

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

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

También existe esta herramienta basada en la web que descubrí recientemente: tile.toyls.com

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