» » Crear un icono de aplicación móvil en Photoshop

Crear un icono de aplicación móvil en Photoshop

Este tutorial es parte de una serie de tres partes que explica cómo diseñar elementos de UI para aplicaciones móviles en Photoshop. En esta parte, explicaremos cómo diseñar un ícono para la pantalla de inicio de su dispositivo móvil. ¡Empecemos!

Los siguientes recursos fueron utilizados durante la producción de este tutorial.

Paso 1

Crear un nuevo documento. En este tutorial diseñaremos nuestro ícono a 1024x1024 píxeles, pero siéntase libre de diseñar el suyo a 256x256 o 512x512 píxeles.

Paso 2

Con la herramienta Rectángulo redondeado (U) dibuje una forma con un color rojo. (Probé la herramienta Eyedropper Tool (I) en el icono oficial Psdtuts +).

Paso 3

Con la herramienta Pincel (B), pinte un color rojo claro intenso para crear un punto de luz en la parte superior derecha del icono.

Paso 4

Añade una sombra negra con la herramienta Pincel. Usa la imagen como referencia.

Paso 5

Agregue una forma como esta en la parte superior del icono con el siguiente estilo de capa.

Paso 6

Duplique y reduzca la última forma con Cmd / Ctrl + T. En una nueva capa, configurada como Máscara de recorte (presione la tecla Alt en la línea de separación entre dos capas en la Paleta de capas), pinte un poco de color rojo claro con la herramienta Pincel (B ).

Paso 7

Refine las luces superiores utilizando la herramienta Pincel (B) alternando la luz y el rojo oscuro.

Paso 8

He refinado la parte inferior utilizando la misma forma que en el paso anterior.

Paso 9

En una capa separada, utilizando la herramienta de selección rectangular (M), agregue dos franjas finas y seleccione el modo de mezcla en Superposición.

Paso 10

Hacer una selección rectangular. Rellénelo con la herramienta Degradado (G) configurada en blanco a transparente. Distorsione la capa con Cmd / Ctrl + T y configure el modo de fusión de la capa en Superposición.

Paso 11

Cree una nueva capa y con la Selección rectangular (M) seleccione una franja delgada de píxeles. Rellénelo con negro y distorsione la capa con Cmd / Ctrl + T para obtener un resultado como el de la imagen de abajo. Coloque la capa cerca del borde del degradado blanco central. Como puedes ver, dupliqué la raya del lado derecho.

Paso 12

Refine la sombra con la herramienta Pincel (B) en una nueva capa.

Paso 13

Añadir dos rayas de puntos destacados. Utilice el método del Paso 11 de nuevo.

Paso 14

Poco ajuste con la herramienta Pincel (B) en el centro del foco y los bordes. Hago un grupo con las capas centrales y agregué una máscara de capa para suavizar las líneas solo un poco.

Paso 15

Agregue una textura sutil al ícono con el filtro Ruido> Agregar ruido, establezca el modo de fusión en Luz suave. Intenta alterar la capa con Cmd / Ctrl + T.

Paso 16

Con la herramienta de forma rectangular (U), cree una forma más y agregue el siguiente estilo de capa.

Paso 17

Duplique la forma más y muévala un poco hacia la parte inferior con la herramienta Mover (V). Añadir este estilo de capa.

Paso 18

Agregue algunos reflejos con la herramienta Pluma (P). Dibuja alguna forma negra aleatoria y con una opacidad de capa baja.

Paso 19

Refiné el borde de la cruz superior agregando líneas blancas con la herramienta Lápiz.

Paso 20

Tiempo de varita mágica. Agrega una forma de cilindro negro con este estilo de capa.

Paso 21

Agrega otras formas blancas en la parte superior de la varita con este estilo.

Paso 22

Y finalmente la última forma con el siguiente estilo de capa.

Paso 23

El pincel se compone de dos partes. Primero dibuje la forma principal con la herramienta Pluma (P). Utilice este estilo de capa.

Paso 24

Con la herramienta Pincel (B) comience a pintar dentro del cepillo con un cepillo pequeño y duro. Utilice la propiedad de espaciado dentro del panel de pinceles (F5) para aumentar la velocidad de este paso. Intenta alterar el color del pincel también.

Paso 25

Agregué una sombra inferior y coloreé con amarillo la parte superior con la herramienta Pincel (B) en una nueva capa.

Paso 26

Dibuje una forma de cilindro con la herramienta Pluma (P) Aplique el siguiente estilo de capa.

Paso 27

Coloque la textura de madera dentro del documento y aplíquela a la Forma anterior como máscara de recorte en el Modo de superposición.

Paso 28

Para la parte metálica, dibuje otra forma con este estilo de capa. Refiné la sombra de esta parte en una nueva Capa pintando un poco de negro por dentro.

Paso 29

Cree una nueva capa y pinte el humo con la herramienta Pincel (B) con colores morados y amarillos.

Paso 30

Dibuja una estrella usando la herramienta Forma personalizada. Añadir este estilo de capa.

Paso 31

Duplica la forma de la estrella y oscurece seleccionando un color amarillo oscuro. Ordena esta capa detrás de la anterior. Dupliqué la estrella dos veces y coloqué la copia alrededor de la varita en varios tamaños.

Paso 32

Un último paso es refinar toda la iluminación del ícono en una capa separada con la herramienta Pincel (B). Agregué algunos pequeños detalles al ícono, como pintura, brillo, sombras simplemente pintándolos.

Paso 33

Agregué una luz de color azul entre los objetos con la herramienta Pincel (B) en una nueva capa.

Paso 34

Finalmente, creé una sombra paralela al icono y un fondo naranja personalizado en capas separadas.

Imagen final Por: Mirko Santangelo

Deja un comentario

Información
Atención! Usuarios que están en este grupo no pueden dejar comentarios en la página...Primero debes Registrarse!

Redes Sociales

Recupera Tus Mensajes O Chats De WhatsApp Borrados

Recupera Tus Mensajes O Chats De WhatsApp Borrados

  Recuperar mensajes y chats borrados de tu aplicación WhatsApp para Android es una tarea que puede resultar  necesaria alguna vez. A menudo, estamos tratando de liberar espacio físico de nuestro dispositivo Android y llegamos incluso a borrar...
Integrar El Boton de Whatsapp En Tu Web

Integrar El Boton de Whatsapp En Tu Web

  De todos es conocido que WhatsApp se ha convertido en una herramienta para compartir fotos y vídeos con tus amigos, familiares y compañeros de trabajo. También cada vez más usado, para compartir enlaces de contenidos de la web y otras aplicaciones móviles. Para ayudar a compartir los contenidos...
Crees que las redes sociales te están haciendo bien o mal

Crees que las redes sociales te están haciendo bien o mal

Las redes sociales te ofrecen una forma única de observar a la gente. Por ejemplo, el lenguaje utilizado en Twitter puede usarse para predecir si alguien está en riesgo de morir de una enfermedad cardíaca. El análisis de las actualizaciones de Facebook muestra que las mujeres son generalmente más...
Crea una imagen para las redes sociales

Crea una imagen para las redes sociales

Aprenda a combinar una foto, texto y material gráfico en Photoshop para su Facebook, Twitter y otras publicaciones en redes sociales. Utilice estas habilidades para crear sus propias imágenes de redes sociales o cualquier diseño que cree en Photoshop. Adobe Photoshop es un editor de gráficos...
Comparte instantáneamente tus fotos y diseños

Comparte instantáneamente tus fotos y diseños

Muestre rápidamente su trabajo a clientes y compañeros de trabajo, o comparta una idea al instante por correo electrónico, texto, redes sociales y más, todo dentro de Adobe Photoshop CC. Nota: Necesitará la última versión de Photoshop CC para usar esta función. Comparte tu trabajo ahoraHaz clic en...
Que Hacer Si Su Telefono Fue Robado O Perdido

Que Hacer Si Su Telefono Fue Robado O Perdido

Si te robaron o perdiste tu teléfono móvil, podemos asegurarnos de que nadie pueda usar tu cuenta de WhatsApp. Qué hacer Bloquea tu tarjeta SIM. Primero debes llamar a tu operador de telefonía móvil y pedir que bloqueen tu tarjeta SIM. Después del bloqueo, ya no será posible verificar la cuenta de...