Aplicativos para Windows 8.1: otimizar imagens para diferentes resoluções de tela

 

Applies to Windows and Windows Phone

Você pode adicionar versões diferentes de cada imagem para identificar seu aplicativo (por exemplo, logotipos e imagens da tela inicial). Em seguida, você pode testá-las para garantir que tenham uma boa aparência em uma variedade de dispositivos com diferentes resoluções da tela. Ao adicionar versões diferentes de cada imagem, você pode reduzir o grau ao qual seus gráficos se serão alongados ou reduzidos para caber na tela da tela do usuário.

Neste tópico

  • Nomear e organizar seus arquivos de imagem

  • Adicionar arquivos de imagem ao seu projeto

  • Identificar arquivos de imagem no manifesto

  • Visualizar seu aplicativo em diferentes tamanhos de telas e resoluções

Nomear e organizar seus arquivos de imagem

Nomeie os arquivos de acordo com o tipo de recurso que representam, como Square7070.png. Se você pretende armazenar vários arquivos na mesma pasta, inclua qualificadores de escala nos nomes de arquivo. Por exemplo, você pode nomear um de seus arquivos desta maneira: Square7070Logo.scale-100.png.

Se você pretende organizar os arquivos em pastas com base no fator de escala, inclua o qualificador de escala no nome da pasta em vez de nomes de arquivo. Por exemplo, você pode armazenar Square7070Logo.png e Square150150Logo.png em uma subpasta Assets\Scale-100.

Adicionar arquivos de imagem ao seu projeto

Abra sua solução e adicione os arquivos de imagem à pasta Ativos de seu projeto de aplicativo.

Se você estiver usando um projeto de aplicativo compartilhado para criar um aplicativo para mais de um fator forma (por exemplo, Windows e Windows Phone), é recomendável adicionar seu arquivo de imagem à pasta Ativos do projeto compartilhado em sua solução, mas somente se essa imagem for apropriada para os dois fatores forma.

Identificar arquivos de imagem no manifesto

  1. Em Gerenciador de Soluções, abra o Designer de Manifesto do Aplicativo (Package.appxmanifest) e escolha a guia Ativos Visuais.

  2. Na lista de ativos visuais, escolha Todos os Ativos de Imagem para exibir as configurações de imagens.

  3. Se você quiser que apareça um nome curto no logotipo principal, especifique um na caixa de texto Nome Curto.

    Dica

    No caso de aplicativos do Windows Phone, os valores de Nome curto e Tamanho padrão são ignorados.

  4. Na caixa de texto de qualquer um dos logotipos (por exemplo, Logotipo quadrado de 150 x 150), especifique um para o logotipo principal.

    O valor padrão para o logotipo quadrado de 150 x 150 é Assets\Logo.png.

  5. Na área da página Ativos Escalonados, escolha o botão Procurar () ao lado de qualquer caixa Escala, navegue até a pasta Ativos, especifique a imagem apropriada para essa escala e escolha o botão Abrir.

    Dica

    Para exibir uma visão aproximada da imagem no tamanho dimensionado, escolha a imagem na caixa. Uma janela de visualização é aberta e lista o local onde cada arquivo de imagem será usado.

    A imagem aparece na caixa e o arquivo é copiado. O arquivo copiado é nomeado de acordo com as convenções de nomenclatura de recursos para aplicativos do Store: Name.scale-nnn.ext, em que nn é o fator escala. Por exemplo, o arquivo pode ser denominado Logo.scale-100.png.

Visualizar seu aplicativo em diferentes tamanhos de telas e resoluções

Applies to Windows only

Você pode visualizar os aplicativos criados para a Windows Store usando um simulador. Para mais informações, consulte Executar aplicativos da Windows Store no simulador.

Você pode visualizar os aplicativos criados para a Windows Phone Store usando um emulador. Selecione um emulador da lista suspensa ao lado do botão Iniciar Depuração, na barra de ferramentas Padrão do depurador. Selecione um emulador que corresponda à resolução em que você deseja visualizar seu aplicativo.

Importante

Antes de publicar seu aplicativo na Store, sempre teste-o em um dispositivo real.

Confira Também

Início rápido: usando recursos de arquivo ou imagem (aplicativos do Tempo de Execução do Windows em C#/VB/C++ e XAML)
Início rápido: usando recursos de arquivo ou imagem (aplicativos do Tempo de Execução do Windows em JavaScript e HTML)
Como nomear recursos usando qualificadores (aplicativos do Tempo de Execução do Windows em C#/VB/C++ e XAML)
Como nomear recursos usando qualificadores (aplicativos do Tempo de Execução do Windows em JavaScript e HTML)
Escolhendo suas imagens de aplicativo
Diretrizes para escalar a densidade de pixels
Tamanhos de imagem de bloco e notificação do sistema (aplicativos do Tempo de Execução do Windows)
Diretrizes de blocos e notificações
Diretrizes para miniaturas
O catálogo de modelos de bloco (aplicativos do Tempo de Execução do Windows)