7/23/2019 Layout de Sites e Botões Animados

http://slidepdf.com/reader/full/layout-de-sites-e-botoes-animados 1/6

Criando Layout de Sites e Botões

Animados

• 

Criando um Wireframe •  Desenhando o Layout 

•  Dicas de recortes para o layout 

o  Exportando partes do layout 

o  Recortes replicados 

•  Criando botões animados 

•  Finalizando 

Esse tutorial eu não sei dizer se é básico, intermediário ou avançado. Acho que acabou

ficando uma mistura dos três... Eu fiz para guiar ou melhor, ministrar um mini-curso de

como usar Inkscape para fazer layout web. Sugestões, melhorias, são 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 idéia ou rabisco de como ele vai ser. Onde fica o menu?

os banners? o conteúdo deve aparecer aonde? tem imagens, quantas? e aonde? existe

alguma coluna, quantas? As respostas para essas perguntas são muito importante para

planejar a Arquitetura da informação, lembre-se que um wireframe não vai limitar a

criação do seu layout, como cores, imagens e formatos. Uma página é feita de

blocos/quadrados e são as imagens definidas para estes blocos que darão curvas e

formas ao seu layout.

•  Duas amostras do que é o Wireframe:

7/23/2019 Layout de Sites e Botões Animados

http://slidepdf.com/reader/full/layout-de-sites-e-botoes-animados 2/6

Desenhando o L

Depois de criar o esqueleto

(permitira desenhar livreme

yout

vamos definir que sua camada Wireframe f

) e criaremos uma nova camada Layout sote sobre o wireframe.

ique bloqueada

re ela que

7/23/2019 Layout de Sites e Botões Animados

http://slidepdf.com/reader/full/layout-de-sites-e-botoes-animados 3/6

Dicas de recortes para o layout

7/23/2019 Layout de Sites e Botões Animados

http://slidepdf.com/reader/full/layout-de-sites-e-botoes-animados 4/6

Exportando partes do

exportar somente partes de

qual pretende exportar. Co

confira se no dialogo de ex

Importante lembrar! 

•  Evite exportar o lay

futura atualização.

•  Também evite que

pode deixar o site l

Sempre existe um 'ponto m

para ser replicado.

Recortes replicados

Recorte replicado é um ped

de repetição em X, Y ou a

ayout

Uma for

um layout é criando um retângulo ou quadra

o objeto transparente selecionado sobre os

portação você esta exportando somente o obj

out em muitas partes, isso dificulta manter o

layout seja apenas poucas imagens de tama

nto devido o tamanho dos arquivos

édio' do que é necessário ser um recorte com

aço do layout que definimos através do CSS

bos.

a simples de

o sobre a área

objetos limite,

eto selecionado.

layout ou uma

nho grande,

pleto ou recorte

a propriedade

7/23/2019 Layout de Sites e Botões Animados

http://slidepdf.com/reader/full/layout-de-sites-e-botoes-animados 5/6

Para ganhar desempenho n

onde podemos utilizar reco

Esta área u

Criando botões a

Para iniciar você precisa de

presente nele ou ele tem uícone 20x20, ativo, normal

versão animada .gif , o

criatividade, dentro de um

Veja o código CSS se não

•  Ativa e Anima 

•  outra opção 

•  outra... 

•  e outra... 

[ver código]

•  Primeira opção 

•  Uma outra 

•  Terceira 

[ver código]

FinalizandoO Inkscape somente vai ex

somente um degradê ou uti

tamanho e compactação. El

idênticas, melhor. Já o JPG

GIF fica somente para Ani

IEcá 6 ou inferior. Para tra

Para montar o quebra cabe

modo correto de construir l

onde você vai mover as pe

layout, tamanho e facilitar a manutenção, p

rtes replicados.

iliza um fundo replicado. [ver códi

  nimados

finir o tamanho do seu botão, se é somente u

formato determinado. Nos exemplos que ute quando receber ação :hover do mouse e ta

utro tem largura e tamanho fixo 138x30. Ba

etângulo/molde você cria as três variações d

tão simples como o Inkscape. :c)

portar as imagens no formato .PNG, se sua i

liza poucas cores o formato .PNG ganha em

e é um formato onde quanto maior quantida

é para fotografias, ou se seu layout abusa no

ar ou utilizar uma imagem com fundo trans

alhar com os outros formatos eu indico o GI

  a em HTML + CSS, sugiro estudar Tableles

ayouts Web, Acessíveis. Utilizar um progra

as nem sempre vai mostrar igual em todos o

  rocuramos áreas

o]

m ícone

ilizei são trêsbém mais uma

sta usar sua

o seu botão.

agem é

ualidade,

e de cores

uso das cores.

parente para

MP.

s, a técnica e

a bonitinho

navegadores,

7/23/2019 Layout de Sites e Botões Animados

http://slidepdf.com/reader/full/layout-de-sites-e-botoes-animados 6/6

por isso eu escrevo minhas coisas e faço meu alinhamento clicando sempre em

"Atualizar" no navegador.