Style/Css para Social Spirit Part2

Imagens~

Vamos começar pelo modelo básico.

Devo pedir desculpas pois não consigo tirar print das imagens quando tem algo selecionado, mas espero que entendam o tutorial do mesmo jeito, qualquer coisa não deixem de perguntar-me nos comentários ^^ Ah e ignorem o modo que falo, as vezes falo nós vamos, as vezes falo eu fiz, o que importa é que da para entender né? Rsrs

Começando~

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 e tals, quando fazer outro post sobre a edição deixarei o link no final, 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, ah dois jeitos de o programa “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) ex salvei a imagem com o nome de banner,

Então eu abro o modelo/bloco de notas e procuro aonde está escrito .cimaLogo{  ,  na parte escrita url:(img/cimaLogo. jpg) 

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 aperte  Crtl S. Agora abra o perfil/Internet , seu cimaLogo ficou assim? :

Vamos ao modelo de novo, na parte do cimaLogo{ 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, vou fazer o mais simples, eu irei abrir a imagem no photoshop, 

Redimensionar a largura dela para 200 e usar a ferramenta degrade para "colorir" ela ,

(Ignorem o fundo na imagem, ela aparece quando você clica com o botão direito do balde de tinta e dai seleciona ela) depois irei redimensiona-la para 2 de novo e salvar no lugar do fundoDegrade, podendo substituir a imagem ou editar no modelo como no cimaLogo, irei fazer outra aula abordando os outros estilos do fundoDegrade, salve o modelo e deverá ficar assim:

Agora vamos la no começo aonde está o body , aonde está o background: #DFDFDF iremos colocar o código da cor do degrade.

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 ( que por sinal não consigo tirar print para mostrar) há um # e um código depois, é desses 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.

Salvo o modelo, recarrego a pag e deverá ficar assim

Agora vamos ao fundoBase 

Eu faço desse jeito pois foi como aprendi (Aprendi Aqui) , mas fique livre para fazer como quiser e souber, para fazer esse estilo de fundoBase que é aquele com as sombras no fundo é preciso de um programa que suporte camadas , como por exemplo o pixrl ou o photoshop, já programas como o photoscape não dá para se fazer ( repetindo, não da nesse método)

Aqui fica mais complicadinho

Vamos abrir a imagem ( a original que vem junto do style), 

Criar uma nova camada, com a ferramenta varinha mágica selecionar a parte branca na camada de baixo, 

Agora na camada de cima com a ferramenta balde de tinta vamos pintar da cor que desejarmos, apertamos Ctrl D, criamos uma nova camada, criamos um retângulo bem fininho com a ferramenta letreiro retangular,

E com o balde te tinta pintamos de preto, apertamos Ctrl D, vamos em Filtro, Desfoque, Desfoque gaussiano, desfoque o quanto achar necessário, nesse tutorial eu coloquei 4.0 mas achei que fico muito desfocado,

Posicionei no canto da imagem, 

Apertei Ctrl J para duplicar a camada e posicionei no outro canto,

Depois disso eu desabilitei para ver a primeira camada, não sei como chamar isso, mas enfim cliquei no "olhinho" para não poder mais ver a primeira camada que é o plano de fundo, arrastei a camada 1 ( a verde) para cima de todas e salvei,

Por favor me salvem como PNG pois se salvarem em Jpeg a imagem não fica transparente e n fica essas sombrinhas no final.

Editei no modelo o nome, igual ao do CimaLogo e ficou assim:

Porém, eu não estava satisfeita com o resultado, então fiz o fundoBase novamente, e dessa vez eu escolhi uma cor mais escura e no desfoque gaussiano eu coloquei 2.5, agora está assim:

Ah eu também coloquei a assinatura (no cimaLogo) bem pouquinho para cima, só para melhor visualização...

O link das imagens que usei estará na descrição do style (que quando postado terá o link aqui)

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

Espero que tenham gostado, até mais~