Slices no Inkscape, seja um open-web-designer feliz!
26 de Fevereiro de 2010, 0:00 - 2 comentários
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!
Instalando o TweetDeck no Ubuntu 9.10
24 de Novembro de 2009, 0:00 - sem comentários ainda
O Twitter está aí, é fato, veio para ficar em suas centenas de roupagens, como apps-desktops, gadgets, extensões do firefox, plugins de blogs e APIs para uso em outros serviços, enfim, há de se acreditar que o motivo do grande sucesso da simplória ferramenta venha a ser sua enorme capacidade de se transformar ao sabor de cada usuário, e ao mesmo tempo caiu nas garras Geeks pela fácil implementação de novas funcionalidades.
Algo que pude perceber, é que o utilizador do Twitter “amadurece” com o tempo, e conforme vai ficando íntimo do potencial do Microblog, vai alçando vôos maiores, ficando mais íntimo das funções do Twitter.
Acho que me encaixo perfeitamente neste caso, e depois de algum tempo “Twitando” no site, Spaz, depois no TwiterFox, resolvi adotar o TweetDeck com minha ferramenta, faltava mesmo tempo para documentar o processo, que envolve não só o aplicativo, mas também a instalação da plataforma AdobeAir, que vem ganhando muito terreno.
Para quem não sabe, TweetDeck é um aplicativo construido para monitorar vários Twitters ao mesmo tempo, publicar, visualizar e upar imagens, além de administrar também contas do Facebook, precursor inchado do Twitter e MySpace.
Bom, alguém já mencionou um dia, “uma imagem vale mais do que 1000 palavras”, e 13 imagens?
Docky para Ubuntu, 7 passos para instalar e configurar
17 de Novembro de 2009, 0:00 - sem comentários aindaPara começar, vamos esclarecer aqueles que não tem muita intimidade com o termo Docky, ai vai uma definição:
Docky no Ubuntu
Dock do MacOs
Docky:
Outros recursos como auto-ocultação para liberação de espaço em tela, além do pula-pula depois de clicar no lançador, também são conhecidas neste excelente agregador de lançadores.
Muito comum aos usuários de MacOS (ao lado), este recurso vem conquistando cada vez mais adeptos em outros sistemas como Windows e Linux.
E agora a boa notícia, também torna-se oficialmente suportado e desenvolvido por uma distribuição Linux, o Ubuntu.
Para os que já estão mais ativos com o Ubuntu, sabem que há várias opções disponíveis para implementar um Docky no sistema, como o Avant Window Navigator (AWN), Gnome-do, KxDocker, Kiba dock, Cairo dock (meu predileto), e muitos outros mais.
E como instar e configurar o novíssimo Docky para Ubuntu? Read more…
Afinal, é fácil ou não instalar programas e drivers no Linux? E remover?
14 de Novembro de 2009, 0:00 - sem comentários ainda
Mais um assunto que dá “pano-prá-manga” quando dois técnicos resolvem conversar sobre tecnologia:
1) É ou não é afinal fácil adicionar e remover programas no Linux?
2) É ou não é mais fácil que no Windows?
3) E os drivers, qual dos dois se saem melhor na escolha e instalação?
Bom, minha missão neste blog é ser coerente, e não fundamentalista, procuro apresentar as coisas da forma mais fácil e clara possível, e tentarei não arrastar a asa para lado nenhum, e ser justo com as partes envolvidas, Linux, Windows e Você!
Sendo assim, desenvolvi uma simples tabela comparativa que pode ser muito útil para você visualizar e tirar suas próprias conclusões, apresentando os recursos disponíveis, similares ou não entre os dois sistemas operacionais.
Diante dos comparativos apresentados acima, tecnicamente conferimos um empate técnico às nossas questões, todos tem sistemas muito eficientes de instalação e remoção de programas, desde os mais simples e triviais aos mais técnicos.
Mas há algumas ressalvas:
- Creio que o Windows possui uma leve vantagem no fato de possuir o “Desinstalar” dentro do menu do próprio programa.
- A ausência disso no Linux acaba sendo superada pelos seus outros meios.
- O Linux possui o fantástico recurso de Repositório unificado de programas, permitindo a instalação segura e tranquila de dentro do próprio Ubuntu, sem a necessidade de recorrer à fontes externas como sites, cds e dvds, o que já não ocorre em sua totalidade no Windows, que reserva este fantástico recursos apenas às suas atualizações automáticas de segurança e algumas outras raras exceções.
Para mim, os Repositórios colocam o Linux na vantagem.
Mas e os Drivers?
