comment 0

Cómo recortar una imagen circular

No se tu, pero a mi, después de varias entradas tan densas y teóricas hablando de color y tipografía, el cuerpo me pide algo de técnica, algo más liviano. Así que, si te parece bien, vamos con una serie de entradas prácticas, como por ejemplo, cómo recortar una imagen con forma circular.

Seguro que de un tiempo a esta parte has visto cómo las imágenes circulares brotan en todas las aplicaciones para móvil y páginas web, como por ejemplo, en la lista de chats de WhatsApp, en los perfiles de Twitter, los avatares de Google Plus, etc. Lo cierto es que se puso de moda desde la salida al mercado de iOS 7 el año pasado, y veremos a ver durante cuanto más nos dura.

Vista de lista de chats en Whatsapp para iOS.

Vista de lista de chats en Whatsapp para iOS.

La app de Google Plus para iOS, con sus avatares redondos.

La app de Google Plus para iOS, con sus avatares redondos.

Eso si, no todos los diseñadores han caído rendidos a los encantos de los avatares circulares. Aún nos queda héroes, como los diseñadores de Facebook, que aguantan estoicamente con sus fotos de perfil perfectamente cuadradas. Y con borde!

La app de Facebook para iOS. Unos valientes.

La app de Facebook para iOS. Unos valientes.

Yo que queréis que os diga. No soy muy de modas, pero también es cierto que muchos clientes me piden que las imágenes tengan estos recortes circulares. Así que es algo que realizo mucho ultimamente…

Como muchas de las modas y fiebres en el diseño de aplicaciones, ésta nació en Dribbble. Por si no lo conoces, Dribbble viene a ser un portfolio online que utilizan muchos diseñadores para compartir y sobretodo, promocionar sus trabajos.

Es una plataforma gratuita, y que te recomiendo encarecidamente visitar, ya que hay trabajos muy buenos y algunos de ellos, como el de las imágenes circulares, marcarán tendencia con el tiempo.

Dribbble es uno de los portales más populares entre los diseñadores.

Dribbble es uno de los portales más populares entre los diseñadores.

Vamos a ponernos manos a la obra. Vamos a realizar recortes de imágenes con diferentes formas utilizando diferentes técnicas, como la máscara de recorte o el uso de patrones. Y para que no sea el protagonista exclusivo el archifamoso Photoshop, vamos a hacer este ejercicio también con otras aplicaciones como Illustrator y Sketch.

Imagen para recortar y crear nuestro avatar

Lo primero que vamos a necesitar es una imagen para poder recortar. A mi, en mis mockups, me gusta crear avatares con imágenes de famosos, personajes de series, etc, (Tyrion Lannister, de Juego de Tronos, es uno de mis clásicos).
Pero si las maquetas que vas a crear van a tener un perfil más público o para determinados tipos de cliente, te recomiendo esta fantástica herramienta llamada UI Faces.

UI Faces. Imágenes de avatar para todos los gustos.

UI Faces. Imágenes de avatar para todos los gustos.

Gracias a esta app puedes descargarte la imagen que quieras para crear avatares de personas ficticias en tus maquetas. Lo cierto es que dan mucho carácter y credibilidad.
También puedes seleccionar las dimensiones de la imagen para después descargarla.
Incluso si te molas mucho, puedes subir la tuya…

Recortando una imagen circular en Photoshop:

Una vez que tenemos imagen para crear nuestro avatar, ya podemos empezar. Vamos a hacerlo por pasos:

1.- Creamos un nuevo documento. Dan igual las dimensiones que elijas, es solo una prueba. Lo importante es comprender el concepto de máscara de recorte.

2.- Añadimos la imagen que nos hemos descargado de UIFaces al lienzo. Arrastrando el archivo de la imagen al lienzo es suficiente.

Nuestro avatar en el lienzo de Photoshop.

Nuestro avatar en el lienzo de Photoshop.

3.- Ahora, pulsando U, o en la herramienta de Formas, elegimos la Elipse, y usamos un color de relleno. Este paso es fundamental, ya que el relleno de la forma hará el recorte de la imagen.

Panel de herramienta de formas en Photoshop.

Panel de herramienta de formas en Photoshop.

4.- Para conseguir crear un círculo perfecto, solo tienes que crear la elipse con la tecla Mayúscula (Shift) pulsada, esto respeta las proporciones cúbicas, por lo tanto, mientras desplazamos el ratón, no se deformará. Como puedes ver, al crear la elipse, se ha generado una capa nueva.

Nuestra elipse ya creada en una nueva capa.

Nuestra elipse ya creada en una nueva capa.

5.- Ahora tenemos que alterar el orden de las capas: la imagen tiene que ir arriba, y la forma que hará de molde, el círculo, debajo.

¿Quieres convertir las visitas de tu web en clientes de forma automática?
En mi curso “8 claves para crear tu estrategia online” te cuento cómo hacerlo

COMENZAR PROGRAMA

6.- Ahora tenemos que crear la máscara de recorte: Capa / Crear máscara de recorte o pulsando (en mac) cmd + alt + G. En Windows lo desconozco, intento no acercarme demasiado a esas máquinas que carga el diablo.
Ahora en serio, el mejor consejo que puedo darte es que te aprendas los atajos de teclado del software que usas. Te ayuda a ser mucho más productivo y eficiente.

Creando una máscara de recorte. Cmd + alt + G.

Creando una máscara de recorte. Cmd + shift + G.

7.- Y voilá. Imagen recortada circularmente. En este caso como puedes ver, tiene un borde de color negro de 2 pt, tal y como configuramos al crear la elipse. Esto lo puedes modificar seleccionando la capa de la elipse, pulsando U, y cambiando el valor y quitándole directamente el borde.

Nuestro avatar circular creado.

Nuestro avatar circular creado.

Nuestro avatar sin borde.

Nuestro avatar sin borde.

Recortando una imagen circular en Illustrator:

Receta:

1.- Creamos un nuevo documento y arrastramos la imagen que queremos recortar.

Nuestra imagen de avatar en Illustrator.

Nuestra imagen de avatar en Illustrator.

2.- Ahora pulsamos L, y creamos un círculo con la herramienta Elipse. Al igual que ocurre en Photoshop, para crear un círculo tenemos que crear la zona con el ratón y pulsar Mayúscula para mantener las proporciones.

Creando nuestro círculo.

Creando nuestro círculo.

3.- Ahora tenemos que crear nuestra máscara de recorte entre ambos objetos. Seleccionamos los dos objetos y pulsamos cmd+7 o en el menú Objeto / Máscara de Recorte / Crear.

Creando la máscara de recorte.

Creando la máscara de recorte.

4.- Imagen circular creada con éxito!

Imagen final ya recortada con Illustrator.

Imagen final ya recortada con Illustrator.

Como puedes ver, es mucho más sencillo de realizar en Illustrator que en Photoshop, como casi todo.

Recortando una imagen circular con Sketch:

A mi Sketch me tiene robado el corazón. Es una aplicación para Mac, que solo ocupa 28 MB, que es bastante económica (unos 70 €, que comparados con lo que cuesta una licencia de Adobe Photoshop….) y es maravillosa para diseñar.

En Sketch, al igual que ocurre en Photoshop y en Illustrator, se puede realizar la técnica de la máscara de recorte.

Receta 1:

1.- Arrastramos nuestra imagen de avatar.

Nuestro avatar en el lienzo infinito de Sketch.

Nuestro avatar en el lienzo infinito de Sketch.

2.- Pulsando O o seleccionando la herramienta para crear una elipse, creamos un círculo con Mayúsculas pulsado con las dimensiones que queramos.

Creando nuestro círculo con Sketch.

Creando nuestro círculo con Sketch.

3.- Ahora seleccionamos nuestros dos objetos, y en vamos a menu Layer/ Mask with selected Image.

Creando la máscara con Sketch.

Creando la máscara con Sketch.

4.- Ya tenemos nuestra imagen recortada. Como puedes ver, Sketch nos ha creado una carpeta donde tenemos la imagen y el trazo que ha realizado el recorte.

Imagen final ya recortada.

Imagen final ya recortada.

Receta 2:

Otra forma interesante de crear este tipo de imágenes es utilizando los patrones. Para ello, en Sketch, hacemos los siguiente:

1.- Dibujamos lo que va a ser el molde de nuestro avatar. Lo que antes hacía el recorte, ahora hará de contenedor. Para no repetirnos más que el ajo, e intentando ser un poco creativos, vamos a utilizar otra forma para el molde de nuestro avatar, por ejemplo un hexágono.

Insertando un polígono en Sketch.

Insertando un polígono en Sketch.

2.- Por defecto, Sketch crea un pentágono, pero podemos elegir el número de vértices en el menú lateral de opciones. En Points, ponemos 6.

Elige los puntos que quieres para tu polígono.

Elige los puntos que quieres para tu polígono.

3.- Ahora, en la opción de relleno, en Fill, pulsamos, y en el menú desplegable elegimos pattern (Patrón). Elegimos una imagen, en este caso lo de nuestro avatar, y elegimos la opción de Fill, en lugar de Tile. Tile nos serviría para repetir la imagen como si fuera un mosaico.

Utilizando patrones para insertar una imagen en Sketch.

Utilizando patrones para insertar una imagen en Sketch.

4.- Y ya tenemos nuestro avatar con un recorte personalizado usando la técnica del patrón.

Espero que te haya gustado este mini tutorial y que puedas poner en práctica estas ideas.
Como siempre te agradezco cualquier tipo de aportación o comentario, y si te ha gustado este mini tutorial o conoces a alguien a quien le pueda servir, por favor, compártelo.

Hasta pronto.

Posts Relacionados:

Curso de Programación Web Desde Cero.
Da un toque de creatividad a tus diseños con un gif animado.
5 lugares para descargar imágenes gratis.
Introducción a la tipografía web.
Diseño web: Color de un call to action.

Clasificado como: Diseño

Sobre el autor

Escrito por

Me llamo Francisco Gallardo , y soy diseñador de productos de software, mobile y web. Soy diseñador de UX, de interfaces y desarrollador web y iOS.

Leave a Reply