Como posso alterar uma imagem quadrada para uma circular no Sketch?

Quero tirar uma imagem retangular no Sketch e dar um estilo de círculo / raio.

Por exemplo:

Isso é realmente muito fácil. Existem duas maneiras de fazer isso:

1. Use uma máscara

IMHO da melhor maneira, pois oferece mais opções de flexibilidade / edição.

1. Importe sua imagem:

   

2. Desenhe um círculo que oculte sua imagem:

   

3. Mova o círculo para trás do bitmap usando o Backwardícone da barra de ferramentas:

   

4. Use o círculo para mascarar o bitmap, selecionando-o e escolhendo Layer › Use as Maskno menu:

   

5. Ta-da!

   

6. Como uma etapa extra, você pode agrupar seu bitmap e a máscara do círculo para impedir que o círculo oculte outras formas:

   

7. Para adicionar uma borda: adicione outra forma de círculo colocada acima da imagem mascarada.

2. Use um preenchimento de padrão

1. Desenhe o círculo onde deseja que sua imagem apareça:

   

2. Select Fill › Pattern Fill No inspetor:

   

3. Clique Choose Image…e selecione seu bitmap:

   

4. Defina as opções de preenchimento como Fillno menu suspenso:

   

5. Adicione uma borda ao círculo como faria normalmente.

6. Ta-da!

Espero que ajude!

você pode usar um método de mascaramento através do Photoshop.

Aqui estão as etapas, usarei uma imagem retangular de amostra.

1 * Adicione sua imagem retangular no Photoshop, coloque-a em um novo documento e criará uma nova camada apenas para a imagem.

2 * Crie uma forma circular no tamanho desejado usando a ferramenta Círculo, ela criará uma camada para o objeto e a camada será colocada na parte superior da imagem retangular.

3 * Agora, coloque a camada do círculo abaixo da camada retangular da imagem. Em seguida, clique na camada da imagem retangular, clique com o botão direito do mouse e escolha criar máscara de corte.

4 * neste ponto, você pode arrastar a camada retangular da imagem para ajustar o círculo. você pode ajustar qual parte da imagem retangular o círculo deve capturar.

5 * quando estiver satisfeito com a posição da imagem no círculo, poderá selecionar as duas camadas e fundi-las para criar a imagem circular. Você pode clicar com o botão direito do mouse após escolher as duas camadas e mesclar as camadas ou usar o atalho Cmd+ Eno Mac ou Ctrl+ Ese estiver usando o Windows.

6 * Por fim, você pode adicionar efeitos como traços ou sombras projetadas usando o botão de efeito na parte inferior do painel de camadas. deve ter o símbolo fxnele. Escolha o traçado e você pode adicionar um traçado de qualquer cor que desejar à sua nova imagem circular.

Eu espero que isso ajude.

Essa é uma idéia de como abordar o problema de maneira diferente. Não recorte nem masque, mas transforme a imagem para caber no espaço circular. Você precisa de um plug-in que transforme coordenadas retangulares em polares: