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 (
Dicas de recortes para o layout
Exportando partes 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
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.
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 
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.
Nenhum comentário:
Postar um comentário