Style/Css para Social Spirit／Spirit Fanfics - Part2.1 : Imagens

Estou refazendo o post com base no antigo pq o style que eu estava usando de molde eu perdi pois meu outro pc deu tela azul e bugou geral >< Mas esse vai estar explicadinho do mesmo jeito~

Aliás eu coloquei um monte (mesmo) de imagem pra ficar bem mais compreensível e mais fácil de perceber caso haja algo em errado pois pode-se comparar.

Caso não tenha vista a primeira aula pode clicar Aqui , você será levado ao post explicando o básico do básico sobre os styles~

Vamos começar pelo modelo básico.

Vamos começar com o cimaLogo.

Seu cimaLogo deve ter exatamente 1000px de largura, a sua altura pode variar mas o máximo é de 350px, e se lembre de nunca usar um wallpaper e sempre coloque sua assinatura ( esses dois pontos estão nas regras mas as vezes esquecemos, então prestem atenção, são coisas simples mas que podem fazer você perder o style ou até mesmo perder sua conta no Social…).

Nesse post não  irei falar sobre a edição de imagens do cimaLogo, então a parte da edição fica por  sua conta, okay?

Edição pronta? Prossigamos. O meu ficou assim:

Vamos salvar a imagem dentro da pasta IMG, há dois jeitos de o computador “ler” a imagem, o primeiro você substitui a imagem original do cimaLogo e pronto; a segunda é salvar com outro nome ( ainda dentro da pasta IMG) exemplo: salvei a imagem com o nome de banner,

Então eu abro o modelo/bloco de notas e procuro aonde está escrito #cima #logo {  ,  na parte escrita url:(img/cimaLogo. jpg)  para facilitar pode digitar “Ctrl” + “f" e digitar a palavra até se acostumar aonde fica cada coisa ^^

Você deve substituir o cimaLogo pelo nome de sua imagem, exemplo url:(img/banner. jpg)

E se sua imagem for salva em Png , mude o jpg por png. Salve, ou se preferir apenas aperte  “Crtl” + “S”. Agora abra o perfil/navegador , seu cimaLogo ficou assim?

Vamos ao modelo de novo, na parte do #cima #logo {   height: 120px;  tem o número 120 substitua ele pela altura de seu cimaLogo, eu usei o tamanho máximo de altura no cimaLogo, então irei substituir o número por 350.

Salve o modelo e recarregue o perfil. Está assim agora ?

Agora vamos para o fundoDegrade, (lembrando que o próprio site do spirit tem aulas e se quiserem dar uma olhada nas aulas de “fundoDegrade” ajudam bastante ^^ ).

Eu irei criar uma imagem com a dimensão da tela do pc (tipo pra preencher tudo, sabe?)  , que é de 1366px de largura por 768px de largura. Usando o balde de tinta eu colori toda a imagem com um tom de azul claro ( a mesma que eu usei no cimaLogo, mas faça como vc achar melhor, não é necessário que siga exatamente o que digo em relação à edição de imagens, mas tire isso como uma base~) , e eu salvei com o nome de fundoDegrade1.

Deixei assim simples, qualquer coisa sempre é possível substituir a imagem depois

Ela ficou assim então:

Então, agora vamos lá de volta ao “Modelo” , vms até #fundo {

E mudamos o nome do fundoDegrade para o da nova imagem, assim como feito no cimaLogo,

Salve o modelo, e recarregue a página do perfil no navegador, deverá estar algo assim

Irei fazer outra aula abordando os outros estilos do fundoDegrade certinho~

Agora vamos ao fundoBase

Eu tirei um print do meu perfil\navegador para ter uma base de como cada imagem vai encaixar (pra ajudar pode pegar essa imagem de cima que mesmo sendo do meu style vc pode ter uma noção das proporções ^^ ), abri o próprio fundoBase que vem com o modelo e posicionei onde eu queria que ele ficasse.

Fica estranho por que  a imagem branca está em cima de outra imagem branca, mas eu posicionei o fundoBase na parte destaca como podem ver, depois desabilitei a visibilidade da 1º camada

Agora com a ferramenta “varinha mágica” vamos selecionar a parte branca da imagem, eu não consigo tirar print de uma imagem selecionada mas deverá estar algo selecionado como a parte destacada:

Então crie uma nova camada, e nessa camada pinte da cor que desejar com a balde de tinta a parte selecionada ( depois eu acabei mudando de ideia e mudei a cor para um tom levemente mais escuro)

Agora já podemos excluir a camada da imagem do fundoBase, a qual veio no modelo,

Agora isso foi bem opcional mas eu criei uma borda na imagem apenas criando outro retângulo branco, em outra camada, um pouco maior que esse azul e coloquei a camada embaixo da anterior, para ficar ao fundo, ficou assim:

Corte as laterais da imagem deixando apenas a parte colorida na imagem e lembre-se que a imagem deve ter 1022px de largura

Eu acabei  voltando e redimensionando a borda branca e adicionando uma sombra clicando duas vezes na camada e clicando em sombra projetada

E salve no lugar do fundoBase (lembre-se de salvar em png para que a imagem fique transparente.

Ficando:

Mas se rolarmos a página um pouco para baixa vms ver que ficou uma parte em cinza

Para resolvermos isso vamos até a parte do body

e aonde está escrito #DFDFDF vamos substituir pelo código da cor a qual vc usou no fundoDegrade (Ignorem que eu mudei no #fundo o repeat-X por no-repeat, porque mudei de ideia de repente mas nesse caso não vai mudar em nada).

Se você não sabe como “pegar” o código da cor, é o código de 6 algarismos ( que no photoshop)  aparece quando clicamos na cor, naquela telinha:

Há um # e um código depois, é desses 6 algarismos que precisamos, se o programa que usa não possui isso ( como o caso do photoscape) há sites que fornecem esses código, se digitar paleta de cores achará diversas opções, ou ainda se vc digitar seletor de cores o google já vai te mostrar direto uma opção de seletor, sem precisar entrar em nenhum site

(imagem do seletor tirada do google)

Recarregamos o navegador e deverá ficar assim

Mas ainda falta a parte debaixo do fundoBase não é?

É ai que entra o fundoSombra, então eu recortei a parte debaixo do fundoBase e fui ajustando o tamanho até que as sombras das laterais se acertassem na preview\navegador

Agora salvamos essa imagem no lugar do fundoSombra, e lembre-se que a imagem que ser salva no formato Png para que fique transparente.

E caso vc erre o tamanho do fundo sombra vai ficar umas partes estranhinhas tipo aqui

(Eu só tirei o fundo para ficar mais fácil de visualizar) mas para acertar isso é só ir cortando\aumentando a imagem de pouquinho em pouquinho até ver que está tudo certo

Final:

E prontinho~

A parte de imagens do seu style já está pronta

Por enquanto foi isso, qualquer dúvida me falem, fiquem a vontade de me mandarem como está ficando ^^

Espero que tenham gostado, até mais

Bjinhosss