Unlimited PS Actions, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Design & Illustration
  2. Interface Design
Design

Crea una interfaz móvil de una aplicación de descargas en Photoshop

by
Difficulty:IntermediateLength:LongLanguages:

Spanish (Español) translation by CYC (you can also view the original English article)

Photoshop es una aplicación fantástica para crear bocetos de aplicaciones móviles. Sus herramientas vectoriales, combinadas con efectos de estilo de capa, permite a los diseñadores crear rápidamente diseños para sus proyectos. En este tutorial, te mostraré cómo crear un diseño de aplicación de descargas para un iPhone, en Photoshop. Una vez completado, tendrás una buena comprensión de cómo crear elementos de interfaces modernas, así como tablas y gráficos en Photoshop. ¡Empecemos!

Recursos del Tutorial

Necesitarás los siguientes elementos para completar este tutorial. Por favor, descárgalos antes de comenzar. Si no están disponible, por favor busca alternativas.

1. Crea un Nuevo Documento

Paso 1

Empieza creando un nuevo archivo (Archivo > Nuevo) de 640 x 1136 px, la dimensión estándar para el diseño de retina del iPhone 5. Traza las líneas guías; 20 px a cada lado de la aplicación para ayudarte a alinear elementos. Tu documento debe tener este aspecto.

2. Crea un fondo estructurado

En este paso vamos a crear la estructura básica del fondo para la aplicación. Si observas el diseño, verás que se divide en tres áreas, la barra superior, el área de contenido principal y el área inferior de detalles.

46

Paso 1

Selecciona la Herramienta Rectángulo (U) y dibuja un rectángulo desde la parte superior del documento que tenga 120px de alto. Utiliza la ventana de información (F5) para ver las dimensiones de la forma.

68

Esta será la Barra Superior. Nombra la capa como Fondo de la Barra Superior. Cambia el color a #1a242c.

69

Ve al Panel de Capas (F7) y haz clic con el botón derecho en la capa y elige Opciones de Fusión. Elige Disminuir Sombra y coloca una sombra de 2px, el ángulo a 90 grados con el color #2b3642.

Añadir una pequeña sombra puede parecer inútil, pero creo firmemente que son los detalles más pequeños los que hacen la diferencia entre un buen diseño y un gran diseño.

70
Tu diseño ahora debe verse así.

Paso 2

Ahora crearemos el área del contenido principal. Usando el mismo proceso que la Barra Superior, crea una forma usando la Herramienta Rectángulo (U) con un ancho de 640px por 620px de alto.

Utiliza el selector de color y selecciona #222c36. Nombra la capa como Fondo del Contenido Principal.

71

Luego, ve al diálogo Estilos de Capa nuevamente y elige una sombra que tenga una distancia de 8px, una propagación del 100% y un ángulo de 90 grados, con el color #2b3642.

Coloca el fondo del contenido principal directamente debajo de la Barra Superior. Coloca la forma del contenido principal 2px debajo de la capa de la Barra Superior para que puedas ver disminuir la sombra de la Barra Superior.

Por lo tanto, la estructura principal debe tomar forma ahora.

72

Paso 3

La barra inferior se puede crear igual que las otras. Crea una forma de rectángulo situada directamente debajo de la forma del fondo del contenido principal y que tenga 640px de ancho y 336px de alto. Selecciona el color #19222a. Nombra la capa como Fondo Inferior.

73

Una vez más, asegúrate de colocar la capa directamente debajo de la capa del contenido principal para que puedas ver la sombra de la capa de arriba. Tu diseño debe ser algo como esto:

3. Barra de navegación superior

Vamos a pasar a la Barra Superior.

Paso 1

Abre el archivo iOS7 GUI PSD (iPhone) que se te proporcionó en los Recursos del Tutorial. Toma la barra blanca de estado y colócala arrastrándola y soltándola sobre el lienzo. Coloca la capa de la barra de estado en la parte superior.

Paso 2

Abre el archivo de iconos adicionales en PSD proporcionado en los Recursos del Tutorial. Ahora, arrastra y suelta el icono de navegación izquierdo (icono de 3 barras) de los iconos adicionales PSD. Utilizando la guía de 20px en cualquier lado, coloca el icono de navegación izquierdo en línea con la guía izquierda de relleno con 20px.

Paso 3

Después, arrastra el icono de configuración desde los iconos adicionales en PSD, colócalos en la parte derecha de tu diseño, nuevamente con la guía de relleno 20px. Tu Barra Superior está terminada.

4. Área del contenido principal

El área de contenido principal puede parecer complicada, pero si la miras con cuidado, solamente es una serie de círculos. Vamos a enfocarnos primero en el grupo más grande.

Paso 1

Crea un círculo de 506px de ancho por 506px de alto. Nombra la capa como Círculo 1. Otra vez, utiliza la Ventana de Información (F5) para asegurarte de que tienes las dimensiones correctas. Este será el círculo de fondo. Del selector del color escoge #19222a como el color de las formas. Alínea el círculo en el centro y colócalo 40px debajo de la Barra Superior.

57

Ve al Panel de Capas (F7) y haz clic con el botón derecho en la capa y elige Opciones de Fusión. Elige Disminuir Sombra y coloca una sombra de 1px, un ángulo de 90 grados con el color #2b3642.

49

Este es el mismo efecto que está en la forma de la Barra Superior. Tener pequeños toques similares como este en toda la aplicación crea consistencia y se suma a la perfección del diseño terminado.

Paso 2

El siguiente círculo debe tener 436px de ancho y 436px de alto y debe estar situado en el centro del círculo más grande. Nombra la capa como Círculo 2. En el selector de color escoge #2b3642 como el color de las formas.

Paso 3

Crea otro círculo con 385px de ancho y 385px de alto. Del selector del color elige #222c36 como el color de las formas. Nombra esta capa como Círculo 3.

58

Ahora ve a las opciones de fusión para la capa del círculo y elige una sombra interna. Cambia la opacidad a 5%, la distancia a 30px y tamaño a 40px. En el selector de color, elige #000000 para el color de la sombra interna. Mira abajo para el efecto exacto.

Como puedes ver, el área está empezando a tomar forma ahora.

Paso 4

El siguiente círculo es probablemente el más complicado de ejecutar. Es el indicador de progreso naranja. Crea un círculo que tenga 458px de ancho y 458px de alto y colócalo en el centro de los círculos. Nombra esta capa como Círculo 4.

59

Ve a las opciones de fusión y añade un Trazado interior de 45px. Escoge un gradiente para el trazado según los colores hexadecimales a continuación:

Ahora cambia el relleno del Círculo 4 a 0%.

56

Paso 5

A continuación, convierte la capa en un objeto inteligente accediendo a Capa > Objeto inteligente > Convertir a objeto inteligente.

Una vez que la capa se ha convertido en un objeto inteligente, coloca una sombra en la capa Círculo 4. Elige el color #000000, Opacidad a 20%, Distancia a 20px y Tamaño a 80px. Mira debajo los detalles exactos:

Paso 6

Bien, ahora tenemos que decidir en qué porcentaje está el progreso en el indicador naranja. Esto se crea mediante el uso de una máscara de capa. En la barra de herramientas, selecciona la Herramienta de Lazo Poligonal (L)

Desde el centro de la capa Círculo 4, haz una selección similar a la imagen de abajo.

Una vez que estés satisfecho con la selección, crea la Máscara de capa, ve a Capa > Máscara de capa > Ocultar selección

Paso 7

Ahora elige la Herramienta Texto (T) y selecciona el centro del área de los círculos y escribe "62" con los siguientes atributos:

  • Fuente: Arial Black
  • Tamaño: 100pt
  • Color: #ffffff

Ahora centra el texto dentro del círculo.

60

Junto al "62", crea otro tipo de capa y coloca un "%" con los siguientes detalles:

  • Fuente: Arial Regular
  • Tamaño: 20pt
  • Color: #5b6773

Coloca el "%" según la imagen de abajo.

23

Paso 8

Directamente debajo del "62", crea otra capa de texto utilizando la Herramienta Texto (T). Con los siguientes detalles:

  • Fuente: Arial Regular
  • Tamaño: 13pt
  • Rastreo: 400
  • Color: #5b6773.

Luego, escribe "DOWNLOAD" en letras mayúsculas.

Coloca este tipo de capa según la imagen de abajo.

Entonces tu indicador de progreso debería verse similar a este: 

Paso 9

Ahora se muestran los dos botones circulares más pequeños. Usando la guía izquierda de relleno, crea un círculo usando la Herramienta Elipse (U), 100px de ancho por 100px de alto. En el selector de color, escoge #19222a. Nombra esta capa como Círculo 5. Coloca este círculo como en la imagen de abajo.

Dentro de ese círculo, crea otro círculo más pequeño que tenga un diámetro de 78px de ancho y 78px de alto. Nombra esta capa como Círculo 5A. Del selector de color elige #2b3642.

Paso 10

Selecciona ambas capas, Círculo 5 y Círculo 5A y haz clic con el botón derecho. Ve a Duplicar Capas.

Una vez que las capas se hayan duplicado, cambia el nombre de ellas por Círculo 6 y Círculo 6A respectivamente y colócalas directamente en la derecha para alinearlas con la guía derecha de relleno.

Desde el archivo PSD de iconos adicionales, copia el icono Pausa y colócalo de manera centrada en la capa Círculo 5.

61

Desde el Conjunto de Iconos Gratis, busca el Icono de Enlace (Fila 2, cruzada 5). Copia el icono en tu diseño y sitúalo centrado dentro de la capa Círculo 6.

62

Utiliza la Herramienta Transformar (Comando / Ctrl-T) y cambia sus dimensiones a 38px de ancho por 48px de alto (200% más grande). Elimina cualquier efecto de capa que esté en el icono haciendo clic derecho sobre la capa y eligiendo Limpiar Estilos de Capa. En el selector de color, elige #a8afb6.

5. Área inferior

Vamos a pasar a la sección inferior. Esta sección se divide en tres filas.

Paso 1

Selecciona la Herramienta Rectángulo (U) y dibuja un rectángulo desde la parte superior del documento que tenga 108px de alto. Nombra la capa como Inferior 1.

63

Haz doble clic en la miniatura de la capa para cambiar el color. En el selector de color escoge el color #19222a. Ve al Panel de Capas (F7) y haz clic con el botón derecho en la capa y selecciona Opciones de Fusión. Elige Disminuir Sombras y coloca Disminuir Sombras en 1px, un ángulo de 90 grados con el color #2b3642.

Duplica la capa Inferior 1 y nombra la nueva capa como Inferior 2. Colócala directamente debajo de la capa Inferior 1. Repite el duplicado de capas nuevamente y cambia el nombre de la nueva capa por Inferior 3 y colócala directamente debajo de la capa Inferior 2.

51

Paso 2

Ahora vamos a crear los pequeños iconos circulares y el contenido. El primer icono indicará que el usuario está descargando un archivo, por lo que necesitamos usar un indicador de progreso naranja similar al que hicimos para el círculo más grande.

Usando la guía izquierda de relleno, crea un pequeño círculo de 50px de ancho por 50px de alto dentro del área de la capa Inferior 1. Nombra esto como Círculo Inferior 1.

64

Ve a las Opciones de Fusión para la capa y coloca un Trazado Exterior de 3px con el color #eb6c4d.

Ahora coloca el relleno en la capa Círculo Inferior 1 en 0%.

Después, convierte la capa en un objeto inteligente y ve a Capa > Objeto Inteligente > Convertir en Objeto Inteligente.

Bien, ahora tenemos que decidir en qué porcentaje está el indicador de progreso naranja. Esto se crea mediante el uso de una Máscara de Capa. En la barra de herramientas, selecciona la Herramienta de Lazo Poligonal (L)

Desde el centro del Círculo Inferior 1, haz una selección similar a la imagen de abajo.

Una vez que estés satisfecho con la selección, crea la Máscara de capa, ve a Capa > Máscara de capa > Ocultar selección. Desde el conjunto de iconos gratuitos suministrado, localiza el icono de la nube con la flecha hacia abajo (fila 6, cruzada 5). Copia el icono en tu diseño y céntralo dentro de la capa Círculo Inferior 1.

Elimina cualquier efecto de capa que esté en el icono haciendo clic derecho sobre la capa y eligiendo Limpiar Estilo de Capa. En el selector de colores escoge #db664a. Debe lucir parecido a esto: 

Paso 3

A la derecha del indicador de descarga vamos a poner algún texto. Por lo tanto, selecciona la Herramienta Texto (T) y haz clic aproximadamente 30px a la derecha de la capa Círculo Inferior 1. Con los siguientes detalles: 

  • Fuente: Arial Regular
  • Tamaño: 12pt
  • Color: #5b6773

A continuación, escribe LATEST DOWNLOADS en mayúsculas.

65

Paso 4

Selecciona la Herramienta Texto (T) y haz clic en la guía derecha de relleno. Alinea a la derecha el texto seleccionando el icono debajo de la ventana del párrafo (Ventana > Párrafo).

Con los siguientes detalles, escribe "55.1 of 81MB"

  • Fuente: Arial Black
  • Tamaño: 20pt
  • Color: #a8afb6

Regresa y destaca "of" y "MB" y dales los siguientes detalles:

  • Fuente: Arial Regular
  • Tamaño de Fuente: 12pt
  • Color: #5b6773.

Toma tu tiempo y enfócate en el espaciado del texto, así te aseguras de que está ubicado correctamente. Así que una vez que se hagas esto, tu capa Inferior 1 debe verse así:

Paso 5

En Inferior 2, necesitamos introducir información similar. Usando la guía izquierda de relleno, crea un pequeño círculo de 50px de ancho y 50px de alto dentro del área de la capa Inferior 2. Nombra esto como Círculo Inferior 2. Ve a las Opciones de Fusión para la capa y coloca un trazado externo de 3px con el color #eb6c4d.

Ahora coloca el relleno en la capa Círculo Inferior 2 al 0%. De nuevo, desde el conjunto de iconos gratuitos también suministrado, busca el icono de la nube con la flecha hacia arriba (fila 6, cruzada 4). Copia el icono en tu diseño y céntralo dentro de la capa Círculo Inferior 2.

Elimina cualquier efecto de capa que esté en el icono haciendo clic derecho sobre la capa y seleccionando Limpiar Estilo de Capa. Del selector de color escoge #3c4651

53

Paso 6

A la derecha del indicador de descarga vamos a poner algún texto. Así que selecciona la Herramienta Texto (T) y haz clic aproximadamente 30px a la derecha de la capa Círculo Inferior 2. Escribe "LATEST UPLOADS" en letras mayúsculas con los siguientes detalles:

  • Fuente: Arial Regular
  • Tamaño de Fuente: 12pt
  • Color: #5b6773
66

Paso 7

Después, simplemente haz un duplicado del texto "55.1 of 89MB" haciendo clic derecho en la capa dentro de la ventana de capa y ve a Duplicar Capa.

Arrastra la nueva capa a Inferior 2 y cambia el texto a "127.4GB".

  • Fuente: Arial Black
  • Tamaño: 20pt
  • Color: #a8afb6.

Para GB, utiliza los siguientes atributos:

  • Fuente: Arial Regular
  • Tamaño: 12pt
  • Color: #5b6773

Una vez terminada la fila debe verse así.

Paso 8

La fila final, Inferior 3, usará la misma estructura que Inferior 2. Necesitamos repetir el mismo proceso que hicimos para el contenido en Inferior 2.

Por lo tanto, utilizando la guía izquierda de relleno, crea un pequeño círculo con 50px de ancho y 50px de alto en el área de capa Inferior 2. Nombra esto como Círculo Inferior 3. Ve a las Opciones de Fusión de la capa y coloca un trazo exterior de 3px con el color #eb6c4d.

Ahora coloca el relleno en la capa Círculo Inferior 3 en 0%.

Nuevamente, desde el conjunto de iconos gratuitos también suministrado, busca el icono de nube simple (fila 6, Cruzado 3). Copia el icono en tu diseño y céntralo dentro de la capa Círculo Inferior 3.

54

Paso 9

A la derecha del indicador de descarga, vamos a insertar algún texto. Por lo tanto, selecciona la Herramienta Texto (T) y haz clic aproximadamente 30px a la derecha de la capa Círculo Inferior 2. Escribe "SPACED USED" en letras mayúsculas usando los siguientes detalles:

  • Fuente: Arial Regular
  • Tamaño de Fuente: 12pt
  • Color: #5b6773
67

Paso 10

Finalmente, haz un duplicado del texto "127.4 GB" Desde Inferior 2 haciendo clic derecho sobre la capa dentro de la ventana Capas y pasando a Duplicar Capa.

Arrastra la nueva capa a Inferior 3 y cambia el texto a "46.9 GB".

  • Fuente: Arial Black
  • Tamaño: 20pt.
  • Color: #a8afb6

GB debe estar en:

  • Fuente: Arial Regular
  • Tamaño: 12pt
  • Color: #5b6773
55

Conclusión

En este tutorial, te he mostrado cómo usar máscaras de capas, objetos inteligentes y varias otras técnicas para ayudarte a crear un diseño de aplicación de iPhone en Photoshop. Espero que hayas aprendido algo de todo y puedas usar estas técnicas para crear un diseño propio de una aplicación.

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.