Theme para tumblr de html: Muitos de vocês pediram e eu resolvi atender, este é um theme feito para tumblr de html. Totalmente codificado e simples de mexer na hora de fazer as auterações necessárias, no estilo daqueles que eu crio para o Virtual Magic.
Não retire meus créditos e credite o Virtual Magic no HTML
Fazendo themes em psd parte 2. (Fatiando e Codificando).
Oi gente! :) Bom, eu demorei um pouquinho pra fazer a segunda parte desse tutorial, mas hoje criei vergonha na cara e resolvi fazer gjkhnjkg. Queria pedir desculpas por eu ter demorado pra fazer o tutorial, mesmo aushu. Enfim, vamos lá!. Vou explicar o que é Fatiar e como fazer, e logo depois vamos para a codificação.
Fatiar: Essa é uma ferramenta do photoshop que te permite selecionar tais partes do documento e salvar elas em uma pasta. É bem melhor do que mesclar as camadas e ir copiando, né?
Como fatiar: Bom, você vai selecionar a ferramenta “Fatia” (print). Logo depois você vai fazer três seleções: Header, content e footer. Pra fazer as seleções, é só você clicar e arrastar, ok? No header e no footer você vai fazer o seguinte... Você vai selecionar toda a parte do header e um pouquinho do content também, (parte dos posts/sidebar). E com o footer também!. Clica ai no print de como ficou as seleções que você vai entender melhor!.
Print de como ficou as seleções. Viu que eu selecionei o header e mais um pouco, pegando a área dos posts/sidebar. O mesmo com o footer. Depois você vai clicar em “Salvar para web...” e mudar o formato da imagem para “PNG8″, print. Acabamos a parte da fatia.
Eu indico que você tenha um pouco de conhecimento em html/css, porque se você não tem nenhum conhecimento fica mais complicado. Eu vou indicar pra vocês uma base que é boa pra themes em psd que é ESSA do TTHY, porque eu vou ensinar pra você como fazer um theme com essa base, mas se não quiser eu vou dar o código do header, content e footer, dai é só você adicionar o código e pronto.
Se você estiver usando a base, já vai estar tudo explicado. Vá no seu css e ache esse código:
Vá em um site de hospedagem de imagens e hospede suas imagens. (Header, footer e content). E cole os links onde foi indicado. O theme já está praticamente pronto, então você só vai personalizar ele, por uma sidebar legal, por menu e todas as outras coisas. Se você quiser, temos tutoriais aqui de como criar menus, como criar sidebar e outras coisas, então é só vir aqui e ver! ♥.
Se você está sem a base que eu indiquei, cole este código antes de </style>:
Eu não fiz algo muuuuito bem explicado, porque por vídeo é bem melhor, então é isso ajksfnjk. Desculpe por não estar muito bom, mas espero que te ajude!. É isso, beijinhos. ♥
Nós disponibilizamos materiais uteis para personalização do seu theme como: Fontes, brushes, styles e muito mais. Dê uma olhadinha.
Nunca esqueça de creditar no seu theme, a base em psd!
Baixe esse arquivo em psd e abra em seu photoshop, use a criatividade para personalizar, veja que as marcações (as dimensões marcadas em marrom) no psd não está visivel, caso queira saber para colocar no theme é só clicar no quadrado que está vazio.
Clique aqui e veja como personalizei.
Combinações de cores usadas no theme personalizado estará em tagged/amostras nos materiais.
oi gente, como vão? enfim! fiz esse theme faz um tempinho já,ficou perdido aqui no meu computador e como eu não pretendo usá-lo pro chasing, resolvi postar. ali tem a assinatura da selena,por isso o nome. masss obviamente, se vc tirar a assinatura não seria mais dela o theme né kkk (dã). mas enfim, pode sim editar ele como quiser, é até bom que edite bastante... só por favor, não retire os créditos ali do footer okay? De verdade, esta bem pequeno e não mata creditar, caso use algo do chasing, credite no seu theme depois, okay? Espero que gostem, e que usem! ♥♥
Hoje irei ensinar como colocar o theme em psd no seu tumblr, não vou dizer que é facil pois não é, mas vale a pena.Themes em psd aqui x
Bom, você tem que ver a altura e a largura das imagens (Width e Height) eles são muito importante nesse código acima. O header vai definir o tamanho do seu Cabeçalho, você tem que colocar a largura e a altura da imagem que você cortou. O Pagina vai definir a largura da sua pagina, ou seja, onde o conteúdo irá ficar. OFooter vai definir a altura e a largura do fim da sua pagina. lembre-se que eles devem ter a mesma LARGURA. Para hospedar as imagens do seu theme vá NESSE site, depois se quiserem trocar é só alterar a url das imagens dos background:url e os valores de acordo com a largura que você fez e recortou o seu theme. As imagens é o que faram o seu theme.
Outra coisa que preciso alertar:
Vocês tem que ter cuidado, pois uma </div> fora do lugar pode vir a desconfigurar totalmente o seu theme, então TOMEM CUIDADO COM AS </DIV>, elas são malvadas.
Agora vamos para parte do HTML, logo abaixo de <body> você vai colocar esse código:
O #sidebar vai definir a posição e a largura da sua sidebar. O #Conteudo vai definir a posição e a largura da sua caixa de postagem.
Se você colocar as larguras muito grandes as páginas iram descentralizar e o conteúdo do seu theme irá ficar lá embaixo do theme, então tome cuidado. O que comanda o código é os float e os margin-left e right então tomem cuidado com eles também.
Agora, no HTML o código irá ficar assim:
<div id="pagina">
<div id="header"></div>
<div id="sidebar">
CONTEÚDO DA SUA SIDEBAR AQUI
</div>
<div id="conteudo">
CONTEÚDO DOS POST AQUI
</div>
<div id="footer"></div>
</div>
Pronto, agora é só vocês irem colocando os conteúdos onde se pede cuidadosamente, principalmente na área dos post pq como eu disse, uma única </div> fora do lugar pode desconfigurar o theme. TOMEM CUIDADO. Não recomendo esse tutorial pra quem esta começando agora :/
OIE GENTE ! estou de volta ai fiquei mei que louca quando falei que não queria mais editar e tal mais tipo estava sem tempo mais agora voltei e ,estou com tudo em cima hehe .....
download do theme em psd :(X)
download do png:(x)
bora começa ? abra um documento da largura de sua preferencia ! a minha eu vou abri do tamanho 1366x890
bom os materiais eu vou ta deixando para download ok
depois de ter abrido o documento vai vai em file >>open e busca o background que e este aqui (x) em seguida click na ferramenta quadrado como mostra a imagem
faça um quadrado mais ou menos assim
o theme pode ser do jeito que você quiser ok !pega a imagem em png que vou estar disponibilizando para você e você coloque a onde quiser a minha vai estar assim
vai um outro retângulo e coloque assim e aplique um style de sua preferencia
agora a criatividade e com o meu vai ficar mais ou menos assim