Share
En este tutorial, usaremos una combinación de estilos de capas, texturas y un poco de dibujo manual para crear una apariencia de reproductor de mp3 estilo Winamp.
Los siguientes recursos fueron utilizados durante la producción de este tutorial..
Para obtener el tamaño exacto, usaremos cuadrícula para ayudarnos a diseñar. Abrir el cuadro de diálogo Preferencias (Comando / Ctrl + K). En la configuración de Guías, Cuadrícula y segmentos, establezca Cuadrícula cada: 100 píxeles y subdivisiones: 5.
Crea una forma rectangular con un tamaño de 400px x 200px y color: # 4f4834.
Activar la herramienta pluma. Haga clic en ruta para agregar dos puntos en cada esquina. Ver imagen abajo para su colocación..
Mantenga presionada la tecla Alt para cambiar temporalmente la herramienta Pluma a la herramienta Convertir punto. Alt-clic en todos los nuevos puntos que acabamos de crear.
Aún utilizando la herramienta de lápiz, haga clic en todos los puntos de la esquina para eliminarlos.
Haga clic en la línea superior para agregar 4 puntos. Haga clic con la tecla Alt presionada en cada punto para convertirlos en puntos nítidos.
Mueve hacia arriba dos puntos medios tan altos como un cuadro.
Cree una ruta rectangular dentro de nuestra ruta y seleccione Restar de la barra de opciones. Agrega dos puntos agudos en cada esquina, luego elimina todas las esquinas.
Nuestro rincón es demasiado grueso. Intentaremos mantener su tamaño uniforme, una columna de ancho. Para ayudarnos, dibuje un tamaño de una columna en forma rectangular, gírelo 45 grados y colóquelo en la esquina..
Manualmente, mover puntos usando la herramienta de selección directa..
Repita los pasos 8 y 9 en otras esquinas para darles el mismo tamaño.
Añade estos estilos de capa.
Crea una nueva capa y colócala sobre la forma. Usa un pincel de salpicadura para sacar algo de suciedad. Presione Comando / Ctrl + Alt + G para convertir la capa en Máscara de recorte.
Añadir texturas metálicas rayadas.
en la parte superior de la forma. Haga clic en Imagen> Ajustes> Desaturar para eliminar su color. Establezca el modo de fusión en Pantalla con Opacidad: 45%. Presione Comando / Ctrl + Alt + G para convertir la capa de textura en Máscara de recorte. La textura está ahora dentro de la forma..
Los estilos de capa Biselado y Relieve agregan un efecto 3D a nuestra forma. Sin embargo, como no estoy satisfecho con el resultado, agregaré más luz a su lado. Por lo tanto, seleccione el lado utilizando el lazo poligonal, cree una nueva capa y dibuje el degradado de negro a blanco. Cambia el modo de mezcla a la pantalla y reduce su opacidad al 20%. A continuación, puede ver la diferencia antes y después de agregar gradiente.
Escribir Lista de reproducción Para el título de esta forma. Añadir los siguientes estilos de capa.
Dibuja una forma de círculo. Establecer relleno de capa al 0%, agregar estilos de capa.
Me doy cuenta de que la parte inferior de la forma es demasiado oscura. No se ha visto ningún detalle. Para arreglar esto, dibujaré manualmente. Comando / Ctrl-clic en la capa de forma. Use un cepillo suave pequeño y luego píntelo con blanco. Puedes ver la diferencia antes y después de pintar de blanco..
Actualmente, estamos utilizando blanco para el fondo. Esto no ayuda porque el blanco tiende a hacer que todo lo que lo rodea sea más ligero. Entonces, agreguemos el fondo ahora. Haga doble clic en Fondo para convertirlo en capa. Haga clic en Editar> Rellenar y seleccione Color: # 332c1c. Añadir textura a la capa. Puede hacer esto pegando una textura en la capa y establecer su modo de fusión en Pantalla o Multiplicar, o puede agregar Superposición de patrón de estilo de capa y usar uno de los patrones disponibles.
Dibuja una forma rectangular y colócala detrás de la forma. Establezca Relleno en 0%. Añadir estilo de capa Gradiente de superposición.
Duplica la ruta que acabamos de crear. Haga clic en Agregar capa de ajuste y seleccione Relleno degradado. Dibuje otro camino descrito exactamente como se ve en la imagen de abajo y seleccione Intersecar. La combinación de ambos caminos nos dará un buen reflejo en la esquina superior izquierda.
Añadamos otro gradiente para hacer que la pantalla superior sea más brillante. Dibuja un rectángulo redondeado en la parte superior. Establezca Relleno en 0%. Agregue estilos de capa Superposición de degradado con modo de fusión Pantalla para mantener un píxel más claro.
Añade más sombras en la parte inferior de la pantalla. Solo tenemos que repetir el proceso anterior. Dibuje un rectángulo redondeado, establezca Relleno en 0%. Agrega estilo de capa Gradiente superpuesta, pero esta vez, elige el modo de mezcla Multiplica para ocultar todos los píxeles más claros.
Use la herramienta pluma para dibujar algunas formas y colóquelas detrás de la pantalla. Añadir estilos de capa.
Reducir la opacidad de adorno de capa al 50%. Añadir textura de capa en la parte superior del adorno. Establezca el modo de fusión en Pantalla y reduzca su Opacidad al 45%. Convertir la textura de la capa en máscara de recorte.
Duplica el adorno y colócalo en el lado opuesto. Pulsa Comando / Ctrl + T, haz clic derecho y elige Voltear horizontalmente.
Vamos a añadir más detalles en la pantalla. Comience por añadir resaltado. Cree una ruta de forma creciente y colóquela en la esquina superior izquierda. Haga clic en el icono Agregar capa de ajuste y seleccione Relleno degradado de blanco a transparente. Poner la opacidad al 50%..
Duplica el resaltado y colócalo en la esquina superior derecha. Pulsa Comando / Ctrl + T, haz clic derecho y selecciona Flip Horizontal. Si te das cuenta, en la vida real, la iluminación nunca es perfecta. Es casi imposible tener el mismo punto culminante en ambos lados. Entonces, para este resaltado duplicado, cambie la Opacidad al 20%..
Repita los pasos anteriores, pero esta vez, use negro a transparente para crear sombras.
Siempre me encantan los pequeños detalles. Pequeños detalles en conjunto dan una impresión perfecta en su trabajo. Una cosa que puede hacer para agregar realismo a su trabajo es agregar algunas imperfecciones, en nuestro caso, una grieta. Esto es bastante fácil en realidad. Comience por crear una nueva capa, dibuje una línea negra de 1px con la herramienta Lápiz. Duplicar capa (Comando / Ctrl + J), moverlo 1px. Pulsa Comando / Ctrl + I para invertir su color a blanco. Reduzca la opacidad de la línea negra al 30% y la línea blanca al 20%. Elimine ambos extremos de las líneas utilizando la herramienta de borrador pequeño y suave.
Repite el mismo proceso para otra grieta..
Con un 100% de zoom, puedes ver nuestras pequeñas grietas..
Vamos a añadir un toque aleatorio. Comience por dibujar un punto blanco con un cepillo suave de 2px. Pulsa Comando / Ctrl + T y estira horizontalmente. Borre sus extremos utilizando la herramienta de borrador suave.
Duplica el resaltado y colócalo en otras posiciones..
Añadir texto para la lista de reproducción. Agrega un estilo en negrita a una de las canciones para indicar que está activo. Use color # ffffc5 y agregue los siguientes estilos de capa.
Para atenuar la lista de reproducción, agregue máscara de capa y dibuje un degradado de blanco a gris.
Dibuja una forma poligonal y colócala en la parte inferior de la lista de reproducción. Necesitamos repetir los pasos 11 a 13 para agregar texturas similares a la forma. Agregue texturas metálicas rayadas, desaturar su color (Comando / Ctrl + Shift + U). Establezca el modo de fusión en Pantalla, reduzca la Opacidad al 45%. Presione Comando / Ctrl + Alt + G para convertir la capa en Máscara de recorte. Añadir los siguientes estilos de capa.
Duplica la forma circular desde la esquina de la lista de reproducción. Colóquelo en ambos bordes de la nueva forma. Cambiar el tamaño a 90%.
Dibuja una forma rectangular. Establezca la capa de relleno en 0%. Añadir los siguientes estilos de capa.
Quiero agregar más definición a la parte inferior de la forma rectangular agregando más luz. Para hacer esto, solo necesitamos dibujar una línea de 1px usando la herramienta de lápiz y establecer su opacidad al 20%.
A continuación, puede ver la ligera diferencia antes y después de agregar la línea 1px.
Usando la herramienta rectangular, dibuja el signo + y agrega los siguientes estilos de capa.
Duplique el signo + y elimine su forma horizontal para convertirlo en un signo -.
Dibuja una forma rectangular más larga al lado del botón -.
Dentro de la forma, agregue texto para Tiempo de pista actual / Tiempo total de lista de reproducción.
Interfaz de lista de reproducción duplicada. Cambia su título a +JUGADOR. No necesitamos la lista de reproducción de la canción, así que borra su texto..
Dibuje un camino rectangular y seleccione Agregar a la forma. Dibuja un camino poygonal, colócalo en la parte inferior del jugador y selecciona Restar.
No queremos que esta interfaz sea un duplicado exacto de la lista de reproducción. Para hacerlo único, vamos a añadir alguna diferencia. Mueve texturas, mueve resaltados y agrega más grietas.
No olvides reposicionar la pantalla. Mueve sus luces, sombras y accesorios en la esquina inferior..
Dibuja una forma rectangular delgada y agrega algunas formas de capas.
Vamos a dibujar un indicador de pista de tiempo. Dibuja forma hecha de rectángulo redondeado y un triángulo. Para su uso de color: # 4f4834.
Agregue textura en la parte superior, establezca su modo de fusión en Pantalla con Opacidad al 45%. Convertir la capa de textura en máscara de recorte. Añadir los siguientes estilos de capa.
Dibuja otro polígono en la parte superior de la interfaz del jugador. Repita el paso 36, agregando texturas y estilos de capas.
Dibuja una forma rectangular, establece Relleno en 0%. Añadir los siguientes estilos de capa.
Dibuja forma hecha de rectángulo y triángulo. Añadir los siguientes estilos de capa.
Usa la misma técnica para crear otro botón..
Dibuja una pequeña forma de icono de altavoz. Junto a él, crea una forma de media luna hecha de dos círculos superpuestos. Agrega los siguientes estilos de capas, similares a los botones anteriores.
Dibuja algunas formas rectangulares. Añadir los siguientes estilos de capa.
Duplique la forma de la capa (Comando / Ctrl + J) y elimine algunas de ellas. Eliminar todos los estilos de capa utilizados y agregar la siguiente superposición de color.
Añadir forma circular en ambos extremos de la forma. Vea el Paso 37 para referencia sobre cómo hacerlo..
Añadir texto contiene información de la pista. Añadir máscara de capa. Dibuja wite a negro degradado para que desaparezca.
Hemos terminado con la interfaz..
También podemos cambiar su color. Agregue Tono / Saturación de la capa de ajuste y colóquelo en la parte superior de la interfaz. Cambiar su configuración.
Como puede ver, diseñar interfaces no consiste solo en agregar estilos de capas. Hay mucho más en el proceso. Espero que puedas aprender algunas nuevas técnicas de este tutorial. Si tiene alguna pregunta, no dude en preguntar en el formulario de comentarios a continuación..
Accentsconagua