Passo 1 - Criando o layout básico
Portanto, nossa primeira tarefa é criar um layout para nossa página. Nós não vamos fazer nada muito extravagante, pois o tutorial é sobre fundos mais layouts. Ainda assim, deve ser bom e ser uma disposição real viável. Assim, na imagem acima, você pode ver o meu plano de componentes bruto da página. Eu tenho planejado em um menu e submenu, um painel para introduzir a secção e uma área de conteúdo. Eu também previsto que deve ser inferior a 1000px de modo que quando uma pessoa em uma tela pequena vistas no site eles ainda ver o fundo corretamente (já que vai ser uma grande característica do projeto).
Agora gostaria de salientar, na realidade, eu realmente não sacar esse conjunto de caixas bem assim. Era mais como só atrapalha ao redor até que eu pensei "oooh que é um layout agradável". Mas, para os fins deste tutorial faz mais sentido para explicá-lo desta maneira!
2 - Fleshing it out
Assim que o layout é o nosso ossos, agora precisamos detalhá-la com algum conteúdo em branco e um esquema de cores.
Como você pode ver que eu não fiz nada de realmente surpreendente aqui, apenas colocou os elementos na página bastante ordenadamente e uniformemente. Então, observe que o espaçamento. Na imagem eu tentei mostrar como os diferentes elementos de linha (linhas amarelas), como é mais ou menos ainda espaçamento vertical e horizontal, bem como acima e abaixo de elementos.
Note que estes são apenas guias ásperas e eu realmente trabalhar apenas pelo olho até que as coisas parecem estar corretas. Mas se você não tiver certeza de espaçamento, fazendo as coisas de forma bastante equilibrada não é um mau lugar para começar. À medida que ficam mais confortáveis com espaçamento pode variar as coisas e jogar com saldos desiguais.
Na imagem acima você pode ver que eu escolhi um tipo chamado Rockwell tela principal que vamos usar no painel de posição para dar à página de um pouco de caráter. Se eu fosse construir este site que poderia ser inserido uma imagem usando ou sIFR. O resto do texto é Helvetica e Arial que naturalmente é adaptado à utilização de HTML. Também joguei em uma ilustração de vetor de um avião de papel que eu desenhei anos atrás, e vender o estoque. Claro que em um projeto real, essa imagem seria algo a ver com o site, em vez de simplesmente jogados aleatoriamente em como eu tenho aqui.
Finalmente eu usei uma morna, a paleta de cores tons de terra. Estou realmente um pouco de um fã de bege e cores da terra e você verá que eu usá-los muito. Acho que percorrer um longo caminho para tornar os sítios Web aparência mais amigável e mais acessível.
Portanto, a página está olhando bem, mas não há nada de muito memorável sobre isso ainda e é um bocado básica. No próximo passo, vamos adicionar alguns polonês.
3 - Polimento e acrescentando algumas Estilo
OK então aqui você pode ver o layout exatamente o mesmo, mas eu polido para cima e adicionou dois elementos visuais para dar-lhe algum estilo. O primeiro elemento é a seta cortada do menu lateral. Isso faz com que o olhar painel do meio como uma espécie de balão de fala overgrown. A segunda visual que você vê quando você olha de perto é uma espécie de ponto tema.
Assim, em todos nós usamos três elementos visuais da página de dar algum estilo: uma ilustração, uma rede interessante de quebra de forma, e uma sutil temática baseada em uma forma simples. Mais tarde vamos acrescentar um quarto elemento visual - um fundo - para acabar com o estilo do site.
Na imagem acima eu recordar todos os bits de polimento que eu adicionei. It's all destaca apenas pouco e graduações na cor, pontos e, naturalmente, a cortar a seta. Você pode também estar interessado em um artigo anterior eu escrevi um ano atrás sobre polimento web designs aqui no PSDTUTS.
Ver Antes e Depois
Então, com isso temos a nossa disposição básica!
4 - Adicionando um Background Tiled
Assim, o primeiro fundo que nós estamos indo em swap é uma imagem lado a lado. Neste exemplo estamos usando uma foto de grama que eu usei nesse texto Tutorial de Grama (uma série que ainda estou a terminar 
Você pode obter a foto de grama original no Flickr.
Você pode obter a foto de grama original no Flickr.Claro, se você tentar ladrilhos a foto original não vai ser muito bom e vai ser óbvio que você está apenas repetindo a mesma imagem mais e mais. Em vez disso você precisará alterar a imagem de modo que as telhas sem emenda. Felizmente eu só colocar um tutorial sobre esse assunto, assim que a cabeça e ler mais:
Como um Virar uma textura em uma perfeita Mosaico Antecedentes
Junto com a mudança no fundo, é claro, de ter actualizado a coloração para se adequar ao novo visual.Observe que eu tenho evitado usar o mesmo tom de verde brilhante, a luz como a grama - isso teria sido avassalador. Em vez de escolher tons mais maçante verdes claros e escuros complementa o plano de fundo.
5 Transparência - mistura com o fundo
Agora fundos como este são perfeitos para adicionar camadas transparentes sobre o alto. Aqui tanto Sobre o painel eo menu tem uma certa transparência e parece incrível, porque você pode ver algumas das ervas que passa, e acrescenta alguma profundidade. Embora você pode simplesmente diminuir a intensidade da opacidade da camada disso, outra opção é adicionar mais um par de camadas em cima - um com uma ligeira inclinação desvanecimento de nada e outra com um destaque 1px.
Na imagem acima você pode ver, por exemplo, no menu que eu tenho um bloco do conjunto branco com 70% de opacidade, em cima do que há um gradiente de branco para nada, e em cima do que é uma linha branca na 1px borda inferior. Essas camadas adicionais enfatizar a transparência e dar a profundidade da imagem.
6 - Criar um teste rápido HTML Transparent PNG
Então tudo transparência, esta é fácil de fazer no Photoshop, mas você pode estar se perguntando como é possível construir um projeto assim.
Felizmente, graças é possível para o arquivo. PNG formato de arquivo que permite que você use a transparência nas suas imagens. Uma coisa a estar ciente de que é que enquanto você pode fazer a transparência (por exemplo, 60% de opacidade), você não pode fazer modos de camada de mistura (por exemplo, Multiply ou Overlay). Uma vez que em um design Photoshop é importante não fazer nada que não é realmente edificável, tudo que eu usei é configurações de opacidade. É mais limitante, mas você ainda pode obter efeitos agradáveis.
Então vamos criar um teste de HTML rápido apenas para certificar-se tudo realmente funciona como imaginamos que sim. Para criar uma PNG transparente, primeiro vamos mesclar as camadas de nossa forma de painel grande em um. Porque todas as camadas têm alguma transparência do resultado final após a fusão também é semi-transparente.
Agora basta copiar isso em um documento do Photoshop de novo, desligue a camada de fundo (veja imagem acima) e você deve ver a transparência mostrando através.
Agora vá para File> Save for Web & Devices e escolha PNG-24 a partir das opções. Você deverá ver a mesma transparência que aparecem na janela de visualização.
Em seguida vou fazer a mesma coisa para uns poucos mais elementos de imagem, porque no nosso teste, queremos demonstrar que é possível colocar uma PNG transparente em cima de uma PNG transparente em cima de um fundo.
Com todas as nossas imagens criadas, agora é só uma questão de colocar um pouco de HTML junto: