View
214
Download
0
Category
Preview:
Citation preview
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.
Recommended