Menú horizontal

15 de junio de 2016

Redondear los bordes de una fotografía manteniendo transparencias (formato PNG)

Redondear los bordes de una imagen (con transparencia)


Estoy incorporando fotos a mi blog y me gustaría que lucieran con bordes redondeados para mejorar su aspecto.

He visto por diferentes tutoriales y blogs diversas formas de hacerlo a cada cual más complicada. Después de probar la mayoría de ellas, me quedo con la que explico a continuación porque es rápida y más fácil que otras.

Este procedimiento redondea las esquinas de la imagen pero al tener transparencias hay que guardarla en formato PNG ya que el formato JPG no las admite (se consiguen los bordes redondeados pero se mantiene el fondo de la imagen que ha quedado fuera de los bordes).

El problema del formato PNG es que las imágenes ocuparán mucho más que en formato JPG y supone un contratiempo a tener en cuenta si queremos añadirlas a blogs o páginas web.

Empezamos.....


Redondeando bordes de una imagen

Abrimos la foto que vamos a retocar en Photoshop. Situamos el ratón sobre la capa que se ha creado con esta imagen y con el botón derecho seleccionamos "duplicar capa".

Duplicar capa

Como vamos a trabajar con esta copia de la capa original, tenemos que desactivar la capa primera. Para eso hacemos clic sobre el ojo que está a su izquierda para que desaparezca. Ahora solo será visible la capa segunda (Fondo copia).

Visibilidad capa

El siguiente paso es ir a la barra de herramientas y seleccionar "rectángulo redondeado".

Rectángulo redondeado

Ahora vamos a crear un rectángulo redondeado sobre la imagen llevando los bordes casi a la altura de los bordes de la imagen que queremos modificar.

Imagen base río

Al soltar el botón del ratón, nos va a desaparecer la foto en el interior del rectángulo que hemos creado.

Aplicando rectángulo redondeado

He establecido las siguientes propiedades (cuadro en rojo) para la primera opción que es "combinar formas" (cuadro en azul), redondeando las 4 esquinas con un valor de 25px cada una.

Combinar formas


Y paso a combinar la copia de la capa original con la nueva capa que se ha creado (rectángulo redondeado). Para eso arrastro la copia de la capa y la sitúo sobre la capa del rectángulo.

Capas rectángulo redondeado

El resultado es el siguiente,

Moviendo capas


Ahora desde la capa primera (Fondo copia), hago clic con el botón derecho del ratón y selecciono "crear máscara de recorte",

Crear máscara recorte

quedando la foto con los bordes redondeados.

Imagen con máscara recorte

Solo nos queda guardarla en formato PNG para conservar la transparencia del espacio entre los bordes del rectángulo y los bordes originales de la foto. Si la guardamos en formato JPG este espacio quedará, en mi caso, en color blanco.

Como ya comenté al inicio, el problema es que la imagen en JPG tenía un tamaño de 148 Kb y ahora en formato PNG su tamaño ha pasado a 1.27 Mb pero es una solución válida para el retoque de fotos que no necesitemos para la web.