Elementos Comuns Usados no Design da UI de Madeira
Todos sabemos que a textura é muito usada tanto no design moderno quanto no vintage, embora em muitos casos de design produzido há muitos anos, as texturas barulhentas e sujas eram inevitáveis.
No que diz respeito à textura de madeira no design, no entanto, seja em um produto impresso, um elemento de interface de usuário da Web ou móvel ou layout geral, ele é sempre usado para aprimorar o apelo visual.
Neste artigo, veremos cinco elementos comuns no design da interface do usuário que usam texturas de madeira para fazer exatamente isso.
Além de discutir esses elementos e admirar alguns designs de interface do usuário bastante sensuais que colecionei de Dribbble , também estaremos aprendendo como reproduzir alguns desses efeitos seguindo mini-tutoriais aqui neste artigo.
Esses cinco elementos comuns no design da interface do usuário são:
- Tecido e costura,
- Papel e sombras,
- Tipografia e padrões gravados,
- Elementos elegantes e modernos,
- Efeitos tridimensionais.
1. Tecido e Costura
Tecido e costura são elementos que tendem a encaixar perfeitamente na textura de madeira, porque ambos são produtos naturais e orgânicos. (É verdade que o algodão é tecido, cortado e tingido, e muito da madeira neste mostruário foi cortada, lixada e tratada - mas você entendeu o que eu quero dizer!) Veja alguns exemplos abaixo que combinam tecidos e elementos de costura com texturas de madeira.
Exemplos
Este design muito leve usa um “ponto” básico (apenas um traço tracejado) para fazer com que o emblema do círculo e o estandarte pareçam ter sido costurados ao fundo de baixa opacidade e com textura de madeira tingida. Esse pequeno toque funciona tão bem para um design tão simples.
A costura deste design é muito mais realista, combinando um fundo texturizado de madeira com opacidade total com elementos gravados, sombras e texturas reais de tecido. Este ponto tem uma sombra projetada (0 pixels de tamanho e 1 pixel a uma distância de 90 °), permitindo que o ponto se destaque e combine os detalhes no restante do desenho.
A textura de madeira produzida digitalmente faz este design parecer moderno, com seus gradientes fracos e elementos gravados que produzem uma aparência levemente tridimensional e mais realista. Um padrão de repetição é usado para produzir um belo efeito de couro para o emblema no canto superior esquerdo, que foi costurado usando exatamente a mesma técnica que a mencionada acima (com o drop shadow de 1 pixel).
Mini-Tutoriais
Criando uma linha tracejada simples (Illustrator)
Neste mini-tutorial, usaremos o Illustrator (Ai) para criar uma linha traçada simples para formar um círculo, como no primeiro exemplo desta seção. Abra o Illustrator e selecione a ferramenta Elipse. Mantendo pressionada a tecla Shift para manter sua forma proporcional, arraste um círculo, conforme abaixo.
No painel Traçado (Janela → Traçado), aplique um traço de peso de 2 pontos com um Limite de mitre igual a 4. Marque a opção “Linha tracejada” e insira 12 pontos no primeiro campo traço.
Você notará que a linha do lado direito da nossa forma é, na verdade, dois traços de 12 pontos juntos. Para consertar isso, vamos dar um pouco mais do nosso padrão. Mude o traço para 3 pontos e a diferença para 12 pontos e, em seguida, dobre o traço para 6 pontos e mantenha o intervalo final de 12 pontos. Você deve acabar com uma linha traçada semelhante à abaixo (os resultados irão variar dependendo do tamanho do seu círculo).
Duplique sua forma selecionando-a primeiro, depois escolha Editar → Copiar (Comando + C) e finalmente Editar → Colar no Local (Comando + F). Com a nova forma ainda selecionada, segure as teclas Alt + Shift simultaneamente e reduza o tamanho da forma. Segurar essas duas teclas ao mesmo tempo manterá a forma proporcional e diminuirá ou aumentará o tamanho a partir do ponto central, eliminando a necessidade de realinhamento.
Selecione o maior dos dois círculos. Remova o traço e altere a cor de preenchimento para um marrom (ou qualquer outra cor para esse assunto). Agora, selecione o menor dos dois círculos e mude a cor do traçado para um marrom mais claro.
Com o menor dos dois círculos ainda selecionados, duplique-o copiando e colando no lugar. Uma vez duplicada, posicione-a abaixo da sua forma original (Command + [) e desloque a forma uma para baixo, pressionando a seta para baixo no teclado uma vez; depois mude a cor do traço para branco.
Reduza a opacidade do seu círculo de traçado branco para 50% e a opacidade do seu círculo de traçado marrom para 75%.
Criando um ponto realista (Photoshop)
Neste mini-tutorial, usaremos uma textura de tecido real e alguns dos efeitos incorporados do Photoshop para produzir um ponto realista. Abra um novo documento do Photoshop e insira uma textura de tecido de sua escolha. Recorte a imagem para que ela fique sobre um fundo branco.
Selecione a ferramenta Rectangular Marquee e arraste uma seleção na parte interna da forma da sua textura de tecido. Crie uma nova camada e renomeie-a como "Ponto". Vá para Editar → Traçado e aplique um traço preto de 1 pixel à sua forma.
Selecione a ferramenta Rectangular Marquee novamente e posicione-a sobre o seu traçado. Não importa onde você comece. Com uma posição escolhida, aperte a tecla Delete. Certifique-se de remover o conteúdo da camada do traçado e não da camada do tecido.
Repita o processo para o resto da linha traçada, como visto abaixo.
Há uma grande chance de que os pontos não sejam simétricos; mas isso é bom, porque os pontos raramente são!
Você deve acabar com algo parecido com isto:
Clique com o botão direito do mouse em sua camada traçada e selecione "Opções de mesclagem" para abrir a janela Estilos de camada. Selecione a guia Color Overlay e selecione um cinza claro (usei #F1F1F1 ).
Agora selecione a aba Drop Shadow. Aplique uma sombra preta com um ângulo de 90 °, uma distância de 1 pixel e um tamanho de 0 pixels. Diminua a opacidade da sombra para algo entre 20 e 60%.
Selecione a camada de tecido e abra a janela Estilos de camada. Aplique uma sombra projetada padrão com uma distância de 0 pixels e uma sobreposição de degradê passando de branco para preto para branco. Mude o modo de mesclagem da sua Gradient Overlay para “Multiply” com uma opacidade de 15%. Depois de aplicado e visualizado em 100%, você deve acabar com algo semelhante a isso:
Brinque com as cores do seu tecido usando as configurações de matiz e equilíbrio de cores. Aqui está o meu resultado:
2. Papel e Sombras
O papel e as sombras estão se tornando cada vez mais populares como estilos de design, mas são especialmente populares em designs com textura pesada, como aqueles com madeira. A coleção de trabalhos a seguir mostra papéis e sombras sendo usados de diferentes maneiras para apresentar pequenos pedaços de informação ou, em alguns casos, o conteúdo principal do site.
Exemplos
Essa captura de tela, caso você não tenha notado, vem de uma pequena parte do design que vimos no final da seção “Fabric and Stitching” acima. Continuando o tema da textura digitalmente produzida, uma forma branca simples com uma sombra personalizada empenada é usada para fazer o papel parecer ondulado.
Uma combinação muito legal de texturas de papel de madeira e amassado. O documento nesta interface é usado para apresentar um fragmento de informações necessárias para uma receita, com alguns adoráveis ícones no estilo silhueta que permitem ao usuário visualizar, marcar e compartilhar a receita completa.
Esse design é pesado em textura, combinando texturas de madeira, papel e fita para produzir uma interface de usuário atraente. A madeira e a fita fotografadas, combinadas com texturas e sombras de papel produzidas digitalmente, funcionam bem juntas.
Esta é uma das minhas amostras de interface do usuário favoritas no post. Puramente digital (incluindo a textura de madeira), o design usa sombras internas e soltas para criar um belo campo de pesquisa. O design também faz uso dos pontos e do elemento de tecido. No geral, uma interface muito user-friendly que parece ótimo!
Este design parece ser inspirado por envelopes tradicionais de correio aéreo com o padrão de repetição em torno do papel. O papel foi grampeado (digitalmente) no fundo de madeira, fazendo com que a interface do usuário aparecesse como um alfinete e um quadro de avisos, em vez de uma página da web plana.
A imagem bege-creme e o fundo de navegação têm uma fina sombra que faz parecer papel, especialmente com o emblema estampado e as fotografias desbotadas em estilo sépia que parecem ter sido impressas. Isso se encaixa maravilhosamente com o plano de fundo com textura de madeira e sensação geral da interface.
Mini-Tutoriais
Criando um efeito de papel digital simples (Photoshop)
Neste mini-tutorial, usaremos uma textura de madeira e ferramentas básicas do Photoshop para criar um efeito de papel digital. Comece com a criação de um novo documento com textura ou padrão de repetição.
Selecione a ferramenta Forma Retangular e insira uma forma semelhante à abaixo, posicionando-a bem no topo da tela.
Duplique a forma e vá para Edit → Free Transform (ou pressione Command + T). Reduza o tamanho da forma enquanto mantém as teclas Alt + Shift pressionadas para manter a forma proporcional e diminua o tamanho em direção ao centro.
Arraste o ponto de ancoragem superior, acima da parte superior da tela, para sobrepor o topo da forma original.
Mude a cor da sua nova forma para um bege muito claro (quase branco). eu usei #FFFBF8 .
Duplique sua forma original e mude a cor para preto puro ( #000000 ).
Aumente o tamanho da forma para que fique um par de pixels maior que a forma original. Crie um guia - você pode arrastar um guia para fora da régua (Exibir → Mostrar Réguas, se não for exibido) - cerca de 10 a 20 pixels abaixo da forma preta. Vá para Edit → Transform → Warp.
Arraste o ponto de ancoragem inferior esquerdo em direção ao seu guia e repita o passo com a âncora inferior direita.
Pressione Enter para confirmar sua transformação de forma. Clique com o botão direito do mouse na ferramenta Shapes Layer e selecione a opção “Rasterize Layer”.
Reposicione a camada de forma preta sob as outras duas formas, mas acima da camada de madeira. Vá até Filter → Blur → Gaussian Blur, e desfoque a forma preta em 10 pixels. Em seguida, clique em "OK".
Diminua a opacidade da forma preta para 50%. Abra a janela Layer Styles para sua forma branca original e clique na guia Stroke. Aplique um traçado de 1 pixel à forma usando o tipo de preenchimento gradiente, indo do preto ao branco com um ângulo de 90 °.
Feito isso, temos o nosso efeito digital de papel sobre madeira! Essa é uma ótima técnica para usar em sites.
3. Tipografia e Padrões Gravados
Tipografia e padrões gravados é uma técnica bastante comum em design web avançado, e está se tornando cada vez mais popular no design do dia-a-dia. Abaixo estão vários exemplos que usam bem esse estilo em interfaces com textura de madeira.
Exemplos
Essa interface de usuário do aplicativo Instagram tem um fundo sujo com textura de madeira e imagens semitransparentes desbotadas para produzir uma aparência vintage desgastada. A tipografia tem vários estilos diferentes, permitindo que as letras se destaquem e dando ao fundo de madeira uma sensação gravada.
No geral, esta é uma interface de usuário de madeira realmente limpa, com uma coleção grande e igualmente grande de vários estilos e técnicas. Um usado repetidamente (e muito bem) é o efeito gravado na tipografia e nos padrões - exemplificado nos padrões florais no topo da imagem.
Sinalização de metal é pendurada no cabeçalho com textura de madeira aqui para servir como navegação principal. Para dar aos sinais um efeito gravado mais realista, o designer deu a tipografia interna e sombras.
As texturas de madeira são usadas principalmente neste design para a barra de navegação (o log, neste caso). A tipografia gravada faz com que o título pareça que parte da pedra foi gravada para mostrar a textura de madeira.
Outro exemplo de tipografia gravada em sinais, neste caso, sinais de textura de madeira em vez de metal.
Essa interface de usuário em madeira emprega elementos elegantes e modernos, dificultando a escolha entre colocá-la nesta ou na próxima categoria. O botão "Comprar" e o ícone da sacola de compras têm um efeito gravado muito detalhado, tornando-os maravilhosamente clicáveis!
Mini-Tutoriais
Como gravar um padrão em madeira (Photoshop)
Neste mini-tutorial, criaremos um efeito de madeira gravada ou gravada no Photoshop. Abra um novo documento e insira uma textura de madeira.
Insira um dos seus próprios padrões ou use a imagem vetorial de ações.
Depois de posicionar o vetor corretamente, clique com o botão direito do mouse na camada e selecione "Rasterize Layer". Clique com o botão direito do mouse sobre ela e selecione a guia "Gradient Overlay". Aplique um gradiente usando duas cores selecionadas no plano de fundo de madeira, como visto abaixo.
Selecione a guia Sombra, e aplique uma sombra branca com um modo normal de mesclagem. Altere o ângulo da sombra para 90 ° e a distância e tamanho para 1 pixel. Você pode manter as outras configurações como padrão.
Selecione a guia Inner Shadow para aplicar uma sombra ao interior do seu padrão. Isso nos permitirá criar o efeito gravado. Diminua a opacidade da sombra para 20% e mude o ângulo para 90 °. Altere a distância e o tamanho da sombra para 3 pixels cada e mantenha todas as outras configurações como padrão.
Clique em "OK" e diminua a opacidade da sua camada de padrão para 80% para permitir que parte da textura de fundo brilhe em toda a sua glória. Você deve acabar com esse resultado:
4. Elementos elegantes e modernos
Apesar das texturas de madeira estarem frequentemente ligadas ao design vintage e retro, se forem tiradas correctamente, também podem ser utilizadas para complementar elementos modernos e elegantes, como pode ver nos exemplos abaixo.
Exemplos
Aqui está outra captura de tela de uma interface que vimos na categoria anterior, exibindo outro elemento de estilo completamente diferente. O controle deslizante e as barras de rolagem neste design têm gradientes esbranquiçados em prata-branca e verde para uma interface amigável.
Assim como o tecido, os pontos e as técnicas de tipografia gravadas, esse design tem alguns elementos modernos, como traçados cinza-branco de 2 pixels e ícones minimalistas, que criam uma interface atraente e utilizável semelhante ao iPad.
Outra das minhas interfaces favoritas. Ele combina imagens de tecido e textura de madeira com gradientes elegantes, traços de 2 pixels, ícones simples e tipografia deslumbrante para muitos, criando pontos de interesse para o usuário.
Uma interface altamente detalhada que mescla texturas de madeira, efeitos tridimensionais, brilhos e destaques de brilho para produzir um resultado que irá atordoar seus usuários. Linhas de um pixel são usadas para reforçar o efeito 3D.
Brilhos, sombras e traços são usados para dar vida a essa interface vívida de madeira. Os ícones modernos, no entanto, são a chave.
Esta pequena e adorável interface faz uso dos produtos naturais do mundo e elementos futuristas elegantes para produzir uma interface de usuário atraente e fácil de entender. Ruído é adicionado aos elementos modernos, permitindo que ele se encaixe no cabeçalho com textura de madeira.
Este teclado nos dá uma textura de madeira baseada em um elemento moderno existente: o iPhone padrão UIKit. O teclado funciona exatamente da mesma maneira que o teclado padrão e, portanto, não confunde os usuários.
Mini-Tutoriais
Neste mini-tutorial, criaremos um controle deslizante de interface de usuário em madeira usando uma seleção de efeitos de camada do Photoshop. Crie um novo documento e insira uma textura ou padrão de madeira.
Selecione a ferramenta Retângulo Arredondado e arraste uma forma longa e estreita, semelhante à abaixo. O raio do canto da minha ferramenta está definido para 15 pixels.
Clique com o botão direito do mouse na camada Formas e selecione “Opções de mesclagem”. Selecione a guia Sobreposição de gradiente e adicione uma cor de gradiente selecionada do plano de fundo e, em seguida, uma cor ligeiramente mais escura. Em seguida, clique em "OK".
Agora, selecione a guia Inner Shadow e aplique uma sombra preta com uma opacidade de 30% e um ângulo de 120 °. Diminua a distância para 1 pixel e solte todo o resto para 0. Isso criará uma sombra dentro de nossa forma, fazendo com que pareça que foi esculpida a partir do fundo de madeira.
Selecione a guia Sombra, e aplique uma sombra branca com um modo normal de mesclagem. Altere o ângulo para 90 ° e a distância e tamanho para 1 pixel. Deixe tudo em 0 pixels. Isso dará à nossa forma um destaque ao longo da parte inferior, tornando-a mais tridimensional e realista.
Zoom na sua linha esculpida e selecione a ferramenta Elipse. Enquanto segura a tecla Shift para manter a forma redonda, arraste um círculo e posicione-o sobre a barra deslizante.
Abra a janela “Layer Styles” para a nova forma de círculo. Clique na guia Gradient Overlay e aplique um gradiente que vai de um meio-claro a um cinza-claro. Dê um ângulo de 90 °.
Selecione a aba Drop Shadow e aplique uma sombra à sua forma. Altere a distância para 0 pixels e o tamanho para 10 pixels.
Diminuir o zoom para visualizar seu controle deslizante em 100%. Aqui está o resultado:
5. Efeitos Tridimensionais
Não há restrições ao design tridimensional, e é incrivelmente eficaz com texturas de madeira. Essa combinação é comumente usada para produzir “prateleiras”, como visto nas interfaces do iPhone e do iPad - particularmente no aplicativo iBook da Apple.
Exemplos
Essas prateleiras são altamente realistas e as sombras (como a da prateleira interna no canto superior direito) vêm de uma grande seleção de tarefas personalizadas (não filtros internos do Photoshop).
Os efeitos neste design são bastante semelhantes aos do anterior. Desta vez, os efeitos trazem um visual mais limpo e moderno, enquanto o anterior foi feito para parecer mais realista e “usado”.
Estas prateleiras de iPhone apresentam técnicas semelhantes. Desta vez, o resultado é moderno e realista, equilibrando perfeitamente fotografias texturizadas com efeitos digitais.
Este botão 3D é incrível! Com sua combinação de texturas de madeira, os detalhes delicados do design ganham destaque. Se um botão como este estava na sua frente, não há como você resistir a dar um empurrãozinho!
Um simples mas efetivo efeito 3D foi aplicado a esta barra de navegação, fazendo com que os botões parecessem como se estivessem arquivando gavetas. É um elemento inteligentemente projetado para envolver o usuário na interface.
Escrito exclusivamente para WDD por Callum Chapman, um designer e ilustração de negociação como Criativo do Circlebox . Ele também corre o Blog de inspiração e Loja Picmix
Compartilhe seus designs e ilustrações de UI de madeira conosco, assim como quaisquer artigos ou tutoriais que possam ajudar seus colegas leitores.