Share
Las imágenes de fondo borrosas son una tendencia actual en diseño web en este momento y pueden agregar profundidad e interés a cualquier diseño de sitio web. En este tutorial, lo guiaré a través de todos los pasos para crear una llamativa unidad de héroe visual (lea: su mensaje de marketing clave) perfecto para una presentación de diapositivas o una región de banner de su próximo sitio web.
En este tutorial nos centraremos en el uso de técnicas de photoshop no destructivas, editables y escalables donde sea que podamos incluir filtros inteligentes, enmascaramiento y formas vectoriales. Si bien puede ser un poco más de trabajo, tomarse el tiempo para asegurarse de que su producto final pueda editarse completamente para responder a futuros cambios merece la pena..
Listo para saltar? Arranca Photoshop y comencemos.
Estaremos usando una cantidad de recursos que no están incluidos en los archivos de origen.
Nota: Photoshop CS6 se utilizó para crear este tutorial; sin embargo, no es necesario para obtener el resultado final, puede usar versiones anteriores sin ningún problema..
También estoy en un sistema operativo Windows, así que me quedo con Ctrl y Alt para describir las teclas de acceso directo. En una Mac, Ctrl → Comando y Alt → Opción.
Comencemos configurando un nuevo documento y configurando nuestra luz global para todos los efectos de capa.
Establezca la Luz global en un ángulo de 90 ° y una altitud de 45 ° (Capa → Estilo de capa → Luz global).
Nota: En el diseño de la interfaz de usuario, encontrará que Global Light a menudo se establece en 90 °, por lo que cambiar la configuración global antes de comenzar con un nuevo proyecto de interfaz de usuario es un buen hábito para entrar!
Cree un nuevo documento con dimensiones de 960px x 568px (una proporción de 16: 9) y contenidos de fondo transparentes.
A continuación, importaremos nuestra imagen de fondo y la cambiaremos de tamaño para que se ajuste al nuevo documento.
Abra la imagen del Ayuntamiento de Toronto en un nuevo documento y cambie el tamaño de la imagen a 960px x 720px (Imagen → Tamaño de imagen).
Selecciona toda la imagen. (Ctrl + A), y copiarlo en el portapapeles (Ctrl + C). Regrese a nuestro nuevo documento y pegue la imagen en una nueva capa (Ctrl + V).
Usando la herramienta de mover (V), arrastre la imagen hacia arriba para alinear el borde inferior de la imagen con la parte inferior del documento.
Nombra esta capa 'ayuntamiento'
Duplique la capa 'ayuntamiento' haciendo clic con el botón derecho en la capa en el panel de capas y seleccionando 'Duplicar capa'. Renombra esta nueva capa 'city hall blur'
A continuación, agregaremos un filtro inteligente a la capa. Para hacer esto, necesitamos convertir la capa 'city hall blur' en un objeto inteligente.
Haga clic derecho en la capa 'city hall blur' y seleccione 'Convertir a objeto inteligente' del menu.
Agreguemos un Desenfoque gaussiano a nuestra imagen de fondo para darle ese aspecto 'a través de la ventana de la cafetería': (Filter → Blur → Gaussian Blur). Dale un radio de 14.0 píxeles..
Nota: Esta es la primera de nuestras técnicas no destructivas que usaremos hoy. Notará en la imagen de arriba que el Desenfoque gaussiano se ha agregado como un "Filtro inteligente" y no se aplica a la imagen en sí. Eso significa que podemos cambiar la configuración, agregar filtros inteligentes adicionales o eliminar el efecto por completo, todo sin dañar la imagen original.
Otra cosa a tener en cuenta es que si cambia la visibilidad de la capa 'ayuntamiento', notará que se ve un poco de transparencia en el borde de la imagen debido al efecto de desenfoque en la capa 'desenfoque del ayuntamiento'. Dejar visible la capa del 'ayuntamiento' suaviza los bordes muy bien.
Como es, la imagen es un poco oscura. Aligeremos las cosas y démosle una sensación luminiscente agregando una nueva capa de ajuste de curvas (Capa → Nueva capa de ajuste → Curvas) y arrastrando el mando central hacia arriba y ligeramente hacia la izquierda, como se muestra arriba.
Gran trabajo - ese es el fondo todo terminado. Tomemos un momento para mover estas capas a un nuevo grupo (Ctrl + G) llamado "Fondo" para mantener el documento de Photoshop limpio y ordenado.
Cree una nueva capa llamada 'panel de vidrio inferior' y use la herramienta de marco (METRO) para crear una selección rectangular de 960px de ancho y 120px de alto. Rellena la selección con blanco (#ffffff) (Ctrl + Bkspace).
Haga doble clic en la capa para abrir los efectos de capa y aplicar la siguiente configuración:
En las opciones de fusión, establezca la opacidad al 27% y la opacidad de relleno al 0%
Establecer un trazo interior de 1px, color #cecece.
Establezca una sombra interior blanca (#ffffff) con un Modo de fusión establecido en Linear Dodge (agregar) y una opacidad del 15%. Establece la distancia a 1px y el tamaño a 6px.
Establezca una Superposición de degradado lineal de 90 ° que oscile entre # 787878 en 0% y #ebebeb en 100%. Cambia el modo de fusión a Luminosidad y ajusta la opacidad al 55%.
El panel de vidrio se ve bien, pero tenemos que quitar una parte de la parte superior para dejar espacio para nuestro botón de llamada a la acción. Para hacer esto, usaremos una máscara vectorial, otra técnica de photoshop no destructiva y editable..
Abra la ventana de rutas (Ventana → Caminos) y haga clic en el 'Crear nuevo camino' icono en la parte inferior del panel.
Cambiar el nombre de la nueva ruta 'panel mask'.
Usando la herramienta de forma (U) configúralo en Ruta, crea un rectángulo de 960px x 120px en la parte inferior del documento, cubriendo nuestra capa 'panel de vidrio inferior'.
Ahora, configura la herramienta de forma a "Restar forma frontal" y dibuja un rectángulo redondeado de 420px x 100px con un radio de 50px.
Una vez que tenga los dos caminos, selecciónelos con la herramienta de selección directa (UNA) y manteniendo presionada la tecla Mayús mientras haces clic en cada ruta. Use la herramienta de alineación para alinear los centros horizontales, y empuje el rectángulo redondeado en su lugar para que sus puntos centrales verticales coincidan con el borde superior del rectángulo, como se muestra arriba.
Asegúrese de que la capa 'panel de vidrio inferior' esté seleccionada en el panel de capas y nuestra ruta de 'máscara de panel' esté seleccionada en el panel Rutas.
En la parte inferior del panel de rutas, haga clic en 'Crear nueva máscara' Haga clic en el icono una vez para crear una máscara de capa y luego vuelva a hacer clic para crear una máscara vectorial que saque una primicia de nuestro panel de vidrio inferior. El panel de capas debe verse como la imagen de arriba..
Nota: Debido a que nos tomamos el tiempo de usar rutas vectoriales para crear nuestra máscara en lugar de usar una imagen rasterizada, nos brindamos la capacidad de cambiar, editar, agregar, eliminar y escalar nuestra máscara en cualquier momento sin perder calidad en ningún momento..
Si todo ha ido según lo planeado, su trabajo en curso debería verse como la imagen de arriba.
A continuación, crearemos un fondo para nuestro botón..
Crear una nueva capa (Ctrl + Shift + N) y el nombre 'fondo de botón'. Usando la herramienta de forma configurada en 'Forma', cree un rectángulo redondeado de 410px x 90px con un radio de esquina de 45px. Establecer el relleno a #ffffff.
Centre la forma en el centro de la 'pala', dejando 6px entre la parte inferior de la forma y el borde superior del 'panel de vidrio inferior'.
Abra el panel de efectos de capa para la capa 'botón de fondo' y configure los siguientes estilos de capa:
En Opciones de fusión, establezca la Opacidad en 20%, el modo de fusión en Normal y la Opacidad de relleno en 30%.
Establezca la sombra interior en un modo de fusión Linear Burn (# 000000) con una opacidad del 9%. Establezca la Distancia a 1px y el tamaño a 0px.
Establezca una sombra paralela con un modo de fusión de Dodge lineal (Agregar), (#ffffff) y la Opacidad al 34%. Establezca la distancia en 1px y el tamaño en 0px.
A continuación, comenzaremos a trabajar en el propio botón..
Crea una nueva capa llamada 'botón principal'. Dibuje un rectángulo redondeado utilizando el conjunto de herramientas de forma en 'Forma' de 390 píxeles de ancho por 70 píxeles de alto y un radio de esquina de 35 píxeles. Establecer el relleno a # 007dba.
Alinee los centros vertical y horizontal de las capas 'botón principal' y 'fondo del botón'.
Abre el panel de efectos de capa y aplica los siguientes ajustes:
Establezca un trazo interno de 1px con un modo de fusión y un gradiente lineal de 90 ° que va desde # 000000 en 0% hasta #ffffff en 100%
Establezca una Sombra interior (#ffffff) con un Modo de fusión de Dodge lineal (Agregar) y una opacidad del 7%. Establezca la distancia en 2px y el tamaño en 1px.
Agregue un #ffffff Color Overaly configurado a un modo de fusión Lineal Dodge (Agregar) y marque la opacidad hasta el 13%.
Establezca la Superposición de degradado con un modo de fusión de quemado lineal, una opacidad del 24% y un degradado lineal de 90 ° con # 000000 al 0% y #ffffff al 100%.
Establezca la Sombra paralela con un Modo de mezcla de Multiplicar, una opacidad del 30%, # 000000 y establezca la distancia en 2px y el tamaño en 4px.
Nota: Es posible que haya notado que no configuramos la superposición de degradado como azul oscuro a azul claro (lo que habría dado como resultado un efecto similar). La razón para usar una forma y el gradiente de quemado lineal de negro a blanco es que ahora podemos cambiar el color del botón muy fácilmente cambiando su relleno. Pruébalo ahora y experimenta cambiando el relleno a otro color.
Para agregar algo de textura al botón, agregaremos una superposición de ruido..
Crea una nueva capa y llámala 'ruido'.
Seleccione todo el documento (Ctrl + A) y rellena el fondo con #ffffff (Ctrl + Bkspace).
Asegurarse de que su primer plano se establece en negro y su primer plano se establece en blanco (RE), agregue un 200% de ruido uniforme, asegurándose de que la casilla de verificación 'Monocromática' esté marcada (Filtro → Ruido → Agregar ruido…).
Seleccione la capa 'Ruido' y configúrela como máscara de recorte (Capa → Crear máscara de recorte), lo que limita el ruido solo a la forma del botón.
Establezca el modo de fusión de la máscara de recorte en Multiplicar y la opacidad en 5%.
El siguiente paso es agregar un pequeño resaltado a la parte superior del botón (lo que cuenta son las pequeñas cosas).
Duplique la capa 'botón principal' y arrástrela sobre la máscara de recorte de ruido. Establece el relleno a 0%.
Haga clic derecho en la nueva capa 'resaltar' y borre los estilos de capa seleccionando 'Clear Layer Style'.
Abre el panel de efectos de capa y aplica los siguientes ajustes:
En la pantalla Opciones de fusión, marque la casilla de verificación "Máscara de capa oculta efectos".
Establezca una carrera interior de 2px establecida en 0% de opacidad.
Nota: Esto efectivamente 'inserta' el siguiente estilo de capa lejos del borde del botón.
Establezca una Sombra Interior con un Modo de Fusión Lineal (Agregar), establezca un 18% de Opacidad y use #ffffff.
Establezca la distancia en 4px y el tamaño en 4px.
Seleccione la capa 'resaltar' y agregue una nueva máscara (Capa → Máscara de capa → Revelar todo).
Con la herramienta de degradado, dibuje un degradado lineal en el botón, como se muestra arriba. Establezca el gradiente utilizando tres paradas # 000000, con el 50% establecido en 0% de opacidad.
Si has seguido de cerca, tu botón ahora debería verse como esto:
Sin una fuente de luz, nuestro punto culminante se ve un poco fuera de lugar. Agregaremos un bonito efecto de brillo para levantar el botón y el fondo..
Crea una nueva capa y llámala 'resplandor'.
Usando la herramienta de degradado (SOL) configurado en radial y blanco a transparente, dibuje un gran degradado blanco sobre el botón como se muestra en la imagen de arriba.
Haga una selección de marquesina presionando Ctrl + haciendo clic en la miniatura del 'fondo de botón' en el panel de capas.
Crear una máscara de capa (Capa → Máscara de capa; → Ocultar todo).
Finalmente, cambie el modo de fusión de la capa 'resplandor' a Dodge lineal y opacidad del 50%.
Ahora que se ha creado la forma del botón, agreguemos algo de texto de llamada a la acción.
Usando las manijas de la forma del botón como puntos de referencia, arrastre tres guías como se muestra para ayudarlo a colocar las formas de texto e íconos del botón.
Usando la herramienta Tipo (T), ingrese su texto en la fuente League Gothic con un kerning de 60, un tamaño de fuente de 14pt y un color de # dce2e5
Establezca el texto en la guía izquierda y alinee el texto con el centro vertical de la forma del botón.
Abra la ventana de efectos de capa y aplique los siguientes efectos:
Establezca una Sombra interior (#ffffff) blanca con un Modo de fusión de 'Aligerar' y una Opacidad del 100%. Establezca la distancia en 1px y el tamaño en 0px.
Establezca la sombra paralela en el modo de fusión de 'Color Burn', un color de # 00022a y una opacidad del 24%..
Establezca la distancia en 2px y el tamaño en 1px.
Para finalizar el botón, necesitamos agregar el ícono y una línea divisoria. Empecemos con el icono..
Seleccione la herramienta de forma personalizada (U), haga clic en el botón de configuración y seleccione 'Cargar formas'.
Navegue hasta el archivo 'retro_hand.csh' suministrado en los recursos y cárguelo en su lista de formas actual.
Crea una nueva capa y llámala 'icono de mano'.
Con la forma de la mano seleccionada y asegurándose de que se aplique la configuración de 'Proporciones definidas', dibuje una forma de 19 px de alto y 34 px de ancho.
Rellena la forma con el color # dce2e5.
Abre el panel de efectos de capa y aplica los siguientes efectos:
Establece una sombra interior con un modo de mezcla de Aligerar (#ffffff) con una opacidad del 100%. Establezca la distancia en 1px y el tamaño en 0px.
Establezca la Sombra con un modo de fusión de Color Burn utilizando un color de # 00022a y una opacidad del 24%. Establezca la distancia en 2px y el tamaño en 1px.
El siguiente paso es agregar una línea que separe el ícono del texto..
Dibuja una línea negra de 1px x 70px usando la herramienta de forma (U) y colóquelo en el centro del espacio entre el texto y el icono de la mano (use el panel de información para ayudarlo aquí).
Aplicar los siguientes estilos de capa:
Establezca la Opacidad de relleno de la forma en 0% y marque la 'Máscara de capa oculta efectos' caja.
Establezca la superposición de color en un color de # 044b71, un modo de combinación de superposición y una opacidad de 73%.
Establezca la Superposición de degradado en un degradado lineal de 90 ° con # 000000 en 0% y #ffffff en 100%. Establezca el Modo de fusión en Quemadura lineal y reduzca la Opacidad al 9%.,
Establezca el brillo exterior en #ffffff, el modo de fusión en pantalla, la opacidad en 26% y el tamaño en 1px.
A continuación, necesitamos una máscara de capa para atenuar los bordes ásperos de la línea.
Agregue una máscara de capa a la capa 'separador de línea' haciendo clic en el icono 'Máscara de capa' en la parte inferior del panel de capas.
Con un pincel negro suave (tamaño ~ 55px y 0% de dureza), pinte ambos extremos de la línea. Estarás buscando crear un efecto de atenuación sutil. Las áreas en rojo en la imagen de arriba se pueden usar como referencia.
¡Genial! Ahora hemos terminado nuestro botón. Echemos un vistazo a lo que hemos creado hasta ahora:
Antes de pasar a los pasos finales del proyecto, tomemos un momento para asegurarnos de que todas nuestras capas estén bien nombradas y agrupadas.
Su panel de capas debe verse algo como esto:
Consejo rapido: ¿Quieres una forma fácil de contraer todos los efectos de capa para cada capa? Agrupe las capas y en la capa superior, Alt + Haga clic en la flecha al lado del icono de fx. Todos los efectos de las capas debajo de él también se colapsarán, una excelente manera de mantener el panel de capas manejable!
Vayamos al componente de tipografía del proyecto..
Usando la herramienta Tipo (T), ingrese el texto como dos capas separadas con la configuración que se muestra arriba.
Dibuje dos guías, una a 130 px de la parte superior del documento y la segunda a 258 px. Coloque el borde superior de las capas de texto en las guías..
Selecciona ambas capas en el Panel de Capas (Ctrl + Clic), hacer una selección de todo el documento (Ctrl + A) y alinear los centros horizontales (Capa → Alinear capas a selección → Centros horizontales).
Ahora, abra el panel de fx para la capa 'Servicios profesionales' y agregue los siguientes efectos:
Configura la sombra interior con un modo de mezcla de multiplicación, un color de # 585858 y una opacidad de 54%.
Establezca el Ángulo en 135 ° (asegurándose de que Global Light no esté marcada), y establezca la Distancia en 1px, Choke en 100% y el Tamaño en 0px.
Establece un brillo interior con un modo de pantalla de fusión, una opacidad del 59% y un color de #ffffff. Establezca el Estrangulador en 100% y el tamaño en 1px.
Establezca la Superposición de degradado con un modo de fusión de quemado lineal, una opacidad del 18% y un ángulo de 90 °. El gradiente en sí es negro → negro transparente.
Establezca una Sombra con un Modo de fusión de Quemadura lineal, un color de # 000000 y una opacidad del 24%. Establezca la Distancia a 2px, el Spread al 8% y el Tamaño a 3px.
En el panel de capas, desplácese sobre el icono fx de la capa 'servicios profesionales', mantenga Alt + Clic y arrastre el icono a la capa 'precios excepcionales' para copiar el estilo de capa.
¡Ya estamos en la recta final! Vamos a completar el elemento tipográfico del proyecto..
Cree una nueva capa y agregue la palabra "En" con la herramienta Tipo. En el panel Carácter, establezca la fuente en Wisdom Script AI, el tamaño de la fuente en 12 puntos y el color en blanco.
Seleccione las tres capas de texto en el panel de capas (Ctrl + Clic), cambiar a la herramienta Mover (V), y usa las opciones de alineación en la barra de propiedades para centrar las capas (Alinear capas horizontales) y luego agregue una cantidad uniforme de espacio entre las tres líneas de texto (Distribuir centros verticales).
Abre el panel de efectos de capa y aplica los siguientes efectos:
Cambia la opacidad de relleno en el panel de opciones de fusión al 42%.
Agregue una Sombra interior blanca (#ffffff) con un Modo de fusión configurado en Pantalla y una Opacidad del 22%. Establezca la Distancia a 1px y el Tamaño a 0px.
Agregue una Superposición de degradado lineal de 90 ° (#ffffff → #dedede) con un Modo de fusión establecido en Linear Dodge (Agregar). Reducir la opacidad al 16%..
Agrega una sombra negra y establece la Quemadura lineal y una opacidad del 8%. Establezca la Distancia a 1px y el Tamaño a 0px.
Ahora, agreguemos algunas formas decorativas a la sección de texto del proyecto para unir todos los elementos.
Arrastre cuatro guías nuevas desde la regla (si no puede ver la regla, seleccione Ver → Reglas) y alinéelos con los bordes del texto, como se muestra arriba.
Esto nos ayudará a alinear nuestras barras en los siguientes pasos..
Crea una nueva capa llamada 'barras izquierda'.
Alineado en el centro a la barra transversal de la 'A' en la capa de texto 'At', dibuje un rectángulo redondeado de 275px de ancho por 4px de alto con un radio de esquina de 4px. Establecer el relleno a blanco (#ffffff).
Asegurarse de que la configuración de componentes de forma se establece en 'Combinar formas', dibuje dos formas más idénticas y coloque una encima y otra debajo del primer rectángulo redondeado como se muestra arriba.
Empuje las formas en posición con la tecla de flecha para colocar un espacio de 2 píxeles entre cada una de las formas. Usa la herramienta de zoom (Z) y la rejilla de píxeles (Ver → Mostrar → Cuadrícula de píxeles) para ayudarte aquí.
Asegúrese de que el grupo de formas esté posicionado 10px a la izquierda de la guía en el borde izquierdo de la capa 'At', como se muestra arriba.
Acercar al borde izquierdo de nuestro grupo de formas. (Z). Usando la herramienta Selección directa (UNA), seleccione los tres controles finales del rectángulo central y, presionando Mayús, presione la tecla de flecha izquierda dos veces para reducir el ancho de la forma en 20 px (Mayús + flecha la tecla mueve cualquier elemento en incrementos de 10px).
Repita este proceso para el rectángulo inferior, esta vez reduciendo el ancho de la forma en 30px.
Propina: La forma más fácil de seleccionar los controladores es arrastrar un cuadro alrededor del final de la forma con la herramienta de selección directa, como se muestra en la imagen de arriba.
Abra el panel de efectos de capa para la forma de las 'barras de la izquierda' y aplique las siguientes configuraciones:
En el panel Opciones de fusión, establezca la opacidad de relleno en 20%.
Establece una Sombra interior con un color blanco (#ffffff), un Modo de fusión de pantalla y una opacidad del 22%. Establezca la Distancia a 1px y el Tamaño a 0px.
Agregue un gradiente lineal de 0 ° establecido a Lineal Dodge (Agregar) y una opacidad del 16%. Establezca el gradiente con los valores #ffffff en 0% y #dedede en 100%.
Agregue una Sombra paralela con una distancia de 1px, un color de # 000000 y un Modo de fusión de quemado lineal. Ajusta la opacidad al 9%..
Duplicar la capa 'barras izquierda' (Clic derecho → Duplicar capa ...) y nombra la nueva capa 'barras derecha'.
Voltear la capa horizontalmente (Editar → Transformar → Girar horizontal) y coloque la capa en el lado derecho de la capa 'At' como se muestra arriba.
¡Felicidades por hacerlo a través de este tutorial! Apaga tus guías (Ctrl + H), cambiar el tamaño del zoom al 100% (Ctrl + 1) y admira tu trabajo:
Tomemos un momento para revisar algunas de las técnicas clave que cubrimos en este tutorial:
Gracias por estar conmigo hasta el final, y espero que hayas aprendido algunos trucos de Photoshop y de flujo de trabajo que te ayudarán en tu próximo proyecto. Si alguno de los pasos lo ha dejado rascándose la cabeza, deje un comentario a continuación. Me aseguraré de responder cualquier pregunta que tenga..
Accentsconagua