Tutorial - Afiliados com uma só Imagem

Oi cupckes! trouce um tutorial e muito encontrado pela net é e muito bom  e usado o photoshop esse tutorial eu peguei de um blog mais eu não me lembro o nome dele :(

Clique em "Read More" e continue lendo

O tamanho total da imagem que forma toda a elite, é 226 de altura, e 180 de altura, pelo menos no meu ficou bom assim, no final você vai ajustar direitinho, então não se preocupe. Cada imagem pequena, tem a dimensão de 45 x 45, o tamanho que se ajusta bem para formar a imagem principal. 

Agora que já sabe as medidas, crie duas novas imagens desse tamanho no Photoshop. Pinte a de 45x45 de uma cor qualquer, e vá colando na outra imagem, teclando ctrl J, e ajustando como um jogo de xadrez, desse jeito aqui (xx). Mude a cor, e complete os espaços que sobraram, após isso, mescle as camadas, separando as pelas cores, que no meu caso foram rosa e laranja (xx)

Agora pegue uma imagem qualquer, duplique, e crie uma máscara de corte, deixando uma acima da camada laranja, e outra acima da rosa, por exemplo. Isso é só para você ter a noção de onde recortar e as medidas... (xx) Agora, vamos a parte mais importante, que é um pouco complicada, mas tudo bem. Mescle a primeira camada com a imagem, e a segunda com a outra imagem, e vamos lá. Se quiser facilitar, deixe um traçado em volta de suas imagens, só se quiser. Vá selecionando quadradinho por quadradinho, e cole na outra camada, 45x45 (x / x). 

Vá fazendo isso e salvando, como parte 1, parte 2, para não se perder. Se tudo ocorreu bem, continue o tutorial.

Essa segunda parte é muito simples, mas mesmo assim é muito importante que seja realizada com bastante calma. Vá no seu HTML, tecle F3, e pesquise pela tag ]]></b:skin> então depois de achá-la, cole o código do blockquote acima dela, que seria o código que deixa as imagens alinhadas no gadget:

.afiliados {
opacity: 0.7; -webkit-transition: 0.5s; width: 45px; height: 45px; text-align: center;
margin-bottom: -2px; -webkit-filter: none; -webkit-transition:all 1s ease;
}
.afiliados:hover {
margin-bottom: -2px; -webkit-filter:grayscale(1);
-webkit-transition:all 1s ease; -webkit-transition-duration: .99s;
}

Se precisar, depois de fazer o próximo passo, mude o margin-botton:-2px;, quanto maior o número, mais  se separam as colunas (de cima, e de baixo). Então só precisamos mexer com mais uma coisinha: o código que fica nos gadgets, para que tudo que foi feito apareça. O mais chato é ter que mudar os links e tal, mas nada que seja de matar.

Então, copie o código que deixarei linkado abaixo, e cole-o no gadget que corresponde à sua elite, editando os links e o nome do blog. E já vou explicando: O "??" significa o nome do blog afiliado, e o "//" é o link dele, simples assim.

O código está presente aqui neste link, então clique no link, e copie-o ~ ♥

Agora 

sim

 o tutorial acabou. Meu Deus, demorei tempos para escrever todo ele, mas acho que valeu à pena, né, pessoal?