Disenar applicaciones y paginas para telefonos mobiles se esta volviendo mas y mas necesario. Este tutorial empezara con lo basico del telefono mobil UI basicos – como crear la barra superior en Photoshop. Todo lo que necesitas es:

  • Adobe Photoshop

01. primero, tener las dimensiones correctas. Abre un documento Nuevo con un ancho de 320 px. Este es el ancho de la pantalla de un telefono mobil regular.

tut-251-01

 

02. Ahora toma la herramienta rectangular y crea un rectangulo arriba de la pantalla. Eso sera la barra superior.  Hazlo tan grande como estes satisfecho, pero quedate en la zona de uso amigable con suficiente altura  para presionar los botones en ello y no muy alto asi no cubrira toda la pantalla. Ahora ve a Capa > Estilos de Capa > Superposicion degradante y anade el degradante/color de tu identidad. Presiona OK.
tut-251-02

 

03. Escoge la herramienta de texto y anade el nombre de la pagina, anade el logo o simbolo que deseas distinguir en tu pagina.
tut-251-03

 

04. Empecemos a hacer el boton de atras seleccionando la herramienta de Rectangulo Redondo. El boton trasero no tiene que ser circular. Todo se basa en tu identidad asi que trata todo tipo de diferentes figuras que mejor se vean en tu pagina.
tut-251-04

 

05. Ahora anade estilos de capa a tu Nuevo boton de atras (Capa > Estilos de Capa > Opciones de combinacion) y primero, pon la opacidad del relleno a 0% y de ahi muevete a la pestana de bisel y relieve y haz algunos ajustes. No presiones OK todavia.
tut-251-05

 

06. Muevete hacia la ventana de Sombra interior y anade una sombra clara encima del boton y de ahi anade un pestana de trazo y un pequeno trazo. Presiona OK.
tut-251-06

 

07. Anade una flecha o una palabra detras de tu boton y pon algo de una sombra paralela en la Capa > Estilo de Capa > Sombra Paralela. Presiona OK.
tut-251-07

 

08. Tambien puedes colorear el bajo de la pagina. Y tu barra superior esta lista! No se ve como un element importante, pero como factor, este es un element que siempre estara visible tras la visita de nuestros usuarios, asi que asegurate de que luzca bien y siga los estilos de la pagina.
tut-251-08