Ícones da Barra de Status

Colocado por DClick Team na(s) categoria(s): 1, 4, 6, Adobe, Android, Aplicativos, AR, arte, bar, blog, class, dados, efeito, efeitos, err, exemplo, Exemplos, Ferramenta, for, fundo, Gráfico, ide, IE, if, image, imagens, menu, mg, O, on, photoshop, procura, pt, RIA, Ria’s Geral, Segurança, TAT, Tema, Tutoriais, Twitter, UI, XP em 11 30th, 2010 | Sem comentários

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.