Como exportar ativos do Adobe XD para criar um site WordPress

O Adobe XD é um programa incrível para criar sites e supera em muito seu antecessor, o Adobe Photoshop. Na Bright Vessel, o tornamos nosso programa preferido para criar experiências de usuário para nossos clientes.

Veja como exportar ativos ao criar um site WordPress no Adobe XD.

1. Primeiro você precisa abrir seu arquivo do Adobe XD

2. Depois que seu arquivo estiver aberto, certifique-se de provisionar os arquivos para que eles possam ser exportados corretamente.

A necessidade de ser preciso e todos os elementos precisam estar agrupados e em sua própria seção.

Nesta imagem, um designer adiciona elementos em várias camadas diferentes. Quando todas as camadas foram agrupadas, os elementos não foram cortados corretamente. Isso é fácil de corrigir. Ao clicar duas vezes em um dos elementos, por exemplo, o homem, você arrasta para que nenhum elemento sangre para uma linha diferente.

Esta é uma solução fácil. Ao clicar duas vezes em um dos elementos, por exemplo, o homem, você arrasta para que nenhum elemento sangre para uma linha diferente.

3. A nomenclatura é muito importante. É sempre bom nomear suas imagens, não apenas para facilitar a identificação, mas também para SEO. Usaremos HDR para os cabeçalhos e, em seguida, BG para os fundos.

Isso facilita a identificação do tipo de elemento da imagem e, em seguida, o nome da seção, se for um fundo, ou do elemento, se for tipografia, botão, etc. Na área de camadas, nomeie o grupo e as imagens individuais. Use letras minúsculas e um hífen entre cada palavra.

4. Agora, a maneira mais fácil de exportar, depois de corrigir todos os elementos, é agrupá-los para poder exportar a imagem necessária. Na maioria dos casos, você reunirá recursos que, de outra forma, não poderiam ser criados em HTML e em um construtor que você pode estar usando.

Arquivo > Exportar > Selecionado

Agora que nomeamos a camada, não precisamos digitá-la. Assim, sabemos que tipo de elementos as imagens representam para o fundo, tipografia, botão, etc. É sempre bom nomear suas imagens, não apenas para facilitar a identificação, mas também para SEO. Usaremos HDR para os cabeçalhos e, em seguida, BG para os fundos.

Depois de exportar, você deverá ter um grupo de elementos no tipo de arquivo de imagem desejado.