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
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