Criar imagens no Adobe XD
Caso deseje aprender a utilizar uma boa plataforma para edição e criação das imagens do seu app (inclusive imagens para os ícones) siga os passos abaixo.
- **Baixar o Adobe XD **
Primeiramente baixe o sistema que permite a edição e exportação das imagens do app. Ele é totalmente grátis.
Para baixar, acesse o site abaixo, role a página até “Encontre o plano ideal para você” e baixe o XD grátis. Esse programa é parecido com o Photoshop, Illustrator etc mas é bem mais fácil de usar. Para baixar, clique no link abaixo:
https://www.adobe.com/br/products/xd.html
- Para criar um botão do zero:
- Selecione a opção "Personalizado" e definir os tamanhos de largura e altura para 400px;
- É muito importante que a prancheta (a área de desenho) esteja transparente, assim mantemos o tamanho que a plataforma Fabapp aceita, mas também nos permite ter uma liberdade maior para trabalhar nesse espaço (isso vai ser importante para um feito de sombra funcionar, por exemplo);
- Para isso clique sobre o nome da prancheta até que ela fique azul e, em seguida, retire a marcação da opção "Preenchimento". Como mostra a imagem abaixo:
- Agora use a função retângulo, arrastando-a e soltando-a para dentro da prancheta;
- Ajuste o tamanho para 360px e alinhe-o ao centro centro;
- Remova o contorno, arredonde as bordas e ative a sombra.
Como mostra a imagem abaixo:
- Usando a função texto, arraste e solte para começar a digitar o nome do botão (dica: usar poucas palavras, no máximo 3). Alinhe no centro e ative a função de texto expansivo;
- Defina o tamanho da fonte para 43 para garantir a legibilidade quando o app estiver pronto.
Como mostra a imagem abaixo:
- Dentro dessa imagem desse botão, você pode acrescentar um ícone. Pata isso basta baixar esse ícone, conforme orientado aqui e então arrastar da pasta no computador pra dentro do XD.
De preferência o ícone deve estar em formato svg ou png transparente.
- Posicione-o ao centro e clique na cor ao lado do campo "Preenchimento". Como mostra a imagem abaixo.
Lembre-se que se inseriu o ícone no formato PNG não será possível trocar a cor do mesmo, apenas será possível se ele estiver no formato .svg.
- Pronto. Para exportar esse arquivo para uma pasta do seu computador basta apertar "ctrl+E" no teclado do seu computador.
- Para criar um novo botão:
- Abra o programa e clique no título da sua prancheta (que nesse caso é fretes) e clicando novamente com o botão direito do mouse selecionar a opção “copiar”.
- Depois clique em alguma área vazia e cole (ou você pode usar o famoso "ctrl c" e "ctrl v").
Veja a imagem abaixo:
- ** Para alterar o texto:**
- É só clicar duas vezes nele, mas cuidado para manter o alinhamento igual aos outros. Veja a imagem abaixo:
- Para adicionar uma imagem:
- Para adicionar uma imagem arraste dos seus arquivos e ajuste o posicionamento dentro da prancheta, alinhamento, etc. basta arrastar.
- Garanta que o texto sempre fique por cima da imagem:
- Selecionando-o e clicando com o botão direito;
- Depois escolha a opção "ordenar camadas" e em seguida "trazer para o primeiro plano";
- Para ajustar a cor do texto é só manter ele selecionado e trocar a cor do preenchimento no menu lateral direito;
IMPORTANTE: O ideal é que as imagens dos ícones estejam em VETOR/curvas que podem ser baixados de sites bancos de imagem em formato “SVG” (Por esse link a gente te mostra onde baixar ícones gratuitos).
Se você não tem familiaridade com edição de imagens, basta certificar-se de que estão em alta qualidade usando imagens em formato preferencialmente em “PNG” e com um tamanho grande (acima de 700 px). E sempre busque manter a identidade visual do app.
- PARA SALVAR A IMAGEM E COLOCAR NO APP:
- Para salvar a imagem que criou/editou no XD, selecione a prancheta e use o atalho “ctrl+E” ou siga o exemplo abaixo para escolher a pasta onde quer salvar sua imagem
Atualizado em: 15/12/2022