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

Crea una aplicación de calendario para celular en Photoshop

by
Read Time:6 minsLanguages:

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

En este tutorial, te mostraremos cómo diseñar una aplicación de calendario para celular en Photoshop. ¡Empecemos!


Activos del tutorial


Paso 1

Crea un nuevo archivo. Establece ancho en 640 y alto en 960 y la resolución en 326 PPI.


Paso 2

Crea un nuevo grupo y asígnale el nombre Encabezado. Con la herramienta Rectángulo (U), haz una forma de rectángulo como la del ejemplo, establece el color de relleno en #ff3600 y aplica los estilos de capa. Aquí tendrás que descargar e instalar este patrón personalizado, que se utilizará a lo largo del tutorial en diferentes pasos.


Paso 3

Ahora, usando la Herramienta de texto horizontal (T), escribe "Noviembre de 2011" y aplica el Estilo de capa.


Paso 4

Con la herramienta Rectángulo redondeado (U), establece el Radio en 3px y haz dos formas como las del ejemplo. Establece el color de relleno en #388cff y aplica los estilos de capa.


Paso 5

Utiliza la herramienta forma personalizada (U) y carga el conjunto personalizado llamado formas, desde donde selecciones la forma triángulo y dibuja dos triángulos como los del ejemplo. Aplica el estilo de capa.


Paso 6

Ahora, usando la Herramienta Elipse (U), crea círculos como los del ejemplo, establece el color de relleno en #1d1d1d y aplica los Estilos de capa.


Paso 7

Dibuja una forma como la del ejemplo usando la herramienta pluma (P), luego ve a Filtro > Desenfocar > Desenfoque Gaussiano y establece el Radio en 2.5px. Reduce el nivel de llenado al 50% y continúa con el siguiente paso.


Paso 8

Con la herramienta rectángulo redondeado (U), establece el radio en 15px y dibuja una forma como la del ejemplo. Establece el color de relleno en #d8bc56 y aplica los estilos de capa.


Paso 9

En este paso aplicaremos algunas sombras y reflejos para dar más profundidad a nuestros elementos. Con la herramienta pincel (B), elije un pincel de tamaño mediano y, como se indica en el ejemplo anterior, haz diferentes trazos de color y cambia el modo de fusión para la capa y el nivel de relleno como se indica en el ejemplo. Cuando hayas terminado de crear estas 3 capas, tendrás que seleccionarlas y transformarlas en máscaras de recorte.


Paso 10

Crea un nuevo grupo y asígnale el nombre Staples. Ahora, usando la Herramienta rectángulo redondeado (U), establece el radio en 15 px y dibuja tres formas como las del ejemplo. Establece el color de relleno en #9f9f9f y aplica los estilos de capa. Asegúrate de utilizar los mismos colores en el degradado que se utilizó para el estilo de trazo.


Paso 11

Crea un nuevo grupo, asígnale el nombre Categoría y colócalo debajo del encabezado del grupo anterior. Ahora, usando la herramienta rectángulo (U) dibuja una forma como la del ejemplo y aplica el Estilo de Capa.


Paso 12

Ahora, usando la herramienta pluma (U), dibujaremos una forma con un fondo en zigzag que imita un papel rasgado. Trata de ser lo más natural posible para que el resultado final no se vea como algo muy preciso.


Paso 13

Con la herramienta de tipo horizontal (T), configura la fuente en Myriad Pro y el tamaño de fuente en 4.58px y escribe las mismas palabras que se ven en el ejemplo. Establece el color de relleno en #6c7174.


Paso 14

Ahora, con la ayuda de la herramienta rectángulo, dibuja dos formas como las del ejemplo. Establece el color de relleno en #f0f4f7. Elije la herramienta pluma (P) y en la parte inferior derecha del último rectángulo que hicimos, haz un triángulo negro #333333 como el del ejemplo y aplica el estilo de capa. Ahora ve a la herramienta formas personalizadas (U), carga las formas de los símbolos y coloca el símbolo de información como en el ejemplo.


Paso 15

Con la herramienta pluma (P) dibuja una forma como la del ejemplo. Establece el color de relleno en #ff4810 y aplica los estilos de capa.


Paso 16

Una vez más, con la herramienta pluma (P), haz un rectángulo blanco #ffffff como el del ejemplo.


Paso 17

En este paso haremos la cuadricula. Usando la herramienta rectángulo (U), establece el color de relleno en #dedede y construye una cuadrícula como la del ejemplo.


Paso 18

Ahora agreguemos algo de texto en nuestra cuadrícula. Usando la herramienta de tipo horizontal (T), configura la fuente en Myriad Pro, y el tamaño de fuente en 5.86pt y los números exactamente como en el ejemplo. Utiliza el color de texto indicado en el ejemplo para cada categoría. Para el texto blanco #ffffff 18, aplica el estilo de capa en el ejemplo.


Paso 19

Usando la herramienta elipse (U) haremos dos círculos como los del ejemplo. Establece el color de relleno para el de la izquierda en #fb4710 y para el de la derecha en #ffffff.


Paso 20

En este paso crearemos un control deslizante de contenido. Usando la herramienta rectángulo redondeado (U), establece el radio en 15px y el color de relleno en #545454 y dibuja una forma como la del ejemplo, luego establece el modo de fusión para la capa en multiplicar y el nivel de Opacidad en 50%. Haz otra forma, esta vez más pequeña, y en la parte superior de la otra como en el ejemplo.


Paso 21

Con la herramienta rectángulo redondeado (U), establece el radio en 2px y dibuja tres formas como las del ejemplo. Establece el color de relleno en #000000 y reduce el nivel de relleno al 34%, luego aplica los estilos de capa. Ahora, usando la herramienta rectángulo redondeado (U), manten el radio en 2px y dibuja otra forma como las tres anteriores, pero cambia el color de relleno de #000000 a #296dca y aplica los estilos de capa.


Paso 22

Ahora agreguemos algo de texto a nuestras pestañas. Con la herramienta de texto horizontal (T), configura la fuente en Myriad Pro y el tamaño de fuente en 7.98pt y agrega el mismo texto como se ve en el ejemplo y aplica el estilo de capa. Agregaremos algo más de texto, por lo que usando la herramienta de texto horizontal (T) mantén la misma fuente pero cambia el tamaño de fuente a 5.32pt y el color del texto a #c7c7c7, escribe el mismo texto que se ve en el ejemplo y aplica el estilo de capa.


Paso 23

Crea un nuevo grupo y asígnale el nombre menú. Usando la herramienta rectángulo (U) dibuja una forma como la del ejemplo. Establece el color de relleno en #131313 y aplica los estilos de capa. Haz una nueva capa y usa la herramienta pincel (B) selecciona un pincel de tamaño mediano con dureza establecida en 0 y rellena el color en #255ba5 y haz un punto como el del ejemplo. A continuación, con la herramienta rectángulo (U), crea una forma como la del ejemplo, establece el color de relleno en #4090ff y aplica el estilo de capa.


Paso 24

Usando la herramienta rectángulo (U) dibuja dos formas más como las del ejemplo. Establece el color de relleno en #131313 y aplica los estilos de capa.


Paso 25

El toque final es agregar algo de texto a las pestañas de nuestro menú. Con la herramienta de texto horizontal (U), configura la fuente en arial y el tamaño de fuente en 6px y escribe el texto que ves en el ejemplo para las pestañas laterales. Establece el color del texto en #ffffff y aplica los estilos de capa. Usando la herramienta de texto horizontal (T), manten la misma fuente pero cambia el tamaño de fuente a 7px y el color del texto a #3388fc y aplica el estilo de capa.


Conclusión

Si lo deseas, puedes incorporar tu diseño en una maqueta de iPhone.

One subscription.
Unlimited Downloads.
Get unlimited downloads