Slices no Inkscape, seja um open-web-designer feliz!

Há muito tempo, web designers procuram alternativas nos softwares livres para suas necessidades cotidianas de criação e desenvolvimento. e na maioria das vezes, acabam batendo cabeça no Gimp, e após alguns rodeios acabam voltando para uma plataforma proprietária, por conta da falta de recursos adequados para sua produtividade diária, e ter Slices é sem dúvida uma destas ferramentas que fazem falta!

Conceito de Slices (Fatiar)

É uma camada contendo objetos destinados ao mapeamento do local de corte de imagens em um layout.
Sua finalidade é automatizar o processo de geração das múltiplas imagens que compõem um site.

Este recurso está presente nos melhores softwares proprietários, como Photoshop, Fireworks, PaintShop, Illustrator e outros, porém poucas referências são encontradas quando se trata de software livre, somente algumas menções ou plugins desencontrados para o Gimp, que na maioria das vezes está muito distante do usuário final, pelos complexos processos de instalação e utilização rudimentar.

Mas seus problemas acabaram, o ♥ Inkscape ♥ nesta técnica que apresento, RESOLVEcompletamente o processo de criação de Slices, com tudo que os melhores softwares proprietários oferecem, e mais um pouco se tiver criatividade!

Vamos aos passos:

1) Abra um novo documento no Inkscape, de qualquer dimensão.

2) Faça um desenho de site simples, apenas para ilustrar o processo, que posteriormente pode ser reproduzido em qualquer layout.
Sugiro um modelo básico:

3) Pressione o ícone que permite visualizar as camadas (layers) no Inkscape, abrindo o painel lateral.

4) Renomeie a camada que está trabalhando como “layout“.

5) Na sequencia, adicione uma nova camada acima da layout, e a chame de SLICES (ôpa, tá ficando bom!)

6) Bloqueie a camada layout e selecione a camada slices.

7) Deixe a opacidade da camada slices em 50-75%, ou seja, com transparência!

Inicie o desenho de seus slices NA CAMADA SLICE, com a ferramenta de Quadrado, como se estivesse em qualquer software do gênero.

9) Depois de desenhados os campos que deseja, selecione um dos quadros com o botão direito do mouse e solicite “Propriedades do Objeto” (Ctrl+Shift+O).

10) No campo ID, dê o nome para este slice (Ex: topo_menu, base_menu, fundo_conteudo …) e pressione <Aplicar>.

11) Sem precisar fechar esta janela de diálogo, clique na página e pressione <TAB> para ir para o próximo objeto, e vá nomeando-os da mesma forma, até completar o trabalho.

PREPARANDO-SE PARA EXPORTAR, O PULO DO GATO!
SIGA EXATAMENTE OS PASSOS DESCRITOS ABAIXO PARA TER SUCESSO TOTAL!
12) Deixe a camada Slices em opacidade 0%, isto é indispensável para a geração correta das futuras imagens!

13) Pressiona Ctrl+A para selecionar todos os objetos ocultos da camada Slice.

14) Pressione Ctrl+Shift+E para exportar.

15) Aponte a pasta que deseja armazenar suas imagens, dê um nome qualquer ao arquivo (o Inkscape vai utilizar o nome do Slice na exportação), e pressione <OK>.

16) Marque no Diálogo de Exportação, o campo: EXPORTAR EM LOTE (X) OBJETOS SELECIONADOS, e pressione <EXPORTAR>

17) Basta conferir na pasta seus PNGs gerados impecavelmente corretos, prontinhos para serem incluídos no seu htm/css.

Notas interessantes do processo que você precisa saber:

O Inkscape é tão competente no processo de geração de slices neste método, que respeita todas as opacidades de cada ponto do desenho, permitindo excelente sombras projetadas e emendas de taxas de repetições, recursos estes que softwares proprietários feitos para esta finalidade tem dificuldades de resolver.

• Sua página branca é compreendida como transparente pelo processo de exportação.
• Um quadro branco desenhado sob os desenhos, é compreendido como fundo branco no processo de exportação.
• Slices sobrepostos são compreendidos perfeitamente, permitindo algo novo, como a sobreposição para geração de margem de erro e encaixe em cada objeto, algo inconcebível em qualquer outro software.
• Como qualquer ferramenta de Slice, a camada Slice pode ser ocultada, reeditada, e exportada novamente, quantas vezes desejar.
• Seu layout pode mudar sempre que necessário, bastando exportar novamente os slices.

Ajustes no Inkscape para melhorar seu resultado final

O Inkscape é um software de absurda precisão, ainda mais se tratando de medidas, pois tem a capacidade de subdividir unidades de pixels.

Porém, esta característica pode ser prejudicial à qualidade das imagens após a exportação, criando o efeito embaçado em alguns pontos, principalmente em objetos simples com cantos secos, linhas pontilhadas e fontes.

Para contornar esta característica, tome os seguintes cuidados:

• Verificar sempre se as posições X e Y do objeto que está desenhando (slice ou interface) estão com referencias exatas, sem decimais.
• Desabilitar o redimensionamento automático de contornos ao dimensionar objetos, isto pode ser feito clicando no botão correspondente  na barra de ferramentas.
• Procurar sempre dar medidas e coordenadas exatas para objetos e contornos, com valor de pixel cheio.
• Alterar nas preferências do Inkscape, a medida de salto (setas) e super salto (Shift+setas) para 1px e 10px respectivamente.

Estes cuidados tomados, o resultado final de suas criações poderão ser realmente surpreendentes, aliados à fantástica produtividade do Inkscape, trazendo você realmente para o mundo da criação profissional de websites utilizando software livre.

Preparando o Ubuntu para melhorar ainda mais seu desempenho.

Talvez uma lacuna que exista no Inkscape e o produto final, seja sua limitação na exportação de imagens JPG, pois ele somente exporta no formato PNG, que garante transparências e cores 24bits, suportadas hoje por todos os navegadores.

Porém, alguns profissionais alegam que o PNG mesmo que perfeito no quesito qualidade, é pesado para compor uma interface web (algo que discordo totalmente, a banda larga está aí), e preferem JPG (24bits sem suporte à transparências), ou ainda GIF (o velho formato com canal indexado de cor transparente, aquele cheio de quadradinhos brancos em volta.), por serem mais leves.

A solução para ter JPG’s ou GIF’s no lugar de PNG’s, é o processo de conversão automatizada (ou em lote) depois da exportação.

Para isto temos:

• Nautilus Scripts para conversão de várias imagens, instalável via Ubuntu-Tweak (nada de códigos ok).
• Visualizador de imagens Gthumb para Gnome, ideal para converter imagens com muitas configurações.
• Visualizador de imagens Gwenview, mesmos recursos para KDE.

Instale qualquer um destes recursos, e pronto, imagens no formato que desejar.

Curiosidade

Como pode-se perceber neste tutorial, nenhum plugin ou artifício de programação foi utilizado, apenas um recurso que esteve sempre alí, desde algum momento em que o Inkscape adotou o processo de exportação em lotes.

Por algum motivo, até então, não encontrei referências de quem tenha se dado conta do potencial desta funcionalidade, como uma ferramenta poderosa de produção profissional, suprindo as necessidade primordiais em um software para web designer no mundo do software livre.

Portanto, seguindo o espírito livre, compartilho este conhecimento, façam bom proveito!

Sucesso à todos e excelentes sites!