Inkscape Brasil

Siga-nos no Twitter Siga-nos no Identi.ca
Versão Estável 0.48 Baixe Agora!

Tópicos Pais: Tutoriais

Criando Layout de Sites e Botões Animados

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

Esboço de um layout feito a mão. 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.

Wireframes

Desenhando o Layout

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

Proposta de layout 01 Proposta de layout 02 Proposta de layout 03

Dicas de recortes para o layout

Exportando partes do layout

Amostra de como exportar uma parte do layout. Uma forma simples de exportar somente partes de um layout é criando um retângulo ou quadrado sobre a área qual pretende exportar. Com o objeto transparente selecionado sobre os objetos limite, confira se no dialogo de exportação você esta exportando somente o objeto selecionado.

Importante lembrar!

Sempre existe um 'ponto médio' do que é necessário ser um recorte completo ou recorte para ser replicado.


Recortes replicados

Exemplo de repetição de um fundo em X ou Y.

Recorte replicado é um pedaço do layout que definimos através do CSS a propriedade de repetição em X, Y ou ambos.

Para ganhar desempenho no layout, tamanho e facilitar a manutenção, procuramos áreas onde podemos utilizar recortes replicados.

Esta área utiliza um fundo replicado. [ver código]

Criando botões animados

Amostra de Botões como Animar

Para iniciar você precisa definir o tamanho do seu botão, se é somente um ícone presente nele ou ele tem um formato determinado. Nos exemplos que utilizei são três ícone 20x20, ativo, normal e quando receber ação :hover do mouse e também mais uma versão animada .gif , o outro tem largura e tamanho fixo 138x30. Basta usar sua criatividade, dentro de um retângulo/molde você cria as três variações do seu botão. Veja o código CSS se não é tão simples como o Inkscape. :c)

[ver código]
[ver código]

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 compactação. Ele é um formato onde quanto maior quantidade de cores idênticas, melhor. 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.

Para montar o quebra cabeça em HTML + CSS, sugiro estudar Tableless, a técnica e modo correto de construir layouts Web, Acessíveis. Utilizar um programa bonitinho onde você vai mover as peças nem sempre vai mostrar igual em todos os navegadores, por isso eu escrevo minhas coisas e faço meu alinhamento clicando sempre em "Atualizar" no navegador.

Links úteis



create new tag

TutorialForm edit

Título Criando Layout de Sites e Botões Animados
Autor ValessioBrito
Data 09/06/2008
Estado Finalizado
rev 3 em 23 Sep 2009 por AurelioAHeckert
Editar Anexar Versões Mais...

Todo material do sítio Inkscape Brasil é propriedade do grupo Inkscape Brasil e pode ser reproduzido livremente, desde que permaneça livre e a fonte seja citada, seguindo os termos da licença Creative Commons (by-sa).

Inkscape é um Software Livre, distribuido sobre Termos GNU-GPL.

eXTReMe Tracker
Inkscape - Open Source vector graphics editor SVG - Scalable Vector Graphics TableLess - Coerência, Simplicidade e Acessibilidade no código HTML Esse documento é XHTML 1.0 Valido! Esse documento contém CSS-2 Valido! Debian - GNU/Linux TWiki - Ambiente Web Colaborativo Colivre - Cooperativa de Tecnologias Livres