#tutops

[things-to-help-you]

vídeo tutorial: background degradê.

[things-to-help-you]

Queria saber...

Como faz esse "clarinho"no meio? http://prntscr.com/1om4au

/

com a imagem aberta vá em:

layer

new fill layer

gradient

Vai abrir uma janelinha, apelas clique em ok. Vai abrir outra janela, dai no style você deixa em radial. E na parte do gradient você deixa o que tem apenas uma cor, se não me engano é a segunda casinha de gradients. Depois é só diminuir a opacidade da camada do gradient.

[everdesign]

Fazendo uma faixinha clássica no Ps

Eai gente, eu acho bem legal aquelas faixinhas que usam em portifolio e tals e vou ensinar a vocês como fazer uma daquelas. Abra um documento transparente no tamanho desejado, eu vou fazer no tamanho 350x90. Bom, depois que abrir o Ps você vai selecionar a ferramenta da Guide (Ruler), ou régua. Você vai deixar a sua imagem assim, como neste print. Complicadinho? Sim, um pouquinho né, rs mas é bem mais fácil assim, pois agora você só vai precisar recortar e fazer a faixinha, bom feito as guides você vai colorir a parte quadrada da faixa, deixando a assim. E agora, já tá 'na cara' ali, você vai selecionar a ferramenta Polygonal Tool (Atalho L) e ir cortando, mas só tem uma coisa, na parte de baixo da faixa quadrade, em um quadradinho bem pequeno que deixamos você irá recortar ele e pintá-lo com um tom da sua cor mais forte pra ficar legal, ok? Tipo assim. Agora por último, você vai cortar a sua faixinha deste jeito e pronto, só enfeitá-la, pintá-la a sua preferência. Dica: quando for pintar esta parte da faixinha, pinte-a com uma cor um pouquinho mais escura de tom da cor original pra ficar legal ok? Bom, é isso, espero que tenha dado pra entender, é que tô meio lerdo e as vezes pode sair algo errado, se der erro corre aqui na ask ok? Beijos.

Meu resultado: ##

[things-to-help-you]

tem tuto de como faz isso? Obrigada.

http://24.media.tumblr.com/tumblr_m5hgjd1DuO1rsxrv7o1_500.png

/

http://www.youtube.com/watch?v=zK0FqzEfYXI

[htmlfreaks-blog]

Faixa no Título

Olá galero, vou ensinar a vocês como personalizar o título de texto por uma faixa com o título dentro, visualize o estilo aqui. É fácil, primeiro vocês vão criar a faixinha no Photoshop ou em qualquer editor e hospedá-la aqui. Feito isso, você vai copiar o link que vai aparecer e criar uma class para a faixa. Cole apenas este código antes de </style> no seu theme:

#titulo { width:TAMANHO DA FAIXApx; height:AUTURA DA FAIXApx; text-align:center; background:url('URL/LINK DA FAIXA') no-repeat; font-family:'FONTE'; font-size:TAMANHO DA FONTEpx; line-height:AUTURA DA FAIXApx; }

E agora aonde quer que apareça o título, coloque este código:

<div id="titulo"> ESCREVA </div>

Fácil né? É isso, espero que tenham entendido. Beijos! ;*

- Gustavo

[htmlfreaks-blog]

Fonte com qualidade no Ps

Hey galera, vou ensinar a vocês como deixar uma fonte com boa visualização e com qualidade no Photoshop. É assim, exemplo, você cria uma faixinha e deixa uma fonte normal, sem decoração nem nada, a fonte fica assim. Viram como fica estranha a fonte e sem qualidade nenhuma? Parece que ficam cheios de picadinhos e tal. Agora olhem essa faixinha, viram a diferença? Essa já tá ‘lisinha’ e com qualidade, ótima pra colocar um style nela e a decorar. Bom, pra vocês deixarem a fonte assim é muito, mais muito fácil mesmo, é só vocês selecionarem o texto, e na ‘barra de tarefas do photoshop’ trocarem a formatação dela para Smooth, como nessa imagem. Viram como é fácil? Ali tem o Crisp, Strong, Charp e o None. Cada fonte é meio que uma coisa diferente para se trocar. Bom, eu recomendo a vocês nunca usarem o None, eu só uso ele mesmo pra fonte ‘04b03’ por ser Pixel. É isso, espero que tenham entendido e que seja útil. - Gustavo

[everdesign]

Fonte com qualidade no Ps

Hey galera, vou ensinar a vocês como deixar uma fonte com boa visualização e com qualidade no Photoshop. É assim, exemplo, você cria uma faixinha e deixa uma fonte normal, sem decoração nem nada, a fonte fica assim. Viram como fica estranha a fonte e sem qualidade nenhuma? Parece que ficam cheios de picadinhos e tal. Agora olhem essa faixinha, viram a diferença? Essa já tá 'lisinha' e com qualidade, ótima pra colocar um style nela e a decorar. Bom, pra vocês deixarem a fonte assim é muito, mais muito fácil mesmo, é só vocês selecionarem o texto, e na 'barra de tarefas do photoshop' trocarem a formatação dela para Smooth, como nessa imagem. Viram como é fácil? Ali tem o Crisp, Strong, Charp e o None. Cada fonte é meio que uma coisa diferente para se trocar. Bom, eu recomendo a vocês nunca usarem o None, eu só uso ele mesmo pra fonte '04b03' por ser Pixel. É isso, espero que tenham entendido e que seja útil. 

[everdesign]

Menu Pretty

Galeraaa, criei um menu muito legal, é um rollover que pisca, eu mesmo criei, os códigos são meus então, faça o favor de creditar se usar. Visualize ele aqui. Gostaram? Então vamos lá...

Coloque esse código no seu css, ou seja antes de </style>

@-webkit-keyframes pisk { 0% {opacity: 1;} 50% {opacity: 0;} 100% {opacity: 1;} } @-moz-keyframes pisk { 0% {opacity: 1;} 50% {opacity: 0;} 100% {opacity: 1;} } @-o-keyframes pisk { 0% {opacity: 1;} 50% {opacity: 0;} 100% {opacity: 1;} } @-ms-keyframes pisk { 0% {opacity: 1;} 50% {opacity: 0;} 100% {opacity: 1;} } #menu { margin:1px; width:150px; height:60px; font-family:'Yanone Kaffeesatz'; font-size:30px; color:#COR DO TEXTO; text-align:center; line-height:60px; text-transform:uppercase; background:url('IMAGEM') no-repeat; background-position: 0px -60px; float:left; -webkit-transition: all .4s ease-in-out; -moz-transition: all .4s ease-in-out; -o-transition: all .4s ease-in-out; -ms-transition: all .4s ease-in-out; } #menu:hover { color:#COR DO TEXTO HOVER; background-position: 0px -0px; -webkit-animation: pisk .8s alternate infinite linear; -moz-animation: pisk .8s alternate infinite linear; -o-animation: pisk .8s alternate infinite linear; -ms-animation: pisk .8s alternate infinite linear; -webkit-transition: all .4s ease-in-out; -moz-transition: all .4s ease-in-out; -o-transition: all .4s ease-in-out; -ms-transition: all .4s ease-in-out; }

Bom, você vai precisar do Ps (Photoshop) pra colocar outra imagem nesse menu okay? Eu fiz aquela do preview e salvei psd, baixe ele aqui e troque as cores e, se quiser aquela imagem mesmo do preview está aqui, daí é só hospedar aqui, copiar a url e colar aonde está escrito 'IMAGEM'. 

Feito isso, cole esse código aonde quer que apareça o seu menu, os links que estão ali é pra iFrame mas você pode trocar se quiser okay?

<a href="/" id="menu">home</a><a onClick="changeNavigation('ask')" id="menu">ask</a><a onClick="changeNavigation('themes')" id="menu">themes</a><a onClick="changeNavigation('faq')" id="menu">faq</a><a onClick="changeNavigation('materiais') id="menu">extras</a>

E por último a fonte personalizada, cole esse código antes de </head>

<link href="http://fonts.googleapis.com/css?family=Yanone+Kaffeesatz:300,400,700t" rel="stylesheet" type="text/css">

Bom, é isso, espero que gostem e, lembrem-se de dar like e creditar! :D