CREACIÓN DE ICONOS PARA APLICACIONES DE WP7

Introduction

Este artículo te guía en los pasos necesarios para el proceso de crear iconos para aplicaciones

de Windows Phone 7 así como iconos para el Marketplace Hub y el catálogo de Marketplace.

Los requisitos para crear iconos vienen de la guía Windows Phone 7 Application Certification

Requirements . En las siguientes tablas se muestran los requisitos para crear iconos.

Application Iconography

Required Icons in the XAP Package Pixels File Type

Application Icon 62 x 62 PNG

Application Tile Image 173 x 173 PNG

Windows Phone Marketplace Iconography

Icon Size (Pixels) File Type

Device application icon for Windows Phone Marketplace catalog (small) 99 x 99 PNG

Device application icon for Windows Phone Marketplace catalog (large) 173 x 173

Desktop application icon for Windows Phone Marketplace catalog 200 x 200 PNG

Requirement

Expression Design 4 (part of Expression Studio 4 Ultimate)

Product Details

http://www.microsoft.com/expression/products/StudioUltimate_Overview.aspx

60-Day Free Trial Download

http://www.microsoft.com/expression/try-it/Default.aspx#PageTop

Download the Design File For this Tutorial

http://gallery.expression.microsoft.com/en-us/wp7IconDesign

Empieza a crear Iconos para Windows Phone 7

Vamos a empezar. Sólo sigue estos pasos:

1. Arranca Expression Design 4

2. Selecciona Edit/Options/General

3. Cambia el Rectangle antialiasing a Smooth

4. Crea un nuevo projecto (File/New) con un ancho y alto de 1024. Esto es más grande de lo

que necesitas pero te da mucho espacio para trabajar.

5. Crea un rectágulo en la Capa 1 que es la Capa por defecto en un nuevo proyecto. Ve a la

sección de herramientas en la izquierda y selecciona la herramienta Rectángulo.

6. Dibuja un rectángulo en cualquier lado en el area de dibujo.

7. Clickea en la propiedad de la paleta de color y clickea en rellenar la etiqueta (tab) muy abajo

a la izquierda y selecciona un color de fondo. El color no importa es solamente para tener

algo mejor que un fondo blanco.

Obtendrás algo como esto

Ahora vamos a hacer un rectángulo que ocupe todo el área de dibujo. Presiona el botón V en el

teclado para cambiar el modo de selección después clickea en el rectángulo. Puedes también

seleccionar la herramienta de la barra de herramientas de la izquierda, arriba.

Una vez que hallas cliqueado en el rectángulo y veas la selección puedes cambiar las

propiedades del rectángulo usando la Action Bar debajo de la pantalla a:

Fijaté que primero tienes que cliquear en el botón de enlace para romper el enlace entre el

ancho y altura para cambiar independientemente las propiedades de W y H.

8. Ahora el rectángulo rellena todo el area de dibujo.. Haz doble click en la Capa 1 en la

derecha y renombrala a Capa Base, ahora cliquea en el botón. bloqueo ( se parece a un

candado) en la derecha y bloquea esa capa.

El motivo por el que hay que bloquear es prevenir que la capa se incluya en nuestros iconos.

Ahora crea una nueva capa, cliquea en la rueda en la parte abajo a la izquierda en el panel de

propiedades.

Llama a esta capa Base Cuadrada

9. Crea un nuevo rectángulo en la Capa Base Cuadrada y seleccióna un color diferente así

podrás verlo. Cambia el tamaño para que sea de 600px W por 600px H usando la barra de

acción.

Posiciona el nuevo rectángulo más o menos en el centro.

Esto va a ser el base cuadrada en la que el diseño de tu icono se situa y proporciona una guía

cuadrada y lugar de posición para el icono

10. Ahora cambia la opacidad del nuevo rectángulo apra que sea de 0% para que no se

convierta en parte de tu icono. El selector de la propiedad opacidad está un poco por

debajo del se lector de color en la parte de arriba a la derecha en la ventana de

propiedades:

NOTA: También puedes esperar hasta que estés listo para crear los iconos, para hacer que este

rectángulo sea transparente de forma que puedas ver sus límites mientras dibujas el diseño de

tu icocno en la parte de arriba.

Bien, ahora que hemos hecho los fundamentos es hora del diseño. Crea una nueva Capa y

luego llámala Windows Phone Icon. Puedes darle el nombre que quieras, será una nueva

Capa que estrá sobre la Capa Base y será donde vas a dibujar el diseño de tu icono.

Terminarás con:

11. Ahora la siguiente parte consta de un ejercicio para ayudarte a crear el diseño de iconos sobre la Capa Windows Phone Icon. Puedes crear también capas adicionales emcima que

pueden corresponder a partes del diseño del icono. Para enseñarte a empezar haremos un

sencillo diseño de icocno como ejemplo

Antes de empezar a dibujar el diseño del dibujo asegúrate de tener seleccionada la Capa

Windows Phone Icon de forma que tu dibujo se muestra en la capa correcta. Verás una línea

azul luminosa alrededor de la capa seleccionada.

Para empezar crea un círculo como fondo. Para hacerlo cliquea en la barra de Herramientas y

manten pulsado el botón izquierdo del ratón para que aparezca el menú contextual, después

cliequea en Elipse y presiona L.

Para dibujar un círculo perfecto en lugar de una elipse presiona la tecla SHIFT mientras dibujas

el círculo. Presiona el botón V en el teclado para cambiar el modo de selección después cliquea

en el círculo. También puedes seleccionar esa herramienta en la esquina izquierda en la barra de

Herramientas.

Ahora puedes seleccionar el círculo y cambiar su color en la paleta de colores que aparece:

Yo he usado el color #9F143B.

Asegurate que la Opacidad está en 100% (no transparente) el nivel de opacidad se guarda

desde la última vez que lo hayas usado, así que si no has realizado ningún cambio desde la

última vez estará en 0%

También usa las teclas con flechas del teclado para desplazar tu círculo hasta el centro del

rectángulo de la Capa Base Cuadrada. Así que tu diseño debe parecerse a alguno de estos

dependiendo de cómo hayas establecido la opacidad 0% de la Capa Base Cuadrada.

Ahora vamoas a añadir un borde alrededor del cículo . Ve a propiedades de Apariencia y

cliquea en el segundo botón a la izquierda.:

Selecciona un colo, yo elegí el color dorado:

Y entonces justo un poco más abajo en la parte más baja a la derecha de la paleta de colores

cambia el valor de la propiedad Ancho (Width), zero 0 significa que no hay borde y el número

más alto es que el borde es más ancho. Yo he usado 12.

Ahora el icono se parecea a esto:

Vamos a añadir un círculo luminoso alrededor también. Justo debajo de la propiedad Ancho

(stroke/width) están los efectos de área:

Hay un botón de efectos Fx puedes cliquear y añadir un nuevo efecto. Cliquea en ese botón y

selecciona Effects/Outer

Una vez que se ha añadido puedes seleccionar los parámetros de efectos y despliega los

efectos para ajustar el efecto luminoso. Yo he seleccionado el tamaño a 8. Es fácil cambiar el

color del aro luminoso aquí.

El resultado es tener una vistosa corona alrededor del círculo:

Finalmente añade algún texto al logo presiona la tecla T o cliquea en la herramienta Text en la

barra de herramientas.

Mueve el ratín sobre el icono y cliquea para empezar un área de texto. Escribe en el lo que

quieras y dale un tamaño en las propiedades de Texto seleccionando Type Size. Yo he

seleccionado 96pt , entonces selecciona tu fuente favorita (yo he usado Harlow Gold Italic) Ten

en mente que debes tener diferentes fuentes instaladas en tu PC.

Puedes también seleccionar el color que quieras usar en la Herramienta de Selección y coloca

el testo donde quieras en tu diseño.

Si estas siguiendo el diseño debería verse como esto:

Finalmente he añadido otro borde luminoso para resaltar del texto:

Y finalmente el icono de ejemplo debe verse así:

NOTA: Para acceder a algunos tutoriales realmente buenos sobre la creación de iconos usando

Expression Design visita los tutoriales de Arturo Toledo del equipo de producto de expression

Design:

http://www.microsoft.com/showcase/en/us/details/9b25acd4-c3ee-4254-a00b-c40840199460

http://team.silverlight.net/tips-and-training/creating-a-sample-icon-using-expression-design/

12. Una vez que tu diseño se ha dibujado en la capa es tiempo de verificar que está

debidamente centrada con ayuda de la guía de la Capa Square Base. Cerciórate de que la

capa Square Base esta posidionada alrededor del icono de forma que tu icono esté

centrado sobre ella. Primero debes seleccionar el rectángulo en la base cuadrada en el panel

de capas siguiente:

Entonces muévelo usando las flechas del teclado hasta que el cuadrado esté rodeando al icono

y que estés seguro que el icono esté correctamente centrado en su interior.

13. Asegurate que el rectángulo dentro de la capa Base Cuadrada tiene una opacidad de 0%

(Paso 10)

14. La capa final debe verse como algo así:

15. Así es como el diseño se ve centrado entre los bordes del rectángulo (Base Cuadrada):

NOTA: Asegúrate que si añades efectos como un borde luminoso que hace que tu diseño

resalte fuera de los bordes del rectángulo puedes necesitar un rectángulo más largo o

seleccionar todas las capas de tu diseño y reducir su tamaño para que quepan dentro. El

ejemplo debajo es cuando el icono es demasiado grande lo que prevendría que el PNG es

cuadrado. Evita este problema

16. Ahora que el diseño está finalizado es tiempo de generar los PNGs para varios destinos.

Para hacer esto debes seleccionar una funcionalidad de Espression Design llamada Slices.

Slices te permite exportar una parte de tu diseño en vez de todo. Por ejemplo puedes crear

varios slices que pueden mostrar las mismas partes de tu diseño pero configurando

diferentes propiedades de exportación para exportar el diseño en multiples formatos (PNG,

XAML y otros)

17. Empieza seleccionado tu diseño arrastrando el rectánculo de selección sobre el área de

trabajo, debe ser algo así:

Cuando sueltas el ratón todo el area de trabajo en ese area de selección queda

seleccionado:

18. Es hora de crear tu primer slice. Mientras el diseño está seleccionado usa en el menú

Object/Create Slice from Selection o usa las teclas Ctrl+Shift+K Deberías ver ahora:

Fijate como tiene una capa medio opaca en tu área de trabajo, ese es el slice.

19. Fíjate en la parte izquierda de la pantalla en el panel de Capas y verás una nueva capa en la

parte superior y también tu nuevo Slice llamado Slice 1.png.

20. Haz doble click on el nombre del slice y cambia su nombre a

Marketplace_Desktop_200x200.png

21. Una vez que renombres el slice estate seguro que el slice está seleccionado (cliquea en él).

Ahora puedes ver las propiedades del slice sobre él. Tienes la sección de propiedades

donde puedes establecer el ancho y alto. Selecciona ancho y alto a 200 px

Ahora que el slice pueden usarse para generar un PNG para el area de trabajo a 200x200 que se

use para los iconos de escritorio de Marketplace.

22. Ahora es momento de repetir lo mismo para el resto de Iconos Windows Phone PNG.

23. Antes de que puedas crea el resto de slice necesitas esconder temporalmente la capa slice

de forma que no crees un nuevo slice que incluya los slices anteriores. Cliquea en icono ojo

en la capa slice de forma que vayas de esto:

A esto:

24. Ahora necesitas seleccionar el área de trabajo de nuevo y repetir los pasos (17 al 23). Para el

resto de los slices. Usa estos valores:

Slice Name Dimensions

Marketplace_Device_173x173.png 173 x 173

Marketplace_Device_99x99.png 99 x 99

Application_TileImage_173x173.png 173 x 173

Application_IconImage_62x62.png 62 x 62

NOTA: Cada vez que añadas un slice, la capa Slice se vuelve visible de nuevo. Sigue los pasos

anteriores.

Eventualmente tendrás todos los slices cada uno de los cuales tendrá un tamaño PNG diferente.

25. El último paso es exportar los slices para crear los PNGs que se usarán como iconos. Para

hacer esto ir a File/Export (Ctrl-E):

26. En la ventana de Exportación debajo se enseña una previsualización de todos los PNGs que

puedes exportarse como slices. Usa el cuadro de texto Location y/o el botón de búsqueda

para seleccionar un directorio de destino para los PNGs. Yo usualmente los coloco en un

subdirectorio del directorio dónde estoy gusrdando el proyecto.

Deja los ajustes por defecto en esta página y asegúrate que la opción Items para Exportar esta

en Slices.

27. Clicquea el botón Exportar Todo El resultado es tener todos los iconos con las

dimensiones adecuadas:

Así que esto es todo. Un diseño principlar y michos tamaños de PNG, todos preparados

para tened tu aplicación preparada para publicarse en un dispositivo y en Marketplace.

Usando los iconos en tu aplicación.

Aquí hay algunas pautas sobre usar tu nueva aplicación en tu proyecto. Debido a las

limitaciones los iconos deben estar en la raíz de tu proyecto así que resalta el nombre de tu

proyecto en Blend 4 o Visual Studio 2010 y añade el ítem existente:

Una vez que los iconos se han añadido, selecciona los iconos en la lista de exploración del

proyecto . Puedes selecciona más de uno al mismo tiempo:

En la ventana de propiedades cambia el Building action a Content y después Copy to Output

Directoy seleccionado a Copy if newer:

Y finalmente click derecho en el nombre de tu proyecto,l ve a propiedades y usa los cuadros de

lista desplegable para elegir tus iconos. El icono de selección se refiere al icono más pequeño

(62x62) y la seción de imagen de fondo se refiere al icono que vas a usar para el Tile (mosaico)

para que tu aplicación se muestre en la pantalla de incio (173x173):

Problema de iconos de aplicación.

Debido a un fallo cuando los iconos se muestran en la lista de programas y en la patalla de

inicio (Tile, Mosaico) los iconos de mosaico muestran adecuadamente el tema de fondo pero en

la lista de programas el color de fondo no se muestra y en su ligar se muestra un fondo gris:

Esto no ocurre si no tienes un fondo transparente para tu icono.

Por ejemplo: