Aula Fundo Contínuo


Por:


Fundo Contínuo
Escrita por ßLadySharingan-
Nível: Básico




Olá Pessoal!

Essa aula irá falar sobre fundo contínuo, que nada mais é que styles com uma imagem grande no fundo fixado. Alguns exemplos são: 1 & 2.

Para fazer esse tipo de fundo é bem simples. Primeiro você vai precisar trabalhar com um arquivo grande dentro do seu editor. Eu, particularmente, gosto muito de trabalhar com o tamanho da resolução da minha tela, quanto maior, melhor, para que todos que tenham monitores em tamanhos diferentes tenham uma boa experiência.

Para saber a resolução da sua tela você só precisa tirar um print, ir para o PhotoShop e criar um novo documento, pode ser com Ctrl + N ou em Arquivo > Novo.

Irá aparecer essa janela:


(se você estiver usando uma versão anterior essa tela pode ser diferente)


Perceba que a Largura e Altura já criam automaticamente um tamanho, esse tamanho é a resolução da sua tela, é importante verificar a resolução do seu documento, trabalhem com resolução 72 Pixels/polegadas e não mexam nisso porque pode acabar atrapalhando um pouco.

A tela do monitor que estou usando no momento é bem pequena, por isso vou usar o tamanho do meu antigo que é 1600x900, é mais fácil pra se trabalhar.

Com o arquivo criado vamos definir alguns espaços, na parte de ferramentas, ao lado esquerdo, iremos até a ferramenta de forma:


(Ou você pode apertar a letra (U) do seu teclado)


Escolha a opção retangular e dê um clique em cima do seu documento, irá aparecer essa janela:



Vamos criar então um “fundo base”, você pode escolher a largura que desejar, eu vou por 1000 de largura por 900 de altura.



Agora iremos centralizar esse fundo. Na parte de camadas, que fica na parte direita do PS você vai selecionar a camada Retângulo 1 e a camada Plano de fundo.



Com as duas selecionadas, você vai até a ferramenta de Mover: ou aperte a letra (V) do seu teclado. Irá aparecer na parte superior um sub-menu, nesse menu tem algumas ferramentas que vão nos ajudar a deixar a forma centralizada:


E ainda com as camadas selecionadas, você vai clicar na opção: e



E a forma ficará centralizada no seu documento. Esse fundo que foi criado é só pra você ter uma base de onde ficará a parte do perfil e o espaço que você tem aos arredores, você pode diminuir um pouco ou aumentar, caso ache necessário.

Você pode agora mudar a cor da forma para alguma que fique mais agradável e enfim podemos fazer um fundo contínuo.

Você pode fazer esse fundo da maneira que quiser, peguei aqui uma imagem de uma montanha e coloquei no fundo, ajustei o tamanho da forma como queria, levando em consideração o tamanho da base que a gente criou e fiz algumas edições:



Na hora de pôr a base, temos duas alternativas. Deixa-la numa cor sólida:



Ou tirar a opacidade e deixar com transparência:



Uma outra alternativa de Fundo contínuo é pegar uma imagem e “dividi-la” em duas, caso ela seja pequena, por exemplo essa.



Então a gente tem aqui nosso fundo com nossa base e vamos colar a imagem que a gente pegou, pra isso é só copiar a imagem e no PS apertar Ctrl + V. Teremos nossa imagem assim:



Agora iremos passar a camada dessa imagem para baixo da camada da nossa base e iremos mover a imagem de forma que uma das personagens fique de um lado, assim:



Vamos agora apertar Ctrl + J para duplicar a camada e mover ela de forma que a outra personagem fique do outro lado, assim:



Dependendo da imagem que você escolher você faz as alterações necessárias. Nesse caso, irei apagar essa tarja preta e pintar o fundo, para isso irei com a ferramenta de seleção ou apertando a letra (M) do teclado e selecionarei a tarja preta.



E agora é só apertar a tecla Delete, para poder apagar. E para pintar o fundo eu venho na parte de camadas e escolho essa opção:



Ao clicar, vai aparecer uma lista de ferramentas, normalmente conhecidas como ajustes. Lá em cima vão ter três opções, Cor Sólida, Degradê e Padrão, vou escolher a opção Cor sólida e irá aparecer essa tela:



Com essa janela aberta, toda vez que eu passo ou mouse fora dela o Conta-Gotas fica ativo, assim eu clico bem na área do fundo da imagem. Como na imagem que eu escolhi tem degradê, então preciso escolher uma parte dela que esteja bem no finalzinho para não dar diferença:



Escolhi a cor e ficou assim. Agora é só fazer a edição que você quiser, colocando efeitos, brushes, texturas, tudo o que você achar que vá ficar legal no seu fundo, pode mudar a cor da base para outra que combine mais e a sua imagem estará pronta e ai é só salvar e hospedar para colocar no seu style.

Na hora de por no seu modelo você vem no #fundo e coloque assim:
#fundo {
background: url(LINKMONTANHA) no-repeat center top fixed;
}
#fundo {
background: url(LINKALPHYNE) no-repeat center bottom fixed;
}

Para as duas imagens eu coloquei opções diferentes no código, já que os dois fundos que fiz são diferentes um do outro, No caso do fundo da montanha, deixei ele como no-repeat (para que a imagem não se repita de maneira nenhuma), center (para deixa-la centralizada), top (para que ela fique fixada de cima para baixo) e fixed (para que a imagem ande com a página, ou seja, ela ficará parada no lugar não importa se você vá para cima ou para baixo no perfil.)

Já no fundo da Alphyne a diferença foi o bottom, que eu pedi para que a imagem ficasse fixada de baixo para cima, já que o fundo tem muito mais foco na parte de baixo.

É um pouco confuso, mas tudo depende da resolução do monitor. Se, por exemplo, você tiver um monitor de 768px de altura e eu tiver um de 900px, se eu fizer um fundo de 900px de altura não vai ser a mesma coisa para você, vai ter uma diferença do meu monitor para o seu.

E quando se usa o código fixed, a imagem fica parada, então se a imagem for muito grande, alguns pixels ficarão de fora, você não vai conseguir ver a não ser que diminua o zoom do navegador, ou seja, para imagens com o foco na parte inferior, é sempre bom que coloque o bottom, assim, ao invés de ficar faltando imagem na parte de baixo, ficará faltando na parte de cima. É muito importante que tomem cuidado com isso, para que a visualização do style não seja prejudicada em outros computadores.

Qualquer dúvida, deixe nos comentários que estarei respondendo cada uma delas. Muito obrigada pela atenção e espero que tenham gostado.



LadySharingan-
Beta Style

Gostou da Aula? Compartilhe!

Gostou? Deixe seu Comentário!

Muitos usuários deixam de postar por falta de comentários, estimule o trabalho deles, deixando um comentário.

Para comentar e incentivar o autor, Cadastre-se ou Acesse sua Conta.


Carregando...