TUTORIAL: Creación de íconos para iOS 7 en Photoshop

Una de las primeras cosas que llaman la atención del futuro usuario de nuestra app es el ícono de la misma; este ícono lo ven en el appstore, en la pantalla de su dispositivo, en configuraciones, etcétera. En pocas palabras es un identificador, por lo tanto hay que darle importancia considerable y hacerlo destacar de entre todas las aplicaciones que pudieran competir con la nuestra, es por esto que se comparte el siguiente tutorial.

Recursos

Antes que nada se definirá lo que necesitamos para realizar nuestro íconos:

1. Adobe Photoshop en cualquiera de sus versiones. El desarrollo de estos íconos no requiere gran cantidad de efectos por lo cual cualquier versión del programa es útil para nuestro propósito, en este caso se utilizará la versión CS6.
2. Conocimiento básico del programa. Como ya se mencionó, la elaboración del ícono es sencilla, sin embargo es necesario saber utilizar las herramientas con las que cuenta y realizar acciones simples con éstas.
3. Conocer los requerimientos para íconos definidos por iOS en los cuales se mencionan los tamaños necesarios, la manera de nombrar e insertar estos íconos en el código, entre otros,  para esto puedes revisar el siguiente link.

https://developer.apple.com/library/ios/documentation/userexperience/conceptual/mobilehig/AppIcons.html

Pasos a seguir

• Abrimos Photoshop y creamos un documento nuevo de 1024x1024 pixeles, que será la medida base de las cuales se sacarán los demás íconos necesarios.

  

• Usando la herramienta de Rectángulo (o el atajo del teclado U) se hace clic sobre el lienzo en blanco y se crea un cuadrado también de 1024x1024. Una vez que aparece la figura en el lienzo, con la herramienta de mover (V) se arrastra el cuadrado hasta centrarlo.

    

    

• Utilizando la herramienta de Selección Directa (A) se define el color de relleno de nuestro ícono, el cual puede ser sólido o degradado.

- Para color sólido: En la pequeña ventana de color de relleno, se selecciona la opción Color Sólido, en la cual aparecerán muestras de color y el color picker, cuando hayas encontrado el color adecuado únicamente lo seleccionas y éste cubrirá la figura por completo.

- Para un degradado: En la misma ventana se selecciona el tercer botón, de Gradiente, instantáneamente la figura se rellenará con un degradado predefinido, el cual se puede personalizar según las necesidades de la app. Para esto se hace doble clic en el pequeño cuadrado que contiene el primer color del degradado, así se abrirá el color picker para definir el color requerido; se repite el procedimiento con el segundo color. Puedes modificar el aspecto del degradado invirtiendo los colores, cambiando el ángulo o el estilo.

• Una vez que tengas definido el fondo de tu ícono procedemos a agregar la imagen. Ésta deberá estar relacionada con tu aplicación, ser de fácil reconocimiento para el usuario y que no se confunda con otros íconos que pudiera tener el dispositivo por default. Para esto se pueden utilizar íconos que son de libre uso y encuentras en fuentes como dribble o realizar uno propio. Para este ejemplo se realizará uno sencillo utilizando la herramienta de Figura Personalizada. Primeramente se crea una nueva capa utilizando el atajo ctrl.+shift+N o presionando el botón Crear Una Nueva Capa de la ventana de Capas.

• Una vez creada la capa, en las herramientas básicas del programa se mantiene presionado el clic sobre la herramienta de Figuras, que ya utilizamos para nuestro cuadrado y después se selecciona la última opción: Figura Personalizada.

  

  

• Ya seleccionada, veremos que en la parte de arriba aparece una barra de herramientas muy parecida a la que ya vimos al hacer el cuadrado, con la diferencia que contiene también un pequeño banco de figuras y símbolos proporcionados por el mismo programa. 

• Probablemente solo aparezcan unas cuantas figuras, sin embargo al hacer clic en el ícono de opciones, se desplegará la opción de All o Todos que al seleccionarlo cargará todas las figuras que el programa tiene disponible.

 

• Seleccionamos la imagen que más sirva para nuestra app,  e igual a como ya hicimos anteriormente, definimos un color de fondo y contorno si es necesario. En esta ocasión se utiliza un blanco de fondo sin contorno.

• Ya seleccionado la figura con su color y teniendo en cuenta que la capa nueva que habíamos creado está seleccionada, se hace clic sobre el lienzo y presionando la tecla shift (para que la figura tenga un tamaño proporcional sin deformar) se arrastra el mouse hasta crear la figura del tamaño que se requiera. Utilizando la herramienta de Mover o presionando ctrl.+T la figura se puede mover o ajustar el tamaño hasta que se tenga el aspecto que se necesita.

Es así como tenemos nuestro ícono principal el cual deberá guardarse con los siguientes lineamientos:

a)   Formato PNG a 24 bits sin transparencia ni entrelazado.

b)   Esquinas en 90° ya que el mismo sistema aplicará la máscara que transformará los íconos en los rectángulos redondeados característicos de iOS 7.

Para guardar podemos usar la opción de Guardar para Web la cual se obtiene en Archivo -> Guardar para Web (atajo alt+ctrl.+shift+s). Se abrirá una ventana con diferentes opciones en la cual se definimos lo ya mencionado y presionamos Guardar.

Siendo que el sistema requiere el mismo ícono en diferentes tamaños (Revisar el link de requerimientos anterior) se guarda el archivo nuevamente utilizando la misma herramienta de Guardar para Web; ésta tiene la opción de definir tamaños, así que se guardará la imagen varias veces cambiando el tamaño en cada ocasión, hasta tener todos los íconos necesarios.

Es así como tenemos nuestros íconos listos para ser insertados en nuestro código, como podemos ver, el ejemplo mostrado brinda un resultado sencillo, sin embargo la complejidad y el aspecto del ícono puede variar de acuerdo a la práctica y la creatividad que se le invierta, no dudes en experimentar.

Acerca del Autor

Karla Aldáz es una diseñadora recién egresada de la carrera de Diseño para la Comunicación Gráfica de la Universidad de Guadalajara. Actualmente aplica sus conocimientos de diseño en el área comercial de Dawcons. Puedes contactarla en su correo kaldaz@dawcons.com.