Tutorial Surpresa

Oi garotas, bom meninas ..

Obrigada pelos 27 mil visualizações 
 Eu falei tutorial srpresa
Mais vai ser mais de um tutorial vai ter tutos de varios tipos mais vou começar com :

Todos os tutoriais ao blog ( x ) 

Efeitos no PhotoScape - Suas fotos perfects!

 

Ice Kawaii

Abra a imagem depois clique em: Brilho, cor - melhora o contraste - médio 

Afina - 7 Filtro - efeito filme - portra alto

Brilho, cor - brilho - baixo

Avivar - baixo Brilho, cor - aprofundar - baixo

Simple Rocker

Abra a sua imagem desejada no photoscape

Vá em filtro - efeito filme - provia baixo

Contra a luz - +/- 50 % (padrão)

Filtro - vinheta - vinheta

Escolha a opção 2 da segunda fileira

Vá em brilho, cor - melhora o contraste - baixo

CuteMy

Abra a foto ( imagem ) que você irá coloca o efeito depois vá em Brilho , Cor

Aprofundar 21 , Brilho 52 , Escurecer 100 , Gamma Brilho 0.86 .

Afina , Afina Proporção 3.5 Valor 10 .

Avivar , Modo Obscurecido  Nivel 30% Desfoque 4.9 Contraste 100 .

Take a Photo My

Avivar - baixo

Brilho,cor - aprofundar - baixo

Auto contraste - alto

Brilho, cor - melhora o contraste - baixo

Filtro - efeito filme - velvia baixo

Contra a luz - (+) 100%

Princesa

Abra a foto ( ou imagem ) Que irá ter o efeito . 

Depois vá em Brilho,Cor >> Escurecer 67 >> Aprofundar 48

Vá em avivar >> modo obscurecido , contraste 7 , desfoque 5.5 ...

Simples HD

Abra a foto ( imagem ) que irá ter o efeito HD Simples . 

Depois Vá em Brilho,Cor >> Aprofundar 90 >> Brilho 49 >> Escurecer 19 .

Agora só dê um clique em >> Contra Luz << 

Fotográfico

Abra a foto que irá ter o efeito Fotográfico > Após apenas dê um clique em alto nível

Vá em Brilho,Cor , Aprofunda 47 , Escurecer 40 , Brilho 20 . Vocês

Já podem notar que já dá um resultado bem diferente . 

Mas se quiser deixar ele bem mais vivo , dê 1 clique em contra luz . ( Mas na demonstração não usei o contra luz )

 

Creditos da postagem a cima ( x )

Menu Destaque

Agora esse tutorial vai ser do meu proximo template ok

Que eu to fazendo :) 

tambem os creditos ao blog da postagem a cima

Primeiro vá em Modelo > Editar HTML > de F3 e procure por: ]]>< /b:skin>.Depois acima disso cole:

Para ver o código clique aqui e para ver a explicação clique aqui 

 Depois de personaliza-lo como quiser. Vá em layout > Adicionar um Gadget > HTML/JavaScript e nele cole:

Para ver o código clique aqui. (não coloquei o código aqui, por causa que se não aparecia a caixinha e não o código!)

Espero ter ajudado! Se reblogar credite!

 

 

 Como separar a área de postagens 

 

 

Lembrando: Se você tiver barrinha divisória tem que tirar se não, não vai dar certo...

E esse  tuto eu acho que dá para todos os modelos, eu acho.. não tenho certeza...

1. Vá no seu HTML. Dê um ctrl + f e na barra de pesquisa que apareceu procure por:

.main-inner .column-center-outer {

Se você ''NUNCA'' mexeu nesta área do template ela estará mais ou menos assim:

.main-inner .column-center-outer {  
background: $(post.background.color) $(post.background.url) repeat scroll top left;
_background-image: none; 
}

2. Então substitua todo este código por este:

.post-outer {

margin: 3px 8px 15px;

background:#fff;

padding: 5px 5px;

box-shadow: 1px 4px 19px 2px #DCDCDC;

padding: 5px;

border-radius: 50px;

}

OBS: . A parte destacada de verde é a borda arredondada. Quanto maior o valor mais arredondada ficará

. As partes destacadas de vermelho representa  a distancia dos textos e imagens de dentro das postagens ou seja quanto maior o número, mais distante os textos vão ficar da margem da postagem.

. Só mexa nos números ou os códigos de cores (Tabela de Cores)

. Visualize se estiver tudo certo. Salve!

 

 

                                              Make Delicado

 

Resultado

Vamos?

Com um pincel para sombra pegue uma sombra roxinha e aplique em toda pálpebra. Com um pincel chanfrado pegue uma sombra branca e aplique no concavo e esfume com o dedo.

Agora com o delineador líquido em caneta vamos fazer um traço do meio do olho até o final e depois do canto interno do olho até o meio. E depois da onde parou até final faça um risco reto. Depois da parte de baixo do olho puxe para cima.

Agora com o pincel chanfrado e uma sombra rosa aplique rente aos cílios. Passe um lápis de olho, e depois é só abusar no curvex e muito rímel!

 

 

 

                                              Como fazer um layout delicado 

 

 O resultado ficara mais ou menos assim

Quer aprender?

Primeiro siga esse tutorial que eu postei no forget dream clicando aqui.

Agora que fez o tutorial vá em modelo, e clique em personalizar. Vamos trocar de background, eu não recomendo usar aqueles que eu disponibilizei la no tutorial. Porque eles são muito carregados (para meu gosto). Então eu vou deixar uns ai em baixo que são mais delicados:

Créditos: Kawaii World

     

    

Escolha um desses.

Agora que colocou vamos personalizar o titulo dos gadgets

Se quiser tem lá no cherry bomb, só clica aqui.

E agora vamos colocar borda na área dos posts.
 Créditos? Millah

Vá no seu HTML e de F3 e procure por: h3.post-title a:hover {
DEPOIS da chavinha -> } 
Cole esse código:

.main-inner .column-center-outer {

  background: #FFFFFF;

 border-top:5px #7AB4FF solid;

border-bottom:5px #BFDCFC solid;

box-shadow: inset 0 0 20px #eee, 0 0 3px #ccc;

}

 Entendendo o código:

  background: #FFFFFF; Troque #FFFFFF pelo código da cor que você que o fundo

 border-top:5px #7AB4FF solid; Troque #7AB4FF pela cor que quer o topo

border-bottom:5px #BFDCFC solid;Troque #BFDCFC pela cor da borda em baixo

Agora vamos personalizar a barra de rolagem

Ainda no HTML de F3 e procure por: ]]>

e acima cole:

::-webkit-scrollbar {

width: 12px;

height: 4px;

background: #FFFFFF; /* Background da barra fixa */ 

}

::-webkit-scrollbar-thumb {

background: #F948A5

; /* Background da barra móvel */

}

Esse código já está personalizado em rosa com branco, então não precisa mexer

 

Agora só fazer o cabeçalho.

Só ir lá na página "Goodies" do blog, que tem alguns png's que eu postei.

É isso espero que tenham gostadooo! Para ver no blog o link é esse: http://tutoriallayoutdelicado.blogspot.com.br/

 

 

                                    Como colocar textura nas imagens

 

 Programa usado: PhotoScape

(Depois e antes né Yasmin Ribeiro? -Hi!)

Eu acho que fica bem legal! 

Vamos aprender??

Abra o photoscape, e clique na opção "Editor", abra a foto que você quer colocar a textura.

Clique nesse botão, e depois clique em "Foto...' e escolha a textura que você quiser (tem que salvar no seu computador). *vou deixar umas no fim do post.*

Abra a imagem e puxe ela para os lados, não faz mal se passar da foto.

depois diminua a opacidade da imagem, deixe em "62"

Depois clique nesse botão.

"Foto + Objetos"

Se a textura passar da imagem, ira aparecer essa mensagem, e dai você selecione a opção "Combine sua foto com objetos" e clique em "Ok"...

 

 

 

 

 

Tutorial: Ribbon no título do Gadget + 10 ribbons 

 

  resultado:

Clique em LEIA MAIS para aprender o tuto!

 Vá em Modelo > Editar HTML de F3 e procure por:

/* Mobile 

 Antes de body.mobile cole:

.sidebar .widget h2{
background: url(LINK DA RIBOON/FAIXINHA)  no-repeat left;
margin-top:-2px;
margin-left:-19px;
margin-bottom:0px;
padding:15px;
width:150%;
overflow:hidden;
}

OBS: Gente vou ensinar abaixo como ajustar pq se você só colocar e salvar olha o que pode acontecer:

(fica ERRADO e FEIO!) Ficou assim pq a pessoa que fez (essa imagem peguei de um blog que eu achei lá nos comentários do post..) porem, não sabia ajustar pq não está ensinado no código e eu sei.. mas para que isso não aconteça com vocês eu irei ensinar!

Vamos entender o código agora?

margin-top:-2px;  <~~ refere-se como vai ficar no lado... eu deixei 0px; mas a dica é você muda e e clica em VISUALIZAR!

margin-left:-19px; <~ refere-se ao tamanho da ribbon 

left; <~ refere-se a que lado vai ficar se quiser no meio é só trocar por center;

Agora as riboons... FEITOS PELA ANA

 

 

 

 

 

 Espero que tenham gostado