¿Cómo puedo alterar una imagen cuadrada en una circular en Sketch?

Quiero tomar una imagen rectangular en Sketch y darle un estilo de círculo / radio.

Por ejemplo:

Eso es realmente bastante fácil. Hay dos maneras de hacerlo:

1. Use una máscara

La mejor manera en mi humilde opinión, ya que le da más flexibilidad / opciones de edición.

1. Importa tu imagen:

   

2. Dibuja un círculo que enmascarará tu imagen:

   

3. Mueva el círculo detrás del mapa de bits con el Backwardicono de la barra de herramientas:

   

4. Use el círculo para enmascarar el mapa de bits, seleccionándolo y eligiendo Layer › Use as Masken el menú:

   

5. Ta-da!

   

6. Como paso adicional, puede agrupar su mapa de bits y la máscara del círculo para evitar que el círculo enmascare otras formas:

   

7. Para agregar un borde: agregue otra forma de círculo colocada sobre la imagen enmascarada.

2. Use un patrón de relleno

1. Dibuja el círculo donde quieres que aparezca tu imagen:

   

2. Select Fill › Pattern Fill en el inspector:

   

3. Haga clic Choose Image…y seleccione su mapa de bits:

   

4. Establezca las opciones de relleno Fillen el menú desplegable:

   

5. Agregue un borde al círculo como lo haría normalmente.

6. Ta-da!

¡Espero eso ayude!

Puedes usar un método de enmascaramiento a través de Photoshop.

Aquí están los pasos, usaré una imagen rectangular de muestra.

1 * Agregue su imagen rectangular en Photoshop, colóquela dentro de un nuevo documento y creará una nueva capa solo para la imagen.

2 * Cree una forma circular al tamaño deseado con la herramienta de círculo, creará una capa para el objeto y la capa se colocará en la parte superior de la imagen rectangular.

3 * Ahora coloque la capa del círculo debajo de la capa de imagen rectangular. Luego haga clic en la capa de la imagen rectangular, haga clic con el botón derecho y elija crear máscara de recorte.

4 * en este punto, puede arrastrar alrededor de la capa de imagen rectangular para ajustarse al círculo. puedes ajustar qué parte de la imagen rectangular debe capturar el círculo.

5 * una vez que esté satisfecho con la posición de la imagen en el círculo, puede seleccionar ambas capas y fusionarlas para crear la imagen circular. Puede hacer clic con el botón derecho después de elegir ambas capas y elegir combinar capas o usar el acceso directo Cmd+ Een Mac o Ctrl+ Esi está utilizando Windows.

6 * Por último, puede agregar efectos como trazos o sombras mediante el botón de efectos en la parte inferior del panel de capas. Debería tener el símbolo fx. Elija trazo, y puede agregar un trazo de cualquier color que desee a su nueva imagen circular.

Espero que esto ayude.

Esta es una idea de cómo abordar el problema de manera diferente. No recorte ni enmascare, sino que transforme la imagen para que quepa en el espacio circular. Necesita un complemento que se transforme de coordenadas rectangulares a polares: