Quiero diseñar un sitio web.
Tengo algunas imágenes con diferentes w*h.
Por ejemplo, tenemos muchas imágenes en 800*600 o 1024*768 o algo más.
En nuestro sitio web tenemos algunos marcos restringidos como 270*160 o 512*900. Queremos escalar o cambiar el tamaño de las imágenes principales en un tamaño de cuadro restringido.
¿Cómo podemos hacer esto con Photoshop o cualquier herramienta de diseño web para cambiar el tamaño de las imágenes sin estirar, destruir o recortar las imágenes principales para que encajen correctamente en el tamaño del marco?
En términos simples... No se puede .
Si desea modificar la relación de aspecto general de una imagen, debe recortar , estirar, aplastar o enmascarar (el enmascaramiento puede ser factible en la web, aunque resultará esencialmente en un recorte). Esas son tus unicas opciones.
¿De cuántas imágenes estamos hablando? Si es un puñado, puede hacerlo manualmente. Calcule el tamaño de su marco, cree un nuevo archivo en blanco de ese tamaño y luego abra su imagen de origen. Reduzca el tamaño de su imagen para que la altura coincida con su marco o el ancho (el que sea más pequeño), luego corte y pegue esa imagen en su imagen de 'marco' en blanco. Luego puede mover la imagen para averiguar dónde desea que se recorte, luego guárdela como su imagen de 'marco recortado'. Repetir.
Si estamos hablando de cientos de fotos, es probable que desee utilizar un software para automatizar esto.
Alternativamente, puede hacer esto únicamente con CSS si las imágenes no son muy grandes en términos de velocidad de descarga. Use la misma lógica que la anterior donde tiene su divtamaño para el tamaño de marco que desea, luego la imagen como imagen de fondo. Necesitaría un poco de JS para determinar si escalar la imagen en función de su ancho frente a su altura.
Cuando arrastre la imagen a Photoshop, haga clic con el botón derecho en la capa y encontrará "convertir en objeto inteligente". De modo que su imagen no se estire o, si cambia el tamaño, tampoco se píxel.
rafael