Textura está se tornando parte integrante de design. Tem ido além de ser uma tendência - é agora uma maneira simples e eficaz para dar profundidade a um website. Empunhando o poder de textura é uma grande responsabilidade. Ela aumenta a eficácia dos sites e é uma ferramenta de qualidade no arsenal de designers. Ele pode guiar os olhos do utilizador e enfatizar a importância dos elementos essenciais.
No entanto, a textura tem sido sinônimo de "sujos" ou "sujo" design. O seu uso excessivo pode ser visto em todo o mundo de sites do grupo de música e deixou um gosto ruim na boca dos designers. Devido ao seu mau uso freqüente, os seus benefícios têm sido negligenciados. Textura pode trazer um site em conjunto, mas não deve ser o foco principal.
Quando usado minimamente, textura separa o conteúdo do resto do site. Ela orienta os olhos do utilizador directamente ao elemento pretendido. Pode ser uma ótima maneira de separar elementos de branding-chave.
Você pode chamar a atenção de maneiras diferentes, mas duas maneiras comuns pode ser facilmente demonstrado com a marca: um logotipo texturizado contra um fundo limpo, e um logotipo limpo contra um fundo texturizado.
Observe como as pessoas Poco 's logotipo grunge é acentuado contra o fundo limpo.
Cultural Solutions UK branding 's é o oposto: um logotipo limpo contra um fundo texturizado.
Desencadeando a bandeira de correr com uma textura, um Éden moderno destaca o conteúdo dentro.
Veja como você pode usar texturas sem violar as melhores práticas? De alto contraste e legibilidade são evidentes e trabalhar em conjunto com a textura.
Serviço da Sky Guia perfeitamente separa seu conteúdo com elementos texturizados.
Acima, cada elemento é individualmente textura para um propósito particular. Serviço da Sky Guia divide o conteúdo em seções lógicas, e que o usuário vê onde começam e terminam. Textura realça a arquitetura da informação através da criação de áreas de conteúdo lógico que ajudam o processo do usuário as informações com precisão.
Além disso, a textura serve perfeitamente o estilo e tema do site. Todos os elementos estão sob medida para caber um tema lógico, aumentando assim a mensagem geral do site.
Enquanto a textura é abundante em Deda , é gentil e nunca sobre-rolamento.
Deidre "Deda" Bain faz exatamente isso para a sua marca pessoal. Seu uso de textura ajuda a colocar um rosto - quase literalmente - para o serviço. Sem a textura, o site seria bastante branda e não teria a personalidade de seu criador. Com legibilidade e uma arquitetura de informação adequada, o projeto ainda seria legal, mas que algo extra estaria faltando.
Textura acrescenta aos "intangíveis" de Web design: a de que fator wow e sensualidade de um site memorável.
Evite fazer isto para o seu tipo:
Às vezes, passamos um pouco ao mar. Este cartaz mostra o que acontece quando você chegar muito animado com textura.
Em Hinder do site, legibilidade se perde no menu, ea textura é uma distração. (E cuidado com a música auto-playing). Oops!
Não há nenhum ponto em exagerando textura. O propósito de toda a Web é disseminar informações. Como você pode conseguir isso se o seu conteúdo é ilegível? Além disso, sutileza e nuances são a melhor maneira de demonstrar o domínio de um assunto.
Claro, queremos projetar com limitações inerentes da web em mente, mas como as velocidades de conexão de Internet subindo globalmente, o tempo de carregamento não deve ser sua principal preocupação. No entanto, usar textura dentro da razão: um site com um monte de texturas, inevitavelmente, ter um tempo de carregamento longo. Um método simples para contornar o tamanho do arquivo é usar texturas repetitivas, especialmente para os fundos. Tileables é um recurso fantástico para começar. E nós estamos sempre aprendendo sobre CSS Sprites e usando Smush.it para comprimir ainda nossos arquivos.
A diferença na qualidade da textura aqui é grande. A textura do lado esquerdo é comprimida. O da direita é, também, mas não tanto.
Esta fotografia de perdida e levado demonstra que uma fotografia distintiva pode ser usado para uma textura para fins especiais.
Se você olhar ao seu redor, você verá uma abundância de grunge: gasta-down edifícios, muros de concreto, metal enferrujado, cascas de árvore, madeira resistida. Estas são todas as amostras fantásticas. Na verdade, uma câmera decente point-and-shoot é suficiente para começar. Nós começamos a filmar nossas próprias texturas com uma velha Nikon Coolpix 4200 , que funcionou na perfeição.
Quando você atira, você pode usar o modo totalmente automático. Mas não use flash, porque vai "achatar" a imagem e remover a maioria dos detalhes na textura, especialmente em close-up disparos. Deixe a câmera fazer o trabalho, e sempre tirar várias fotografias de uma textura para obter o melhor resultado possível. Você pode sempre confiar em pós-processamento em seu editor de imagem favorito.
Uma vez que você está confortável com isso, você pode começar a criar elementos usando técnicas tradicionais da arte. Por exemplo, aplique um pouco de carvão para algum belo papel pesado, que poderia ser o toque final para que fundo grunge você foi depois. E quanto a respingos de tinta acrílica para dar profundidade ao seu interface do usuário? Ou manchas de café em papel? As possibilidades são infinitas!
Acredite ou não, os filtros um pouco gimmicky Photoshop também pode ser usado para criar texturas. Texturas de ruído são um piscar de olhos com o filtro de ruído. Jogando com os valores e níveis do filtro, você pode obter resultados de uma ampla gama de necessidades. Há também o filtro de texturizar, embora seja bastante enigmático e raramente úteis. Mesmo assim, poderia ajudar você a atingir parte do efeito que você está indo para.
A breve experiência com filtros de ruído. Ruído luz é melhor, mas certifique-se você ainda pode ver o efeito.
Se você quiser a textura para ser perfeita, em seguida, uma distribuição uniforme é mais fácil de trabalhar. "Monocromático" garante que a textura não tem ruído de cor que podem entrar em conflito com outras cores no seu design.
Se você estiver interessado em aprender as técnicas básicas de aplicação de textura para os elementos, que já produziu diversos vídeos para você começar. Usuários mais avançados podem já conhecer essas técnicas, mas pode querer escovar em cima deles de qualquer maneira. De qualquer maneira, esperamos que eles sejam úteis.
No entanto, a textura tem sido sinônimo de "sujos" ou "sujo" design. O seu uso excessivo pode ser visto em todo o mundo de sites do grupo de música e deixou um gosto ruim na boca dos designers. Devido ao seu mau uso freqüente, os seus benefícios têm sido negligenciados. Textura pode trazer um site em conjunto, mas não deve ser o foco principal.
Textures vs Padrões
Antes de chegarmos em texturas em profundidade, vamos distinguir entre padrões e texturas. Estas palavras são muitas vezes usados como sinônimos. Os padrões são tipicamente pequenos, repetitivos, elementos tileable, enquanto as texturas tendem a ser imagens muito maiores que não se repetem. Imagine um diagrama de Venn, com texturas sobre a esquerda e padrões à direita, com um pouco de sobreposição no meio. Assim, algumas texturas também são padrões. Vários dos pacotes de textura tileable encontrados em Tileables são bons exemplos.[Note: Have you already pre-ordered your copy of our Printed Smashing Book #3? The book is a professional guide on how to redesign websites and it also introduces a whole new mindset for progressive Web design, written by experts for you.]
A função de Texturas
Nós amamos textura na Web para uma infinidade de razões. As decisões de projeto não deve ser feito simplesmente com base em: "Ah, bem. Parece bom. "O design deve servir a um propósito, e cada decisão sobre a textura deve ser feita através da pesagem dos prós e contras. Vamos começar passando por cima alguns dos principais benefícios.Agarrando a atenção com uma chamada à ação
Textura pode-se destacar elementos como títulos, títulos, ícones e botões. Ele chama a atenção para chamadas para a ação e os títulos principais. Esta é talvez a maneira mais clara que a tendência de texturas está em recuperação.Quando usado minimamente, textura separa o conteúdo do resto do site. Ela orienta os olhos do utilizador directamente ao elemento pretendido. Pode ser uma ótima maneira de separar elementos de branding-chave.
Você pode chamar a atenção de maneiras diferentes, mas duas maneiras comuns pode ser facilmente demonstrado com a marca: um logotipo texturizado contra um fundo limpo, e um logotipo limpo contra um fundo texturizado.
Observe como as pessoas Poco 's logotipo grunge é acentuado contra o fundo limpo.
Cultural Solutions UK branding 's é o oposto: um logotipo limpo contra um fundo texturizado.
Arquitetura da Informação Reforço
Textura pode ser usado para guiar o olho. E, como linhas, caixas e de contraste, pode ser usado para separar o conteúdo em divisões lógicas. Usando-o eficazmente em conjunção com outros métodos é vital. O objetivo não é abandonar outros métodos de arquitetura de informação, mas para melhorar a sua eficácia. Desencadeando a bandeira de correr com uma textura, um Éden moderno destaca o conteúdo dentro.
Veja como você pode usar texturas sem violar as melhores práticas? De alto contraste e legibilidade são evidentes e trabalhar em conjunto com a textura.
Serviço da Sky Guia perfeitamente separa seu conteúdo com elementos texturizados.
Acima, cada elemento é individualmente textura para um propósito particular. Serviço da Sky Guia divide o conteúdo em seções lógicas, e que o usuário vê onde começam e terminam. Textura realça a arquitetura da informação através da criação de áreas de conteúdo lógico que ajudam o processo do usuário as informações com precisão.
Além disso, a textura serve perfeitamente o estilo e tema do site. Todos os elementos estão sob medida para caber um tema lógico, aumentando assim a mensagem geral do site.
Construir uma atmosfera e Reforço de Identidade
Mais e mais, os clientes querem projetos de websites que fazem mais do que exibir o seu conteúdo de forma amigável. Eles querem sites que melhoram a sua identidade e permitir que os usuários a se identificar com a marca. Textura pode ser usado para conseguir isso em muitos aspectos. Enquanto a textura é abundante em Deda , é gentil e nunca sobre-rolamento.
Deidre "Deda" Bain faz exatamente isso para a sua marca pessoal. Seu uso de textura ajuda a colocar um rosto - quase literalmente - para o serviço. Sem a textura, o site seria bastante branda e não teria a personalidade de seu criador. Com legibilidade e uma arquitetura de informação adequada, o projeto ainda seria legal, mas que algo extra estaria faltando.
Textura acrescenta aos "intangíveis" de Web design: a de que fator wow e sensualidade de um site memorável.
Dicas e conselhos gerais
Tudo isso é fino e elegante, mas você vai querer evitar as armadilhas comuns, enquanto refino de certas técnicas e modos de pensamento.Manter a legibilidade
Nunca legibilidade sacrifício (ever!) para a textura. Muitos de nós cometer este erro, e continuará a por um tempo por vir. Legibilidade na Web é fundamental em importância. Se um usuário não consegue nem ler a mensagem, então o que é o ponto em que a compõem, e muito menos texturização isso?Evite fazer isto para o seu tipo:
Às vezes, passamos um pouco ao mar. Este cartaz mostra o que acontece quando você chegar muito animado com textura.
Não bata em um cavalo morto
Na impressão, a textura é difícil exagerar - dependendo do gênero, é claro. Na Web, no entanto, a textura pode ser extremamente perturbador quando usado em "bulk". Em Hinder do site, legibilidade se perde no menu, ea textura é uma distração. (E cuidado com a música auto-playing). Oops!
Prática significa melhoria
Experimento com seus projetos. Experimente coisas novas. Aplicar texturas em lugares onde normalmente não colocá-los. Use texturas que você nunca usou antes. Você nunca sabe o que você vai descobrir até que você experimentá-lo.Se Ele não serve para nada, Take It Out
Defina a sua técnica antes de usá-lo no site de um cliente. Certifique-se sempre que o uso de textura é baseado em um plano sólido, como seria o caso com qualquer site que você criar. Se você não pode justificar algo que você fez como sendo uma melhoria, tirá-lo.Não há nenhum ponto em exagerando textura. O propósito de toda a Web é disseminar informações. Como você pode conseguir isso se o seu conteúdo é ilegível? Além disso, sutileza e nuances são a melhor maneira de demonstrar o domínio de um assunto.
Considere o efeito Você está tentando conseguir
Como sabemos, por experiência, se deixar levar com a textura é muito fácil. Tendo em mente o efeito final que você está tentando alcançar é a melhor maneira de evitar isso. Se você quer um fundo sutil textura, basta fazê-lo e depois passar para o próximo item em sua lista. Caso contrário, você nunca vai conseguir.Coletar recursos para que você não precisa procurar mais tarde
Você pode economizar uma enorme quantidade de tempo fazendo o download e arquivar recursos que parecem útil. Manter seus arquivos organizado é um plano de back-up grande. Confie em nós: nada é mais frustrante do que chegar do outro lado da embalagem escova perfeita e não ser capaz de lembrar onde você o encontrou. Nossa lista de escovas é longa e diversificada. Nós temos vindo a recolher os pincéis ao longo dos anos a partir de sites como o deviantART e Brusheezy , a partir das seções brinde de blogs de design diferentes, e por tornar a nossa própria .Saiba Máscaras
Aprender a trabalhar com máscaras de camada você vai economizar muito tempo a longo prazo e será uma forte ferramenta em seu arsenal. Máscaras também são uma maneira fantástica de não-destrutiva experiência com seus projetos. Um monte de tutoriais estão lá fora, uma rápida pesquisa no Google me levou ao " Máscaras Compreendendo camada no Photoshop . "Não sacrificar a qualidade para o carregamento Tempo
Há muitas maneiras interessantes para manter texturas de matar os tempos de carregamento. Mas não sacrificar a qualidade da textura muito, porque em vez de aparecer acabado e profissional, o site ficará desatualizado direito fora do portão. Padrões de textura repetidos são uma boa maneira de economizar o tempo de carregamento de origens e elementos maiores.Claro, queremos projetar com limitações inerentes da web em mente, mas como as velocidades de conexão de Internet subindo globalmente, o tempo de carregamento não deve ser sua principal preocupação. No entanto, usar textura dentro da razão: um site com um monte de texturas, inevitavelmente, ter um tempo de carregamento longo. Um método simples para contornar o tamanho do arquivo é usar texturas repetitivas, especialmente para os fundos. Tileables é um recurso fantástico para começar. E nós estamos sempre aprendendo sobre CSS Sprites e usando Smush.it para comprimir ainda nossos arquivos.
A diferença na qualidade da textura aqui é grande. A textura do lado esquerdo é comprimida. O da direita é, também, mas não tanto.
Escolha Texturas Logicamente
Por último, e talvez tão importante quanto manter a legibilidade, escolha texturas que são lógicas para seu projeto. Se você está construindo um site para uma loja de móveis, em seguida, texturas enferrujados não faria muito sentido. Texturas são destinadas a construir a identidade, para não confundir o visitante, independentemente de terem boa aparência. Usabilidade deve sempre prevalecer.Texturas: uma atitude DIY
Uma das muitas maneiras de obter texturas é criá-los. Somos defensores de grandes isso porque você pode economizar tempo e dar o resultado exato que você está procurando. E não se preocupe: não é tão difícil quanto parece.Encaixe Algumas Fotos
O método mais simples é pegar sua câmera digital trusty e tiros snap de texturas que estão ao seu redor, especialmente aqueles que você nunca considerou ser "texturas". Texturas exclusivas pode avançar o seu estilo. Por exemplo, se você considerar o topo de um bolo ou bolhas em uma pia como texturas viáveis? Eles estão todos ao seu redor. Esta fotografia de perdida e levado demonstra que uma fotografia distintiva pode ser usado para uma textura para fins especiais.
Se você olhar ao seu redor, você verá uma abundância de grunge: gasta-down edifícios, muros de concreto, metal enferrujado, cascas de árvore, madeira resistida. Estas são todas as amostras fantásticas. Na verdade, uma câmera decente point-and-shoot é suficiente para começar. Nós começamos a filmar nossas próprias texturas com uma velha Nikon Coolpix 4200 , que funcionou na perfeição.
Quando você atira, você pode usar o modo totalmente automático. Mas não use flash, porque vai "achatar" a imagem e remover a maioria dos detalhes na textura, especialmente em close-up disparos. Deixe a câmera fazer o trabalho, e sempre tirar várias fotografias de uma textura para obter o melhor resultado possível. Você pode sempre confiar em pós-processamento em seu editor de imagem favorito.
Scanners trabalho, também
Outra grande ferramenta é o scanner ol 'mesa boa. Papel velho, papelão, mouse pads (gritar para Trent Walton para esta ideia), sacos de papel, a pele - a lista do que você pode fazer a varredura continua. Digitalizar com uma resolução muito elevada, 600 a 1200 DPI, de modo que a textura é de alta qualidade e pode ser adaptado a qualquer projecto, incluindo peças de impressão grandes. De alta resolução examina também permitem isolar pontos específicos em uma imagem para usar como textura.Uma vez que você está confortável com isso, você pode começar a criar elementos usando técnicas tradicionais da arte. Por exemplo, aplique um pouco de carvão para algum belo papel pesado, que poderia ser o toque final para que fundo grunge você foi depois. E quanto a respingos de tinta acrílica para dar profundidade ao seu interface do usuário? Ou manchas de café em papel? As possibilidades são infinitas!
Cereja no topo do bolo
Você sempre pode incrementar o processo através da combinação de texturas. Utilizando os modos de mesclagem de camadas no Photoshop, você pode combinar várias texturas em uma. Caleb de Lost e levado postou uma explicação aprofundada do processo que ele segue para criar os seus pacotes.Acredite ou não, os filtros um pouco gimmicky Photoshop também pode ser usado para criar texturas. Texturas de ruído são um piscar de olhos com o filtro de ruído. Jogando com os valores e níveis do filtro, você pode obter resultados de uma ampla gama de necessidades. Há também o filtro de texturizar, embora seja bastante enigmático e raramente úteis. Mesmo assim, poderia ajudar você a atingir parte do efeito que você está indo para.
A breve experiência com filtros de ruído. Ruído luz é melhor, mas certifique-se você ainda pode ver o efeito.
Se você quiser a textura para ser perfeita, em seguida, uma distribuição uniforme é mais fácil de trabalhar. "Monocromático" garante que a textura não tem ruído de cor que podem entrar em conflito com outras cores no seu design.
Se você estiver interessado em aprender as técnicas básicas de aplicação de textura para os elementos, que já produziu diversos vídeos para você começar. Usuários mais avançados podem já conhecer essas técnicas, mas pode querer escovar em cima deles de qualquer maneira. De qualquer maneira, esperamos que eles sejam úteis.
