Aplicaciones de la Tienda Windows 8.1: optimizar imágenes para diferentes resoluciones de pantalla

 

Puede agregar distintas versiones de cada imagen que identifique la aplicación, por ejemplo, logotipos e imágenes de la pantalla de presentación. A continuación, puede probarlas para garantizar que se muestran correctamente en varios dispositivos que tienen distintas resoluciones de pantalla. Al agregar distintas versiones de cada imagen, puede reducir el grado al que se ampliarán o reducirán los gráficos para ajustarse al tamaño de pantalla del usuario.

En este tema

• Dar nombre y organizar los archivos de imagen

• Agregar los archivos de imagen al proyecto

• Identificar los archivos de imagen en el manifiesto

• Obtener la vista previa de la aplicación con diferentes tamaños y resoluciones

Dar nombre y organizar los archivos de imagen

Dé un nombre a los archivos según el tipo de activo al que representan, por ejemplo, Square7070.png. Si piensa almacenar varios archivos en la misma carpeta, incluya calificadores de escala en los nombres de archivo. Por ejemplo, puede dar a uno de los archivos el siguiente nombre: Square7070Logo.scale-100.png.

Si quiere organizar los archivos en carpetas según el factor de escala, incluya el calificador de escala en el nombre de la carpeta en lugar de en los nombres de los archivos. Por ejemplo, podría almacenar Square7070Logo.png y Square150150Logo.png en una subcarpeta Assets\Scale-100.

Agregar los archivos de imagen al proyecto

Abra la solución y agregue los archivos de imagen a la carpeta Activos del proyecto de aplicación.

Si usa un proyecto de aplicación compartido para compilar una aplicación para varios factores de forma (por ejemplo, Windows y Windows Phone), considere la posibilidad de agregar el archivo de imagen a la carpeta Activos del proyecto compartido de la solución, pero solo si esa imagen es adecuada para ambos factores de forma.

Identificar los archivos de imagen en el manifiesto

1. En el Explorador de soluciones, abra el Diseñador de manifiestos de la aplicación (Package.appxmanifest) y seleccione la ficha Activos visuales.

2. En la lista de activos visuales, seleccione Todos los activos de imagen para mostrar la configuración de las imágenes.

3. Si quiere que aparezca un nombre corto en el logotipo principal, especifique uno en el cuadro de texto Nombre corto.

   Nota

   Para las aplicaciones de Windows Phone, los valores de Nombre corto y Tamaño predeterminado se omiten.

4. En el cuadro de texto de cualquiera de los logotipos (por ejemplo, Square 150x150 Logo), especifique uno para el logotipo principal.

   El valor predeterminado para el logotipo Square 150x150 es assets\logo.

5. En el área Activos a escala de la página, seleccione el botón Examinar () junto a cualquiera de los cuadros Escala, navegue hasta la carpeta Activos, especifique la imagen adecuada para esa escala y seleccione el botón Abrir.

   Nota

   Para mostrar una vista en primer plano de la imagen en el tamaño escalado, seleccione la imagen del cuadro. Se abrirá una ventana de vista previa que muestra dónde se usará cada archivo de imagen.

   La imagen aparece en el cuadro y el archivo se copia. El nombre de archivo copiado se ajusta a las convenciones de nomenclatura de los recursos para las aplicaciones de Tienda: Name.scale -nnn.ext, donde nn es el factor de escala. Por ejemplo, el archivo se podría llamar Logo.scale-100.png.

Obtener la vista previa de la aplicación con diferentes tamaños y resoluciones

Puedes obtener una vista previa de las aplicaciones que diseñes para la Tienda Windows mediante un simulador. Para obtener más información, consulta Ejecutar aplicaciones de la Tienda Windows en el simulador.

Puedes obtener una vista previa de las aplicaciones que diseñes para la Tienda Windows Phone mediante un emulador. Seleccione un emulador de la lista desplegable junto al botón Iniciar depuración de la barra de herramientas Estándar del depurador. Seleccione un emulador que coincida con la resolución en la que quiera obtener una vista previa de la aplicación.

Importante

Antes de publicar la aplicación en Tienda, pruebe siempre la aplicación en un dispositivo real.

Ver también

Inicio rápido: uso de recursos de imagen o archivo (aplicaciones de Windows Runtime con C#/VB/C++ y XAML)
Inicio rápido: uso de recursos de imagen o archivo (aplicaciones de Windows Runtime con JavaScript y HTML)
Cómo asignar nombres a recursos con calificadores (aplicaciones de Windows Runtime con C#/VB/C++ y XAML)
Cómo asignar nombres a recursos con calificadores (aplicaciones de Windows Runtime con JavaScript y HTML)
Elegir las imágenes de la aplicación
Guía para el escalado a la densidad de píxeles
Tamaños de las imágenes de iconos y notificaciones del sistema (aplicaciones de Windows Runtime)
Directrices sobre iconos y notificaciones
Directrices para las miniaturas
Catálogo de plantillas de iconos (aplicaciones de Windows Runtime)