Os ícones da barra de status servem para representar as notificações que acontecem no sistema operacional ou de seus aplicativos.
Graficamente eles são semelhantes aos ícones do menu, mas são menores e possuiem maior contraste, portanto não se deixe enganar e siga a Guideline.
Não esqueça das dimensões que são sempre pequenas, médias e grandes, tal como descrito nos primeiros posts, e que tem suas resoluções descritas na tabela 1.
.
Estrutura
.
- Os cantos arredondados não devem ser muito extensos, devem respeitar uma margem máxima de 2px, para entender verifique a Figura 9 (o número das figuras não é de acordo os nossos posts e sim de acordo com a Guideline oficial) e perceba no canto direito superior esse detalhe e de como fazer o canto arredondado corretamente.
- Todas as dimensões possuem 25 x 25px, e com um área de segurança (safeframe) de 2px, tal como na Figura 9.
- Detalhe importante, os ícones da barra status podem vazar essa área de segurança na direita e na esquerda caso necessário, mas jamais poderá vazar nos cantos superior e inferior.
- Como você já deve saber, a arte deve ser exportada com um PNG transparente, para isso eu sugiro o Fireworks como ferramenta para desenvolver esses ícones, ele é fácil de mexer para criar ícones com esses padrões.
- Porém, o pacote enviado pela Android é em PSD, e você poderá editar e fazer seus ícones através do Photoshop.
.
Luzes, Efeitos e Sombras
.
Observe que os ícones da barra de status são ligeiramente menores, por isso eles possuem um alto contraste, para facilitar a sua visualização, dando um aspecto mais clean e objetivo das suas formas. Eu não sei se você usa um Photoshop ou outro programa gráfico em português, eu espero que não, vide que a maioria dos tutoriais não dão suporte a esses programas, ainda mais que as traduções ficam péssimas, mas, vou procurar deixar alguns detalhes em inglês e fazer comentários, o motivo é um só, imagine Depth, traduzido como profundidade, a gente sabe bem o que é um Depth em um gráfico, mas profundidade pode ter outro sentido, então tome cuidado com isso, as imagens ajudam a você entender o que é cada coisa.
.
Passo a Passo
.
1. Em uma ferramenta como o Adobe Photoshop, crie uma forma base em uma imagem de 25×25 px com fundo transparente. Cuidado com o safeframe, e mantenha o superior e inferior de 2 pixels livre, recorde-se do que foi citado acima
2. Adicione cantos arredondados, conforme especificado na Figura 9.
3. Adicione luz, efeitos e sombras, conforme especificado na Figura 10.
4. Exportar o ícone com tamanho 25×25 como um arquivo PNG com fundo transparente.
.
“O que fazer e o que não se deve fazer”
.
Abaixo segue alguns exemplos do que se deve e não se deve fazer, ou seja, seguir os padrões é importante.
[…] Ícone da barra de status […]
quero botar muitos incones em status