Pedido: Efeito Pixelado na Ilustração (Photofiltre)

Hey, angels :) What's up?

Recebi a seguinte sugestão de tutorial:

E resolvi atender nessa postagem. Tenho um aviso super importante também. Curiosos? É só continuar lendo. 

Bordas Transparentes na Imagem

Hey, angels :) What's up?

Fiquei muito feliz em saber que vocês gostaram da ideia. Trouxe logo nos três programas, para facilitar. Afinal, se alguém quiser fazer em só um deles, vou acabar atrapalhando pela demora com a explicação. Tenho apenas um aviso: o resultado pelo Photoscape não é tão legal quanto no Photofiltre ou Photoshop. Tem sim como fazer, mas fica bem mais bonito nos outros. Então, se possível, use-o apenas como última opção.
Bom, chega de enrolação! É só continuar lendo. Vamos lá?

Pedido: Efeito nas Imagens para Afiliação

Hey, angels :) What's up?

Ontem recebi um pedido de tutorial:

Existe mais de uma forma de se obter esse efeito, mas resolvi ensinar a que uso atualmente no Mrs. Nightshade. É super simples de fazer e é realmente muito bonitinho.Se quiserem ver, é só continuar lendo.

Ilutrações para Post com Pattern

Hey, angels :) What's up?

Hoje trouxe um tutorial muito bacana para vocês. Vai ser útil para quem está cansado de usar o mesmo efeito nas ilustrações e tudo mais... Além de ser super fácil! Vamos começar?

Materiais:

- PhotoScape [www]

- Imagem qualquer

- Pattern

Quanto ao Pattern, encontrei uns bem legais no Birthday Cake. No tutorial, usei o primeiro dessa postagem.

Para princípio de tudo, abram o programa na parte de "Editor". Logo depois, escolham uma imagem e abram. Vou usar essa:

Depois, na aba "Objeto", escolham a opção Fotografia.

Então selecionem o pattern escolhido. Vocês devem redimensioná-lo até ficar parecido com o tamanho da foto ou maior, não tem problema. Não precisa posicionar corretamente, pelo menos não no momento.

Agora devemos alterar a Opacidade do Pattern. Para fazer isso, dê dois cliques nele. Uma janelinha irá se abrir, então configure-a dessa forma:

Acho que fica bom assim, porque não é exagerado e tudo mais. 

Bom, depois disso vem a parte de posicionamento: façam com que o Pattern cubra toda a ilustração. 

Para finalizar, é só clicar em "Foto+Objeto"...

... E marcar a primeira opção na janelinha que aparecer:

E pronto!

Resultado:

Viram como é fácil?

Bom, por hoje é só.

Espero que tenha gostado!

Beijos,

Mrs. Nightshade.

Efeito Starlights

Hey, angels :) What's up?

Hoje trouxe um efeito bem legal para a Elite de Afiliados:

Exemplo (passe o mouse):

Vamos começar?

Vá em Design > Editar HTML. Usando Ctrl+F, busque pela tag ]></b:skin> . Assim que encontrar, cole o seguinte código acima dela:

#parceiros {opacity: .99;

-webkit-transition:all 1s ease;

-moz-transition:all 1s ease;

-o-transition:all 1s ease;}

#parceiros:hover a {opacity: .20;}

#parceiros a {opacity: .80;

-webkit-transition:all 1s ease;

-moz-transition:all 1s ease;

-o-transition:all 1s ease;}

#parceiros a:hover

{opacity: .99;}

E então salve. Depois crie um gadget de HTML/Javascript e cole nele o código abaixo:

<div id="parceiros">

<center>

CONTEÚDO DOS AFILIADOS</center> </div>

É só substituir "Conteúdo dos Afiliados" pelo código da sua Elite (sem nenhum outro efeito, de preferência).
Aprendi com o blog Birthday Cake, então créditos dados.

Bom, é isso.
Espero que tenham gostado.
Beijos,

Mrs. Nightshade.

Elite de Afiliados com Efeito Expansão

Hey, angels :) What's up?

Estava meio sem ideias para postar, mas resolvi trazer um tutorial bem legal. Vocês podem ver o resultado no meu blog, o Mrs. Nightshade:

É bem útil para quem tem um número de afiliados um tanto grande, mas não quer um gadget que fique ocupando muito espaço. 

Enfim, vamos começar?

Antes de tudo, vocês precisam ter todo o código da Elite de Afiliados de vocês. 

Escolham a parte do código deve aparecer fora do efeito de expansão. Eu, por exemplo, deixei apenas três blogs.

Depois de ter feito isso, pegue a parte que quer dentro do efeito de expansão e cole no bloco de notas, no Pastebin ou em outro editor de textos.

Assim que terminar isso, vamos usar o código abaixo:

<div class="divspoiler">

<img src="URL DA IMAGEM DE MAIS/MENOS" onclick="if (this.parentNode.nextSibling.childNodes[0].style.display != '') { this.parentNode.nextSibling.childNodes[0].style.display = ''; } else { this.parentNode.nextSibling.childNodes[0].style.display = 'none';}" />

</div><div><div class="spoiler" style="display: none;">

CÓDIGO QUE VOCÊ SEPAROU </div></div>

A parte "Código que você separou" tem que ser substituída pelo código que querem dentro do efeito de expansão.

"URL da imagem de Mais/Menos" é bem auto-explicativo, [risos]. Vocês podem usar a imagem que fiz para usar no meu blog:

Achei fácil, aprendi com ajuda do blog Birthday Cake.

Bom, por hoje é só.

Dúvidas ou Pedidos? É só comentar ou mandar uma pergunta aqui.

Espero que tenham gostado.

Beijos,

Mrs. Nightshade.

Pedido: Efeitos para Elite de Afiliados

Hey, angels :) What's up?

Hoje eu não printei, mas recebi um pedido da Laris (dona do Panda's Secrets). Ela quer efeitos para colocar na elite de afiliados e eu encontrei alguns lindos no Kawaii World. Então, créditos a esse blog pela genialidade.

Amanhã eu pretendo postar sobre o slide de imagens que coloquei no design do Mrs. Nightshade. Foi um sufoco para encontrar, mas depois falo sobre isso. Vamos para os efeitos!

Pedido: Efeitos para Ilustrações

Hey, angels :) What's up?

A linda Babii-chan (dona do maravilhoso Sweetie Coconut) fez um pedido na Ask.fm do blog:

Então eu trouxe o tutorial. Encontrei esses efeitos enquanto estava no incrível Kawaii World, então créditos a esse blog ótimo pela genialidade.

Enfim, querem ver os efeitos? É só continuar lendo.

Efeito Hover nas Imagens do Post

Hey, angels :) What's up?

A leitora Laris do ótimo blog Panda's Secrets pediu um tutorial:

Ela não especificou exatamente qual tipo de efeito ela queria, portanto eu trouxe 3 tipos (todos testados). Se ela quiser outro, posso pesquisar mais e ver se encontro.  

Vamos aos tutoriais?

Ilustrações para post: Efeito usado!

Hey, angels :) What's up?

Como o prometido, aqui está o tutorial de como usar o efeito opacidade nas Ilustrações para Post. Vou ensinar utilizando um programa e online. Vamos lá?

Usando o PhotoFiltre

Materiais:

- WinRAR (www) e PhotoFiltre (www)

- Imagem qualquer 

Abra o seu PhotoFiltre e escolha a opção Open (atalho: Ctrl+O):

Abra sua imagem. Agora vá no final da página e note que as dimensões da foto estão lá:

Então aperte Ctrl+N e crie uma imagem em branco com as mesmas dimensões da foto (use o número no final da tela como ensinei).

Agora aperte J (irá acionar a ferramenta Polígono) e faça um triângulo com a metade da foto:

Aperte Ctrl+C, vá na sua imagem e cole com Ctrl+V:

Depois clique 2 vezes na parte em branco e deixe exatamente como no print abaixo:

Finalize apertando Shift + Ctrl.

Pronto! Sua Ilustração para post está pronta!

Resultado:

Usando um Editor Online

Materiais:

- Imagem qualquer

Você pode conseguir um efeito bem parecido ao do PhotoFiltre usando o Pixlr Editor.

Abra o Editor e escolha "Abrir Imagem do computador".

Escolha a opções destacadas de vermelho como no print:

Faça um triângulo com a metade da imagem:

Aperte Ctrl+C e logo depois em Ctrl+V. Sim, é para colar novamente encima da imagem. Não vai fazer diferença, aparentemente.

Na parte ao lado da página você verá o quadradinho Camadas. Deixe selecionada a "Camada 1" e clique no primeiro botão pequeno:

Depois que clicar nesse botão, deixe a Opacidade como 12 e o Modo como Add.

A última coisa a se fazer é salvar com o atalho "Ctrl+S" ou indo em Arquivo > Salvar...

Pode deixar em PNG.

Resultado:

O que acharam? Eu prefiro fazer no PhotoFiltre, mas a escolha é de vocês =D

Espero que tenham gostado! 

Beijos,

Mrs. Nightshade.

Afiliados com Efeito Hover

Hey, angels :) What's up?

Hoje eu queria ensinar à vocês como fazer efeito hover nos afiliados, assim como a do Mrs. Nightshade:

É muito fácil de fazer, sério. Primeiramente adicione um gadget de HTML/Javascript aonde você quer que os afiliados apareçam. Depois, cole o código abaixo nesse gadget:

<a href="URL do blog afiliado" none;="" target="_blank" text-decoration:="" title="Nome do Blog"><img class="borderimage" onmouseout="this.style.opacity=0.5;this.filters.alpha.opacity=50" onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100" src="URL da imagem" style="opacity: 0.5;" /></a>&nbsp 

Em URL do blog afiliado, você coloca o endereço do blog com que tem afiliação. Nome do Blog é auto explicativo. URL da Imagem é o link da sua imagem para afiliados (se estiver procurando, pode encontrar várias pelo blog).
Se tiver mais de um afiliado vá repetindo o código, substituindo o que se pede. Terminou? Salve.

Observação: o código veio do blog Birthday Cake, porém o tutorial é meu, já que coloco os afiliados de um jeito diferente (sem mexer no código HTML do blog).

Pronto! Já pode colocar afiliados no seu blog, com efeito hover.

Espero que tenham gostado e que tenha sido útil.

Beijos,

Mrs. Nightshade.

Hey, angels :) What's up?

Hoje eu quero ensinar um novo efeito para button, esse efeito:

Eu usei essa imagem (encontrada no We Heart It):

Bom, o efeito é super simples de fazer. Abra o Pixlr Editor e clique na opção "Abrir imagem do computador".

Assim que a imagem carregar, escolha as opções destacadas em vermelho, primeiramente a ferramenta Letreiro (ou apenas clique em M) e depois a opção circular:

Escolha a opção "Fixed size" e preencha "Largura: 152" e "Altura: 152":

Posicione o circulo pontilhado exatamente aonde você quer que seu button esteja. Aperte "Ctrl+c" e se você fizer corretamente irá aparecer um balãozinho preto com a palavra "copiar" exatamente em cima da imagem:

Agora vá na barra de ferramentas logo no início da página e selecione Arquivo > Nova Imagem e deixe da seguinte forma:

Depois de clicar em "OK", aperte "Ctrl+v". Ficará assim:

Dirija-se novamente a barra de ferramentas no inicio da página e escolha Camadas > Estilos de camada...

Escolha a opção "Chanfro" e preencha como "Distância: 9" e "Tamanho: 8":

Assim que clicar em "OK", aperte "Ctrl+s" e salve como "PNG":

Clique na imagem para ampliá-la.

O resultado vocês já viram:

Agora mais alguns buttons de minha autoria (com esse efeito) para vocês usarem:

Espero que tenham gostado e que tenha sido útil.

Beijos,

Mrs. Nightshade.