Recortando o layout - Como fazer um site #3

E aí galera, tudo em cima?
Bom, ontem falamos sobre o desenvolvimento do layout em formato de imagem...
Hoje vamos começar a transformar essa simples imagem em um site de verdade...
Depois de fazer o layout, é hora de você ver quais elementos do layout podem ser feitos por código html e css e quais elementos tem que ser imagens realmente...
Simplificando, você vai fatiar o seu site, pegando as os elementos que tem que ser imagens...
Pra você ter uma noção do que estou falando, veja o que eu peguei do layout que fiz e salvei como arquivos de imagem, e embaixo de cada um falarei porque fiz isso...

Bom, o logo eu acho que não tem muito o que se discutir né, transformei ele em imagem porque ele realmente é uma imagem, não dá pra fazê-lo com códigos...

Se você ainda não reconheceu, esta é aquela setinha que mostra no menu qual a página que o visitante está no momento... Nessa imagem é perceptível que cortei exatamente as proporções da setinha, sem deixar sobrar fundo preto em nenhum dos lados... É importante que você corte as imagens mais precisamente possível pra facilitar seu trabalho na hora de progamar o site...

Sim, esses são os botões de redes sociais... Vocês podem estar se perguntando, estão tão juntinhos por quê? Bom a explicação é uma continuação do que foi dito acima, o recorte das bolinhas de redes sociais foi feito exatamente ao redor delas, sem sobrar fundo branco em nenhum dos lados... Depois de recortar cada uma, unimos todas em uma só imagem, essa técnica é conhecida como sprite, e ficou famosa por ser utilizada em antigos jogos de luta... A explicação de usar essa técnica é que quando você vai salvar muitas imagens com fundo transparente, se você juntá-las em uma só elas ficam mais leves(com menos Mb's)... No caso essa imagem não é transparente, mesmo assim, achei interessante falar da técnica...

Bom, esse é um exemplo de imagem com fundo transparente... Você pode se perguntar, mas pra que salvar com fundo transparente? Simplesmente porque essa imagem ficará sobreposta a outra imagem... Essa imagem é aquele detalhe que fica em cima e embaixo dos destaques da página inicial do site, então se você salvar ela com fundo branco não vai funcionar... Inclusive, como vocês podem ver esse fundo quadriculado eu só coloquei pra vocês conseguirem enxergar o que há na imagem, pois se não colocasse ia ficar tudo branco mesmo...rsrs' Se você não sabe como fazer isso no photoshop, é simples(almenos se for você que tiver feito o desenho...rs), basta você desbloquear a camada de fundo, deletar ela, e o photoshop mostrará um fundo quadriculado parecido com este que coloquei aqui... Depois disso você vai em arquivo, salvar web, alguma coisa assim, que lá você terá várias opções de formato e qualidade de imagem, isso é muito útil para você conseguir a melhor qualidade e o menor tamanho de imagem possível... Bom nessa janela de salvar no modo web você vai em settings e escolhe PNG-24, não esqueça de marcar a caixinha de transparência e pronto, já pode salvar sua imagem transparente... Se você quiser também pode tentar salvá-la no formato GIF, ele também tem modo de transparência, mas eu particularmente não gosto pois ele não suaviza muito bem as bordas dos desenhos, prefiro o png que fica um arquivo bem maior, mas mais bem feito...rs

Não abuse das imagens com fundo transparente, só use-as se realmente for necessário, pois elas são muito grandes... E caso realmente precise tanto delas e esteja ficando vários arquivos grandes, tente fazer a técnica do sprite... Essa técnica é muito utilizada pelo facebook, ou seja, é uma boa técnica pra ajudar no carregamento rápido de páginas...

Mas porque você não recortou os menus e as bolinhas com setinhas?

Como falei anteriormente, você só deve recortar e transformar em imagens o que realmente você não consegue fazer com códigos... Os menus são retos, eu consigo fazer eles com código... As bolinhas também tem um formato que é possível fazer através de CSS, arredondando as bordas de um quadrado até que fique redondo, enfim, vocês verão eu fazendo isso ainda...

É claro que nos seus primeiros sites você pode transformar tudo em imagem, pois não saberá muito os códigos e as possibilidades do que pode ser feito, mas se você quiser fazer como eu e tirar o máximo proveito dos códigos, você pode fazer buscas no google antes de recortar o desenho, tipo, você quer um efeito de costura, como eu? Vai no google e busca "efeito de costura CSS"... Perceba que eu procurei o que queria e no final escrevi CSS, isso porque essa é a principal forma de criar elementos com códigos...

Não se empolgue com o primeiro código que achar, veja mais de um exemplo, assim você poderá entender como os códigos funcionam e achar o que melhor se adapta à você... No caso esse efeito de costura é fácil de ser feito, por isso também não recortei e transformei em imagem... Mas caso não desse pra fazer com código e eu tivesse que transformar em imagem, elementos que se repetem não precisam ser recortados do início ao fim, você faz um recorte de forma que o início da imagem encaixe com o final, e assim quando colocados, lado à lado(e também um embaixo do outro), forme o que você deseja...

Quer entender melhor? Lembra aquele quadriculado que eu coloquei na imagem transparente ali em cima?

Na verdade a imagem dele é esta:

Viu só? Essa imagem vai se repetir tanto na vertical, quanto na horizontal e assim vai formar um fundo quadriculado... Você também pode fazer a imagem se repetir em apenas uma das direções...

No caso da costura eu pegaria o começo da parte branca até o final da parte preta(antes de começar a próxima parte branca), daí colocaria pra repetir a imagem apenas na horizontal...

Bom gente, por hoje é isso, eu ia começar a montar o site, mas acho que o post já ficou grande demais, então vou deixar isso pra amanhã, é bom que vocês já vão aprendendo que pra fazer site você precisa ter paciência e que geralmente a melhor alternativa quando temos um problema é deixar pra resolver amanhã com a cabeça fresca...rsrs

Valeu! ^^