Parte 1 - Criando uma textura de papel
Existem três maneiras diferentes você pode começar um olhar de papéis texturizados:
- Scan no seu próprio papel
Saída Bittbox's Make an Awesome Grungy Paper Texture Tutorial - Uso de textura de outra pessoa
Há montes de sites que lista cerca de texturas, confira estes links: Bittbox | TextureKing | PSDTUTS Texturas - Torná-lo no Photoshop
Isto é o que vamos fazer!
Fazendo uma textura no Photoshop, geralmente resultado de uma forma mais estilizada do que olhar realista, mas tem seus próprios encantos. Também significa que você não precisa de imagens externas.
Passo 1
Então, primeiro nós vamos iniciar um novo documento, esta lona é 1200px de largura x 900px de altura. Em seguida, preencher a camada de fundo com uma cor bege - # e8e8e2.
Etapa 2
Agora crie uma nova camada em cima e fazer o seu primeiro plano e cores de fundo: # # 979a8f e cfd1c5que são variações da cor original. Então vá para Filter> Render> Clouds
Passo 3
Agora corremos Filter> Artistic> Palette Knife com as configurações mostradas na imagem acima.Espátula transforma nosso nuvens em gotas ... sorte de, eventualmente, isto dará uma sensação leve amassado à textura.
Passo 4
Em seguida, vamos adicionar algum ruído à lona por Filter> Noise> Add Noise com a configuração mostrada. Isso deve tornar o nosso olhar de textura áspera.
Passo 5
Agora vamos levar a nossa barulhenta, crumply camada e ajustá-lo para o Multiply e 30%. Este tom será que volto.
Passo 6
Agora crie uma nova camada em cima e fazer o seu primeiro plano e cores de fundo: # 42433e e # cfd1c5- que é uma versão mais escura do último jogo para que possamos conseguir mais contraste neste momento. Então vá para Filter> Render> Clouds
Passo 7
Em seguida, execute novamente a Filter> Artistic> Palette Knife filtro.
Passo 8
E desta vez vamos definir o novo layer para Overlay e 60%. Isto deve dar a nossa textura de profundidade um pouco mais.
And that's it! Esta é a nossa textura!
Passo 9
Para este tutorial a textura leve é perfeito, mas você pode facilmente fazer outras variações apenas por mexer com a mistura de ferramentas. Por exemplo, para fazer essa textura de papel marrom escuro:
- Pegue a versão light e pressione CTRL-U para alterar o Hue / Saturation, defina os controles deslizantes para -30, -10 e -5, respectivamente.
- Duplicar a camada e pressione CTRL-SHIFT-U para torná-lo preto e branco
- Em seguida, ainda na camada de preto e branco, vá para Editar> Ajustes> Brilho / Contraste e ir para -30 e +30, respectivamente
- Agora defina a camada de preto e branco para Overlay
- Em seguida, crie outra camada em cima e encha-o com # beac93 depois mude essa camada paraMultiply.
- Duplicar a camada Multiplicado
- Então duplicar a camada de preto e branco e puxá-lo direto ao topo. Configurá-lo para Overlay e20% e girá-lo 90 'para obter a profundidade de um pouco mais para a textura.
Etapa 10
Se as variações de cores não são suficientes, você também pode mudar a sensação da textura com o uso de filtros diferentes . Por exemplo, aqui nós fizemos mais um pergaminho-y sentir, tendo a nossa textura leve e:
- Agarre o primeiro crumply / camada de ruído e executar um Filter> Texture> Texturizer e lonauso, 75% e 2 para as configurações
- Agarre o segundo crumply / camada de ruído e executar o mesmo filtro
- Agora duplique a segunda camada e girá-lo por 90 ', mantendo-definido para Overlay e 60%.
- Criar uma nova camada em cima e encha-o com o branco - # ffffff
- Executar um Filter> Texture> Texturizer e este tempo de uso da lona, 200% e 16 defina essa camada para Overlay e 20%
- Agora crie outra camada em cima e novamente preenchê-la com o branco, desta vez, mudar o modo de camada de mistura de cor e 53% para obter uma textura mais branco o nosso bit.
Final notas de papel textura
Agora que você tem uma textura que você pode, naturalmente, transformá-lo em um fundo transparente azulejos.
Para este tutorial iremos usar a textura primeira que nós fizemos - a única da etapa 8.
Parte 2 - Criando o layout do site
Então agora vamos criar um layout de portfólio para ir com os nossos textura do papel. Aqui é a estrutura aproximado para a homepage. Como você pode ver que é um pouco mais de uma estrutura complicada do que no layout da web tutorial anterior, porque desta vez temos um esquema dentro do layout.
Assim, nossa rede global é um grid de três colunas, em seguida, no painel principal, usamos essa grade para quebrar a área em dois espaços principais, uma é o tamanho da coluna 1 e as outras abrange tanto sobre as outras colunas.
Etapa 13
Então, primeiro vamos criar uma área de trabalho e aliviar-se. Então aqui eu tenho arrastado dois guias sobre a tela, um de 100px e uma em 1100px - que torna a área que estou trabalhando em 1000px exatamente o que é perfeito.
Então vamos criar uma nova camada e desenhe uma grande caixa branca como mostrada.
Etapa 14
Em seguida vamos definir a caixa branca de volta para 25% de opacidade.
Então, nós estamos indo irritar-se. Há lotes de escovas grunge grande volta, mas para este passo vamos usar apenas um padrão de pincéis do Photoshop. Você pode ver na imagem acima com o 60 embaixo dela.
Se esta escova não está aparecendo para você, basta clicar nessa pequena seta no lado superior direito da tela e escolher pincéis Wet Media Brushes, clique em Anexar para adicioná-los no seu conjunto atual.
Etapa 15
Então, escolha a ferramenta Eraser (E), selecione o pincel acabamos de mencionar e depois ir ao redor das bordas da nossa forma e apenas irritar-lo, contudo, você sente. Eu deixei a borda superior intacto como você pode ver.
Etapa 16
Em seguida, crie uma nova camada logo abaixo da caixa branca, e desenhar em um gradiente radial (G) que vão do branco ao transparência. Isso é apenas ir para destacar onde estaremos colocando nosso logotipo em um segundo. Defina a camada para Overlay e 70%.
Etapa 17
Agora vamos adicionar um logotipo "pouco" - no nosso caso, apenas uma palavra definida em um tipo simpático. A fonte que eu escolhi aqui é Egyptian710 BT que é bastante conhecido da fonte e adequado para os nossos propósitos, porque isso é muito desigual quem - letras maiúsculas são mais espessas do que as letras minúsculas - e as serifas laje olham o tipo de máquina de escrever-ish que se passa com nosso tema do papel.
Etapa 18
Em seguida vamos fazer uma marca d'água apenas para acrescentar coisas um pouco mais no fundo.Realmente você pode ficar louco e adicionar toneladas de material para a textura de fundo, mas vamos resolver de uma marca única.
Então aqui eu escrevi o Folio palavra em uma fonte aleatório (HumstSlab712 Blk) e eu defini-lo nesta cor - c5c6ba #.
Etapa 19
Agora vamos alterar o modo de mistura de cores Burn e 70% e nós vamos adicionar um derrame 1px como mostrado. Observe que para Preenchimento Tipo eu usei um padrão e, em seguida, escolha uma textura que eu tinha sobre o enforcamento. Quando combinado com uma opacidade baixa (36%) e modo de mistura (Multiply) isso torna nosso olhar contorno como se fosse desapareceu em partes.
Etapa 20
Agora vamos a nossa marca d'água para se sentar atrás do logotipo.
Etapa 21
Em seguida vamos fazer um pequeno elemento de separação horizontal. Então, crie uma nova camada e desenhe em uma linha de 1px no marrom escuro.
Etapa 22
Agora, pega a escova de borracha mesmo velho e ir apenas ao longo da linha de apagar pequenos pedaços fora dele para que fique angustiado. Também se livrar das bordas de modo que começa no mesmo local da caixa branca.
Etapa 23
Em seguida, crie uma nova camada abaixo e desenhe em uma caixa marrom que é de cerca de 3-4px alta, como mostrado.
Etapa 24
Defina a caixa marrom para o Multiply e 5%. Esta será uma espécie de sombra para a nossa separação.
Etapa 25
Em seguida, crie um novo layer e desta vez desenhar uma caixa branca sobre 20px alta acima da linha.
Etapa 26
Defina a caixa branca de cerca de 50% de opacidade e mais uma vez usando o nosso pincel, basta apagar o topo de forma confusa.
Etapa 27
Agora repita os três passos para elaborar uma segunda caixa branca, mas desta vez quando você apagar, apagar tanto mais que é uma fina faixa branca.
Quando ambas as camadas brancas são combinados eles vão dar uma espécie de destaque bagunçado.
Grupo essas camadas de separação em um grupo de camada única.
Etapa 28
Agora podemos duplicar camada para o nosso grupo tem três cópias para formar a nossa área de grade horizontal, como mostrado.
Etapa 29
Aqui eu acabei de colocar algum conteúdo dentro Como você pode ver que eu misturado um pouco de mostrar o tipo de letra com uma fonte HTML normal.
Para o texto normal Eu realmente utilizados Cambria, que é uma fonte de Vista. No CSS você teria que usar como padrão para a Geórgia para pessoas que não têm as fontes Vista. Se você, se não tiver as fontes Vista, você pode obtê-los livremente e legalmente, basta seguir estas instruções. Há um par fontes de bom gosto, eu gosto bastante Calibri também.
Etapa 30
Agora vamos adicionar o nosso painel principal. Então, desenhar em uma grande caixa retangular na cor marrom escuro - # 1e1a19 - e fazê-lo usando a Rounded Rectangle Tool (U) com um raio de 5px.
Etapa 31
Agora o zoom no canto superior esquerdo e pegue uma seleção pequena praça, em seguida, preenchê-lo com a cor marrom escuro mesmo. Nós não queremos uma curva no canto.
Etapa 32
Agora zoom no canto superior direito e usando o Polygonal Lasso Tool (L), mantendo Shift fazer uma seleção de ângulo como mostrado e pressionar Delete.
Etapa 33
Agora em uma nova camada acima desenhar em um quadrado de um isqueiro cor marrom, digamos # 352f2b, e depois fazer uma outra selecção angulado e elimine meia distância o quadrado que você é deixado com um triângulo que é 1px longe da borda.
Etapa 34
Em seguida, crie uma nova camada e ampliar para o canto superior esquerdo de novo. Agora vamos fazer a nossa forma de tabulação. Fazemos isso usando a ferramenta caneta e alguns cliques muito precisas. Na imagem acima eu desligar todas as camadas de fundo para que você possa ver a forma exata. Veja como você fazer isso:
- Iniciar no canto inferior esquerdo ponto e basta clicar em um único ponto no
- Em seguida, mantenha pressionada a tecla SHIFT assim que você está recebendo uma linha reta mortos e clique no próximo ponto ao longo da linha, segure o botão do mouse pressionado enquanto clica para que o ponto tem alças e arraste para cima um pouco. Isto significa que o próximo ponto de clicar vai ter uma curva indo entre eles.
- Agora clique na terceira posição e, novamente, segure o botão do mouse pressionado e também segurar SHIFT para arrastar as alças para fora em um ângulo reto. Você deve ser capaz de conseguir que a curva perfeita. Tendo realizado mudança faz-se todos os ângulos são muito agradável e precisa, é só uma questão de ficar do tamanho certo e de posicionamento. Pode demorar um pouco vai, mas o bom é que você pode apenas pressionar CTRL + Z para desfazer, se você não acertar, e se você precisar voltar mais uma etapa, apenas pressione CTRL-ALT-Z
- Em seguida, segurando SHIFT clique no quarto ponto, novamente segurando o mouse pressionado e arrastando-direita assim que você começa alças aparecendo. Este identificador pode ver na imagem acima (porque é um dos dois últimos pontos antes de imagem). Como você pode ver a alça deve estar morto reta - isto é assegurado pela holding Shift.
- Finalmente, segure SHIFT e clique no quinto ponto e arrastar o botão direito novamente. Isto lhe dará a curva impressionante final.
Etapa 35
Depois de fazer o quinto ponto, você pode simplesmente preencher o restante da forma como qualquer idade, porque nós estamos indo apenas para cortar a borda inferior para ser perfeitamente em linha reta de qualquer maneira.
Depois de ter concluído a forma, com o botão direito e escolha Make Selection.
Etapa 36
Agora você pode preencher a forma com marrom escuro para corresponder à caixa principal. Em seguida, cortar os pedaços de fundo extra por isso é bom e plana e senta-se perfeitamente em cima como mostrado.
Etapa 37
Em seguida vamos duplicar a nossa camada de guia e mover a um novo abaixo da guia antiga (para o marrom parece que está na frente). Em seguida, botão direito do mouse sobre a nossa nova guia e escolha Blending Options e dê uma sobreposição de cor avermelhada deste nice-cor de laranja - # cc5630. A razão pela qual fazemos uma sobreposição de cores e não apenas preencher a guia com a nova cor é que se você fizer o segundo método, você terá um pouco mais à esquerda marrom mostrando através de pixels.
Em seguida mantenha pressionada a tecla CTRL e clique na primeira guia, em seguida, escolher aRectangular Marquee Tool e pressione a seta para a direita algumas vezes até que sua seleção foi movida, a sobrepor-se com a guia de laranja. A razão de eu dizer que você deve escolher a ferramenta marquee nesta etapa é que para mover uma seleção é preciso ter uma ferramenta de seleção para cima.Se em vez você teve a ferramenta seta regular selecionado você realmente mover pixels ao redor, bem como a seleção. Tente ambos e você verá o que quero dizer.
Etapa 38
Agora vamos criar uma nova camada entre as duas abas e preencha a nossa seleção com uma cor mais escura laranja - # b44724. Pressionada a tecla CTRL e clique sobre a camada de guia de laranja, em seguida, clique CTRL-SHIFT-I para inverter a seleção e clique em na camada intermediária e bateuExcluir. Isto deve deixá-lo com apenas uma parte laranja mais escura que se sobrepõe a guia de laranja.
Etapa 39
Como você pode ver, criamos uma espécie de sombra em nosso guia segundo.
Agora, se eu me dizê-lo nessas guias look awesome, ea razão que eles fazem é porque eles se sobrepõem.Infelizmente, isso também torna mais difícil de trabalhar em HTML. No entanto, pode fazer uma variedade de coisas com PNGs transparentes, ou alternadamente apenas fazer alteração de cores de texto em sobreposições e não se preocupar em mudar as cores da guia. De qualquer forma isso é tudo um pouco além do escopo deste tutorial. Basta dizer que o menu poderia ser um pouco complicado de construir.
Etapa 40
Então aqui está a nossa disposição até agora. Eu adicionei uma abas mais jovem e deu-lhes algum texto.
Etapa 41
Agora vamos desenhar na área de trabalho apresentado. Este será um simples retângulo branco onde o trabalho irá. Então, por trás dessa crie outra camada e usar a Polygonal Lasso Tool (L) a elaborar uma espécie de retângulo wonky e preenchê-lo com um escuro, cor castanho escuro - # 0e0c0c.
Etapa 42
Em seguida, vamos adicionar algum texto descritivo do lado esquerdo e do item em si. Observe que com o texto que usei um castanho escuro para os dois descritores (Título do Projecto e Descrição do Projeto), este torna-los desaparecer no fundo o que é bom, porque eles não são tão importantes. O título do projeto e um texto descritivo por outro lado, se destacam. Estes dois últimos itens são definidos na cor bege claro colhidos a partir do fundo com o título sendo mais brilhante que o texto.
Também eu adicionei um gradiente radial fraco para a amostra de trabalho que vai do branco ao bege claro - apenas porque eu amo gradientes radiais e Can't Get Enough deles 
Etapa 43
Agora finalmente eu vou adicionar um par de mãos pouco elaborado salgadinhos para terminar o projeto.Para estes eu usei David Leggett de mão é excelente e gratuito Tutorial9 'pincéis-elaborados. Você pode adicionar escovas abrindo a paleta pincel como mostrado, clicando na pequena seta para a direita e escolhendo Load Brushes, em seguida, selecionando a escova de arquivo que você baixou.
Porque as escovas são muito maiores do que eu quero que eles é importante para afinar a camada após você redimensionado ele. Então aqui eu encolhido na seta para baixo e depois executar um Filter> Sharpen> Unsharpen Máscara para consertá-la.
