Prendé la luz con photoshop
Producto Final Lo que va a crear
DescargarARCHIVOS DE CÓDIGO FUENTEEn este tutorial rápido punta vamos a explicar cómo crear un cambio plástico en Photoshop que se puede utilizar en sus diseños de la interfaz. Vamos a empezar!
Creación del Fondo
Crear un nuevo archivo. Establezca una anchura de 400 y la altura a 300 y la resolución de 72 PPI.
Crear un nuevo grupo y el nombre de la base. Uso de la herramienta Pluma (P) dibuja una forma igual a la que en el ejemplo. Ajuste el color a un gris oscuro # 242424 y aplicar los estilos de capa. Ahora, nuestra forma de la base se lleva a cabo.
Producto Final Lo que va a crear
DescargarARCHIVOS DE CÓDIGO FUENTEEn este tutorial rápido punta vamos a explicar cómo crear un cambio plástico en Photoshop que se puede utilizar en sus diseños de la interfaz. Vamos a empezar!
Creación del Fondo
Crear un nuevo archivo. Establezca una anchura de 400 y la altura a 300 y la resolución de 72 PPI.
Ahora que un nuevo grupo y el nombre de Fondo. Uso de la herramienta Rectángulo (U) dibuja una forma más grande que el lienzo, al igual que la del ejemplo. Ajuste el color a blanco # ffffff y aplicar los estilos de capa.
Creación del botón
Crear un nuevo grupo y el nombre de la base. Uso de la herramienta Pluma (P) dibuja una forma igual a la que en el ejemplo. Ajuste el color a un gris oscuro # 242424 y aplicar los estilos de capa. Ahora, nuestra forma de la base se lleva a cabo.
Crear un nuevo grupo y el nombre del botón. Uso de la herramienta Pluma (P) dibuja una forma como la que en el ejemplo. Ajuste el color a # ada397 y aplicar el estilo de capa.
Ahora, para agregar un poco de volumen y detalle para el botón. Dentro del grupo de botones de crear una nueva capa por encima de la forma del botón y el uso de la herramienta Pincel (B), establecer el color de primer plano a negro # 000000, el tamaño del pincel a 11px, y la dureza a 0 y trace una línea corta en la parte inferior parte del botón, como se ve en el ejemplo. Transformar esa capa en una máscara de recorte, mantenga presionada la tecla ALT y presionando entre las dos capas, o simplemente haga clic derecho sobre la última capa y seleccione Crear máscara de recorte.
Crear una nueva capa, y el uso de la herramienta Pluma (P) dibuja un negro # 000000 forma al igual que el del ejemplo. Ir a Filtro> Desenfocar> Desenfoque gaussiano, defina el radio de 1,5 píxeles y aplicar el filtro.Uso de la herramienta Borrador (E) defina el tamaño a 58 y de la dureza a 0, y cepillar el lado izquierdo de la forma borrosa (la forma de color rojo en el ejemplo de marca el lugar). Ajuste la opacidad de la capa a 18% y hacer que esta capa una máscara de recorte. Ahora hacer una nueva capa, seleccione la herramienta Pincel (B), establecer el tamaño de 15px y la dureza a 0, establezca el color # 92897f y dibujar una línea recta al igual que el del ejemplo. Cuando hayas terminado, transformar esta capa en una máscara de recorte también.
Hacer una nueva capa, seleccione la herramienta Pluma (P), ajustar el color a # c8b7a5 y dibujar una forma como la que en el ejemplo. Ir a Filtro> Desenfocar> Desenfoque gaussiano, defina el radio de 1,5 píxeles y aplicar el filtro. Uso de la herramienta Borrador (E) defina el tamaño a 58 y de la dureza a 0, y cepillar el lado izquierdo de la forma borrosa (la forma de color rojo en el ejemplo de marca el lugar). Ahora selecciona la herramienta Pincel (B), establecer el tamaño de 13px y la dureza a 0, ajustar el color a # c8b7a5 y dibujar una línea recta al igual que el del ejemplo. Haga esta capa una máscara de recorte.
Crear una nueva capa, y con la herramienta Pluma (P), establezca el color negro # 000000 y dibujar una forma como la que en el ejemplo. Ir a Filtro> Desenfocar> Desenfoque gaussiano, defina el radio de 1,5 píxeles y aplicar el filtro. Uso de la herramienta Borrador (E) defina el tamaño a 58 y de la dureza a 0, y cepillar el lado izquierdo de la forma borrosa (la forma de color rojo en el ejemplo de marca el lugar). Ahora configure el modo de fusión de la capa de superposición y la opacidad al 80% y transformar la capa en una máscara de recorte.
Hacer una nueva capa, y el uso de la herramienta Pincel (B), defina el tamaño de 10px, la dureza al 0%, el color a negro # 000000 y trace una línea en torno a unos pocos la parte inferior y derecha del botón como se ve en el ejemplo . Transformar esa capa en una máscara de recorte, y crear uno nuevo. Utilice la herramienta Pincel (B) con las mismas configuraciones que antes, y dibujar unas líneas más en el lado derecho del botón. Ahora tenemos que copiar la miniatura de la máscara vectorial de la forma del botón a nuestra capa. Manteniendo pulsada la tecla ALT, haga clic y arrastre la miniatura de la máscara vectorial de nuestra forma de botón a esta capa exactamente como se ve en el ejemplo. No vamos a hacer esta capa o capas de los futuros máscaras de recorte.
Vamos a hacer una nueva capa. Uso de la herramienta Pluma (P) dibuja otro negro # 000000 forma al igual que el del ejemplo. Ir a Filtro> Desenfocar> Desenfoque gaussiano, defina el radio de 1,5 píxeles y aplicar el filtro. Ajuste la opacidad de la capa a 20%. Hacer una nueva capa, y Uso de la herramienta Pincel (B) vamos a agregar algunos toques de luz. Establecer el tamaño de 2px, y la dureza a 0%, ajuste el color a # d5c8b5 y hacer un pequeño punto cerca de la esquina superior izquierda del botón. Haz otra capa, y el uso de la herramienta Pluma (P) vamos a añadir algunos detalles más. Ajuste el color a # dbcebe y dibujar las tres formas más similares a la que se ve en el ejemplo. Estos puntos le ayudará a dar más volumen y realismo a nuestro botón.
Crear un grupo nuevo y colocarlo en el Grupo Base. Nombre que Shadow. Uso de la herramienta Pluma (P) establecer el color a # 000000 y dibujar una forma como la que en el ejemplo. Ir a Filtro> Desenfocar> Desenfoque gaussiano, defina el radio de 1,5 píxeles y aplicar el filtro. Ajuste la opacidad de la capa a 20% y el uso de la herramienta Borrador (E), establecer el tamaño de 58px y la dureza al 0% y cepillar la parte inferior derecha de nuestra forma (círculo rojo indica el área en el ejemplo).
Imagen Final