Share
Sal y Pimienta, Lápiz y Papel, Galletas y Leche, aunque todos son buenos por sí solos, estas cosas trabajan juntas para sacar lo mejor de cada una. Adobe Illustrator y Adobe Photoshop no son una excepción. Hoy te mostraré cómo usar Illustrator para diseñar un botón de reproducción y cómo mejorar tus vectores con el uso de Photoshop. Esta técnica es particularmente útil para las personas que desean hacer iconos y diseños de IU. Empecemos!
Comience creando un nuevo documento en illustrator (lo he hecho de 800 x 800 px). Seleccione la "Herramienta Rectángulo Redondeado" (con el radio de esquina de 100px) y cree una forma que se vea como un botón redondeado. A continuación, seleccione la "herramienta Rectángulo", cree un rectángulo y céntrelo en el rectángulo redondeado. Esto será para el botón de reproducción..
Trabaja en el segundo rectángulo (el rectángulo "jugar"). Vaya a Efecto> Distorsionar y transformar> Fruncir y engordar para hacer que el rectángulo se curve. Rellene el recuadro en la ventana (he usado 6%) y presione OK, después de eso vaya a Objeto> Expandir apariencia.
Para crear el ícono "jugar", seleccione la "Herramienta estrella", abra el diálogo de la herramienta Estrella e ingrese los siguientes ajustes.
Ahora crea los íconos "siguiente" y "anterior". Primero duplique el icono de reproducción con Opción + Clic + Arrastrar (en cualquier lugar que desee), luego haga lo mismo, pero esta vez arrástrelo hacia la derecha (puede mantener presionada la tecla Mayús para mover el objeto en línea recta). Seleccione los dos triángulos, haga clic en el botón "Agregar al área de la forma", luego haga clic en "Expandir", cambie el tamaño y vuelva a colocar.
Cree el ícono "Anterior" yendo a Objeto> Transformar> Reflejar> Vertical y haga clic en "Copiar". Colócalo en su lugar y acabas de hacerte algunos botones de jugador..
Añade los colores a los botones. El botón "Jugar" tiene un relleno de # 506670 un golpe de # 2C515E. Los botones "Siguiente" y "Anterior" tienen un relleno de # 85D4D6 y un trazo de # 27A0A0.
Para crear la sombra inferior, tiene que duplicar el botón y, a continuación, con la "Herramienta Rectángulo Redondeado" (con la misma configuración) cree la misma forma pero un poco más grande. Seleccione este rectángulo y el que duplicó y haga clic en "Restar del área de la forma" y "Expandir". Haz que sea negro y dale un 20% de opacidad y configura el modo de fusión en Superposición.
Usa la sombra inferior para crear el brillo superior. Seleccione la sombra inferior, vaya a Transformar> Reflejar. Después de hacer los ajustes, haga clic en "Copiar". Colóquelo en su lugar, reorganice los puntos de anclaje para que se vuelva más delgado y se vuelva blanco (deje los modos de opacidad y fusión como están).
Usa la misma técnica en el botón de play..
Después de terminar la forma del reproductor, expórtelo como .PSD para agregar algunos detalles en photoshop.
Cree un nuevo archivo en Photoshop (he usado 800 x 800 px) y traiga el archivo que exportó desde Illustrator (mini reproductor). Seleccione la capa "botón grande", abra la ventana "Estilos de capa", haciendo doble clic en el lado derecho de la capa y comience a agregar los siguientes estilos, como hice yo. (puedes seguir las fotos).
Oculte todas las capas excepto la capa "botón grande", la capa "sombra inferior" y la capa "brillo superior". Seleccione la capa de "sombra inferior", vaya a Filtro> Desenfoque> Desenfoque gaussiano, dele un radio de 4 px y luego haga clic en Aceptar. Haz lo mismo con la capa "top shine"..
A continuación, haga una nueva capa, Comando + Clic en el pulgar de la capa "botón grande", para hacer una selección de esa forma, luego, con la "Herramienta de Lazo Poligonal", recorte la mitad superior de la selección. Rellénelo con un color (no importa el color, ya que le daremos un relleno del 0%) y agregue un estilo de capa de Superposición de degradado..
Haga visible el "Botón de reproducción" (incluida la sombra inferior y el brillo superior). Seleccione la capa "Botón de reproducción" y agregue los dos estilos de capa (Superposición de degradado y Resplandor interno). Seleccione la capa "sombra inferior" y vaya a Filtro> Desenfoque> Desenfoque gaussiano, dele un radio de 5 px y haga clic en Aceptar. Repita esta acción en la capa "brillo superior".
Cree una nueva capa, haga una selección rectangular y con la "Herramienta de degradado" (G) haga un degradado. Control + D para deseleccionar. Establezca el modo de fusión en "Superposición" y 20% en la opacidad.
Cree una nueva capa debajo de la capa del botón de reproducción y haga una selección para la sombra del botón. Rellénelo con negro y vaya a Filtro> Desenfoque> Desenfoque gaussiano y dele un radio de 1.5 px. Establezca el modo de fusión en "Color Burn" y 40% en la opacidad..
Seleccione la "Herramienta de borrador" (E), establezca el diámetro en 125 px y la dureza en 25% y deslice horizontalmente sobre la mitad de la capa de sombra.
Seleccione la capa de iconos "siguiente y anterior" y rellénelos con este color; # 0096A4. Después de eso, abre la ventana "Estilos de capa" y comienza a agregar los mismos estilos que yo..
Haz lo mismo con la capa "icono de juego". Pero esta vez usa este color como color de fondo: # FFDB94
Utilice la "Herramienta de línea" para crear un gran efecto de brillo. Coloque la línea debajo de la capa "Botón de reproducción" y cree una línea horizontal (1 px) en la parte inferior de la capa "botón grande". Haz que la forma se llene al 0% y agrega una "Superposición de degradado".
Crea una nueva capa detrás de la capa "Play Button". Control + Haga clic en el pulgar de la capa "botón grande", para hacer una selección de esa forma, luego haga un simple degradado negro a la izquierda. Establecer "Superposición" como modo de fusión y 60% de opacidad. duplica la capa, voltéala horizontalmente y muévela hacia la derecha.
Utilice la "Herramienta Elipse" para crear un óvalo en el lado izquierdo del "botón grande". Reorganícelo para que se vea como se ve en la imagen de abajo (debe colocarse en el lado superior izquierdo del "botón grande"). Haga el relleno 0% y agregue un estilo de "Superposición de degradado".
Duplique la capa y colóquela en la parte inferior derecha del "botón grande", agregando el segundo estilo de "Superposición de degradado".
Crea una nueva capa encima de la capa "Botón de reproducción". Control + Haga clic en el pulgar de la capa "Play Button", para hacer una selección de esa forma, luego vaya a Seleccionar> Modificar> Contratar y contraiga la selección en 3 px. Después de todo esto, toma la "Herramienta de degradado" y haz un pequeño degradado diagonal en la esquina superior izquierda. Establezca el modo de fusión de capas en "Superposición" y la opacidad en 40%.
Haz una nueva capa por encima de la que acabas de hacer. Haga una selección en el lado izquierdo del "botón Reproducir" (como en la imagen). Rellénelo con el color que desee, ya que estableceremos el relleno en 0%. Agregue el estilo "Superposición de degradado" y el efecto de brillo se habrá completado. Duplica esta capa, voltéala horizontalmente y muévela hacia el lado derecho.
Seleccione la mitad del "botón Reproducir" y en una nueva capa, utilizando la "Herramienta de degradado" (G), haga un degradado (utilizando negro como color). Después de eso, establezca el modo de fusión en "Color Burn" y la opacidad en 10%. Use la misma técnica para el "icono de juego" (lo único que cambia es la ubicación de las capas, sobre la capa de "icono de juego", y la opacidad de la capa - 20%).
Crear la textura del "botón de reproducción" es muy simple. Después de crear una nueva capa sobre el control de la capa "Play Button" (Comando en la Mac) + clic en la capa "Play Button", llénelo con negro, vaya a Filtro> Ruido> Agregar ruido, realice los ajustes especificados y presione "De acuerdo".
Con la selección aún activa, vaya a Filtro> Desenfoque> Desenfoque de movimiento y use la configuración indicada. Anule la selección y establezca el modo de fusión en "Superposición" y la opacidad en 45%..
Añade un pequeño detalle al "icono de juego". En una nueva capa, con la "Herramienta de recuadro elíptico" (M), creará círculos de tamaño aleatorio dentro del "icono de juego". Haz que sean negros, desmarca y ve a Filtro> Desenfoque> Desenfoque gaussiano, después de agregar tus configuraciones, simplemente configura el modo de fusión en "Color Burn" y la opacidad en 15% y listo..
Crea otra capa y haz exactamente lo mismo. Lo único que se debe cambiar es el color de los círculos aleatorios (los círculos se han vuelto blancos).
Comience a crear el fondo. Seleccione la capa de fondo y rellénela con # 363D41 y agregue un estilo de "Superposición de degradado". Usando la "Herramienta de recuadro elíptico" (M), cree un óvalo en una nueva capa y rellénelo con blanco. Luego, vaya a Filtro> Desenfoque> Desenfoque gaussiano, ingrese sus configuraciones y presione Aceptar. Cambia el modo de mezcla a "Superposición" y dale una opacidad del 65%.
Comienza a crear la sombra para el mini jugador. Cree una nueva capa, utilizando la "Herramienta de recuadro elíptico" (M) cree un óvalo debajo del jugador y llénelo de negro. Vaya a Filtro> Desenfoque> Desenfoque gaussiano y realice los ajustes necesarios. Seleccione la "Herramienta de borrador" (E) y realice estos ajustes: Diámetro - 150px; Dureza - 0%; Opacidad: 10%, luego úsela para borrar una pequeña parte de los lados de la sombra. Establezca el modo de fusión en "Color Burn" y la opacidad en 60%..
Haz una selección entera de los botones. Haga esto con Comando + Haga clic en la capa "botón grande" y luego presione Comando + Mayús + Haga clic en el "Botón Reproducir". Con la selección activa cree una nueva capa y rellénela con negro. Muévalo hacia arriba y vaya a Filtro> Desenfoque> Desenfoque gaussiano y realice los ajustes como en la imagen. Utilice la "Transformación libre" (Control + T) para distorsionar la sombra de fondo. Utilice la "Herramienta de borrador" (E) con los siguientes ajustes: Diámetro - 150px; Dureza - 0%; Opacidad - 10%, para borrar la sombra de los lados. Ajustar la opacidad al 50%..
El icono de Mini Player ya está listo. Muchas de estas técnicas se pueden recrear para que sean 100% vectoriales, esta es solo otra manera de hacer cosas que utilizan las capacidades de Photoshop. De nuevo, este es un tutorial particularmente útil para las personas que desean crear elementos para su uso en diseños web y de IU, ya que a menudo ya están utilizando Photoshop..
Espero que hayan disfrutado este tutorial y que haya sido útil..
Accentsconagua