Exportando uma fatia no Sketch com fundo transparente ao redor


15

Usando o Sketch 3, você deseja exportar um ícone, os próprios ícones são 24x24, mas ficam dentro de uma área de 32x32.

Eu descobri como fazer isso combinando duas camadas diferentes, uma 24x24 e a outra 32x32, mas é um processo tedioso. Eu preciso fazer isso para cada ícone.

Existe um fluxo de trabalho mais rápido?


11
você pode esclarecer o que você quer dizer com "uma área"? Uma cor sólida? Uma prancheta? Uma fatia? Ou você só precisa que o arquivo final seja 32x32 com o ícone 24x24?
spiral

Olá Ariel, bem-vindo ao GDSE e obrigado pela sua pergunta. Por favor, esclareça qual é o seu problema, como pede a Spiral. Se possível, poste uma foto de exemplo. Obrigado! Se você quiser saber mais sobre o site, consulte a Central de Ajuda ou envie um ping para um de nós no chat quando sua reputação for suficiente (20). Continue contribuindo e aproveite o site!
Vincent

Respostas:


13

Clique Apara criar uma prancheta , selecione o tamanho (ou defina o seu próprio clicando +no canto inferior direito) e comece a exportar. Não há necessidade de criar camadas extras.


7

Na verdade, é muito fácil se você souber como fazê-lo :)

Suponha que você tenha um ícone de 24x24px e deseje que o png seja 32x32px. Você precisa criar uma fatia sobre o ícone. A fatia deve ter 32 x 32 px. Em seguida, agrupe a fatia e o ícone. Por último, mas não menos importante: clique na fatia e no inspetor você verá algo assim:

Janela do Inspetor

Certifique-se de marcar "Exportar apenas conteúdo do grupo". As outras opções devem estar desmarcadas.

Dessa forma, você exportará um png transparente, mesmo se não houver um plano de fundo transparente abaixo do ícone.


Não tenho opções de teses, será preterido? Eu estou usando a versão do Sketch 56.2
Adriano Resende

1

Se você deseja exportar apenas a camada de ícone (24x24), basta arrastar a camada para a área de trabalho.


Seria bom. Infelizmente você não terá ícones para resoluções de tela mais altas.
Julian F. Weinert

1

Use isso para exportar seus ativos. O problema com o próprio Sketch e com a maioria dos outros plugins é que ele negligencia camadas invisíveis durante a exportação. Como resultado, limites invisíveis não funcionam.

Até tentei diminuir a opacidade de um limite para 0, para tentar enganar o Sketch para exportá-lo. Mas a exportação nativa do Sketch não é tão ingênua.

Você pode ver uma horda de plug-ins do Sketch que ajudam na exportação de ativos para Android com facilidade. Eles podem reduzir as etapas envolvidas, mas isso não resolve o problema dos limites.

Este faz.

https://github.com/GeertWille/sketch-export-assets

Permite exportar ativos para iOS, Android e Windows para todas as resoluções, mantendo os limites intactos.

Economiza todos os esforços da prancheta.


11
Olá Sarthak, você poderia explicar um pouco mais o que encontraremos por trás do link que você fornece e por que ele responde à pergunta? Dessa forma, sua resposta ainda será valiosa caso o link seja interrompido posteriormente. A podridão do link é a principal razão pela qual realmente não gostamos de respostas somente de link aqui. Obrigado pelo seu esforço e continue contribuindo!
Vincent

0

Este método funcionou para mim: coloque a camada de fatia de tamanho correto acima da camada em que seu ícone está e verifique se não estão agrupadas .

Espero que ajude

insira a descrição da imagem aqui


0

Passei mais tempo do que seria necessário manualmente, um por um, mas não desisti e encontrei uma solução que funcionava bem:

  1. Copie todos os ícones que você deseja exportar para um novo arquivo
  2. Converta-os em símbolos
  3. Desde que se tornaram símbolos, eles terão suas próprias pranchetas (basta clicar duas vezes em um dos símbolos para acessar a página de símbolos)
  4. Quando na página de símbolos, verifique se todos os símbolos estão recolhidos Exibir> lista Camada> Recolher todos os grupos e selecione todos os cmd + A
  5. Agora você pode continuar e selecionar exportar e exportar todos eles
  6. Voila! Se você os nomeou corretamente, também os terá em pequenas pastas organizadas

espero que isso tenha ajudado!


0

Eu vim com uma solução alternativa que não envolve a criação de pranchetas separadas. É um pouco hacky, mas funcionou para mim. Eu queria que os ícones do meu design fossem exportáveis ​​no Zeplin. Portanto, criar novas pranchetas dificultaria a localização dos ícones pelos desenvolvedores.

Então eu criei o fundo quadrado com 1% de opacidade com o modo de mesclagem "Darken". Você não pode ver nada disso. Depois agrupei isso com o ícone e tornei o grupo exportável. Super simples.

Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.