Passo 1
Desta vez, vamos criar um web design cheio de estilo grunge usando o Photoshop e um monte de imagens.Como este é um nível intermediário ao avançado tutorial, eu vou pular a explicação de alguns passos básicos. Primeiro crie um novo documento com 950 px por 800 px em RGB 72dpi. Mostrar os governantes e arraste quatro guias que delimita o documento, este será o espaço ideal do projeto. Estou planejando para manter um layout de largura fixa.
Vá em Image> Canvas Size e aumentar a largura e altura muito mais, por 1200 px 1000 px está OK, dessa forma estaremos projeto de resolução mais ampla em tela. Em seguida, adicionar mais guias onde você está planejando adicionar os recipientes (cabeçalho, barra de navegação, a barra lateral, rodapé).
Vamos imaginar que este projeto é destinado para um template Wordpress, por isso vamos precisar de um cabeçalho, uma barra de navegação dentro do cabeçalho, e uma barra lateral direita. Dê uma olhada na parte inferior da imagem a seguir. Em seguida, preencha um fundo com essa cor # 7A8173.
Etapa 2
Agora vamos criar um padrão para o fundo do cabeçalho, que é bastante simples. Criar um novo documento 50 px por 300 px e desenhar algo como na imagem abaixo. Estou usando o simulador para fazer minha forma o mais simétrico possível. Em seguida, vá para Editar> Definir padrão e salvar a forma como "padrão de 1".
Passo 3
Em uma nova camada em nosso arquivo de projeto principal, desenhe um retângulo de 300 px de altura usando a ferramenta Rectangle. Ir para filtros, e adicionar uma sobreposição de padrão, procure o seu padrão novo e aplicá-lo. Para fazer com que pareça correta você deve clicar no botão Ajustar à Origem.Alterar o preenchimento da camada de 0%, crie uma nova camada vazia acima da camada de forma, e mesclar os dois, desta forma você terá o padrão pronto para adicionar alguns efeitos a ela. Nome essa camada "Modelo 1".
Passo 4
Selecione "Modelo 1" camada e aplicar-lhe alguns estilos de camada: Drop Shadow, um Gradiente Overlay, e uma sobreposição de padrões. Tentar obter algo semelhante para o fundo da imagem abaixo, usando os seguintes valores.
Passo 5
Agora vamos adicionar o fundo barra de navegação. Desenhe um retângulo escondendo um pouco do "Modelo 1" camada. Aplicável a esse retângulo uma sobreposição de padrão, uma sobreposição de preto para vermelho preto degradê, e uma sombra suave. Use os valores das imagens abaixo como referência.Em seguida, adicione uma máscara de camada> Ocultar todos, e elaborar um preto ao branco para Gradiente Reflected preto na camada de máscara, você terá algo semelhante à imagem de fundo abaixo.
Passo 6
Agora, desenhe uma elipse (# 691E1B) acima do "Modelo 1" camada, o nome de "Luz", e aplicar um Gaussian Blur-lo com um raio de 50 pixels. Eu criei uma guia extra para desenhar a luz no centro do cabeçalho. Excluir tudo abaixo da barra de navegação e alterar o modo de mesclagem da camada para Color Dodge.
Passo 7
Para terminar a primeira parte do layout, vamos chamar de fundo da barra lateral. Desenhe alguns guias para delimitar a barra lateral e também editar as guias existentes para torná-los aptos sobre a concepção de fato. Em seguida, desenhe um retângulo vermelho (# 3D100B) e aplique os seguintes estilos: uma Sombra, uma sobreposição de cores e sobreposições de Padrão.
Neste ponto, você deve considerar a forma como você está indo para cortar a imagem em HTML + CSS; é por isso que eu estou usando sombras Drop of Distance 0px com o máximo de tempo, e só na horizontal ou vertical gradients. A textura, neste caso tem muitas linhas horizontais. Ela precisa ser fácil para converter isso em um fundo de repetição de muitas áreas. Além disso, este é um bom momento para fazer uma pausa e organizar as camadas em suas pastas para manter as coisas organizadas.
Passo 8
Agora começam com os detalhes, quero acrescentar o nome do site em um lugar de destaque, por isso vou usar esta imagem agradável rótulo grunge. Obviamente, você deve extrair o rótulo e colocá-lo no canto superior esquerdo do nosso projeto. Tentar obter algo parecido com a primeira imagem abaixo. Em seguida, use a ferramenta Magic Wand para selecionar o pequeno círculo marrom, e depois Command + Shift + I para inverter a seleção. Ajuste os níveis e Matiz / Saturação usando os valores mostrados abaixo.
Passo 9
Agora usando a ferramenta Borracha e uma escova irregular, excluir algumas áreas de fronteira do rótulo.Para adicionar um efeito de papel cortado, selecione a ferramenta Dodge e usar o pincel para aplicar o mesmo esquivar-se para fronteira do rótulo.
Etapa 10
Nós vamos adicionar uma sombra para o nosso próximo rotular. Para isso, duplicar o "Selo" camada, altere o Hue / Saturation> Leveza a -100, e aplique um Gaussian Blur com um raio de 10 px. Em seguida, altere a "cópia Label" Blending Mode para Multiply e defina a opacidade para 75%.
Etapa 11
Um último retoque para o rótulo, alterar a saturação para -40 a torná-lo mais cinza.
Etapa 12
Agora vamos adicionar algumas imagens de apoio, tentar encontrar as imagens em torno de um conceito, mas como este é um tutorial sobre as técnicas, eu estou escolhendo um acaso. Este é um belo quadro de um trem vintage aqui no planalto de Bolívia. Extraia o formato do trem como quiser. Em seguida, altere o comboio "modo de mistura" camada para Darken.
Etapa 13
Vamos adicionar algum texto, primeiro o nome da página. Escreva algo usando uma fonte do grunge, você pode encontrar algumas versões mais interessante aqui. Para obter o título de usar um tipo de preto e alterar o modo de mesclagem da camada para Overlay, depois duplique a camada e alterar a opacidade da cópia para 75%. Para obter um pequeno efeito de borrão, mova a camada copiada de um ou dois pixels para a esquerda ou direita. Adicionar mais texto usando esta técnica, como um slogan ou algo assim. Além disso, é um bom momento para adicionar os links de navegação também.
Etapa 14
Agora, adicione mais coisas, é o estilo do grunge! Eu fiz o download escovas alguns Jenn B's from here,estas escovas têm restrições. Usando as escovas de adicionar alguns números, cantos, mascarando fitas e outros enfeites, sinta-se livre para fazer o que quiser neste passo. Basta lembrar adicionar todas as camadas inferiores, tanto o "Selo" e "Label Copy" camadas.
Etapa 15
Agora vamos começar a adicionar as seções da página. Primeiro de tudo, no cabeçalho vamos precisar de uma barra de pesquisa. Digite um rótulo de busca. Em seguida, desenhe um vermelho (# 6A0400) retângulo como um campo de pesquisa, em seguida, aplicar um curso e um efeito de camada de verniz.
Etapa 16
Agora vamos começar a adicionar o conteúdo principal do nosso projeto. Primeiro vamos adicionar um campo para colocar algum texto em destaque. Desenhe um cinza escuro (# 0D0F0E) retângulo em uma camada abaixo da barra lateral. Eu criei quatro pastas para manter o layout organizado: Um para o "Header" acima de tudo, uma para a "Sidebar" abaixo do cabeçalho ", uma para o" Conteúdo "abaixo do" Cabeça "e" Sidebar ", eo último uma para o rodapé "."
Você pode adicionar este retângulo em "Conteúdo" camada, você também pode adicionar quantas pastas forem necessárias, dentro destas quatro pastas. Uma vez que você colocou o retângulo em um lugar apropriado, aplique uma sombra e um efeito Stroke usando os valores abaixo.
Etapa 17
Baixe alguns cantos grunge e as fronteiras do aqui, e um colar sobre o fundo cinza. Em seguida, aplicam-se aplicar um efeito de sobreposição para o canto com uma cor de # 171612. Além disso, adicionar outro canto sobre o fundo da barra lateral, mas desta vez derrubar sua opacidade abaixo de 25%.
Etapa 18
Vamos adicionar algum texto. Você pode adicionar qualquer texto de exemplo, imagine que é javascript orientado texto seção de postagens recentes, ou uma seção de pós manchete, algo assim. Eu estou usando a mesma fonte mostrar grunge, usado para a barra de navegação com a cor # 4D0D0D Arial e com uma cor de # 3f3f3f para o corpo do texto.
Aplicar um efeito de sombra para o título e adicionar o mesmo efeito para os itens de navegação também.Quando você converter esse PSD em um arquivo HTML + CSS, você vai precisar para converter esses títulos às imagens, então tudo bem se você quiser adicionar mais estilos para eles. Finalmente, use alguns guias para colocar as camadas de texto em um lugar apropriado.
Etapa 19
O nosso bar é caracterizado olhando um pouco vazia, então vamos adicionar uma imagem de apoio. Neste caso, eu usei uma foto Polaroid. Você pode baixar a foto de polaroid aqui. Extraia o polaroid, colá-lo em uma camada acima do fundo cinza e com o canto do grunge "Conteúdo" da pasta, em seguida, mudar o Hue / Saturation para fazer a sépia uma polaroid pouco mais (Selecione a opção Colorize).
Use as mesmas técnicas para as bordas do "Selo" camada's (Passo 9). Apagar e Dodge as bordas da foto Polaroid. Finalmente, adicione uma sombra usando a mesma técnica utilizada no passo 10 deste tutorial.
Etapa 20
Eu tinha esta foto em sépia de mim por isso estou adicionando-o ao design. Adicione qualquer imagem em uma nova camada acima da "Polaroid" camada, selecione o quadrado preto da Polaroid, em seguida, Command + Shift + I para inverter a seleção. Selecione a camada da imagem e apague todos os extras. Em seguida, você pode adicionar mais detalhes grunge, como alguns de fita adesiva sobre a imagem, como mostrado nas imagens abaixo. Eu apliquei uma 1px efeito Drop Shadow a fita adicionados também.
Etapa 21
É um bom momento para adicionar um ícone de RSS para a barra lateral. Desenhe um retângulo arredondado Corner (# 99917E), em seguida, aplicar os seguintes efeitos a ele: um Inner Glow, um Overlay Pattern, e um Drop Shadow, use os valores mostrados na imagem abaixo. Em seguida, desenhar ou colar em uma nova camada acima do rectângulo, o formato padrão RSS e preenchê-lo com o preto. Finalmente, alterar a forma de "RSS" camada Blending Mode para Overlay.
Etapa 22
Agora coloque o ícone de RSS na parte superior da barra lateral esquerda. Adicione algum texto como "RSS feed". Desenhe outro pedaço de fita adesiva, e escrever o número de assinantes sobre ele. Lembre-se, agora estamos trabalhando na "Sidebar" pasta.
Etapa 23
É hora de adicionar um único post para o nosso projeto. Basta escrever algum texto aleatório como um título, uma outra linha para a data, categoria e autor. Além disso, algumas palavras que o texto do post.Tipografia é o mais importante nesta etapa. Gosto de usar fontes Serif para os títulos e Sans-Serif para o corpo, mas é só comigo. Decida o que você sente que é melhor para seu projeto.
Etapa 24
Para dar a nossa amostra post uma atitude um pouco mais, vamos adicionar uma imagem de visualização, tal como no TUTS sites, mas como este é um design grunge é preciso acrescentar um fundo grunge de nossas imagens. Isto é tão simples como a adição de cima e de baixo estofo com CSS, em seguida, definindo uma imagem de fundo repetindo.
Esta imagem será de 35 milímetros filme. Extrair duas pequenas faixas do filme, e mudar sua Matiz / Saturação usando os valores na imagem abaixo. Em seguida, usando um eliminador irregular, excluir algumas áreas das listras. Finalmente, adicione uma sombra a cada faixa. Quando você terminar com o filme, cole qualquer imagem abaixo das camadas do filme. Estou adicionando uma foto de uma das minhas viagens. Finalmente, aplicar um efeito de Curso (# 2F261D) para essa imagem.
Etapa 25
Desenhar uma linha de 2px vermelho abaixo o post e alguns textos para os comentários, é uma boa idéia para adicionar todas as mensagens relacionadas com as camadas em uma nova pasta chamada "Post".Em seguida, aumentar a altura do documento um pouco, você pode fazer isso usando a ferramenta Crop, isso só para ver como nosso projeto vai olhar se tem dois ou três posts sobre ele. Duplicar o "Post" do grupo, e alterar o texto ea imagem, como mostrado abaixo.
Etapa 26
Na verdade ele está olhando muito bom, agora adicionar os títulos dos itens da barra lateral. Yo pode criar uma pasta para cada item também.
Etapa 27
Agora adicione um ícone de lista. Você pode usar qualquer forma personalizada. Adicione algum texto aleatório, estou usando Geórgia para a barra lateral. Duplicar os ícones e editar um para representar o estado hover. Faça o mesmo para cada item da barra lateral.
Etapa 28
Estamos perto de terminar. Adicione alguns detalhes grunge na parte inferior da barra lateral, adicionando alguns brushes grunge em uma nova camada acima da camada de fundo da barra lateral. Selecione a camada de fundo da barra lateral, vá para Layer> Layer Mask> Reveal all. Em seguida, esconder algumas áreas do canto inferior esquerdo do fundo da barra lateral, utilizando uma escova irregular preto.
Etapa 29
Finalmente, selecione a camada de fundo da barra lateral e copiar o estilo da camada do mesmo. Desenhe um retângulo na parte inferior do desenho dentro do "Rodapé" pasta e cole o estilo da camada para ele.Em seguida, extrair e colar essa imagem acima, o fundo do rodapé.
Ajuste a saturação para torná-lo um pouco mais cinza. Além disso, você pode aplicar-se à folha de papel, uma sombra repetir a técnica da Etapa 10. Adicione algum texto sobre o pedaço de papel, talvez um slogan ou algo assim. E também adicionar alguns texto de rodapé, como uma barra de navegação rápida, e as informações de direitos autorais.
Conclusão
Web design não é um pedaço de bolo, mas espero que este tutorial vai ajudá-lo a melhorar suas habilidades. Cabe a você agora, a sua própria concepção, ou se inscrever para o PLUS para fazer o download da fonte PSD e brincar com ele. Eu adoraria ver alguns projetos web grunge no grupo Flickr PSDTUTS. Você pode visualizar a imagem final abaixo ou visualizar uma versão maior aqui.