bymalu

Descrição / Menu que aparece quando passamos o mouse em alguma imagem.

Atenção: é preciso saber o básico de css. Se você não sabe o que é, olhe o sem passar o mouse (antes) e o depois de passar o mouse:

1 - Aperte ctrl + f e procure por </style>, em seguida cole esse código (clica) antes dele.

2- Depois, onde você quiser que apareça o Gif/Foto, cole esse código (clica). Lembre-se de colocar o link da imagem, mudar o tamanho dela em 300px, mude 300 para o tamanho que quiser, e também coloque sua descrição, menu e etc onde ta pedindo.

Personalizando o primeiro código:

Você pode mudar tudo ao seu gosto, para ficar fácil de mudar, vou explicar algumas coisas:

Background é o fundo, troque o transparent por uma cor hex se quiser.

Color é a cor da font.

Padding é uma espaço transparente dentro da imagem e em volta do texto (Olhe a segunda foto).

Font-family: é a fonte, troque verdana pela que quiser.

Font-Size: é o tamanho da font.

Text-align: é o alinhamento do texto, troque justify para center de quiser centralizado, left se quiser para a esquerda e right se quiser para a direta.

Depois de personalizar é só CREDITAR o ylthemes e salvar.

Por Malu.

Barrinha de titulo com tracinho atrás.

Veja um exemplo:

Vamos lá, aperte ctrl + f e procure por </style> e cole esse código antes.

Entenda o código:

.linha {position: relative; top: -10px; border-bottom: 2px solid #575e4d; margin-bottom: -1px }

.frase {background: #575e4d; color: #fff; font: italic bold 12px georgia; display: inline-block; top: 10px; bottom:-32px; padding: 3px; position: relative;border-radius: 5px;}

O primeiro #575e4d é a cor da linha e o segundo é a cor do fundo. O #fff é a cor do que vai está escrito. Você pode mudar a fonte e o tipo de borda.

Para aparecer coloque:

<div class=“linha”><center><div class=“frase”> O QUE QUER ESCRITO </div></center></div>

Prontinho, se usar credite!

Por Malu.


PostNotes personalizado.

Pra que não sabe, o {PostNotes} faz aparecer todas as pessoas que reblogaram/deram likes em um post, se clicarmos no link do post aparece, veja um exemplo aqui e na foto:

Agora veja um exemplo sem ser personalizado:

Vamos lá, primeiramente temos que ter certeza de que na sua tags dos posts já tem o {PostNotes}, aperta ctrl+f e procura por {PostNotes}, se aparecer pula para a próxima etapa e se não aparecer, aperte ctrl+f e procure por {/Block:Posts} e cole isso aqui  logo acima dele.

Agora que já temos certeza de que tem o PostNotes nas tags vamos ao css, cole esse código aqui  nele. (Basta aperta ctrl+f procurar por </style> e colar antes dele).

Agora vamos entender o código (Coloquei em negrito só o que deverá mudar):

ol.notes {padding: 0px; margin: 2px  list-style-type: none; border-bottom: solid 1px #ccc;}

ol.notes li.note {border-top: solid 1px #ccc;padding: 3px;}

ol.notes li.note:hover {background-color: #eef1cd;-webkit-transition-duration: .50s;} 

ol.notes li.note img.avatar {vertical-align: -4px;margin-right: 10px; width: 16px; height: 16px;border: 2px solid #e6bcb9; margin: 1px;}

ol.notes li.note span.action {font-weight: normal;}

ol.notes li.note .answer_content {font-weight: normal;}

ol.notes li.note blockquote {border-color: #eee;padding: 4px ;margin: 2px}

ol.notes li.note blockquote a {text-decoration: none;}

Atenção:

- Os dois primeiros #ccc são as barrinhas cinzas que divide cada foto com os links.

- O #eef1cd é a cor que aparece quando passa o mouse.

- E o #e6bcb9 é a cor da borda da imagem.

Já a ultima cor em negrito é o blockquote (#eee), ele não aparece na imagem, só aparece quando alguém rebloga a adiciona alguma coisa, veja um exemplo:

Ele simplesmente é essa caixinha cinza, troque pela cor que quiser.

Por Malu. Se usar credite!

Sites úteis para aprender mais sobre html e achar úteis
  • ScrapKits:

http://blogscraprosa.blogspot.com/

http://divinedigital.com/

http://ellielash.com/blog/archives/category/freebies/

http://digitalfreebies.com/

http://www.deliciousscraps.com/

http://digiscrap.allcraftsblogs.com/

http://www.gv-mix.com/

http://shabbyprincess.com/

Atenção: nem todos são grátis, procure por Freebies, depois para baixar, procure o link na descrição ou clique na imagem do kit.

  • Comunidades do orkut com úteis para photoshop e photofiltre:

PFS PhotoFiltre Studio

MATERIAIS PhotoFiltre Studio X.

Bombando seu PFS  (PhotoFiltre Studio).

TUTORIAIS Everything about Photoshop.

All Resources (Photoshop).

Tutoriais e Dicas  (Photoshop).

Dicas de efeitos (Os dois).

Photoshop Para Iniciantes.

Diesel Resources (Photoshop).

CPS - Cantinho dos Brushes  (Úteis).

Crazy Banners (Úteis).

Além de tutoriais e úteis, algumas recebem pedidos de qualquer material e disponibiliza downloads e seriais dos programas.

  • Sites para aprender mais sobre HTML :

http://pt.wikipedia.org/wiki/HTML 

http://www.maujor.com/

http://pt-br.html.net/

http://www.escolacriatividade.com/

http://www.w3schools.com/

http://dynamicdrive.com/ 

http://www.javascriptkit.com/

http://madlyluv.com/ 

http://true-luv.com/

http://yay.plicplac.com.br/

Ps: alguns também possuem úteis e ajudam com o photoshop.

Com o tempo irei adicionando mais!

Por Malu

Menu Scrollable (que rola para o lado)

Achei esse menu no dynamicdrive e achei ele bem interessante, então resolvi adaptar, traduzir, hospedar e fazer um tutorial para vocês, então se forem usar credite!

Olhe como ele é aqui, é só passar o mouse na setinha, e também aqui:

O menu não é difícil de personalizar, esse é o código, basta colocar onde quer que apareçar e seguir as instruções a seguir. (O menu não aparece no antigo customize, somente quando salva, então faça em um tumblr de testes)

Outra coisa que você vai precisar é fazer as setinhas no photoshop, photofilte, onde quiser, o tamanho você pode fazer do mesmo que tem no exemplo.

Agora vamos ao código (não se assuste rs, vamos hospedar ele depois). Se você olhar bem, a única coisa para mudar realmente é as setinhas e os links, mas vou explicar certinho:

Depois do aviso você vai ver:

  • //Url das setinhas:

Vai ter dois links o primeiro indicado pelo: var goleftimage é o da setinha para a esquerda, já o segundo var gorightimage é o da  setinha para a direita

  • //Largura do menu:

Como já diz, é a largura, mude o 140 pelo número que quiser, quanto maior, mais largo.

  • //Altura do menu:

Como já diz, é a altura, mude o 20 para o número que quiser, quanto maior, mais alto.

  • //Direção que rola:

Eu não aconselho a mudar isso, simplesmente muda a direção, não sei explicar, direito, mas se quiser trocar, troque reverse para normal.

  • //Tempo que fica passando:

Quanto maior o número, mais rápido fica passando quando o mouse ta na setinha, troque o 4 se quiser aumentar a velocidade.

  • //Configuração dos links:

A configuração dos links é simplesmente colocar onde está indicando. Tomo bastante cuidado, não pule linhas porque se não o menu não irá funcionar, apenas TROQUE onde está indicando, é claro, se quiser colocar por exemplo: class=“menu”, da certinho.

Depois de personalizar, para não ficar com esse código enorme no seu html, vamos hospedar!

Como? Salve o código pelo bloco de notas e venha aqui e pegue ele onde você salvou, ai aperte Upload File e espere carregar, assim que aparecer o link, copie e coloque isso onde quer que apareça o menu:

<script language=“JavaScript” src=“LINK-AQUI”></script>

Ai onde está pedindo coloque o link e pronto!

Credite o YLTHEMES! Conheço muito bem o código, então se usar vou saber que eu editei.

Por Malu

Aprenda tudo que você precisa para fazer banner pelo photoshop.

Primeiramente devo avisar que irei ensinar coisas básicas que é preciso saber para fazer um banner, não vou explicar como faz tal banner, se você aprender o básico vai poder fazer o banner do jeito que quiser, isso depende da sua criatividade.

Vamos lá, já com o photoshop aberto clique em arquivo > novo ou de ctrl+n para abrir um novo documento. Irá abrir uma janela parecida como a de baixo, apenas cortei um pouco a imagem:

Onde está grifado de vermelho, sempre terá que ter a opção pixels. Já em rosa e verde, como já diz antes, é a largura e a altura, coloque o numero que quiser. E em azul escuro sempre marque transparente para que o banner não fique com um fundo branco. Clique em ok, irá abrir uma janela como fundo com quadradinhos brancos e cinzas, mas isso é o transparente e depois que salvar ele some. Depois ao lado esquerdo, tem uma barrinha cheia de ícones, você deverá procurar por T como mostra a imagem:

Depois, clique no T, e em seguida clique na janela com o fundo transparente que você abriu e escreva qualquer coisa. Lá em cima você irá ver umas opções como na imagem (clique para ampliar):

 

Marquei com tracinhos colorido para facilitar minha explicação.

Vermelho: Ao ser marcado, deixará o texto na vertical ou horizontal, dependendo de como o texto já esteja. 

Rosa: É a font, basta selecionar tudo o que já escreveu, depois clicar na setinha e escolher a fonte desejada.

Azul:  Isso serve para deixar Negrito, Itálico e etc. Algumas fontes  não vai ter essas opções para trocar, mas tem como colocar o itálico e negrito, basta selecionar o que você já escreveu, clica com o botão direito e marca a opção Negrito ou Itálico falso.  

Azul claro: Esse é o tamanho da font, já existe alguns tamanhos se você clicar na setinha você irá ver, mas se quiser é só apagar o tamanho que está e escrever outro, mas nunca apague o pt.

Amarelo: Essa ferramenta melhora a qualidade da font, basta selecionar o que já escreveu e ir mudando as opções até achar a que ficou melhor na font que você escolheu.

Verde: Você provavelmente já teve conhecer esses símbolos, o primeiro deixa o texto para a esquerda, o outro centralizado e o ultimo para a direta. 

Verde escuro: Essa é a cor da font, para mudar, selecione o que já escreveu, clique lá e vá arrastando o mouse nas cores, até achar a cor desejada.

Preto: Essa ferramenta deixa o texto distorcido, clique e vá selecionando as opções que você irá estender melhor. Aviso: Essa ferramenta costuma não funcionar quando se coloca Negrito ou Itálico Falso.

Esse é apenas o básico de personalização, existe também as opções de mesclagem, para chegar nela, você terá que achar as camadas, fica ao lado direito da tela, procure por um símbolo de dois losangos, um claro e escuro em cima do outro clique, ai irá abrir isso:

Clique no FX, onde tem a setinha azul escuro, e depois clique em opções de mesclagem. Vai aparecer um monte de opções para personalizar o que você escreveu, e isso não personaliza só a font, qualquer desenho, uma moldura por exemplo. Não vou explicar como cada efeito funcionar, somente o do pattern, para você descobrir como usa, é só marcar e clicar duas vezes na opção que você escolheu, descobrindo é a melhor forma de aprender a usar os efeitos.

Adicionar pattern:

Lá no opções de mesclagem, clique em Sobreposição Padrão, depois clique onde tem um quadradinho com uma imagem e escolha qualquer uma, e veja como irá ficar onde você escreveu:

Essa ferramenta é a mesma usada para fazer cortininha ou moldura, funciona da mesma forma, agora se você quiser adicionar algum pattern lá é só abrir ele no photoshop, depois ir em editar, e lá em baixo clique em Definir Padrão, depois de ok na janelinha que irá abrir e pronto, seu pattern vai está lá onde você tinha escolhido o outro. Se você quiser ajustar o Pattern onde estiver, clique em ajustar origem e depois clique onde você colocou o pattern (no meu caso, a font com o exemplo) e arraste até o pattern ficar onde você quer.

Adicionar Imagens no banner:

Para adicionar Imagens no Banner é só abrir a imagem que você quer, clicar nela e arrastar para o banner, veja esse gif do antes de depois, clique para ampliar:

Agora, como diminuir a imagem? abaixo tem três exemplos de como fazer isso:

Exemplo 01:  Como usa? Clique na imagem e de ctrl + t, soltee clique nos quadradinhos em volta e arraste para diminuir ou almentar a imagem.

Exemplo 02: É quase a mesma coisa que o exemplo 01, só que ele se usa assim: de ctrl + f e solte e quando for clicar nos quadradinhos para mudar o tamanho, segure o Shift, ele mudará o tamanho da imagem sem deixar ela achatada como no exemplo 01.

Exemplo 03: Como mostra a imagem, ele irá distorcer, dependendo de como você clicar nos quadradinhos. Como usa? de ctrl + f e solte e quando for clicar nos quadradinhos para mudar o tamanho, segure o Ctrl. Esse atalho é muito usado para fazer barrinhas tortas.

Adicionando Brushes no Photoshop:

O que são Brushes? São imagens para enfeitar o banner. O photoshop tem uma ferramenta especial para os brushes, que é essa:

Ela fica na barrinha ao lado direto, e depois de clicar nele irá aparecer uma barrinha diferente lá em cima, clique na setinha (que na imagem está marcada de azul):

Verde e vermelho:  É o tamanho do seu Brushe, para aumentar é só arrastar ou mudar o numero antes de px.

Azul: É a dureza, a maioria dos Brushes não tem essa opção, mas ela deixará o brushe com um “brilho”, exemplo: olhe a ultima imagem acima, os brushes tem um número em baixo né ? (isso é o tamanho). Quando a dureza está 100%, ela fica que nem os Brushes 9, e quando diminuímos o valor, fica igual os brushes 100, 200, 300 e etc.

Como usar? Basta clicar no Brushe que você quer, de clicar no banner, na barrinha que aparece quando clicamos na ferramenta do Bushe (aquele pincel) tem a opção de mexer na opacidade e tem alguns efeitos, use como quiser.

Agora, como adicionar? Existe duas formas de adicionar! A primeira é quando baixamos uma pasta de brushes no fomato abr (próprio do photoshop) e colocamos nele. Onde baixar? Várias comunidades no orkut disponibiliza, clique aqui, e veja algumas indicações. Para colocar basta clicar na opção marcada de rosa (na imagem anterior), ai irá abrir isso:

Clique na opção carregar pincéis, procure onde está os brushes que você baixou e clique nele, e depois em carregar, depois os brushes irão aparecer junto com os brushes que já vem no photoshop.

A segunda forma de colocar brushes é mais simples, você tem uma imagem e quer colocar na pasta de brushes do photoshop, por exemplo, essa imagem:

Basta ir em editar > defenir predefinição de pincél, depois de ok e pronto, a imagem vai está na pasta de brushes.

Criando barrinhas, círculos e etc:

Na barrinha a esquerda procure por esse simbolu:

Clique nele, e lá em cima irá aparecer essa barrinha:

Azul:  São as formas, clique em algumas delas, para faze-las  é só aperta e arrastar o mouse na imagem que irá aparecer. A segunda opção (o retângulo arredondado) tem uma opção que aparece quando clicamos nele:

O que é isso?  quanto maior o número, mais arredondado ele fica.

Voltando na imagem anterior, o roxo é o estilo! O que é? são estilos já pronto para personalizar o que você irá fazer (circulo, retângulo e etc). Não vou entrar muito em detalhe sobre ele pois eu mal uso eles, mas você pode encontrar para baixar em comunidades do orkut e aqui você aprende a instalar e tem algumas indicações de onde baixar, e aqui ensina a disponibilizar os que você fez, caso queira!

O grifado de rosa é a cor, antes de fazer, escolha a cor.

Entenda como funciona as camadas do photoshop:

Antes de tudo: Para achar as camadas basta procurar por esse simbolo em azul na barra a direita (já clicamos dele antes, no inico do tutorial) e clicar:

Imagine um prédio de 10 andares, cada andar é uma camada. Mas o que isso tem a ver? é o seguinte, toda vez que adicionamos alguma imagem no banner, ela vai criando um camada diferente, pode ser imagem, texto, qualquer coisa, entenda melhor:

Eu fui criando cada barrinha, e a medida que eu fui criando elas, ia criando uma camada diferente. Ao clicar e segurar em algumas das camadas você pode arrastar ela para cima ou para baixo, ai olhe essa imagem:

Eu quero colocar a barrinha amarela em cima da marrom, o que irei fazer? Clicar, segurar e arrastar a camada da barrinha cinza (Forma cinco) para baixo, e assim irá ficar:

Para ficar ainda mais claro, vou dar um exemplo de onde você vai precisar fazer essas trocas de camadas: Como colocar moldura em alguma foto!

Abra uma novo arquivo de 200px de altura e de 200px e largura.

- Salve essa moldura (clica) e essa imagem (clica), e abra elas no photoshop.

- Depois arraste a moldura, e depois a imagem para o novo arquivo que você abriu, irá ficar mais ou menos assim:

Arraste a camada 2 para baixo, assim ficando a camada 1 em cima:

Agora, como irei ajeitar?você pode clicar nessa ferramenta ao lado:

Depois clique na imagem e arraste. Essa ferramenta pode ser usada para mover qualquer coisa! ou você pode usar as formas de diminuir a imagem que aprendemos no inicio desse tutorial, ou a forma mais útil para fazer isso, que será importante aprender caso queira colocar a sua foto em uma moldura redonda:

Procure por esse simbolo na barra esquerda:

Clique nele, e lá em cima irá aparecer algumas opções iguais as dos brushes, você pode escolher qualquer brushe, mas parar apagar (que é o que nós iremos fazer), recomendo o redondo, que provavelmente já vai está escolhido, depois vá onde está a imagem na moldura, e vai clicando para apagar os cantos da foto que sobrou:

Depois disso você irá precisar saber desses atalho no teclado:

Ctrl + n: Abrirá um novo arquivo;

Shift + Ctrl + n: Abrirá uma nova camada;

Ctrl + z: Irá desfazer algo que você fez;

Ctrl + alt + z: Irá deletar a camada que estiver selecionada;

Shiff + ctrl + e: Juntará todas as camadas;

Além de que, esse olhinho antes das camadas:

… ao ser marcado significa que ele deixará a camada invisivél.

— FIM —

Então é isso, eu acho que é tudo que deveriam saber para criar banner, foi muito difícil fazer esse tutorial, então pelo meu esforço em ajudar vocês, creditem o YLTHEMES pelo tutorial de como fazer banner ok? E antes de vir falar que não conseguiu fazer tal coisa, tente 500 vezes e procure no google por favor!

 Por Malu

Como fazer cortininha com pontilhado e babado (Photoshop)

Exemplo: 

1- Salve as 5 bases e abra elas em seu photoshop (Arquivo > Abrir) :

2- Crie um fundo com 200 de largura e 54 de altura, transparente. (Arquivo > Novo) :

3- Abre o pattern que você quiser e depois vá em Editar (do lado de arquivo) e procure por definir padrão, clique depois em ok:

4- Ok, depois disso, clique na primeira base, segure e arraste para o fundo transparente que você abriu, logo em seguida, procura pela camada ao lado direito, veja o simbolo: 

5- Depois de clicar em camada, procura por “FX” , clique, e depois clique em sobreposição padrão, depois, procure pelo pattern que você abriu e clique em ok la em cima:

6- Depois arraste a segunda base para onde você tinha arrastado a primeira base, coloque na posição certinha (logo abaixo da primeira com o pattern) clique em camadas novamente, depois em FX, e depois escolha a opção Sobreposição de cor, clique no quadradinho de cor (provavelmente é vermelho), passe o mouse sobre a imagem e clique em cima da cor que você quer que fique a barrinha:

7-  Pegue a base do pontilhado, arraste para cima da barrinha que acabou de colorir,  clique em camadas> fx> sobreposição de cor>  passe o mouse na primeira barra com o pattern e escolha a cor que quer.

Veja como ta ficando:

8-  Depois, clique na ultima base, o babadinho, e arraste, coloque direitinho em baixo da barrinha com o pontilhado, faça a mesma coisa que fez antes: camadas, fx, sobreposição de cor e escolha a cor que quiser:

Por ultimo: Aperte ctrl + alt + e  para juntas as camadas, clique em arquivo> salvar como e pronto, meu resultado:

Espero que sejá útil, e se for credite, pois você estará usando minhas bases :)

Malu

Scripts para frases rolando para cima (como nossa descrição).

- Visualize também aqui.

Entenda: Basta colocar as frases onde está indicando sem apagar as aspas, para adicionar mais frases é só ir seguindo a sequencia, exemplo:

pausecontent[4]=‘Frase 05 aqui’

pausecontent[5]='Frase 06 aqui’

…. e por ai vai.

Entenda: Essa é a personalização da caixa com a frase. Width é a largura e Heigth é a altura, troque os valores antes de px para a forma que quiser. O border-radius deixa a caixa redonda, troque o valor antes de px se quiser também, o padding não precisa mudar, color é a cor da font, font: normal  12px georgia; é a font, 12px é o tamanho (aumente ou diminui se quiser), giorgia é a font, e o normal por ser trocado por italic ou bold (deixa itálico e negrito). Já o text-align é o alinhamento do texto, troque center por left (se quiser para a esquerda, ou para right (para a direita).

Atenção: A caixinha com as frases só aparece depois que salva.

Tutorial por Malu, créditos ao DynamicDrive pelo script e a nós pelo tutorial, hospedagem e adaptação.

Background degradê sem usar nenhum editor de imagens.

Isso mesmo, você não precisa  ficar fazendo Background degradê em um editor de imagens, existe um valor no css que já faz isso, basta escolher as duas cores.

Para usar como background  em qualquer coisa menos para o fundo é só colocar:

background: -webkit-gradient(linear, left top, left bottom, from(#cedce4), to(#aeafbf)) ;

E para usar como fundo do theme:

background: -webkit-gradient(linear, left top, left bottom, from(#cedce4), to(#aeafbf)) fixed;

*Se perceberem, acrescentei o fixed, sem ele fica estranho para usar como fundo.

O primeiro código hexadecimal  é a cor de cima, e a segundo é a de cor baixo, troque e está pronto o efeito degradê do css.

Por Malu