Cómo redondear bordes de fotografíasEn este primer tutorial voy a explicar de un modo rápido y sencillo cómo redondear los bordes de las fotografías, para darles ese acabado tan “light/chic” que nos gusta.
Para la realización de este tuto, he utilizado el Adobe Photoshop CS (versión Mac) con el paquete de idioma inglés, así que haré referencias por tanto a los pasos que realice en dicho idioma (traduciéndolos como crea que sea) y para dicho programa. Otras versiones puede que difieran en algo, pero no mucho (espero).
Lo dicho, que empezamos.
1.- Selección de imágen: lo primero que haremos será escoger la imagen a la que queremos redondear los bordes. Para este tutorial en concreto, he usado esta imágen original. Una vez que la tengamos lista, la abrimos con el Photoshop.
2.- Creación de una máscara: para poder trabajar precisamos de una superficie de trabajo. Para ello, crearemos una nueva máscara. Seleccionaremos el menú Layer (Capa), elegiremos New > (Nueva >) y pincharemos sobre Layer… (Capa…).
A continuación nos saldrá un cuadro para que escojamos color y nombre de la nueva máscara. En mi caso, la he nombrado como “Bordes” y la he dejado en el color por defecto (blanco).
3.- Bordeado de la imágen: el siguiente paso consistirá en crear los bordes para la imagen. Para ello haremos uso de la Rounded Rectangle Tool (Herramienta de Rectángulo Redondeado), que podeis encontrar en la barra de herramientas de la izquierda. Crearemos un rectángulo redondeado sobre nuestra foto. Dicho rectángulo tapará la foto por completo, así que no os preocupeis de ello.
Para definir la curvatura del borde, en la barra superior vereis marcado con un cuadro rojo (en la foto) una casilla con un valor numérico. Dicho valor es el radio de curvatura. Podeis cambiarlo a vuestro gusto para variar el borde.
4.- Transparencia de la capa: ahora que tenemos ya delimitados los bordes, vamos a “transparentar” el rectángulo que hemos creado, ya que no nos permite ver la foto. Para ello, nos iremos a la capa que hemos creado (y sobre la que hemos dibujado el rectángulo) y abriremos sus Propiedades de Mezcla… (Blending Options…).
Una vez allí, nos iremos donde pone Advanced Blending (Mezcla Avanzada) y disminuiremos el valor de Fill Opacity (Relleno de Opacidad) hasta valor cero, por lo que la capa será “transparente” y veremos nuevamente nuestra foto.
5.- Seleccionar marco: a continuación, en el menú de capas, seleccionaremos la pestaña donde pone Path (Ruta), y clicando con el botón derecho, elegiremos la opción de Make Selection… (Hacer Selección…).
Una vez que pulsemos, nos saldrá un cuadro de diálogo con varias opciones. Aunque está todo correcto por defecto, nos debemos asegurar de que Feather Radius (Radio de Pluma) tiene valor cero, y que la opción Anti-aliased se encuentre activada.
6.- Copy&paste: el siguiente paso es algo natural en toda edición de imágen. Nos iremos hasta el menú Edit (Edición) y seleccionaremos la opción Copy Merged (Copiar Fusión).
Hecho esto, creamos un documento en blanco, sin tocar las medidas que vienen por defecto. Lo único que haremos será asegurarnos de que el tipo de fondo es transparente. Una vez que tengamos abierto el nuevo documento en blanco, pegaremos (Edit -> Paste; Edición -> Pegar) la imagen que tenemos en el portapapeles, quedándonos
Con esto y un bizcocho, ya tenemos nuestra foto con los bordes redondeados ^^ No ha sido tan complicado, ¿eh? Si quereis ver el resultado en nuestra foto ideal, la podeis encontrar aquí.
Un saludo y espero que os haya resultado útil 
Esta entrada fue publicada en
Yo ya sabía hacer eso XDDD. No es tan dificil, perraco.
Un besito.
No te aventures tanto con tus tutoriales joven Padawan. Tu aprendizaje completo todavía no es >_<
Fuera coña, el tutorial está bien, pero pongo dos peros:
1º Has utilizado muchas funcionalidades de las útimas versiones de Photoshop. El tutorial no es válido para versiones anteriores y por tanto no es válido para la mayoría de los usuarios de este programa.
2º Desde un punto de vista más profesional, te faltan unos 2/3 para acabar el tutorial. Te has dejado cosas en el tintero bastante importantes.
PD: No era mi intención hundirte en la miseria… pero ya que estás… un empujoncito nunca sobra, ¿no? ¡¡¡Muhahahahahahaha!!! ñ_ñ
Tu eres experto en hacer -y mantener- amigos, ¿eh? ¬¬”
He conseguido redondear los bordes de las fotos, ¿no? Pues ale.
Y lo siento, yo no soy tan listo como vosotros. Es lo que hay.
Y lo siento, yo no soy tan listo como vosotros. Es lo que hay.
Eso ya lo sabíamos ^.^
no me pareció mal e incluso te tomaste el laburo de poner todas las imagenes cosa que no todo el mundo hace
Saludos
Hombre, pues muchas gracias Cristian
po yo no me he enterao de na
Dime de qué no te aclaras, Maite, e intentaré explicarlo de otro modo
thanks!
A ti
¡Muy bien explicado!
gracias
Un placer ^^
exelente, buen bien explicado, muchass gracias justo lo necesitava para una tarea
un saludo
chau =)
Esto es precisamente lo que andaba buscando, para un principiante como yo, bien explicado, congratulations
Me congratula saber (toma palabro xD) que mi tutorial os ha servido de utilidad
Muchas gracias.
mmm gracias. Me ha quedado como tu y tal… pero el ultimo paso quedan las esquinas con los cuadraditos esos que en TEORIA es transparente… muy bien. Yo le he dado a Guardar Como la imagen… como JPG y la abro para ver que tal… con el office picture manager… el que vienen dado cn windows… y me salen las esquinas blancas… y se ven ¬¬
que hay que haceR?
graciaaaaaaaas!!!!!
¡A las buenas Susana!
Pues a ver, para que las esquinas te salgan “transparentes”, tienes que guardar la imagen en formato PNG o GIF (preferentemente el primero, que es mucho mejor). El formato JPG no soporta transparencias, y de ahí que no te salga como arriba
Prueba a guardar en estos otros formatos, y me cuentas si te funciona
muy buen articulo
Pingback: Cuaderno de Bitácora » Archivo del Blog » Google Analytics de Abril de 2008
Pingback: Cuaderno de Bitácora » Archivo del Blog » Google Analytics de Junio de 2008
Qué pena en el 5º paso me perdí. Seré muy patoso, pero no encuentro la pestaña “Ruta”
Yo tengo el photoshop en español, ¿Me puede ayudar alguien, por favor?
¡Gracias de antemano!
Ya, ya lo encontré y lo terminé
Un tutorial perfecto muchísimas gracias.
Un saludo
Me alegro que te haya sido útil
muchicimas gracias x el tuto
lo andaba buscando y bastante!
GRACIAS!
Bueno todo ok, será fácil pero peor, a mi no me salió ¬¬, o sea se redondeó pero me quedaron las 4 esquinitas blancas ¬¬ y eso que la última capa antes de pegar era transparente como dijiste, no sé que mas probar ya, alguien sugiere algo? Gracias.
Muy buenas, Francisco (bonito nombre ^^).
Asegurate que, al grabar el archivo, los formatos sean PNG o GIF, ya que de otro modo, te saldrá en las esquinas el fondo blanco. Comprueba eso y me dices si te sale bien ahora
Bueno, me gané un máster a la inutilidad, seguí paso a paso el tutorial, lo revisé como 4 veces me aseguré de guardarlo en PNG y GIF, y cuando lo subo a “Flickr” por ejemplo, me sale directamente la foto cuadrada “CHAN!”… y sí también quería agradecer por más que no me salga, el trabajo que hiciste, eso de hacer paso a paso con sus respectivas imágenes, es para destacar… Gracias.
Mmm, no entiendo muy bien a qué te refieres con eso de que la foto te sale cuadrada cuando la subes a Flickr.
Veamos, cuando salvas la imagen al escritorio, ¿ésta te sale con los bordes redondeados, o está cuadrada? De todos modos, Flickr lo que hace es crear imágenes de nuestra original para los distintos tamaños, y eso puede que se cargue el formato de transparencias.
Si ves que no hay manera de solucionar el problema con la foto, mándamela al correo (la dirección la tienes en la sección de contacto) y le hecho un ojo a ver qué le pasa.
Un saludo.
aca les dejo otras opciones para redondear bordes, aunque la de este blog igual no es complicada
BORDES REDONDADOS
Claro, Breve, conciso y eficaz. Apúntate un diez por el tutorial!! Me solventaste el problema en 2 minutos. Gracias!!
Muchas gracias, Alejandro
Me alegro que haya sido útil ^^
Pingback: Cuaderno de Bitácora » Archivo del Blog » Google Analytics de Mayo de 2008
Hola ando aprendiendo acerca de estos temas, y quería preguntar si alguien sabe como fijar el fondo en una página web, véase esta misma por ejemplo. Por cierto realizo los pasos que dices, pero a la hora de insertarla la imagen con bordes redondeados en una pagina web me sigue abarcando el mismo cuadrado con la imagen de bordes redondeados dentro. Y lo guardo como gif transparente.
Echadme un cable please!
Esta es una entrada de Photoshop más que de HTML, pero bueno, por una vez no pasa nada
El código que tienes que poner es:
Con eso consigues que la imagen de fondo no se repita como un mosaico (no-repeat) y que quede fija al borde izquierdo superior de la pantalla (left top).
Sobre el tema de los bordes redondeados, la imagen siempre tendrá las esquinas, aunque las hayas redondeado. Lo que pasa es que esas esquinas serán “transparentes”, y no las verás. Piensa que si la imagen fuese “con formas”, sería muchísimo más dificil de procesar que un rectángulo
Espero que te haya servido de ayuda la aclaración.
Muchisimas gracias me sirvio de muuucho!
Tanto que me alegro
Pingback: Cuaderno de Bitácora » Archivo del Blog » Google Analytics de Enero-Junio de 2009