Criar um app significa trabalho e atualizações constantes. Quando entregamos o seu app através do serviço PRIME, possivelmente você não tenha inserido ali todas as abas que julga necessárias. Isso faz parte do processo de criação.

Com o app entregue, você vai usar, criar, editar e conversar com usuários que darão muitas sugestões.

Caso você não seja um cliente PRIME, mas deseja 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:

1. Selecione a opção "Personalizado" e definir os tamanhos de largura e altura para 400px;

2. É 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:

3. Agora use a função retângulo, arrastando-a e soltando-a para dentro da prancheta;

4. Ajuste o tamanho para 360px e alinhe-o ao centro centro;

5. Remova o contorno, arredonde as bordas e ative a sombra.

Como mostra a imagem abaixo:

6. 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;

7. Defina o tamanho da fonte para 43 para garantir a legibilidade quando o app estiver pronto.

Como mostra a imagem abaixo:

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

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

10. 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:

1- selecionando-o e clicando com o botão direito;

2- depois escolha a opção "ordenar camadas" e em seguida "trazer para o primeiro plano";

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

__________________________________________________________________

Nosso objetivo é o seu sucesso. Por isso, em qualquer dificuldade ou necessidade, não hesite em nos contatar pelo messenger.

Até a próxima, equipe Fabapp.

Quer saber mais?
Cores do app
Trocar ícone das abas do app
Como criar ícones para o app

Encontrou sua resposta?