Como faço para recriar esta seta no Sketch?

Estou tentando criar alguns dos ativos do meu site no Sketch para que possa usá-los em um novo guia de estilo. Sou novo no desenho desses tipos de formas e não consigo descobrir como fazer com que esta seta fique simétrica e com pixels perfeitos.

Eu tentei manter os dois lados com o mesmo comprimento / largura (15×5), mas sempre há uma sobreposição estranha em algum lugar, como você pode ver na foto. Desenhei um lado, angulei e copiei + espelhei.

Como eu criaria esta forma para que fosse perfeitamente espelhada, simétrica e com pixels perfeitos?

problema

Comentários

  • Comente se você votar negativamente, eu posso ' aprenda com votos negativos silenciosos 🙂

Resposta

Resposta curta – faça com um toque .

Resposta longa: Crie um vetor (atalho: V) com três pontos. Selecione cada ponto individualmente e certifique-se de que as coordenadas de cada ponto fazem sentido. Usei para o ponto 1 (100, 100), ponto 2 (119,5, 90), ponto 3 (119, 100). Dica: pressione “ENTER” para entrar e sair do modo de edição e tome cuidado para não fechar o caminho. insira a descrição da imagem aqui

  • Eu escolhi o primeiro valor aleatoriamente (100, 100 torna mais fácil adicionar números);

  • então eu escolhi o ponto 2 em 119,5, então ele faz uma borda afiada e escolhi 90 para y, então a seta inteira terá 10px de altura;

  • então calculei que o ponto 3 deveria estar a mais 9,5 pixels de distância do segundo, ou 19 pixels de distância do primeiro (então – 119 no total) e deveria estar em um linha reta com o primeiro, então 100 para Y.

Então – dê ao seu traço alguma espessura (eu escolhi 5).

insira a descrição da imagem aqui

Opcionalmente – converta para contornos (cmd + shift + o), e voila! É um pedaço de amor absolutamente espelhado e perfeito. Mais uma dica: torne-o um símbolo depois. insira a descrição da imagem aqui

Deixe uma resposta

O seu endereço de email não será publicado. Campos obrigatórios marcados com *