Você está na página 1de 8

by Miya_chan

*Programas: Adobe PhotoShop e FrontPage.

01 . Abra seu PhotoShop (ohh!) §XD


Agora vá em 'Arquivo/Novo' (File/New) ou digite Ctrl+N.
Pronto, agora apareceu essa janelinha idiota... bom, ela mostra a resolução (ou
medidas) do documento que você irá criar! Digite 780 em largura (width) e
450 em altura (height).
Prontinho! E só lembrando que, 780x450 pixels é o tamanho padrão para
layouts. Mas você pode também abrir um outro arquivo com a imagem que
deseja, mas aí é só copiar e colar ela na janela que você abriu para criar o seu
layout... tá ligado? ^__^

02. Ahh que legal... mas você tem aquele wallpaper super show, que você a-do-ra e quer usá-lo como
template do seu blog? Fácil! §=D
Ignore o 1º passo, e inicie logo clicando em 'Arquivo/Abrir' (File/Open) ou digite Ctrl+O e procure a
figura. Agora vá em 'Imagem/Tamanho da tela de pintura' (Image/Canvas size) e faça como descrito
no 1º passo: 780x450. A figura será cortada para ficar do tamanho padrão: 780x450.
Ou então simplesmente recorte a figura do tamanho que desejares... mas o tamanho total da janela onde
será elaborado seu layout tem que ter a as dimensões que citei, ok? §=)
Prooonto? Agora sim, vamos ao que interessa! §=}

03. Vamos desenhar os retângulos! (é onde irá fica o conteúdo do blog - post e perfil) ^_^
Humm, que a coisa tá ficanu boua!

Clike na ferramenta retângulo (U), e desenhe 2 deles onde você achar melhor. Observe os
tamanhos (largura) pois que um será para os Posts e o outro p/ Perfil.
Pronto? Agora que tal escolher a cor de fundo dos retângulos? Vai ficar a sua cara! §=)~

04. Vá em 'Janela/Camadas' (Window/Layers). Com essa opção


marcada, vai aparecer essa janelinha da esquerda. Dê duplo clike no
quadrado onde aponta a setinha. Ele mostra a cor de fundo dessa
camada (layer). Eu escolhi o branco. ^_^
Uffa.. e aí, gostou? Ah, você tá achando os retângulos muito opacos
e sem-graça? Humm..
I have a good idea! §XD~
05. Agora alguns efeitos pra dar mais vida ao seu layout!
Vá na opção 'Opacidade' (opacit) e coloque um valor de 0 a 100%. Sendo que, 100% é totalmente
opaco e 0% é transparente. Um valor próximo da transparência dá um efeito legal, já que não fica
totalmente transparente, e ainda dá pra ver a cor original de fundo da camada (layer) do retângulo.
Legal né? Agora Clike com o botão direito nessa camada (layer) e em seguida em 'Opções de
mesclagem' (Blending options) São várias as opções desta ferramenta, e como cada um tem seu
gosto, eu vou só dar uma pequena idéia pra você. §=}

06. Continuando o passo anterior, após clicar em 'Opções de mesclagem' (Blending


options) vai surgir bem na nossa cara, uma janela pra lá de enorme... Agora se prestar
atenção, no canto esquerdo da mesma, tem uma opçãozinha parecida com essa que colokei
aki. (ohh!) o_O'
Eu marquei as opções: 'sombra projetada'(Drop Shadow), 'brilho externo' (Outer Glow)
e brilho interno' (Inner Glow), mas pode fazer do jeito que quiser ok? §;)
Mais uma coisa: não pense que é só marcá-la e pronto! na-na-na! §=D
Observe bem... pois como mostra na figura, eu marquei e clikei na opção 'Traçado'
(Stroke). Pois bem, agora posso configurar a meu bel-prazer, essa opção. ^_^

07. Uhú! E num é que essa coisa tá ficando legal? §XD


Olha só: Eu configurei o 'Traçado' (stroke) nos valores: 2 para
'tamanho' (size) e cor #630354. Lembrando que no mundo html,
as cores são conhecidas por códigos hexadecimais, ou seja, cada
cor tem como "nome" um código de 6 números, que varia do
preto= #00000 ao branco= #FFFFFF (se quiser saber mais,
procura um tutorial de Html aew!) o_O'

08. Bom, quem é o Perfil e quem é o Post aki nessa bagunça?


Vamos identificá-los né? ^_^

Clike na ferramenta (T) na barra à esquerda, e escreva oque

quiser sobre os retângulos. Agora, usando a ferramenta (V)


ajuste as palavras onde e como desejar. §=)
Ah, e tome sempre o cuidado de manter a camada (layer) T acima
da camada do wallpaper ou figura principal.

09. Novamente usando a ferramenta 'Opções de mesclagem' (Blending options), vamos repetir que
fizemos com os retângulos! E agora que você já deve 'tá crake' nessa ferramenta, vou resumir, ok?
Pronto? Agora já nas configurações, eu marquei as opções:
'Sombra projetada' (drop shadow), 'chanfro/entalhe' (Benvel and Emboss) e 'traçado' (Stroke).
A configuração do 'traçado' ficou como: Size=3 e Cor= #ECD5DF
10. E aí, gostando? Bem, pessoalmente, eu sempre uso bastantes efeitos.. contradizendo esse meu tutorial,
já que aqui tá tudo muito simples! ^__^
Quanto à qualidade do layout, isso depende da sua criatividade, ok?
Eu só mexi uns pauzinhos pra você ter uma idéia básica, de como se monta uma canoa! *rs §=D

E aí? Gostou? Mesmo? Conseguiu aprender algo? Uffa.. Eu espero que sim viu... senão vou aí virtualmente, lhe dar
uns cascudos! §XD (rs)
Poiséé... mas não pense que acabou! na-na-na! §=P
Na próxima seção, você vai ver como dar aquele toque final no seu layout... afinal, ele tem que ficar a sua cara, né?

CONTINUAÇÃO -

11. E aí? Preparado pra continuar a maratona? Come on! ^__^


Continuando: sabe aquela parte do layout, que por mais que você corra com a barra de rolagem, ela nunca
acaba? Pois é... a isso eu chamo de Tile.
O 'tile' é nada menos que uma fina faixa que você 'recorta' do layout, e que irá se repetir no html.
Mais sobre esse assunto, veremos lá na frente. §=}

12. Eita que essa coisa nunca acaba! §XP


Agora vamos ao que interessa: O tile.
Como eu já disse, a função dele é se repetir. Por isso ele tem que ter o fundo liso! Reparem
no fundo, por detrás dos retângulos. Agora vou mostrar p/ você 3 "opções" de tiles. ^__^

Selecione a Camada (layer) da sua imagem. Agora, usando a ferramenta 'seleção' (M),
selecione uma faixa no final da imagem, como mostra a figura. Selecionou? Agora digite
CTRL+X Pronto? Essa faixa preta por detrás dos retângulos será o fundo do 'tile'.

13. Ah, legal! Mas você não gosta de fundo preto, ou achou esse muito sem-graça?
Ok... §=/ Digite Ctrl+Alt+Z p/ desfazer esse efeito que você não gostou... pronto! §;)

Selecione novamente a imagem, como anteriormente. Agora vá em


'Filtro/Desfoque/Desfoque Gaussiano' e digite:
96,7 pixels.
Pronto! Essa ferramenta dá efeito de 'embaçamento' na área selecionada! ela ficou
lisinha né? Blz!
Nhaa.. eu amo esse efeitozin! ^__^
14. Well²... e agora, pra quem quer saber como fazer aquele efeito 'esticado' na imagem:
Você já deve ter visto muitos templates assim, com aquele fundo listrado ou esticado, sei lá... bora
fazer um? ^__^
Eu aprendi um dia desses.. e é realmente muito fácil! §=}
Selecione novamente a imagem, como nos passos anteriores, mas com uma diferença: a altura
dessa seleção deve ser de somente
1 pixel, ou seja, da finura de uma linha, como mostra ao lado.
Agora digite: Ctrl+C e depois Ctrl+V.
Agora digite Ctrl+T, clike no quadrado central e arraste p/ baixo, e voalá!
Você pode começar esse efeito do local que achar melhor! §=}

15. Agora, pra finalizar essa 'seção de efeitos' (ainda?) vou mostrar um efeitozin que eu adoro
colocar em meus layouts! ^__^
É facim, facim... tome fôlego, e vamos lá! §=D
Selecione a Camada (Layer) da sua imagem, como mostro ao lado.

16. Pronto? Clike na ferramenta 'Borracha' (E). Agora lá em cima, na barra


de ferramentas, clike no botão 'Pincel' (Brush), como mostra a figura. Vai abrir
uma janela com várias opções de pincéis (brushes)

17. São várias opções de pincéis (brush). Mas não é só isso! Agora dê um clike na setinha,
no canto superior direito dessa janela e... caramba! Abriu outra janela enoorme! O_O'
Calma, ali só contém todos os tipos de pincéis (brush) do seu Photoshop. §;)

18. Uma vez com essa janela aberta, escolha o pincel (brush) tipo 'Mídia Aguada' (sem tradução para o
inglês)
Pronto? Agora sim que a coisa vai ficar interessante! ^__^

19. Depois disso você vai voltar de novo pro quadro de Predefinições do Pincel (onde você estava
antes) Uma vez lá, você vai escolher o pincel (brush) 'Água gotejante' Um pouco mais acima, coloque
7 px como diâmetro do pincel (brush)
Não me lembro do nome original em inglês, por isso pra quem usa o PS em inglês, vai aí as figuras
como amostra. §:)

20. Pronto! E pra começarmos a bagunça (de verdade), defina a cor de fundo (background color) como Preto (#000000) A cor do
quadrado de cima não importa, e sim a do de baixo, pois será dessa cor que a borracha vai 'apagar'
Aaahhh... enfim chegamos ao que interessa! \o/
21. Cansado? Eu também tou! E você nem imagina o quanto! -_-' Come on! Prosseguindo: Com a ferramenta

'Borracha' (E) em mãos, você vai passá-la nos 3 cantos do layout: cima e laterais. É só clikar e arrastar...
preciso dizer mais? Agora veja como ficou!
Legal né? Eu acho! §XD

Uffa.. tou cansada viu? E é porque eu detalhei demais! (rs) Mas ok.. se você tiver captado tudo o que passei, então
valeu a pena! ^__^
Na próxima seção, vou encerrar esse "tuto-quase-infinito"! (graças!)
Afinal, quem dera que fosse só isso aki, pro nosso template ficar pronto né! §;P
See ya! \o_

CONTINUAÇÃO -

22. E aqui estamos nós de novo... ^__^


Bom, agora que acabamos com todo esse processo de 'enfeites e efeitos' no seu futuro layout, vamos à
parte final: Unir todas as Camadas (Layers) em uma só!
Você sabe: a camada do seu wallpaper, camadas dos retângulos, dos textos (T), etc... vamos transformá-las
em uma só camada (Layer). A isso damos o nome de 'Achatar imagem' (Flatten Image)

23. Continuando:
Na barra de ferramentas, lá em cima, vá em 'Camada/Achatar imagem' (Layer/Flatten
image). Pronto!
Agora você só precisa salvar essa imagem, pra depois hospedá-la na internet (Upload)...
mas como ficaria muito lerdo pra carregar, aconselho que divida a imagem em 3 partes,
pra ficar mais fácil.
Mas primeiro crie uma pasta para guardar as imagens do seu layout. Ser organizado de
vez em quando é bom, né! ^_^
24. Pegue a ferramenta 'Fatia' (K) arraste-a, de modo a desenhar
3 retângulos, como mostro na figura. A letra 'A' mostra uma das linhas
dessa ferramenta. Essas serão as 3 partes em que a imagem do layout
será dividido.

Agora de posse da ferramenta 'Seleção' (M), selecione por cima


da ferramenta 'Fatia', como mostra o item 'B'. Após selecionado o
retângulo, digite: Ctrl+C depois Ctrl+N. Clike 'OK' na janela que
aparece e digite Ctrl+V.
Salvando a figura, vá em 'Arquivos/Salvar para a Web' (File/Save for
Web) salve como img01.jpg e depois repita o mesmo procedimento
com as outras 2 partes do layout restantes.
Pronto? Agora selecione pequena faixa no finalzinho da imagem, o
'Tile'. Se lembra? Selecione essa parte com a ferramenta 'Seleção',
conforme mostra a letra 'B', digite Ctrl+C e Ctrl+N e depois Ctrl+V.
Salve esse documento como tile.gif.

25. E aí? Tudo certo? Espero que não tenha se enrolado muito! §=D
Pois bem, agora explicando: com Ctrl+C você copia a área selecionada, com Ctrl+N abre um
novo documento e com o Ctrl+V você cola.
Simples, não? §=}
Cansado? É, eu sei... esse tuto é realmente enorme! *__*~

26. Agora vamos à 2ª e última aula! (aleluia!)


Abra seu FrontPage (que emoção) vá em 'Arquivo/Salvar' e salve esse novo documento (index) na pasta onde está as
imagens do seu layout. Agora vamos começar a fazer a página html do seu template!

27. Clike com o botão direito na página e depois na opção 'Propriedades da página'.
Agora vá na página 'Plano de fundo', marque a opção 'Figura de plano de fundo' e procure
pela imagem Tile.gif
Continuando, sem fechar essa janela, vá na página 'Margens' e marque as duas opções como
0 pixels. Pronto.

28. Como ficou o efeito do seu 'Tile'? Legal? §=D


Ah, vamos colocar o resto das imagens né!
Vá em 'Inserir/Figura/Do arquivo' e coloque em as imagens... em ordem, viu,
uma-a-uma! ^__^
29. Agora vamos pôr os espaços onde vão ficar as escritas do Post e Perfil: Observe se no seu painel de

ferramentas, tem a ferramenta 'Posicionamento' , caso contrário, vá em 'Exibir/Barra de


Ferramentas/Posicionamento'
Agora, na página do seu layout, tecle 'Enter', digite Posts e em baixo Perfil.

30. Selecione o texto Post e clike no ícone .


Apareceu agora uns quadradinhos... passando o mouse em cima, você verá que pode
mover o texto de lugar.
Faça isso, mas primeiro ajuste as laterais, para que fique na medida certa da largura
do retângulo. Posicione e pronto.
Agora repita a operação com o texto Perfil.

31. Colocando os códigos: Agora vamos substituir os textos Posts e Perfil


pelos seus respectivos códigos. §=]
Primeiro selecione o texto Post. Agora clike no botão 'Modo HTML'

que tem em baixo, na barrinha à esquerda.

32. Substitua o texto selecionado -Post- pelo código abaixo. [*Atenção ao 33. Agora Faça o mesmo com o -Perfil- Aqui vai o código:
2º código do Weblog e Blig!*]
-BLOGGER- -BLOGGER-

<!--INICIO - TAGS DO BLOGGER <!--INICIO - BLOGGER - PERSON


<blogger>
| <p align="center">
<font size="1" face="Verda | <font size="1" face="Ve
<blogdateheader> <b> | <!-- MEU PERFIL -->
|
|
-WEBLOGGER- | -WEBLOGGER-
|
<!--INICIO - TAGS <!-- ATENÇÃO <!--INICIO - WEBLOGGER - PERS
<w eblogge
| <p align="center"><b><f
<w eblogcabecal | Mim]</b><br><br>
<b> | Nome:
|
|
-BLIG-
| -BLIG-
|
<!--INICIO - POST <!-- ATENÇÃO <!--INICIO - PERSONALIZAÇÃO
|
<font size="1" fa <script langu
<hr w idth="70% <!-- FIM DO C | <!-- INICIO - MEU PERFIL -->
<br><br><br> <p align="center">
34. Agora selecione todo o código Html e salve num bloco de
notas. Tarefa terminada! \o/ Uhú!

Ou melhor, quase! Ainda falta você hospedar as imagens no


servidor do seu blog (Upload), colocar o endereço das imagens (já
hospedadas no servidor do blog/site) no código do seu bloco de
notas, (pois antes, o endereço delas era o do seu computador) e
passar todo esse Html pra área Template do seu blog! §=D

Complicado? Nem tanto! *__*

Enfim!!! \o/ Acho que agora posso respirar aliviada... quer dizer, se vocês tiverem gostado né? §=}
Eu sei que esse tuto é muito grande e talz... mas eu me lembrei de toda a dificuldade que tive quando aprendi, pois
era um tuto bom, porém pouco detalhado pra quem era uma leiga em layouts e html como eu, que resolvi fazer do
jeito que eu gostaria de ter aprendido, na época! (rs) §XD
Espero que façam bom proveito! ^__^