¿Cómo divido un fondo PSD en elementos en capas que se pueden enlosar?

Me gustaría crear un efecto web de resolución múltiple escalable similar a iBooks y comencé construyendo sobre este tutorial .

El problema es con la imagen de fondo:imagen de fondo

Como podéis ver tiene dos máscaras encima que le dan ese efecto especial:

Máscaras y capa

Lo que quiero hacer es crear un fondo que se ajuste a cualquier resolución, para esto necesito una versión enlosable del fondo de la imagen y una imagen de máscara PNG translúcida que pueda escalar sobre esa imagen enlosable para dar un efecto similar.

No tengo idea de cómo convertir las capas de máscara de arriba en un ráster simple que pueda guardar como un archivo PNG independiente. Traté de replicar la apariencia usando un degradado radial translúcido, pero no llegué a ninguna parte.

Sin la máscara, la imagen se ve así, que es mucho menos convincente:

ingrese la descripción de la imagen aquí

Cualquier consejo sobre cómo hacer fácilmente una textura enlosable también será apreciado, pero probablemente pueda manejarlo yo mismo. Gracias.

Depende un poco de cómo estés pensando en hacerlo todo, pero básicamente duplicaría esa textura de madera actual (Duplícala para que puedas ver la textura neutral detrás de ella). Haz un agujero en el medio como en tus máscaras allí. y tal vez aumentar un poco la saturación, hacer que el color sea más rojizo y más oscuro.
De paso. Podría estar equivocado, pero el título de la pregunta no pregunta cómo colocar mosaicos en esta textura de madera, pero en la pregunta real pregunta cómo convertir esas viñetas en png translúcido.
Gracias. Supongo (y puedo estar equivocado aquí) que puedo obtener una imagen de máscara PNG que incluirá solo el efecto (una imagen transparente) que puedo superponer en la última imagen dentro de mi pregunta para crear la primera imagen dentro de mi pregunta. Esto puede funcionar bien porque puedo colocar la imagen de fondo en mosaico y escalar la imagen de la máscara. Si tengo un agujero en el medio de una imagen, verás una costura que no encajaría.
Sí. En mi opinión, el mosaico y las capas son lo mismo, no puedo mosaico la imagen tal como es y si la escalo tal como es, habrá una distorsión visible. Sin embargo, si puedo separarlo en dos capas, puedo colocar el fondo en mosaico y escalar la capa de superposición para producir un gran efecto para todas las resoluciones.
Aquí hay un ejemplo rápido de lo que estoy hablando ... jsfiddle.net/lollero/fztsV (Al hacer clic en el contenedor se animarán las dimensiones). Lo que hice fue crear un patrón de mierda a partir de la textura y luego recortar un área para usar como la viñeta y luego hice lo que sugerí antes. El único problema con lo que sugiero es que la textura en la imagen de la viñeta se vea borrosa si sus dimensiones son demasiado altas, pero aún así debería funcionar.
En realidad, no sé lo que he estado pensando. Lo que debe hacer en realidad es eliminar esas máscaras de capa (para que tenga un color más oscuro alrededor) y luego fusionar todas las capas y simplemente hacer un agujero en el medio (o posiblemente usar una de las máscaras de capa que ya tiene hecho para hacer ese agujero.) guárdelo como png y listo.
Una imagen con un agujero en el centro no se puede colocar en mosaico... Necesito la imagen MÁS LIGERA para colocar en mosaico (que debería ser fácil) y necesito una superposición en la parte superior del mosaico que pueda escalar. Si la superposición tiene demasiada opacidad, la escala se romperá en el mosaico de las imágenes.
Y en mi ejemplo, ¿qué está mal/diferente de lo que quieres/necesitas?
La imagen que tengo sería más clara, no más oscura. Las máscaras que tengo son objetos MASK que no puedo convertir en una capa real. Si los aplano, se fusionarán con la imagen produciendo una imagen opaca. Si hago un agujero en la imagen (para mostrar el centro de color más claro), habrá una costura entre la imagen dentro del agujero y la imagen de arriba.
Necesitas hacer una imagen más oscura para hacer esa viñeta. Esas capas de ajuste de curva que tiene, simplemente haga clic en esas máscaras de capa en ellas o elimine las máscaras de capa y luego seleccione todas las capas (al menos las que estoy viendo en su imagen de ejemplo) y combine esas capas (Ctrl + E) lo que te deja con una versión más oscura de esa textura de madera. Entonces, ¿hay algo que deba hacer de manera diferente que en mi ejemplo jsfiddle? ..y no tengo idea de qué costura estás hablando... quiero decir... las partes oscuras se ven más oscuras que las partes claras, pero eso es lo que estás tratando de lograr aquí, ¿verdad?
¡Te estás olvidando de LABRANZA! Cuando coloco dos de estos, uno al lado del otro, no se verán como un solo tablero grande, sino como dos tableros con dos puntos... Quiero UN tablero para que el fondo esté en mosaico pero el primer plano tiñe el fondo. La costura aparecerá cuando tenga dos capas, una encima de la otra, que reproduzcan algunos de los mismos píxeles. Intenta hacer esto no con una imagen, con dos (una al lado de la otra) y verás a lo que me refiero.
Entonces, nuevamente, ¿hay algún problema con mi ejemplo jsfiddle? Aquí está el enlace de nuevo jsfiddle.net/lollero/fztsV
No se parece mucho a la imagen de arriba y si fuera más oscura, verías que las líneas verticales de la imagen circundante con el agujero comienzan y luego terminan abruptamente al golpear la imagen en mosaico en la parte posterior. Gracias por el esfuerzo. Envíe esto como una respuesta si no obtengo la respuesta que quiero, lo aceptaré. Lo siento si fui un poco vago.

Respuestas (1)

No me siento muy motivado para responder ya que parece que ni siquiera intentaste mi sugerencia y decías que mi idea no funciona porque esto y lo que me parecía que no leíste bien mis mensajes. . (podría ser que no fui muy claro en lo que dije, pero aun así.)

Mi ejemplo no se parece mucho a su imagen porque no estoy haciendo su 'trabajo' por usted, solo estoy sugiriendo un método para que lo haga.

La idea básica es esta:

  1. hacer una textura de mosaico.
  2. haga una textura que no sea de mosaico que se base en la anterior para que sea lo más consistente posible y oscurezca. (El tamaño de este debe ser del tamaño normal que tendría la caja).
  3. haga un agujero en el medio de la textura sin mosaico.

Si está muy preocupado de que las texturas tengan algún tipo de costura, puede intentar cambiar su opacidad muy baja y luego oscurecer aún más la imagen que no es de mosaico.

http://jsfiddle.net/lollero/fztsV/1/

http://jsfiddle.net/lollero/fztsV/1/show/

Al hacer clic en la imagen, se mostrará cómo se ve la imagen sin mosaico cuando su tamaño es mayor que el tamaño original de la imagen.

si necesita permitir que el tamaño sea bastante grande, la imagen sin mosaico se volverá borrosa, pero puede evitarlo haciendo que la imagen sin mosaico sea un poco más grande que el tamaño normal. (pero, de nuevo, un poco de desenfoque en los bordes no es tan malo...)

ingrese la descripción de la imagen aquí ingrese la descripción de la imagen aquí

Tenga en cuenta que también hay una manera de hacer esto para que los bordes de la viñeta no se escalen de acuerdo con el contenedor, pero eso está aún más relacionado con la codificación, por lo que no entraré en eso.

¿Cómo divido un fondo PSD en elementos en capas que se pueden enlosar?
RespuestasAquíPolítica de privacidad1y, 0v