Criando Layout de Sites e Botes

Animados

Criando um Wireframe
Desenhando o Layout
Dicas de recortes para o layout
o Exportando partes do layout
o Recortes replicados
Criando botes animados
Finalizando

Esse tutorial eu no sei dizer se bsico, intermedirio ou avanado. Acho que acabou
ficando uma mistura dos trs... Eu fiz para guiar ou melhor, ministrar um mini-curso de
como usar Inkscape para fazer layout web. Sugestes, melhorias, so bem vindas, fique
a vontade para editar e melhorar.

Criando um Wireframe

Para criar seu Wireframe ou melhor, a planta

baixa de um site. Tenha alguma idia ou rabisco de como ele vai ser. Onde fica o menu?
os banners? o contedo deve aparecer aonde? tem imagens, quantas? e aonde? existe
alguma coluna, quantas? As respostas para essas perguntas so muito importante para
planejar a Arquitetura da informao, lembre-se que um wireframe no vai limitar a
criao do seu layout, como cores, imagens e formatos. Uma pgina feita de
blocos/quadrados e so as imagens definidas para estes blocos que daro curvas e
formas ao seu layout.

Duas amostras do que o Wireframe:

Desenhando o Layout
Depois de criar o esqueleto
squeleto vamos definir que sua camada Wireframe fique bloqueada
(
) e criaremos uma nova camada Layout sobre ela que
permitira desenhar
nhar livremente sobre o wireframe.

Dicas de recortess para o layout

Exportando partes do layout

Uma forma simples de

exportar somente partes de um layout criando um retngulo ou quadrado sobre a rea
qual pretende exportar. Com o objeto transparente selecionado sobre os objetos limite,
confira se no dialogo de exportao voc esta exportando somente o objeto selecionado.
Importante lembrar!

Evite exportar o layout em

em muitas partes, isso dificulta manter o layout ou uma
futura atualizao.
Tambm evite que o layout seja apenas poucas imagens de tamanho grande,
pode deixar o site lento devido o tamanho dos arquivos

Sempre existe um 'ponto mdio' do que necessrio ser um recorte completo ou recorte
para ser replicado.

Recortes replicados

Recorte replicado um pedao do layout que definimos atravs do CSS a propriedade

de repetio em X, Y ou ambos.

Para ganhar desempenho no layout, tamanho e facilitar a manuteno, procuramos reas

onde podemos utilizar recortes replicados.

Esta rea utiliza um fundo replicado. [ver cdigo]

Criando botes animados

Para iniciar voc precisa definir o tamanho do seu boto, se somente um cone
c
presente nele ou ele tem um formato determinado. Nos exemplos que utilizei so trs
cone 20x20, ativo, normal e quando receber ao :hover do mouse e tambm mais uma
verso animada .gif
, o outro tem largura e tamanho fixo 138x30. Basta usar sua
criatividade, dentro de um retngulo/molde voc cria as trs variaes do seu boto.
Veja o cdigo CSS se no to simples como
c
o Inkscape. :c)

Ativa e Anima
outra opo
outra...
e outra...

[ver cdigo]

Primeira opo
Uma outra
Terceira

[ver cdigo]

Finalizando
O Inkscape somente vai exportar as imagens no formato .PNG, se sua imagem
somente um degrad ou utiliza poucas cores o formato .PNG ganha em qualidade,
tamanho e compactao. Ele um formato onde quanto maior quantidade de cores
idnticas, melhor.
r. J o JPG para fotografias, ou se seu layout abusa no uso das cores.
GIF fica somente para Animar ou utilizar uma imagem com fundo transparente para
IEc 6 ou inferior. Para trabalhar com os outros formatos eu indico o GIMP.
GIMP
Para montar o quebra cabea em HTML + CSS, sugiro estudar Tableless, a tcnica e
modo correto de construir layouts Web, Acessveis. Utilizar um programa bonitinho
onde voc vai mover as peas nem sempre vai mostrar igual em todos os navegadores,

por isso eu escrevo minhas coisas e fao meu alinhamento clicando sempre em
"Atualizar" no navegador.