Share
Los diseños slick son una parte importante de una interfaz de iPad exitosa. En este tutorial explicaremos cómo crear una hermosa GUI para una aplicación de Audio / DJ iPad en Photoshop. Empecemos!
Crea un nuevo archivo. Establezca el ancho en 768 y el alto en 1024 y la resolución en 132 PPI.
Crea un nuevo grupo y llámalo Fondo. Open Leather Texture de Tommaso Nervegna, cree un sistema de cuadrícula como el del ejemplo, dividiendo el lienzo por la mitad en la horizontal y en 3 en la vertical. Cambia el tamaño de la textura para que se ajuste a una de las 6 formas y duplícala 5 veces más para que podamos rellenar cada una..
Combine las 6 capas que hicimos anteriormente y aplique una Superposición de degradado desde el panel Estilo de capa. Centre el gradiente justo en el medio del lienzo exactamente como se ve en el ejemplo y nuestro Fondo está listo. Continúa leyendo para hacer más pasos.
Crea un grupo ne y llámalo Platter. Ahora con Ellipse Tool (U) Haz un círculo perfecto (513x513 px), reduce el nivel de relleno a 0 y aplica los estilos de capa del ejemplo. Debería obtener un resultado similar al de la parte inferior del ejemplo..
Ahora le daremos un ligero toque a la forma. Con la herramienta Pincel (B), configure el tamaño en 300 y la Dureza, establezca el color de primer plano en # 01f5f5 y haga un punto como el del ejemplo. Establezca el modo de fusión de la capa en Superposición..
Usando Ellipse Tool (U), haga otro círculo perfecto (483x483 px), establezca el primer plano en # 111111 y aplique un Resplandor Exterior, usando la configuración del ejemplo.
Nuevamente, utilizando Ellipse Tool (U), haga otro círculo perfecto (481x481 px) pero haga que este sea 2 px más pequeño que el anterior. Establezca el color de primer plano en # 00a2ff y aplique los estilos de capa de mi ejemplo.
Haz un nuevo círculo con la herramienta Ellipse (U), establece el color de primer plano en # c2c2c2, haz que sea 10 px más pequeño que el anterior (471x471 px) y aplica un Trazo desde el panel Estilos de capa, usando la configuración del ejemplo.
En este paso crearemos algunas formas para dar más profundidad al plato. Usando la herramienta Pluma (P) dibuje una forma como la del ejemplo. Hágalo con un ancho de 64 px y una altura de 55, establezca el color de primer plano a # 000000 que duplíquelo para crear un círculo a partir de las formas y aplique la Superposición de degradado a cada forma, cambiando ligeramente la orientación del ángulo a medida que se mueve de una forma a otra Para darle un matiz más dinámico, en este caso nos ofrece más profundidad. Agrupe todas estas formas y use Ellipse Tool (U) para hacer un círculo perfecto (467x467 px) sobre este grupo. Transfiera la Miniatura de Máscara Vectorial del círculo que hicimos al grupo de formas, y borre el círculo.
Usando Ellipse Tool (U) dibuje otro círculo perfecto (469x469 px), reduzca el nivel de relleno a 0 y aplique los estilos de capa del ejemplo.
Usando la herramienta Pluma (P) dibuje una forma como la del ejemplo. Hágalo alrededor (425x425 px), establezca el color de primer plano en # 8d8a8a y aplique la Superposición de degradado utilizando la configuración del ejemplo..
Elija la herramienta Ellipse (U) y haga un círculo perfecto (405x405 px), establezca el color de primer plano en # 232323 y aplique los estilos de capa del ejemplo.
Duplique el círculo anterior, reduzca el nivel de relleno a 0 y aplique los estilos de capa.
Utilizando la herramienta Elipse (U), haga un círculo perfecto (160x160 px), reduzca el nivel de relleno a 0 y aplique un trazo de 1 px, negro (# 000000) desde el panel Estilo de capa. Ahora duplique esta capa y cambie su tamaño para que sea unos píxeles más pequeños que el anterior, hasta que obtenga un resultado como el del ejemplo..
Seleccione todas las capas, combínelas en un objeto inteligente y establezca el nivel de relleno al 10%. Duplique este objeto inteligente 4 veces más, coloque los duplicados en los puntos indicados de la imagen de ejemplo y configure el color de relleno al 5%..
Crea un nuevo grupo y llámalo Panel de control. Usando la herramienta Pluma (P), dibuje formas como las del ejemplo, una en el lado izquierdo y otra en el lado derecho del Plato. Haz las formas alrededor de 300 px y. El primer plano no es importante porque agregaremos una textura en la parte superior de la forma y solo usaremos la forma como base para nuestra textura de madera. Una vez que haya terminado de dibujar las formas, aplique los estilos de capa del ejemplo.
Abra e importe la textura de madera de Matthew Skiles y coloque una capa encima de la forma de la base izquierda y derecha que hicimos para el panel de control. Transforma las capas de textura en máscaras de recorte y avanza al siguiente paso.
Usando la herramienta Pluma (P) dibuje 2 formas similares a las anteriores, pero un poco más pequeñas. Reduzca el nivel de relleno a 0 y aplique los estilos de capa..
En este paso crearemos las flechas indicadoras. Usando la herramienta Pluma (P) dibuje 2 formas como las del ejemplo. Establezca el color de primer plano en # 000000 y aplique los estilos de capa.
Agregar texto con la ayuda de la herramienta de tipo horizontal (T). Usando Tahoma> Negrita como fuente, configure el tamaño en 6 y escriba debajo de la flecha izquierda "- (corchete) REV" y debajo de la flecha derecha "+ (corchete) FWD" y aplique a ambos un efecto Sombra paralela desde los estilos de capa panel utilizando la configuración del ejemplo.
Ahora agregue un poco de texto al panel izquierdo, que se convertirá en nuestro ecualizador. Usando la herramienta de tipo horizontal (T), configure el tamaño en 4 px, la fuente en Arial> Limite y escriba "10hz 20hz 40hz 80hz 1khz 2khz 3 khz 4khz 5khz 6khz" y aplique el efecto Sombra paralela manteniendo la configuración del ejemplo.
Usando la herramienta Rectángulo redondeado (U), establezca el Radio a 2 px y dibuje 10 formas como las del ejemplo. El color de primer plano para las formas es # 000000. Establezca el modo de fusión de las capas en Luz suave y aplique los Estilos de capa del ejemplo..
Ahora vamos a los botones de ecualización. Con la herramienta Rectángulo redondeado (U), establezca el Radio en 5 px y el color de primer plano en #ffffff y dibuje 10 formas como las del ejemplo. Hacerlos alrededor de 30 px de altura y 20 de ancho. Aplicar los estilos de capa y pasar al siguiente paso..
Usando la herramienta de tipo horizontal (T) insertaremos algunos indicadores de intensidad. Usando Tahoma> Regular como fuente, 6 px como tamaño de fuente y color de primer plano establecido en #ffffff escriba una serie de "..." como se ve en el ejemplo. Ahora configure la fuente en negrita y mantenga la configuración anterior, y escriba, dentro de los círculos rojos que ve en la imagen de ejemplo, siguiendo el mismo orden "-", "0", "+" y aplique los estilos de capa a todos los Capas de texto que hicimos en este paso..
Ahora vamos a pasar al panel derecho. Aquí tendremos nuestro control de tono y varios otros botones. Usando la herramienta Rectángulo redondeado (U), establezca el Radio a 2 px, y dibuje una forma como la del ejemplo, luego aplique un estilo de Bisel y Relieve desde el panel Estilos de capa, usando la configuración del ejemplo.
Ahora, utilizando la herramienta Rectángulo (U) dibujaremos marcas indicadoras en ambos lados de la forma que hicimos en el paso anterior. Establezca el color de primer plano en # 00ffff y dibuje una serie de formas rectangulares, como las del ejemplo. Asegúrese de tener en mente un patrón y, al dibujar, haga un rectángulo de 22 px por 2 px, luego dibuje 4 18 px por 1 px formas y así sucesivamente hasta que llegue al final de la forma. Cuando haya terminado de dibujar las formas, selecciónelas todas, combínelas en un objeto inteligente y aplique los estilos de capa indicados en el ejemplo. Luego duplique el objeto inteligente, y refleje en el otro lado de la diapositiva de inclinación..
Hagamos el botón de tempo ahora. Con la herramienta Rectángulo redondeado (U), establezca el Radio en 5px y dibuje una forma como la de la imagen. Hágalo alrededor de 45 px x 55 px y establezca el color de primer plano en #dbdbdb, luego aplique los estilos de capa que se ven en la imagen de ejemplo..
Usando la Herramienta Rectangular Redondeada (U) con el Radio establecido en 5 px, haga una forma como la del ejemplo. Establece el color en #dbdbdb y aplica los estilos de capa.
Levante la herramienta Rectángulo (U) y dibuje 3 formas #ffffff blancas como las del ejemplo. Sobre ellas dibuje otras 3 formas, del mismo tamaño que las anteriores, excepto que las 3 en píxeles más altas que las blancas. Establezca los colores de primer plano para estas últimas 3 formas en # 545353 y avance al siguiente paso.
Usando Ellipse Tool (U) dibuje 2 círculos perfectos en el lado izquierdo de nuestra aplicación justo debajo del panel de control de EQ. Haz las formas alrededor de 89 px x 89 px y establece el nivel de Relleno en 0. Aplica los estilos de capa que se ven en el ejemplo y continúa leyendo el siguiente paso.
Haga 2 círculos más con la herramienta Ellipse (U), unos píxeles más pequeños esta vez, establezca el color de primer plano en # 0a0a0a y aplique los estilos de capa.
Usando Ellipse Tool (U), cree 2 círculos pequeños como las formas que se ven en el ejemplo, establezca el nivel de Relleno en 0 y aplique los estilos de capa.
Ahora para agregar un poco de texto, y símbolos. En el botón izquierdo, usando la Herramienta de tipo horizontal (T), configure la Fuente en Calibri> Negrita y el tamaño de la fuente en 8 px y anote en el centro del botón "/". Para el botón derecho que usa la misma configuración, escriba "CUE". Ahora, utilizando la herramienta Rectángulo (U), dibuje 2 rectángulos como los del ejemplo, en el lado derecho de la "/" y en el lado izquierdo, utilizando la herramienta Pluma (P) dibuje un triángulo como el del ejemplo. Aplique el estilo de capa a todas las capas de texto y forma que hicimos en este paso..
En este paso haremos unos botones más interesantes. Usando la herramienta Rectángulo redondeado (U), establezca el Radio a 10 px y dibuje 7 formas cuadradas como las del ejemplo, haga que estén alrededor de 53 px por 53 px. Establezca el color de primer plano en # 000000, reduzca el nivel de relleno al 10% y aplique los estilos de capa.
Ahora vamos a hacer los botones de modo normal. Usando la herramienta Rectángulo redondeado (U) dibuje solo 5 formas, como señalada en el ejemplo, establezca el color de primer plano en # 0a0a0a y aplique los estilos de capa.
Usando la herramienta Rectángulo (U), establezca el color de primer plano en #ffffff y dibuje formas rectangulares como las del ejemplo. Ahora, utilizando la herramienta Pluma (P), mantenga el color de primer plano para #ffffff y dibuje formas de triángulos como las del ejemplo. Levante la herramienta de tipo horizontal (T) y anote en los mismos lugares como se ve en el ejemplo las palabras "LISTA DE REPRODUCCIÓN", "PODER", "EJECUTAR", "BÚSQUEDA DE PISTA", "BÚSQUEDA". Cuando haya terminado, aplique el efecto Sombra a todas las capas que hicimos en este paso.
Cree unas pocas formas rectangulares como las del ejemplo utilizando la herramienta Rectángulo (U) y aplique el Estilo de capa. Ten cuidado de hacerlas de 1 px de ancho..
Ahora para hacer los botones activos. Con la herramienta Rectángulo redondeado (U), establezca el Radio a 10 px y dibuje 2 formas como las del ejemplo. Establezca el color de primer plano en # 0a0a0a y aplique los estilos de capa.
Seleccione la herramienta Pluma (P) y dibuje 2 formas de triángulos como las del ejemplo. Establezca el color de primer plano en #ffffff y aplique el estilo de capa.
Ahora para sacar el enchufe USB. Con la herramienta Rectángulo redondeado (U), establezca el Radio a 10 px y dibuje una forma sobre el botón Lista de reproducción. Hazlo del mismo tamaño que la base de Playlist. Establezca el nivel de relleno en 10 y aplique los estilos de capa..
Con la herramienta Pincel (B), configure el tamaño en 36 y la dureza en 0 y haga un pequeño punto negro # 000000 como el del ejemplo. Ahora, utilizando la herramienta Rectangular Marquee (M), realice una selección como la del ejemplo y elimínela. Ahora nuestro punto se convertirá en una sombra. Aplique el efecto Sombra paralela a la capa de puntos y utilice la herramienta Pluma (P) para dibujar una forma como la del ejemplo. Establezca el color de primer plano en # 000000 y aplique los estilos de capa.
Seleccione la herramienta Pincel (B) nuevamente y establezca el tamaño del pincel a 49 px y la dureza al 70% y haga un punto negro # 000000 como el del ejemplo. Usando la herramienta Rectangular Marquee (M) haga una selección como la del ejemplo y elimine esa parte. Establezca el nivel de opacidad en 40% y duplique la capa. Mueva la capa duplicada 1 px a la izquierda y presione CMD / CTRL + I (invertir) y establezca la Opacidad para esta última capa en 10%.
Ahora para dibujar los botones de velocidad. Usando la herramienta Rectángulo (U), dibuje 2 líneas blancas #ffffff como las del ejemplo, luego cambie a Ellipse Tool (U) y dibuje 3 círculos como los del ejemplo. Establezca el nivel de relleno para todas las formas en 0 y aplique los estilos de capa.
Usando Ellipse Tool (U) dibuja 3 círculos, dentro de los 3 círculos anteriores, pero esta vez un poco más pequeño. Esto representará el botón en sí. Establezca el color de primer plano en # 0a0a0a para el botón central, este será nuestro botón de estado activo y aplicará los estilos de capa del ejemplo..
Establezca el color de primer plano en # 0a0a0a para los botones izquierdo y derecho, este será el estado inactivo para los botones y aplicará los estilos de capa.
Usando Ellipse Tool (U), haga 2 círculos pequeños como los del ejemplo, establezca el nivel de Relleno en 0 y aplique los estilos de capa.
Ahora para agregar texto. Usando la herramienta de tipo horizontal (T) escriba en el centro de cada botón, de izquierda a derecha los números "1", "2", "3" y aplique los estilos de capa a cada uno.
Usando la herramienta Rectángulo redondeado (U), establezca el Radio a 10 px y dibuje 3 formas como las del ejemplo en el panel derecho. Reduzca el nivel de relleno al 10% y aplique los estilos de capa..
Ahora haga otra forma con la herramienta Rectángulo redondeado (U), manteniendo el radio a 10 px, pero reduzca el tamaño de la forma para que se ajuste a la anterior. Establezca el color de primer plano en # 000000 y aplique los estilos de capa.
Dibuje 2 formas más con la herramienta Rectángulo redondeado (U), con el Radio establecido en 10 px como se ve en el ejemplo, establezca el color de primer plano en # 000000 y el nivel de relleno en 10% y aplique los estilos de capa.
Ahora para hacer el estado activo. Usando la herramienta Rectángulo redondeado (U), configure el Radio a 10 px y dibuje 3 formas como las del ejemplo. Solo aplique los estilos de capa a la forma superior, porque ese será nuestro botón de estado activo.
Ahora para el estado normal, aplique los estilos de capa que se ven en el ejemplo a los botones.
Añadiendo texto. Usando la herramienta de tipo horizontal (T), configure la Fuente en Tahoma> Regular, y el tamaño de la fuente en 6 px y escriba debajo de cada botón el siguiente texto "BPM LOCK", "VINIL", "RESET TEMPO" y aplique el efecto Drop Shadow a todas las capas de texto.
Usando la Herramienta de Forma Personalizada (U) inserte la Flecha 18, desde las Flechas y colóquela en el medio del último botón. Vaya a Editar> Transformar> Escala y coloque un signo negativo en la entrada Establecer una escala horizontal, luego aplique el efecto Sombra paralela, manteniendo la configuración que se ve en el ejemplo.
Usando la herramienta de forma personalizada (U) inserte el letrero "NO", de los símbolos y colóquelo en el centro del primer botón. Igual que la forma anterior, vaya a Edición> Transformar> Escala y coloque un signo menos en la entrada Establecer una escala horizontal, luego aplique el efecto Sombra paralela, manteniendo la configuración que se ve en el ejemplo.
Ahora para crear algunos indicadores activos. Usando Ellipse Tool (U) dibuja algunos círculos pequeños como se muestra en el ejemplo. Establezca el color de primer plano en # 00c52e para el indicador del botón de Encendido y para el resto, ajústelo en # 007dc5 y aplique los estilos de capa.
Con la herramienta Rectángulo redondeado (U), establezca el Radio a 4 px y dibuje una forma como la del ejemplo. Establezca el color de primer plano en # 000000 y aplique la Sombra paralela. Elija la herramienta Rectángulo redondeado (U), mantenga la misma configuración y dibuje otra forma, pero esta vez un poco más pequeña. Establezca el color de primer plano en # 000000 y aplique los estilos de capa.
Ahora hagamos el Album Art Holder. Usando la herramienta Rectángulo (U) dibuje una forma de rectángulo como la del ejemplo, establezca el color de primer plano en # 00fbff y aplique los estilos de capa. Ahora abre y coloca cualquier álbum que te guste. Mi elección fue Chase y Status, álbum "Más que mucho". Transforma la capa artística del álbum en una máscara de recorte. Ahora, utilizando la herramienta Pluma (P), dibuje una forma como la del ejemplo. Agregue una máscara de capa y, suavemente, con un pincel de tamaño mediano, pinte sobre la máscara con el color negro # 000000 para obtener un resultado como en el ejemplo. Establezca el nivel de opacidad en 20% y continúe con nuestro siguiente paso.
Got to Digital dream Font e importarlo a Photoshop. Seleccione la Herramienta de tipo horizontal (T), establezca la Fuente en Digital dream Fat Skew Narrow y el Tamaño de la Fuente en 12 px y escriba "Persecución y estado", "Más que mucho" usando el #ffffff blanco como color de primer plano. Mantenga la fuente, pero cambie el tamaño de 12 px a 14 px y anote en el tamaño inferior izquierdo, como se ve en el ejemplo, las palabras "Piezas - (plan de haz B)" y en el lado derecho de nuestra pantalla "00 00 00 "2 veces, y reduce el nivel de Opacidad para esta capa de texto 2 a 10 px. Ahora, además de mantener la misma configuración, escriba "02:13. 33" y "04:49. 02" exactamente como se ve en el ejemplo. Aplica el efecto Resplandor exterior a todas las capas de texto..
Usando la herramienta Pluma (P), dibuje una forma como la del ejemplo, agregue una máscara de capa y use un pincel de tamaño mediano negro # 000000, esquive para obtener una transición suave del #ffffff blanco a la información debajo de capa. Establezca el Modo de fusión de esta capa en Exclusión y el nivel de relleno en 7%.
Usando la herramienta Pluma (P) dibuje 2 formas como las del ejemplo. Establezca el nivel de relleno en 0 y aplique los estilos de capa; luego, convierta cada forma en un objeto inteligente. Notarás que el Gradien ha cambiado. Agregue máscaras de capa a ambos objetos inteligentes y retire la parte inferior con un pincel negro medio 000000.
Seleccione la herramienta Pluma (P) y dibuje 2 formas, como las del ejemplo. Establezca el color de primer plano en # 0c0c0c y aplique el estilo de capa.
El uso de la herramienta Rectángulo (U) crea una serie de formas rectangulares como las del ejemplo. Establezca el color de primer plano en #ffffff para todos y agrúpelos por lados EX: "EQ de grupo del lado izquierdo". Transforme los grupos en objetos inteligentes y vaya a Edición> Transformar> Deformar. Tire de las esquinas para obtener un resultado similar al del ejemplo y reduzca el nivel de llenado al 10%.
Duplica los objetos inteligentes de nuestro paso anterior. Establezca el nivel de relleno al 100% y aplique los estilos de capa. Ahora, utilizando la Herramienta Lazo Poligonal (L), haga 2 selecciones como las del ejemplo y agregue una máscara de capa a cada objeto inteligente.
Usando la herramienta Pluma (P) dibuje 2 formas como las del ejemplo. Establezca el color de primer plano en #ffffff, agregue una máscara de capa y cepille el lado inferior con un pincel negro mediano # 000000, como se ve en el ejemplo. Reduzca el nivel de relleno al 20% y aplique el estilo de capa. Seleccione la herramienta Pluma (P) y dibuje #ffffff una forma blanca como la del ejemplo. Vaya a Archivo> Desenfoque> Desenfoque de movimiento y ajuste la Distancia a 40 y el Ángulo a 0. Reduzca la opacidad al 30% y habremos terminado.
Puedes jugar, hacer nuevos elementos, cambiar colores y formas. ¡Experimentar! Esta fue siempre la clave en el aprendizaje. Espero que hayas disfrutado este tutorial. Gracias por leer!
Accentsconagua