¿Cómo hacer una miniatura de esquina redondeada que "contenga la imagen de la publicación"?

Cuando creo rectángulos redondeados en Photoshop, puedo enmascarar imágenes sobre esos rectángulos redondeados para darles esquinas redondeadas.

Sin embargo, cuando estoy creando sitios web, no estoy seguro de cómo redondear las esquinas de las imágenes.

No sé cómo usar máscaras vectoriales en el sitio web, ¿crees que es la solución correcta? Por favor, si alguien puede proporcionarme un tutorial o algo, se lo agradeceré mucho.

Ejemplo en línea:

ingrese la descripción de la imagen aquí

Respuestas (3)

Este efecto está hecho con CSS.

Simplemente agregue un border-radiusatributo a su imagen para que tenga esquinas redondeadas.

Ejemplo:

img {
border-radius: 10px;
}

(Eso se aplicaría a todas las imágenes)

Aquí hay un ejemplo en vivo con el que puedes jugar.

Entonces, en el archivo psd, cuando diseño la interfaz, no debo poner nada en mis consideraciones, ¡porque quiero que las miniaturas sean un rectángulo redondeado!
Cuando diseñes la interfaz en Photoshop, solo usa lo que estás acostumbrado (usa máscaras para hacer imágenes redondeadas), pero luego, cuando implementes ese diseño en una página web, usa el atributo CSS.
Esta respuesta es acertada, pero déjame decirte una cosa más, no puedes lograr esquinas redondeadas fácilmente en css para IE , todos los demás navegadores modernos actuarán en consecuencia, pero IE necesitará más esfuerzos.
Johannes: Gracias, lo que hago es seleccionar "Herramienta de rectángulo"> Crear forma> seleccionar rectángulo redondeado> Restar (-) la forma de rectángulo redondeado de la forma de rectángulo Simplemente el cuadro de rectángulo se resta al cuadro de rectángulo redondeado y luego pongo la imagen debajo de esta capa para que se vea con esquinas redondeadas. esta es la única manera que sé... el problema es que tengo que cambiar el tamaño de las imágenes para que no aparezcan a los lados, vea esta imagen una mejor manera, si no te importa por favor envíame un tutorial.
hay algun problema como lo hago? ¿O no importa porque todo está en manos de CSS, no de Photoshop? ¿Cuál es la forma óptima de hacerlo si es sí o no?
Para eso, creo que sería un poco más complicado y necesitarías usar Javascript.

También puede usar timthumb para que no tenga que preocuparse por los tamaños de imagen exactos para sus rectángulos, y luego use la punta de Johannes arriba para las esquinas redondeadas.

http://www.binarymoon.co.uk/projects/timthumb/

Me doy cuenta de que su pregunta realmente se relaciona con el radio de borde de CSS3, pero pensé en dejar este enlace a PolyClip , que le permite crear máscaras vectoriales en un navegador web. Lo hace para que pueda usar un archivo JPG mucho más pequeño y una ruta de recorte en lugar de un archivo PNG grande con transparencia alfa. Entonces, si está buscando recortar imágenes más complejas que los cuadros de esquinas redondeadas, esta sería la ruta a seguir.

Hola, JamEs, el problema es que no soy un experto en css, todo lo que tengo que hacer es manejar archivos psd de photoshop para el desarrollador, ya que soy una persona externa y soy bueno con photoshop, así que no sé si los marcos de las esquinas redondeadas deben hacerse en el archivo psd o simplemente muéstrale sus esquinas redondeadas y lo hace con css!! 2- las miniaturas del usuario también tienen esquinas redondeadas, cuando vi, por ejemplo, twitter gui psd, veo que lo hizo vector de máscara gris con esquinas redondeadas, que no sé si debería hacer esto, porque no sé cómo hacer esquinas redondeadas marcos que se ajustan a css. Puedo hacerlo en general
Usa las esquinas redondeadas en Photoshop para mostrar lo que te gustaría que tu web person recree, luego puede crear las esquinas redondeadas usando código. Si está codificando el sitio y no está familiarizado con la forma de generar el código, le sugiero algo como border-radius.com que le permitiría crear el cuadro que desea visualmente, luego generar el código para que lo copie y pegue en una hoja de estilo. .
¿Cómo hacer una miniatura de esquina redondeada que "contenga la imagen de la publicación"?
RespuestasAquíPolítica de privacidad1y, 1v