Share
No solo los pinceladas de acuarela se han convertido en una tendencia popular en el diseño web moderno, sino que también las capas avanzadas de transparencia (o lo que yo llamo, translucidez). El nuevo diseño de Envato ha recibido muchas felicitaciones por el uso de este efecto, y este tutorial le mostrará cómo crear un efecto similar, mientras lo combina con otras tendencias web populares..
Echa un vistazo a la imagen que estaremos creando..
Vamos a configurar nuestro documento. Tiendo a crear mis sitios con un ancho fijo de 960px y una altura variable. Para este tutorial, elegí una altura de 800 px para garantizar que tengamos suficiente espacio para todas las secciones de contenido que nos gustaría incluir. La creación del documento original en el tamaño exacto que desea que sea el sitio facilita la creación de las guías.
A continuación, vamos a configurar nuestras guías. Arrastre las directrices de las reglas del documento a los cuatro bordes de su documento.
Ahora necesitamos asignar algo de espacio para el fondo que crearemos. Vaya a Imagen> Tamaño del lienzo y expanda el documento a 1100 píxeles por 1000 píxeles. Esto debería darnos un montón de área para completar nuestro fondo único.
Rellena la capa inferior con blanco (Shift + F5). Renombra esta capa como "fondo". Tu documento ahora debería verse como la imagen de abajo..
Haga clic con el botón derecho en la capa "fondo" y elija Opciones de fusión. Agregaremos una Superposición de degradado a nuestra capa "de fondo". Elegí un degradado de tres colores con algunos azules y bronceados, sin embargo, básicamente puedes elegir cualquier color que desees. La belleza de usar las opciones de fusión para el fondo es que, en cualquier momento, puede cambiar fácilmente los colores y ajustar el degradado al gusto..
Tu documento ahora debería verse así:
Es posible que desee omitir este paso, sin embargo, siento que la pendiente pronunciada es un poco demasiado brillante para este diseño. Agregaremos algo de ruido para atenuarlo un poco..
Crear una nueva capa. Renombra esta capa "ruido". A continuación, rellene la capa con blanco (Edición> Relleno). Una vez que tenga la capa llena de blanco, necesitamos agregar algo de ruido aplicando Filtro> Ruido> Agregar ruido. Establezca la cantidad en 400%, con una distribución uniforme y no monocromática. Todos los colores del ruido nos darán mucha más profundidad en nuestro fondo..
Establezca la capa de "ruido" en Multiplicar, y establezca la Opacidad al 5%. Esto debería darnos lo suficiente grano para atenuar el gradiente.
En primer lugar, deberá descargar algunos pinceles de Brush Stroke, si aún no los tiene. Aquí hay algunos que he usado en el pasado: "Trazo de pincel".
Cree una nueva capa, encima de las capas "de fondo" y "ruido". Cambie el nombre de esta capa a "brush1" (crearemos varias capas como esta). Establezca esta capa en Multiplicar. Elija un color cálido en primer plano (para compensar los tonos fríos) en nuestro fondo azul degradado. Elegí un marrón cálido: # 996726. Seleccione el pincel que desea dibujar y colóquelo en la parte superior izquierda del documento, asegurándose de que el trazo del pincel esté fuera de los límites de sus pautas (queremos que el fondo se expanda hacia afuera).
Ajuste la opacidad de la capa al 50% (para que se vea la granulación). Repita los dos pasos anteriores para los múltiples cepillos que se adapten a su gusto. Tu fondo ahora debería verse como la imagen que se muestra a continuación.
Enhorabuena, tu fondo personalizado y único está completo. Ya que colocó los pinceles al azar, lo diferenciará de aquellos diseños que compraron un fondo de stock similar.
Primero, necesitaremos agarrar la herramienta Rectángulo redondeado y establecer el radio a 20px. Sobre todas las capas de fondo (pinceles + ruido + degradado), arrastre y dibuje un rectángulo redondeado dentro de las pautas originales que configuramos. Su rectángulo debe ser de 960px por 800px. Cambie el nombre de "capa" a esta capa y haga clic con el botón derecho en la capa, y seleccione Rasterizar capa (haremos algunos cambios en esta capa más adelante, así que es mejor que eliminemos esto ahora).
Para hacer que la capa del "contenedor" se vea opaca, necesitaremos hacer algunas cosas:
Una vez que haya configurado todos los estilos de capa, su capa de "contenedor" debería verse así:
Para asegurarnos de mantener un relleno consistente en la capa de "contenedor" (asumiendo que no queremos contar nuestros píxeles cada vez que colocamos un elemento), agreguemos guías a 40px dentro de nuestra caja de guía original.
Como viste en la Vista previa final, queremos que la navegación se vea como está hundido o separar de la capa "contenedor". Para hacer esto, solo eliminaremos algo de la capa "contenedor" y dejaremos que los Layer Style hagan su magia..
Para crear la selección para el recorte, crearemos una nueva forma rectangular en el espacio que queremos que tenga el recorte de navegación. Use un radio de 10px aquí (que es la mitad del radio de la capa del "contenedor"), para asegurarse de que la esquina tenga un espaciado consistente donde se redondea.
Si es necesario, mueva la forma a la parte superior derecha de sus líneas de guía de relleno interno. Una vez que tenga la capa en su lugar, presione Comando y haga clic en la capa en la Paleta de Capas para que se seleccione. Elige la capa "contenedor" y pulsa Eliminar. Ahora puede ocultar su rectángulo redondeado de 10px para la navegación, y su capa de "contenedor" ahora mostrará un recorte como se ve a continuación.
Fíjate en lo suaves que son las esquinas redondeadas. Si hubiéramos seleccionado un área cuadrada y redondeado la selección, las esquinas recortadas se habrían visto muy entrecortadas. Además, ¿no es agradable cómo los estilos de capa se aplican automáticamente a la capa, y todos los biselados y sombras que agregamos se ven geniales?.
Ahora necesitamos algo de texto. Elegí Rockwell como mi fuente (viene de serie con MS Office, pero también se puede comprar). Distribuya uniformemente los elementos de navegación dentro del recorte como se muestra.
Queremos darle al texto una grabado en piedra efecto, y para hacer esto, agregamos una sombra paralela al texto (también podríamos agregar una sombra interna, sin embargo, hace que el texto aparezca más delgado de lo que realmente es). Aquí están los ajustes de sombra que uso generalmente.
Para lograr el efecto deseado, crearemos una nueva capa justo debajo del texto que agregamos para la navegación. Cambie el nombre de esta capa a "navegación activa". Rellena esta selección con cualquier color (no importa).
A continuación, necesitaremos agregar algunos estilos de capa a la capa de "navegación activa". Los he proporcionado a continuación (necesitará una Sombra, Superposición de degradado, Trazo y Resplandor interno).
Duplique su capa de "navegación activa" (Comando + J) y aplane todos los estilos de capa. Cambie el nombre de esta capa a "barra de navegación activa aplanada". Vamos a aplicar algunos cultivos a esta capa, y ya no queremos que los estilos de capa.
Use su herramienta de selección para eliminar el trazo y el brillo interno de la parte superior e inferior de la capa "barra de navegación activa".
Ahora necesitamos agregar las sombras para hacer que la capa de "navegación activa" se vea como si estuviera tejida a través de la capa de "contenedor". Crearemos estas sombras utilizando la herramienta Elipse..
Cree una elipse negra que sea 20px más ancha que el ancho de la capa "active nav flattened" y aproximadamente 5px de altura. Centre su elipse en el borde superior de la capa "active nav flattened". Haga clic con el botón derecho en la capa y seleccione Rasterizar capa. Cambie el nombre de esta capa a "sombra activa superior".
Necesitamos desenfocar un poco la elipse, ir a Filtro> Desenfocar> Desenfoque gaussiano y aplicar con un radio de 2px. Ahora que la elipse se parece más a una sombra, continuaremos y eliminaremos el 50% superior de la sombra.
Ajuste la opacidad de la capa "sombra activa superior" al 75%. La sombra superior está hecha. Para crear la sombra inferior, duplique la capa (Comando + J), aplique Edición> Transformar> Girar vertical, y mueva la sombra a la parte inferior de la "capa activa del plano de navegación".
Antes de llegar al logo, terminemos un poco nuestro encabezado. Primero añadiremos un par de guías más. Dibuje una guía horizontal de 40 px por debajo de la parte inferior del recorte de navegación como se muestra.
Vamos a crear nuestra línea de separación, que dará la impresión de que la capa "contenedor" tiene un grabado o está plegada en este punto. Para crear este efecto, dibuje una línea horizontal de altura de 1px en una nueva capa que se ejecute a lo ancho de la capa "contenedor". Llena tu línea horizontal con un verde oscuro (elegí la mía del fondo). Cambie el nombre de esta capa por "línea de separación".
Para obtener la sensación de grabado, duplique la capa "línea de separación" y rellene esta capa con blanco. Mueva esta capa 1px hacia abajo para que la parte superior toque la capa original de "línea de separación".
Ahora tenemos que añadir nuestro logo. No soy un gran diseñador de logotipos, así que elegí una fuente genial (Gill Sans) y escribí un gran texto en la esquina superior izquierda. Al igual que hicimos el recorte para la navegación, realice una selección del texto del logotipo y luego bórrelo de la capa "contenedor". Una vez más, los estilos de capa se ajustarán a la nueva forma y se actualizarán..
El asterisco se realizó utilizando exactamente la misma técnica que el elemento de navegación activo, para que parezca que sobresale de la capa "contenedor".
Una vez más, vamos a utilizar la misma técnica de recorte que usamos para la sección de navegación.
Cree un rectángulo redondeado con un radio de borde de 10px. Asegúrese de permitir un espacio de 40px en todos los lados (creamos las guías anteriormente para ayudar con esto).
Comando: haga clic en la capa de rectángulo redondeado para seleccionarla, luego seleccione la capa "contenedor" y presione Eliminar. Puede eliminar el rectángulo redondeado ya que no lo usaremos más..
Luego debemos crear las flechas en cada lado, para que pueda tener varios elementos de la cartera en la página principal y alternarlos en una especie de presentación de diapositivas. Para hacer esto, crea un círculo de 40px de diámetro con la herramienta Shape. Mueva el círculo en su lugar en el lado izquierdo, centrándolo en el borde del recorte.
Duplique el círculo para el otro lado y céntrelo nuevamente en el otro borde del recorte (horizontal y verticalmente).
Ya que no estamos trabajando con máscaras vectoriales aquí (y nuestro Relleno se establece en 0% en la capa "contenedor"), debemos ajustar esto momentáneamente para asegurarnos de que podemos agregarlo a la capa "contenedor".
Por lo tanto, vamos a establecer el relleno de la capa "contenedor" en 100%. Ahora fusione hacia abajo (Comando + E) ambos círculos que creamos para las flechas en la capa del "contenedor". Una vez que se haya fusionado, puede volver a establecer el Relleno de la capa "contenedor" en 0%. Aquí está su efecto deseado:
Observe cómo los dos círculos ahora se han convertido en parte de la capa "contenedor".
A continuación tendremos que añadir algunas flechas. Podrías crearlos fácilmente usando corchetes, sin embargo elegí crear mi propia.
Cree un rectángulo redondeado con un radio de borde de 3px, ancho de 20px, altura de 6px; y colócalo justo arriba de donde quieres la flecha. Transforma y rota (Comando + T) el rectángulo redondeado en 45 grados en sentido contrario a las agujas del reloj para que se incline. Así es como vamos a hacer el punto a la flecha..
Duplique el rectángulo redondeado (Comando + J) y Edición> Transformar> Voltear vertical. Mueva la capa en su lugar, de manera que las esquinas izquierdas queden alineadas formando un soporte. En la paleta de capas, seleccione ambos rectángulos redondeados y combine las capas (Comando + E). Cambiar el nombre de la capa "flecha izquierda". Aquí es cómo debe verse su flecha:
Necesitamos agregar algunos estilos de capa a la flecha para que se ajuste al resto del diseño de la siguiente manera:
Duplique la capa "flecha izquierda" (Comando + J) y Edición> Transformar> Girar horizontal. Cambie el nombre de esta capa a "flecha derecha" y muévala al lado derecho del recorte.
Una última cosa que debemos agregar a nuestra área de artículos de la cartera es una sombra para darle profundidad. Agregue un degradado transparente a negro en la parte inferior del recorte como se muestra.
Para eliminar cualquier gradiente de exceso fuera del recorte, simplemente presione Comando + Clic en la capa "contenedor" y presione Eliminar. Colocaremos nuestras capturas de pantalla debajo de esta capa para dar la ilusión de profundidad.
Tome una captura de pantalla de su sitio favorito (utilicé uno de mi propio portafolio, ryanscherf.net). Cambiar el nombre de esta capa a "captura de pantalla".
Agregue un Trazo y una Sombra interior a la capa de "captura de pantalla", use sus estilos de capa:
Duplique la capa de "captura de pantalla" y aplane todos los estilos de capa (combine la capa de "copia de captura de pantalla" con una nueva capa en blanco). Gire la capa de "captura de pantalla" 45 grados en sentido contrario a las agujas del reloj, tal como lo hizo con las flechas en el Paso 9.
Coloque la captura de pantalla en la parte inferior izquierda del recorte de la cartera, asegurándose de que la parte superior de la captura de pantalla sobresale del recorte (vamos a darle un poco de profundidad) y que parezca que está escondido detrás de la capa del "contenedor". Recorte cualquier exceso de la "copia de captura de pantalla" desde la parte inferior como se muestra.
Ahora que tenemos nuestra captura de pantalla en su lugar, agreguemos una breve descripción a la derecha. Nada demasiado sofisticado aquí, pero todavía intentamos mantener nuestro tema de profundidad y capas.
Crea un texto con un color casi blanco (o muy claro azul / verde). Usa la misma sombra aguafuerte técnica desde la navegación (ángulo a -60 grados, distancia de 1px y tamaño de 1px).
Crea un cuadrado opaco detrás del texto. Utilicé una capa totalmente negra, con un 30% de opacidad. El efecto debería verse así:
Necesitamos algunos puntos de navegación como las vistas de iPhone. Crearemos un punto activo, que usará exactamente los mismos estilos de capa que la capa de "navegación activa" (ojalá no lo hayas eliminado), y un punto inactivo que usa los estilos de capa de la capa de la "flecha izquierda".
Nota: la reutilización de los estilos de capa es importante no solo porque ahorra tiempo al tener que recrear estilos similares, sino también porque mantendrá su diseño consistente en todo.
Cree un círculo con la herramienta Forma, con un diámetro de 20 px (me gustan los puntos de navegación grandes, ya que a veces me resulta muy difícil hacer clic y navegar). Haga clic con el botón derecho en la capa "navegación activa" y seleccione Copiar estilo de capa. Seleccione el círculo de la paleta de capas, haga clic con el botón derecho y seleccione Pegar estilo de capa.
Repita estos pasos para tantos puntos inactivos como desee, asegurándose de usar el estilo de capa de la capa "flecha izquierda".
Necesitamos que nuestros visitantes sepan exactamente lo que estamos mostrando aquí. Crearemos una cinta usando exactamente la misma técnica que usamos para la capa de "navegación activa", que se describió anteriormente en el Paso 7.
La única diferencia aquí es que agregué un poco más de opacidad a la sombra paralela para garantizar que parece que está muy por encima de todo lo demás..
Para finalizar esta sección, queremos duplicar (Comando + J) nuestra capa de "línea de separación" que creamos en el Paso 8 y moverla 40px por debajo del recorte de los elementos de la cartera. Eso es!
Primero crearemos más guías para asegurarnos de que tenemos tres columnas iguales. No tengas miedo, pero tendremos que hacer algunos cálculos aquí:
Sitio de 960 píxeles de ancho: 80 píxeles de relleno interno = 880 píxeles de espacio disponible para nuestras columnas. También desearemos agregar un relleno de 40px entre las columnas, así que en esencia tenemos 800px disponibles para nuestras 3 columnas.
800 píxeles divididos por 3 equivalen a 266 píxeles por columna (elegí mis columnas como 267 píxeles, 266 píxeles, 267 píxeles de izquierda a derecha para mantener el equilibrio). Entonces, dibuje las guías a estos intervalos, asegurándose de que cuenta con el relleno de 40px en cada lado de la columna central.
Cree un nuevo grupo en la paleta de capas llamado "Lo último del blog". Aquí es donde guardaremos todas las capas correspondientes a esta sección..
Crea un texto para el encabezado. Una vez más, usé la fuente Rockwell con los mismos estilos de capa para aguafuerte Como utilicé en la navegación. En caso de que lo haya olvidado, se describe en el Paso 6..
Seleccione una forma personalizada para anclar cada lado del texto. Elegí una forma personalizada estándar de Photoshop, pero hay literalmente miles de formas personalizadas que puedes agregar a tu biblioteca.
Necesitamos agregar algunos estilos de capa a las formas para que se vean un poco más 3D:
El producto final debe parecerse a la siguiente imagen..
Necesitamos un texto a continuación para nuestras publicaciones de blog. Asegúrese de que el color del texto sea un tono claro del azul / verde del fondo. Podemos usar tantos tonos diferentes de este azul / verde como queramos, y seguramente hará que nuestro texto se destaque..
Para hacer que el texto se vea grabado Una vez más, vamos a probar un poco diferente en la técnica anterior. Antes de agregar una sombra negra a la parte superior izquierda del texto, sin embargo, dado que estamos usando un texto un poco más claro, agregaremos nuestra sombra a la parte inferior derecha, usando blanco. Puedes ver el efecto a continuación:
Usé la forma redonda y personalizada para las viñetas y reutilizé el estilo de capa de las formas personalizadas que agregamos en el encabezado de esta sección..
Esta sección debe ser bastante fácil. Duplique el grupo "Lo último del blog" y cambie el nombre del duplicado a "Actualizaciones de Twitter".
Ajuste el texto para que sea más indicativo de una actualización de Twitter (enlaces, menciones, marca de tiempo, etc.). Mueve este grupo a la columna central, y listo.!
Duplique el grupo de "Actualizaciones de Twitter" y cámbiele el nombre a "Boletín". Mueve este grupo a la columna de la derecha.
Ajuste el contenido para que se parezca más a un párrafo descriptivo, así como elimine todas las viñetas (los párrafos introductorios generalmente no necesitan viñetas).
Para crear el formulario de correo electrónico, crearemos un rectángulo redondeado con Radio de borde de 10px y Altura de 40px. El ancho debe ser 266px (o lo que sea que elijas como el ancho de tu columna derecha). Cambie el nombre de esta capa a "formulario de entrada" y configure los estilos de capa de la siguiente manera:
Por último, necesitamos un botón para enviar el formulario. Usaremos nuestros estilos de capa de la capa de "navegación activa" para el botón, ya que nos gustaría mantener ese aspecto coherente para todos nuestros elementos.
Cree otro rectángulo redondeado, Altura de 40 px, Ancho de 140 px y un Radio de borde de 20 px. Cambiar el nombre de esta capa a "botón".
Copie el estilo de capa de la capa "active nav" y péguelo en la capa "button".
Duplique el texto de la navegación (Comando + J) y cámbielo para que diga "Suscribirse". Mueve el texto para centrarlo dentro del botón. El resultado debe verse como la imagen de abajo..
Los clientes siempre lo solicitarán, y usted siempre debe agregarlo. Fuera y debajo de su capa de "contenedor", agregue alguna información de derechos de autor. Utilizando la aguafuerte Técnica de nuevo para darle profundidad..
Espero que esto ayude a todos a explorar nuevos límites con sus propios diseños. Como viste, muchas de las técnicas que se discuten aquí son simples, pero elegantes; y debe ser fácil de implementar en tus propios diseños..
Accentsconagua