Elementos comunes utilizados en el diseño de la interfaz de usuario de madera
Todos sabemos que la textura se usa mucho en el diseño moderno y vintage, aunque en muchos casos de diseño producido hace muchos años, las texturas ruidosas y grungy eran inevitables.
Sin embargo, cuando se trata de textura de madera en el diseño, ya sea en un producto de impresión, un elemento de interfaz de usuario móvil o web, o en el diseño general, siempre se utiliza para mejorar el atractivo visual.
En este artículo, veremos cinco elementos comunes en el diseño de la interfaz de usuario que usan texturas de madera para hacer esto.
Además de discutir estos elementos y admirar algunos diseños de interfaz de usuario bastante sexy que recogí de Dribbble , también aprenderemos cómo reproducir algunos de estos efectos siguiendo los mini-tutoriales aquí mismo en este artículo.
Estos cinco elementos comunes en el diseño de la interfaz de usuario son:
- Tela y costuras,
- Papel y sombras
- Tipografía y patrones grabados,
- Elegantes y modernos,
- Efectos tridimensionales
1. Tela y costura
La tela y las costuras son elementos que tienden a encajar perfectamente con la textura de madera porque ambos son productos naturales y orgánicos. (Es cierto que el algodón está tejido, cortado y teñido, y gran parte de la madera de esta vitrina ha sido cortada, lijada y tratada, pero entiendes lo que quiero decir!) Observa los siguientes ejemplos que combinan tela y elementos de costura con texturas de madera.
Ejemplos
Este diseño muy liviano usa una "puntada" básica (solo un eslabón de trazo discontinuo) para hacer que el emblema del círculo y la pancarta aparezcan como si hubieran sido cosidos a baja opacidad y con fondo de textura de madera teñida. Ese pequeño toque funciona tan bien para un diseño tan simple.
Las puntadas en este diseño son mucho más realistas, ya que combinan un fondo de textura de madera de opacidad completa con elementos grabados, sombras paralelas y texturas de tela reales. Esta puntada tiene una sombra paralela (0 píxeles de tamaño y 1 píxel a una distancia de 90 °), lo que permite que la puntada se destaque e iguale los detalles en el resto del diseño.
La textura de madera producida digitalmente hace que este diseño se vea moderno, con sus débiles gradientes y elementos grabados que producen una apariencia ligeramente tridimensional y más realista. Se usa un patrón repetitivo para producir un encantador efecto de cuero para la insignia en la esquina superior izquierda, que se ha cosido utilizando la misma técnica que la mencionada anteriormente (con la sombra paralela de 1 píxel).
Mini-Tutoriales
Crear una línea discontinua simple (Illustrator)
En este mini-tutorial, usaremos Illustrator (Ai) para crear una línea simple trazada con guiones para formar un círculo, como en el primer ejemplo de esta sección. Abre Illustrator y selecciona la herramienta Elipse. Mientras mantiene presionada la tecla Mayús para mantener su forma en proporción, arrastre un círculo, como se muestra a continuación.
Desde el panel Trazo (Ventana → Trazo) aplique un trazo de peso de 2 puntos con un Límite de inglete de 4. Compruebe la opción "Línea punteada" e inserte 12 puntos en el primer campo del tablero.
Notarás que la línea en el lado derecho de nuestra forma es en realidad dos guiones de 12 puntos juntos. Para solucionar esto, demos a nuestro trazo un patrón más. Cambie el tablero a 3 puntos y la brecha a 12 puntos, y luego duplique el tablero a 6 puntos y mantenga el espacio final de 12 puntos. Debería terminar con una línea similar a la que se muestra a continuación (los resultados variarán según el tamaño de su círculo).
Duplique su forma seleccionándola primero, luego elija Editar → Copiar (Comando + C) y finalmente Editar → Pegar en el lugar (Comando + F). Con la nueva forma aún seleccionada, mantenga presionadas las teclas Alt + Shift simultáneamente y reduzca el tamaño de la forma. Sostener estas dos teclas al mismo tiempo mantendrá la forma en proporción y disminuirá o aumentará el tamaño desde el punto central, eliminando la necesidad de realinear.
Selecciona el más grande de los dos círculos. Elimine el trazo y cambie el color de relleno a marrón (o cualquier otro color). Ahora, seleccione el más pequeño de los dos círculos y cambie el color del trazo a un marrón más claro.
Con el más pequeño de los dos círculos aún seleccionado, duplíquelo copiando y pegando en su lugar. Una vez duplicado, colóquelo debajo de su forma original (Comando + [), y empuje la forma hacia abajo pulsando una vez la flecha hacia abajo en su teclado; luego cambie el color de trazo a blanco.
Reduzca la opacidad de su círculo de trazo blanco al 50% y la opacidad de su círculo de trazo marrón al 75%.
Crear una puntada realista (Photoshop)
En este mini-tutorial, usaremos una textura de tela real y algunos de los efectos integrados de Photoshop para producir una puntada realista. Abra un nuevo documento de Photoshop e inserte una textura de tela de su elección. Recorta la imagen para que se asiente sobre un fondo blanco.
Seleccione la herramienta Rectangular Marquee y arrastre una selección en el interior de la forma de su textura de tela. Cree una nueva capa y renómbrela "Stitch". Vaya a Editar → Trazo y aplique un trazo negro de 1 píxel a su forma.
Seleccione la herramienta Rectangular Marquee nuevamente y colóquela sobre su trazo. No importa dónde comiences. Con una posición elegida, presiona la tecla Eliminar. Asegúrese de eliminar el contenido de la capa de trazo y no de la capa de la tela.
Repita el proceso para el resto de la línea acariciada, como se ve a continuación.
Hay una alta probabilidad de que los puntos de sutura no sean simétricos; pero eso es algo bueno, ¡porque los puntos de sutura rara vez lo son!
Deberías terminar con algo que se parece a esto:
Haga clic con el botón derecho en la capa contorneada y seleccione "Opciones de fusión" para abrir la ventana Estilos de capa. Seleccione la pestaña Superposición de color y seleccione un gris claro (utilicé #F1F1F1 )
Ahora seleccione la pestaña Sombra paralela. Aplica una sombra negra con un ángulo de 90 °, una distancia de 1 píxel y un tamaño de 0 píxeles. Baja la opacidad de la sombra a entre 20 y 60%.
Seleccione la capa de tela y abra la ventana Estilos de capa. Aplica una Sombra paralela predeterminada con una distancia de 0 píxeles y una Superposición de degradado que va de blanco a negro a blanco. Cambie el modo de fusión de su Superposición de degradado a "Multiplicar" con una opacidad del 15%. Una vez aplicado y visto al 100%, debe terminar con algo similar a esto:
Juega con los colores de tu tela usando los ajustes de tono y balance de color. Aquí está mi resultado:
2. Papel y sombras
El papel y las sombras son cada vez más populares como estilos de diseño, pero son especialmente populares en diseños de textura pesada, como los que tienen madera. La colección de trabajos que sigue muestra que el papel y las sombras se usan de diferentes maneras para presentar pequeños fragmentos de información o, en algunos casos, el contenido principal del sitio web.
Ejemplos
Esta captura de pantalla, en caso de que no lo haya notado, proviene de una pequeña sección del diseño que vimos al final de la sección "Tejido y costura" más arriba. Continuando con el tema de la textura producida digitalmente, se usa una forma blanca simple con una sombra personalizada deformada para que el papel se vea como si estuviera rizado.
Una muy buena combinación de texturas de papel arrugadas y de madera. El documento en esta interfaz de usuario se utiliza para presentar un fragmento de información necesaria para una receta, con algunos encantadores iconos estilo silueta que permiten al usuario ver, marcar y compartir la receta completa.
Este diseño es pesado como una textura, combinando texturas de madera, papel y cinta para producir una atractiva interfaz de usuario. La madera y la cinta fotografiadas, combinadas con las texturas y sombras de papel producidas digitalmente, funcionan bien juntas.
Esta es una de mis muestras de UI favoritas en la publicación. Puramente digital (incluida la textura de madera), el diseño utiliza sombras internas y sombras para crear un bello campo de búsqueda. El diseño también hace uso de los puntos y el elemento de tela. En general, una interfaz muy fácil de usar que se ve genial!
Este diseño parece estar inspirado en sobres de correo aéreo tradicionales con el patrón repetitivo alrededor del papel. El papel ha sido (digitalmente) engrapado al fondo de madera, haciendo que la interfaz de usuario parezca un alfiler y un tablón de anuncios en lugar de una página web plana.
La imagen beige-crema y el fondo de navegación tienen una fina sombra que hace que parezca papel, especialmente con la insignia estampada y las fotografías descoloridas estilo sepia que parecen haber sido impresas. Esto encaja maravillosamente con el fondo de textura de madera y la sensación general de la interfaz.
Mini-Tutoriales
Crear un efecto de papel digital simple (Photoshop)
En este mini-tutorial, utilizaremos una textura de madera y herramientas básicas de Photoshop para crear un efecto de papel digital. Comience con la creación de un nuevo documento con una textura o patrón repetitivo.
Seleccione la herramienta Forma rectangular e inserte una forma similar a la siguiente, colocándola justo en la parte superior del lienzo.
Duplique la forma y vaya a Editar → Transformación libre (o presione Comando + T). Reduzca el tamaño de la forma mientras mantiene presionadas las teclas Alt + Shift para mantener la forma en proporción, y luego disminuya el tamaño hacia el centro.
Arrastre el punto de anclaje superior sobre la parte superior del lienzo para que se superponga con la parte superior de la forma original.
Cambia el color de tu nueva forma a un beige muy claro (casi blanco). solía #FFFBF8 .
Duplique su forma original y cambie el color a negro puro ( #000000 )
Aumente el tamaño de la forma para que sea un par de píxeles más grande que la forma original. Cree una guía: puede arrastrar una guía fuera de la regla (Ver → Mostrar reglas, si no se muestra), entre 10 y 20 píxeles debajo de su forma negra. Vaya a Editar → Transformar → Deformar.
Arrastre el punto de anclaje inferior izquierdo hacia su guía y luego repita el paso con el anclaje inferior derecho.
Presione Entrar para confirmar su transformación de forma. Haga clic derecho en la herramienta Shapes Layer y seleccione la opción "Rasterize Layer".
Vuelva a colocar la capa de forma negra debajo de las otras dos formas pero encima de la capa de madera. Vaya a Filtro → Desenfoque → Desenfoque gaussiano y difumine la forma negra en 10 píxeles. Luego haz clic en "Aceptar".
Baje la opacidad de la forma negra al 50%. Abra la ventana Estilos de capa para su forma blanca original y haga clic en la pestaña Trazo. Aplica un trazo de 1 píxel a la forma con el tipo de relleno de degradado, yendo de negro a blanco con un ángulo de 90 °.
¡Con eso hecho, tenemos nuestro efecto digital de papel en la madera! Esta es una gran técnica para usar en sitios web.
3. Tipografía y patrones grabados
La tipografía y los patrones grabados es una técnica bastante común en el diseño web avanzado, y cada vez es más popular en el diseño cotidiano. A continuación hay varios ejemplos que utilizan este estilo en interfaces de textura de madera.
Ejemplos
Esta interfaz de usuario de la aplicación Instagram tiene un fondo de textura de madera grungy y imágenes semitransparentes lavadas para producir un aspecto vintage gastado. La tipografía tiene varios estilos diferentes, lo que permite resaltar las letras y dar al fondo de madera una sensación de grabado.
En general, esta es una interfaz de usuario de madera realmente limpia, con una colección grande e igualmente grande de varios estilos y técnicas. Uno usado repetidamente (y muy bien) es el efecto grabado sobre la tipografía y los patrones, ejemplificados en los patrones florales en la parte superior de la captura de pantalla.
La señalización de metal se cuelga en el encabezado de madera con textura aquí para servir como la navegación principal. Para dar a las señales un efecto grabado más realista, el diseñador le dio a la tipografía sombras internas y sombras.
Las texturas de madera se utilizan principalmente en este diseño para la barra de navegación (el registro, en este caso). La tipografía grabada hace que el título aparezca como si parte de la piedra hubiera sido grabada para mostrar la textura de madera.
Otro ejemplo de tipografía grabada en los signos, en este caso, letreros con textura de madera en lugar de metal.
Esta interfaz de usuario de madera emplea elementos elegantes y modernos, por lo que es difícil elegir si ponerlo en esta o en la siguiente categoría. El botón "Comprar" y el ícono del bolso de compras tienen un efecto de grabado muy detallado, ¡haciendo que se puedan hacer clic maravillosamente!
Mini-Tutoriales
Cómo grabar un patrón en madera (Photoshop)
En este mini-tutorial, crearemos un efecto de madera grabada o grabada en Photoshop. Abra un nuevo documento e inserte una textura de madera.
Inserta uno de tus propios patrones, o usa una imagen de stock vector.
Una vez que haya colocado el vector correctamente, haga clic derecho en la capa y seleccione "Rasterizar capa". Haga clic derecho sobre él una vez más y seleccione la pestaña Superposición de degradado. Aplique un degradado usando dos colores seleccionados del fondo de madera, como se ve a continuación.
Seleccione la pestaña Sombra paralela y aplique una sombra blanca con un modo de fusión normal. Cambie el ángulo de la sombra a 90 °, y la distancia y el tamaño a 1 píxel. Puede mantener las otras configuraciones en su valor predeterminado.
Seleccione la pestaña Sombra interior para aplicar una sombra al interior de su patrón. Esto nos permitirá crear el efecto grabado. Deje caer la opacidad de la sombra al 20% y cambie el ángulo a 90 °. Cambie la distancia y el tamaño de la sombra a 3 píxeles cada uno, y mantenga todas las demás configuraciones predeterminadas.
Haga clic en "Aceptar" y luego baje la opacidad de la capa de diseño al 80% para permitir que parte de la textura de fondo brille en todo su esplendor. Deberías terminar con este resultado:
4. Elegantes y modernos elementos
A pesar de que las texturas de madera a menudo están vinculadas al diseño retro y vintage, si se quitan correctamente, también se pueden usar para complementar elementos modernos y elegantes, como se puede ver en los ejemplos a continuación.
Ejemplos
Aquí hay otra captura de pantalla de una interfaz que vimos en la categoría anterior, que muestra otro elemento de estilo completamente diferente. El control deslizante y las barras de desplazamiento en este diseño tienen elegantes degradados de blanco plateado y verde para una interfaz fácil de usar.
Además de los tejidos y puntadas y las técnicas de tipografía grabada, este diseño tiene algunos elementos modernos, como trazos de dos píxeles gris-blanco y los iconos minimalistas, que crean una interfaz atractiva y utilizable como iPad.
Otra de mis interfaces favoritas Combina tejidos e imágenes de textura de madera con elegantes degradados, trazos de 2 píxeles, iconos simples y una tipografía magnífica para crear puntos de interés para el usuario.
Una interfaz altamente detallada que combina texturas de madera, efectos tridimensionales, resplandores y reflejos brillantes para producir un resultado que atontará a sus usuarios. Las líneas de un píxel se utilizan para reforzar el efecto 3-D.
Brillos, sombras y trazos se utilizan para dar vida a esta vívida interfaz de madera. Los iconos modernos, sin embargo, son la clave.
Esta pequeña y adorable interfaz hace uso de productos naturales del mundo y elegantes elementos futuristas para producir una interfaz de usuario que sea atractiva y fácil de entender. El ruido se agrega a los elementos modernos, lo que le permite encajar con el encabezado de textura de madera.
Este teclado nos brinda una textura de madera basada en un elemento moderno existente: el iPhone UIKit predeterminado. El teclado funciona de la misma manera que el teclado predeterminado y no confundirá a los usuarios.
Mini-Tutoriales
En este mini tutorial, crearemos un deslizador de interfaz de usuario de madera con una selección de efectos de capa de Photoshop. Crea un documento nuevo e inserta una textura o patrón de madera.
Seleccione la herramienta Rectángulo redondeado y arrastre una forma larga y estrecha, similar a la siguiente. El radio de la esquina de mi herramienta está configurado en 15 píxeles.
Haga clic con el botón derecho en la capa Formas y seleccione "Opciones de fusión". Seleccione la pestaña Superposición de degradado y agregue un color de degradado seleccionado del fondo y luego un color ligeramente más oscuro. Luego haz clic en "Aceptar".
Ahora, seleccione la pestaña Interior de sombras y aplique una sombra negra con una opacidad del 30% y un ángulo de 120 °. Deje caer la distancia a 1 píxel y coloque todo lo demás en 0. Esto creará una sombra dentro de nuestra forma, haciendo que parezca tallada en el fondo de madera.
Seleccione la pestaña Sombra paralela y aplique una sombra blanca con un modo de fusión normal. Cambie el ángulo a 90 ° y la distancia y el tamaño a 1 píxel. Deje todo lo demás a 0 píxeles. Esto le dará a nuestra forma un toque destacado en la parte inferior, por lo que se ve más tridimensional y realista.
Acércate a tu línea tallada y selecciona la herramienta Elipse. Mientras mantiene presionada la tecla Mayús para mantener la forma redonda, arrastre un círculo y colóquelo sobre la barra deslizadora.
Abra la ventana "Estilos de capa" para su nueva forma de círculo. Haga clic en la pestaña Superposición de degradado y aplique un degradado que vaya de un medio claro a gris claro. Dale un ángulo de 90 °.
Seleccione la pestaña Sombra paralela y aplique una sombra a su forma. Cambie la distancia a 0 píxeles y el tamaño a 10 píxeles.
Alejar para ver su control deslizante al 100%. Aquí está el resultado:
5. Efectos tridimensionales
No hay restricciones en el diseño tridimensional, y es increíblemente efectivo con texturas de madera. Esta combinación se usa comúnmente para producir "estantes", como se ve en las interfaces de iPhone y iPad, especialmente la aplicación iBook de Apple.
Ejemplos
Estas estanterías son muy realistas, y las sombras (como la del estante interior en la esquina superior derecha) provienen de una gran selección de trabajos personalizados (no filtros de Photoshop incorporados).
Los efectos en este diseño son bastante similares a los del anterior. Esta vez, los efectos traen un aspecto más limpio y más moderno, mientras que el anterior fue diseñado para parecer más realista y "usado".
Estas estanterías de iPhone presentan técnicas similares. Esta vez, el resultado es moderno y realista, equilibrando perfectamente las fotografías texturizadas con los efectos digitales.
¡Este botón 3-D es increíble! Con su combinación de texturas de madera, los delicados detalles del diseño adquieren un gran protagonismo. Si un botón como este estuviera frente a ti, ¡no hay forma de que puedas resistirte a darle un empujón!
Se ha aplicado un efecto 3-D simple pero efectivo a esta barra de navegación, haciendo que los botones aparezcan como si fueran cajones de archivo. S un elemento inteligentemente diseñado para involucrar al usuario en la interfaz.
Escrito exclusivamente para WDD por Callum Chapman, un diseñador e ilustración que cotiza como Circlebox Creative . Él también dirige The Blog de inspiración y Tienda Picmix
Comparta sus diseños de IU de madera e ilustraciones con nosotros, así como también cualquier artículo o tutorial que pueda ayudar a otros lectores.