Tutorial - Como Fazer Templates

Fórum dedicado aos designers para concursos, dicas etc!

Moderators: O Ministério, Equipe - Beco Diagonish

Post Reply
User avatar
Ingrid.
Recebendo a visita de Hagrid
Recebendo a visita de Hagrid
Posts: 46
Joined: 16/10/05, 13:53
Location: Fortaleza :)

Tutorial - Como Fazer Templates

Post by Ingrid. »

Tutorial Completo de Como Fazer Template

Progamas que iremos utilizar : Photoshop e Bloco de Notas

* Para quem usa Mac e não tem o bloco de notas pode utilizar qualquer outro aplicativo de edição, o bloco de notas é utilizado para fazer teste que podem ser feitos também no seu servidor.

Fazendo o template.

Primeiro abra a imagem que você deseja usar. Esta é a minha :

Image

Agora abra um novo arquivo (CTRL + N) de preferencia 800x600 ou 1024x768. Mude as preferencias e a deixe assim :

Image

Agora você irá criar a imagem para seu layout. Escolha um cor para o fundo e clicando aqui :

Image

Para pintar use esta ferramenta.

Image

Depois de pintar você agora irá colar a imagem que você deseja usar nesse no arquivo. Voltando a imagem com a ferramenta de seleção

Image

Clique com o botão direito do mouse na sua imagem e clique em Selecionar tudo. Agora com a imagem selecionada a copie (CTRL + C).

Volte para o novo arquivo e cole a imagem (CTRL + V). Com ela colada você a edita da maneira que você gosta, com efeitos, brushes (Pínceis), patterns (Padrões) etc.
A minha ficou assim :

Image

Agora com a imagem pronta você prescisa colocar colunas, que são as divisões para Perfil e Posts. Escolha novamente a cor que você deseja e com a Ferramenta Retângulo (U) você vai na imagem clica e puxa o retângulo. Faço isso duas vezes para fazer as colunas.

Image

Agora é presciso botar o titulo das colunas, os seus créditos e o título do blog. Use a Ferramente de Texto Horizontal (U) para escrever.

Image

Para as colunas e os créditos dê preferencias a fontes em bitmap/pixel (http://www.dafont.com/en/bitmap.php)(Ernest, Bm mini)

* Para baixar fontes entre no site DaFont (http://www.dafont.com) e baixe a fonte que você quer. Para instalar é só você dezipá-la e ir em Painel de Controle >> Fontes >> Arquivo >> Instalar Nova Fonte.

Com a fonte já instalada escreva o seus créditos, tente botar em um local discreto tipo o canto do layout. A fonte que eu utilizei nos créditos foi a 04b_03 (http://www.dafont.com/download/?os=win&file=04b_03).

Image

Agora escreva com uma fonte bem maior o título ou nome do blog. A fonte que eu utilizei no título foi a Times New Romam.

Image

Para aplicar efeitos em fontes é só você ir na Janela de Camadas (F7) e clicar com o botão direito na camada do texto :

Image

Clicando com o botão direito você seleciona a opção Opções de Mesclagem. Irá abrir esta janela :

Image

Para mexer nos valores de cada opção basta clicar com o botão direito por cima delas.

Pronto, ai está a imagem de seu template. Vá em Arquivo >> Salvar Como ..., e salve a como template.jpg.


Agora você irá fazer a linha de seu template. Com a Ferramenta Letreiro de Seleção (M) você irá selecionar uma linha de 1 pixel no final da imagem de seu template.

Image

Depois você Copia (CTRL + C). Abra um novo arquivo (CTRL + N) e cole a linha no novo arquivo (CTRL + V).

Agora salve a linha como linha.jpg.

Pronto, só falta hospedar as duas imagens, para hospedar utilize um desses sites : PhotoBucket (http://www.photobucket.com) ImageShack (http://www.imageshack.us) (Considero o melhor)

Com as imagens hospedadas vamos começar a fazer o código HTML do layout.

Fazendo o Código HTML

O código HTML é a base de todo o site, ele que faz tudo funcionar da maneira que você quer. Os códigos devem se botados em um servirdor gratuito de postagem. Os mais conhecidos são : Weblogger (http://www.webloggger.com.br), Blogger (http://www.blogger.com.br), Uol (http://www.uol.com.br).

Vamos começar pelos os esqueletos dos códigos. Vou usar como exemplo um para o Weblogger. Para pegar o esqueleto entre aqui, copie o código desejado e cole no Bloco de Notas ou progama de edição HTML.

http://geocities.yahoo.com.br/ingriidcorreia/codes.html


-

Agora irei explicar o que é cada código desse.

Code: Select all

<!--COMEÇO DO CÓDIGO DA BARRA DE ROLAGEM-->

<STYLE type="text/css">

<!--
BODY {
scrollbar-face-color:EF21F4;
scrollbar-highlight-color:ffffff;
scrollbar-3dlight-color: 000000;
scrollbar-darkshadow-color:ffffff;
scrollbar-shadow-color: 000000;
scrollbar-arrow-color: ffffff;
scrollbar-track-color:00000;
}
-->
</STYLE>

<!--FIM DO CODIGO DA BARRA DE ROLAGEM-->
Este é o código que configura a cores da barra de rolagem de seu blog. Para configura-la utilize este gerador. (http://vickysplace.50webs.com/geradores ... olagem.htm)
Depois do código gerado você substitui tudo que se encontra entre as tags : <!-- COMEÇO DO CÓDIGO DA BARRA DE ROLAGEM--> e <!--FIM DO CÓDIGO DA BARRA DE ROLAGEM-->

-

Code: Select all

<!--INICIO DO STYLE-->

<STYLE type="text/css">
P, body, td, tr, div {
	font-style: normal;
	font-weight: normal;
	font-size: 10px;
	color: #ffffff;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	line-height: 12px;
}
A, A:link{color:#ffffff;text-decoration:none}
A:visited{color:#ffffff}
A:active{color:#ffffff}
a:hover {text-decoration: none;	filter: shadow(Color=#666666, strength=1);	height:0px;	cursor: hand;	font-family: Verdana, Arial, Helvetica, sans-serif;	color: #ff0000}
hr{width:100%;color:#4FC7FB;height:5;border:1px solid #1A348B; text-align:center}
</STYLE>
</head>

<!--FIM DO STYLE-->
Este é onde você configura links e fontes.

Fonte :

Code: Select all

font-style: normal;
	font-weight: normal;
	font-size: 10px;
	color: #ffffff;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	line-height: 12px;)

Font-weight = Altura da fonte.
Font-size = Tamanho da fonte (em pixels)
Color = Cor da fonte (Para mudá-lo utilize a tabela de cores
Font-family = Estilo da fonte
Line-height = Altura da linha (em pixels)

Link :

Code: Select all

A, A:link{color:#ffffff;text-decoration:none}
A:visited{color:#ffffff}
A:active{color:#ffffff}
a:hover {text-decoration: none;	filter: shadow(Color=#666666, strength=1);	height:0px;	cursor: hand;	font-family: Verdana, Arial, Helvetica, sans-serif;	color: #ff0000}
hr{width:100%;color:#4FC7FB;height:5;border:1px solid #1A348B; text-align:center}
Link = Link normal
Visited = Que já foi visitado
Active = Ativado
Hover = Com o mouse pausado sobre ele

-

Code: Select all

<!--Aqui vc vai colocar o endereço da imagem do Fundo-->


<body bgcolor="#ffffff" background="ENDEREÇO DA LINHA.JPG" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">

<!--Aqui vc vai colocar o endereço da imagem do Fundo-->
Este é o código onde você configura a imagem do topo. Para configurá-la basta trocar o endereço da imagem que você hospedou (linha.jpg) no lugar de LINHA.JPG.

-

Code: Select all

          <!--INICIO DIV DO PERFIL-->


<div id="Layer1" style="position: absolute; left: 370; top: 670; width: 210;z-index: 1"> 
  <table width="199" border="0" cellspacing="0" cellpadding="0">
    <tr>
      <td valign="top" width="199"> 

          <!--INICIO -  PERSONALIZAÇÃO -->
          
          <!--INICIO DO PERFIL-->
<b><font color="#FFFFFF" size="2">Perfil</font></b><p>
<font color="#ffffff" size="1">
        <b>Nome</b>: Eu<br>
              <b>Idade</b>: 18<br>
              <b>Icq</B>:123456789 <br>
              <b>Msn</b>:fulano@fulano.com<br>
              <b>Signo</b>: Cancer<br>
              <b>Cor</b>: Verde<br>
              <b>Coisas que adoro</b>: Rock, amigos...bla bla bla <br>
              <b>Coisas que odeio</b>: Matemática,estudar bla...<br>
              
              
        <!--FIM DO PERFIL-->
        
        <!--INICIO DOS BLOGS DE AMIGOS-->
        <p> 
<b><font color="FFFFFF" size="2">Blogs de Amigos</font></b><p>
<font color="#000000" size="1">
<a href="http://www.blogdokilouko.blogger.com.br" target="_blank">Blog do Billy</a><br>
<a href="http://www.Link2" target="_blank">Blog 2!</a><br>

        </p>
        
        <!--FIM DOS BLOGS DE AMIGOS-->
        
        <!--INICIO DOS LINKS-->
        <p> 
          <b><font color="FFFFFF" size="2">Links</font></b><p>
<a href="http://www.blogdokilouko.blogger.com.br" target="_blank">Blog do Billy</a><br>
<a href="http://Link 2" target="_blank">Link 2</a><br>
</p>
        
        <!--FIM DOS LINKS-->

          
   <!--FIM -  PERSONALIZAÇÃO -->


        <b><font color="FFFFFF" size="2">Creditos</font></b><p>
CÓDIGO DO TEMPLATE BY INGRID MORAIS.
         
           
       
      </td>
    </tr>
  </table>
</div>



<!--FIM DA DIV DO PERFIL-->
Este é o código que configura o perfil.
Este código se chama DIV :

Code: Select all

 
<div id="Layer1" style="position: absolute; left: 370; top: 670; width: 210;z-index: 1"> 
  <table width="199" border="0" cellspacing="0" cellpadding="0">
    <tr>
      <td valign="top" width="199"> 

CONTEUDO

      </td>
    </tr>
  </table>
</div>
DIV :

Code: Select all

<div id="Layer1" style="position: absolute; left: 370; top: 670; width: 210;z-index: 1">
CONTEUDO
</div>
A Div é responsavel por alinhar conteudos (imagens, textos ou iframes) em qualquer lugar da página.

Div id = Nome da Div
Style = Atributos dela como : left,top,width,heigth. O style é responsavel pela a localização da div, para configura-la você prescisa tirar as exatas coordenadas de seu layout para o texto começar exatamente de onde você marcou na coluna.
- Left = Medida da esquerda para a direita
- Top = Medida de cima para baixo
- Width = Largura (Para o texto não sair do local desejado)
- Height = Altura (Utilizado em layout não-continuos, que no caso não é o nosso)

----- Vou ensinar como se tirar as coordenadas das divs utilizando o Photoshop.

Abra a imagem de seu template (template.jpg). Arquivo >> Abrir.

Vá em Edit >> Preferences >> United & Rules. Configure a Unit e o Type para Pixels.

Agora vá em View >> Rules (CTRL + R) e em View >> Extras (CTRL + H)

Agora com a ferramente Mover (V) Image puxe desde as reguas lá de cima até onde você quer que comece seu posts. Isso será o Top.

Image

Agora faça a mesma coisa só que puxando a linha da esquerda para direita até onde você quer que vá os posts.

Agora é só ver os valores. Para ver os valores é só ir na réguas lá em cima e ver onde está indicando a linha que você puxou.
Por exemplo, aqui está indicando 530 pixels de top :

Image

Faça o mesmo para ver o left, só que olhando a linha que veio da esquerda para a direita na régua lá de cima.

Pronto, agora já sabemos o nosso Top e o nosso Left. Só falta agora saber a Width (Largura) e a Heigth (Altura). Para medi-las nos prescisaremos usar a Ferramenta Letreiro Retangula (M) Image. Com ela você seleciona a largura e a altura (que no caso não iremos usar) de onde você quer colocar os seus texto. Selecione e depois copie (CTRL + C) e abra um novo arquivo (CTRL + N).

Nesse novo arquivo irá mostrar os exatos tamanhos da sua width e heigth. Pegue os valores que aparecerão na janela
* Lembrando que no nosso caso o template é continuo, então não iremos prescisar da heigth.

Agora com os valores é presciso apenas configurar eles nas divs. ----

Pronto, agora que você já sabe como medir suas coordenadas é só altera-las no Style de sua div.

Table :

As tabelas são responsaveis para que o conteudo permaneça dentro da div. O seu código é :
Table

Code: Select all

<table border="0" width="100" heigth="100">
<tr>
<td>

CONTÉUDO

</td>
</tr>
</table>
Com as mesmas medida que você tirou lá em cima você substitui nesse código,
* Lembrando que nós não iremos utilizar a heigth, pois nosso template é continuo.

Agora que terminamos de explicar as divs, seu código final é esse :

Code: Select all

 
<div id="Layer1" style="position: absolute; left: 370; top: 670; width: 210;z-index: 1"> 
  <table width="199" border="0" cellspacing="0" cellpadding="0">
    <tr>
      <td valign="top" width="100"> 

CONTEUDO

      </td>
    </tr>
  </table>
</div>
Só é presciso fazer as alterações necessárias.

* Para templates com mais colunas é só acrescentar mais divs. :)

-

Code: Select all

<!--INICIO DA DIV DOS POSTS-->

<div id="Layer2" style="position: absolute; left: 100; top: 720; width: 197;z-index: 2"> 
   <table width="100%" border="0" cellspacing="0" cellpadding="0">
    <tr>
      <td>
       <!--INICIO -  tags do Blogger -->
        <weblogger> 
                 <font size="1">
         <weblogcabecalhodata> 
    </font> 
        <tr align="left"> 
          <td width="520">
            <p align="center">
            <#weblogDataCabecalho#>
            <br>
            <br>
            </p>
          </td>
        </tr>
        </weblogcabecalhodata> 

        <tr> 
          <td width="520"> 
            <p align="justify"><#weblogMensagem#></p>
            <p align="left">
             Rabiscado by
 <a href="mailto:<#weblogEmail#>">
            <#weblogApelido#>
            </a>
            às <#weblogHora#> <br>
            <a href="javascript:wb_comentario(<#weblogcodigo#>)">
            <#weblogTotalComentarios#> 
              Comentários.</a>
            <br>
            </p>
          </td>
        </tr>
      </table>
    <p align="left">
      </weblogger> 
<br>
<br>
                <p> </p>
                <p><div align="center"></div>



              </div>



<!--FIM DA DIV DOS POST-->
Aqui se encontra uma nova div, mas o seu contéudo possui as tags necessárias para o funcionamento do sistema de posts do seu servirdor. Por isso dependendo de cada servidor as tags dentro desta div serão diferentes. Essas são a do Weblogger que eu utilizei como exemplo, mas logo postarei de outros servidores.

Este código de baseia em divs e o contéudo de tags que não pode ser alterado pois pode causar danos ao serviço de postagem do servirdor.

-

Code: Select all

<!--COMEÇO DA IMAGEM DO TOPO-->

<img src="ENDERÇO DA IMAGEM DO TOPO">

<!--FIM DA IMAGEM DO TOPO-->
Código que personaliza sua imagem do topo. É necessário apenas substituir o endereço da sua imagem (template.jpg) por ENDEREÇO DA IMAGEM DO TOPO.

-

Bem chegamos ao final de todo o código, agora só é presciso altera-lo com cuidado e ir o testando no servirdor. A seguir irei postar códigos de outros servirdores, que serão necessárias as mesmas alteraçãos.
* Lembrando para não se mecher nas tags do servirdor, pois pode alterar o sistema de postagem.

Aqui estão todos os códigos, copie e cole no seu Blocode Notar ou progama de edição HTML. - http://geocities.yahoo.com.br/ingriidcorreia/codes.html

Estão ai os códigos de todos os servidores. Agora só é presciso altera-los e cola-los em seu servirdor.

-

O Tutorial acabou, ficou um pouco grande mas está todo completo. Qualquer dúvida pode ser tirada neste tópico mesmo.

Aqui está o resultado final. :) - http://geocities.yahoo.com.br/ingriidco ... eiout.html


Créditos á :

ImageShack.us - Pela hospedagem
Vickys.cbj.net - Gerador de Barra de Rolagem
Geocities Yahoo - Hospedagem de arquivos

TUTORIAL COMPLETAMENTE FEITO POR MIM - INGRID CAVALCANTE MORAIS CORREIA
Concorrendo
[/b]
Last edited by Ingrid. on 25/12/05, 19:56, edited 3 times in total.
User avatar
Remus
Com a Pedra Filosofal
Com a Pedra Filosofal
Posts: 97
Joined: 15/07/05, 13:21
Location: Mansão dos Riddle
Contact:

Post by Remus »

Muito bom seu tuto!! apesar de ser meio grande, hehe xD n sei se kem n entende disso vai entender seu codigo, mas kem jahs abe, eu entendi sim, to bom ;)
.Sectusempra!
Image

.Ravenclaw :: Winning all of the Tournaments
.Filho de Langel Lovegood e Ricardo Desmond
~~O Biscoitinho mais "feliz" do pacote~~
User avatar
Ingrid.
Recebendo a visita de Hagrid
Recebendo a visita de Hagrid
Posts: 46
Joined: 16/10/05, 13:53
Location: Fortaleza :)

Post by Ingrid. »

Obrigada Remus.
Mas se tu der uma lida tu vai ver que eu dei uma explicada total no código para entenderem. ;D
Ah, tá grande mais tá completo.
<CENTER><IMG src="http://img424.imageshack.us/img424/3801/lala3bx.jpg" alt="your good intentions slowly turn to blitterness;"></img>
<b><a href="http://www.potterish.com/forum/viewtopi ... highlight=">~ yeah ron, she fuckin hates you..</a></b></center>

[sai total daqui. ;P]
User avatar
Com a Pedra Filosofal
Com a Pedra Filosofal
Posts: 137
Joined: 10/07/05, 15:26
Sexo: Masculino
Estado: RO
Casa: Sonserina
Location: no bar!

Post by »

Very Good!!!

Adorei oi tuto, muito² completo xD

grande concorrente ao 1º prêmio :roll:

Editado por Duh
Image
Encontrado por: Pv Avery
Image
User avatar
Ingrid.
Recebendo a visita de Hagrid
Recebendo a visita de Hagrid
Posts: 46
Joined: 16/10/05, 13:53
Location: Fortaleza :)

Post by Ingrid. »

Ow desalinho toda a página :/
Vou ter que hospedar os codigos. Depois posto com tudo direitinho ok ? ;*
Ah, que bom que gostaram o/
<CENTER><IMG src="http://img424.imageshack.us/img424/3801/lala3bx.jpg" alt="your good intentions slowly turn to blitterness;"></img>
<b><a href="http://www.potterish.com/forum/viewtopi ... highlight=">~ yeah ron, she fuckin hates you..</a></b></center>

[sai total daqui. ;P]
User avatar
Remus
Com a Pedra Filosofal
Com a Pedra Filosofal
Posts: 97
Joined: 15/07/05, 13:21
Location: Mansão dos Riddle
Contact:

Post by Remus »

AHHH NÃÃÃÃO!!!!!! O PRIMEIRO PRÊMIO TEM QUE SER MEU!!!!!! BUAAAAAA xD
.Sectusempra!
Image

.Ravenclaw :: Winning all of the Tournaments
.Filho de Langel Lovegood e Ricardo Desmond
~~O Biscoitinho mais "feliz" do pacote~~
User avatar
Éowyn & Tonks
Conhecendo A Toca
Conhecendo A Toca
Posts: 208
Joined: 08/01/05, 15:07
Location: Entre o Lupin e o Faramir :P
Contact:

Post by Éowyn & Tonks »

Adorei!
Continue com os tutoriais, por favor, porque vai poder ajudar mta gente!
Image
Minha fic: http://www.floreioseborroes.net/menufic.php?id=6555
AKAMARY LUPIN -- A BOA FILHA À CASA TORNA... MIL PERDÕES PELO SUMIÇO
User avatar
soursweet_girl
Na Rua dos Alfeneiros nº 4
Na Rua dos Alfeneiros nº 4
Posts: 6
Joined: 17/12/05, 19:29
Location: Segredo ^^

Post by soursweet_girl »

Eh ... agora eu jah posso tentar pelo menos ... Vai ser punk, mas eu tewnto nean ;D


Vlws por ajudar tanto a glera q non entende, dei uma lida e parece fácil


Vamus ver na hora de fzer ^^ #-o
<center>--------------------------------------------

Vc AMA o Rupert Grint?

Qr q ele saiba da sua humilde existencia?

Vc precis ver uma foto do Rupert com a camiseta da Seleção Brasileira?

Vc conheçe uma musica q ele gostaria de ouvir?

SIM?


Clique aki, e conheça o projeto! http://www.rupert_grint.blogger.com.br/</center>
User avatar
Ingrid.
Recebendo a visita de Hagrid
Recebendo a visita de Hagrid
Posts: 46
Joined: 16/10/05, 13:53
Location: Fortaleza :)

Post by Ingrid. »

Soursweet_girl, é bem fácil mesmo. (:
-

Postei o resultado final - http://geocities.yahoo.com.br/ingriidco ... eiout.html

E hospedei os códigos pra ocupar menos espaço - http://geocities.yahoo.com.br/ingriidcorreia/codes.html
User avatar
[Daniel]
Com a Pedra Filosofal
Com a Pedra Filosofal
Posts: 74
Joined: 16/02/06, 11:37
Location: xD 's place
Contact:

Post by [Daniel] »

Ainda non li mas parece tá bom o tuto,vou tentar com esse ^^
Image
it's music :D
Post Reply

Return to “Design e Layouts”