Tópicos Pais: Tutoriais

Criando Layout de Sites e Botões Animados

Criando um Wireframe
Desenhando o Layout
Dicas de recortes para o layout
- Exportando partes do layout
- Recortes replicados
Criando botões animados
Finalizando
Links úteis

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:

Desenhando o Layout

Depois de criar o esqueleto vamos definir que sua camada Wireframe fique bloqueada () 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!

Evite exportar o layout em muitas partes, isso dificulta manter o layout ou uma futura atualização.
Também 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 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]

<div style="
 background: url(' Local da Imagem ') top left repeat-x;"
/>
Esta área utiliza um fundo replicado.
</div>

[ocultar código]

Criando botões animados

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)

Ativa e Anima
outra opção
outra...
e outra...

[ver código]

ul { list-style: none; padding: 0px; margin: 0px; }

li a {
display: block; 
background-image: url('Imagem com os 3 Ícones');
background-repeat: no-repeat;
background-position: top left;
padding-left: 20px;
height: 20px;
font-size: 12px;
/* Para funcionar o alinhamento ao cento */
line-weight: 20px;
/* Alinhar o label do botão ao centro na vertical */
vertical-align: middle; 
color: green;
text-decoration: none;
}

/* :hover é quando o mouse passa sobre o link,
    :focus é quando utiliza TABulação                  */
a:hover, a:focus {  
background-position: bottom left;
color: black;
}

/* .ativa é uma class definida na opção do menu que
   esta ativo, :active é quando pressiona o clique sobre
   o link                                       */
a.ativa, a:active {
background-position: 0px -20px;
}

/* Este outro é especifico para quando passar o mouse
    sobre a opção ativa. */
a:hover.ativa {
background-image: url('Imagem de ícone animado GIF');
}

----------------------------
o código HTML fica:

<ul>
<li><a href="#1" class="ativa">Anima e Ativa</a></li>
<li><a href="#2">outra opção</a></li>
<li><a href="#3">e outra...</a></li>
</ul>

[ocultar código]

O mesmo código do menu do lado, muda que definimos a
largura fixa em 138px, altura 30px e a imagem que usamos
de fundo é uma outra.  :)

[ocultar 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.