Tutorial para Inkscape: estilo Oxygen

Uma dúvida muito constante na nossa comunidade é a da possibilidade de criar elementos gráficos avançados com software livre e isso acaba afastanto muito possíveis futuros usuários. Mas os desenvolvedores são espertos e cada vez mais nossas aplicações representantes das artes evoluem. Um exemplo disso é o Inkscape, poderoso editor de imagens vetoriais que concorre com o Corel Draw e na maioria dos casos não sai perdendo. Apesar disso todo o programa profissional precisa da ajuda dos famosos tutoriais e é isso que eu vou fazer – um tutorial mostrando um efeito muito usado em websites e também no famoso ambiente gráfico KDE: o efeito Oxygen.

Não, eu não vou a ensinar a desenhar todo o ambiente gráfico (isso ainda é muito complicado para mim) mas sim um efeito de iluminação usado nas barras do tema  Oxygen, de criação de David Vignoni e sua equipe. O efeito que estou usando era de um dos primeiros painéis do KDE 4 e que foi trocado por uma cópia do Vista.

Esse tema era ótimo na minha opinião!

O atual tema usado no painel do KDE.

Começando a desenhar

Antes de tudo vamos ativar duas ferramentas importantes no Inkscape, clicando nos botões Preenchimento e Traço e Alinhar e Distribuir que se localizam na barra superior do Inkscape.

Ative-os, pois serão muito úteis.

Após isso é só criar um documento no tamanho desejado. Lembre-se que para modificar o documento é só apertar Ctrl + Alt + D e colocar lá suas configurações. Eu sempre fasso com a resolução 1280×1024, mas isso vai de cada um.

Começamos com o retângulo!

Começamos desenhando um retângulo, que servirá de base para o estilo. Após desenhar o primeiro retângulo, duplique-o com Ctrl + D e vamos para o próximo passo.

Agora você redimensiona o segundo retângulo deixando a altura pela metade e se necessário alinhando ele para que fique na parte superior do primeiro retângulo.

Agora, com o auxílio da barra lateral do Inkscape, vamos editar o gradiente do segundo retângulo clicando no botão de Degradê radial para ativar o mesmo e clicando em Editar… para colocar as nossas configurações de degradê, que são um ponto branco opaco e outro ponto também branco mas completamente transparente, de acordo com a figura abaixo.

Após isso clique com o botão Criar e editar degradês – que fica no lado esquerdo do aplicativo – para puxar seu degradê. Deixe-o como o da segunda figura abaixo:

Ele estará assim antes de você puxar os pontos do degradê.

Você puxará os pontos até o extremo superior, para dar o efeito que queremos.

Agora você duplicará esse degradê que fizemos e inverterá ele com o botão Inverter verticalmente que está na barra superior do Inkscape. Esse segundo degradê será colocado na parte inferior do retângulo e deverá ser menor que o outro degradê para melhorar o efeito que estamos fazendo.

Agora, para dar o efeito de sombra, duplique o retângulo base, borre-o e coloque-o no fundo.

É muito importante borrar o elemento para dar um efeito mais real de sombra.

Uma outra dica é você não deixar os degradês totalmente nos extremos, puxando 1 pixel de cada um para o lado de dentro do retângulo base. Muito fácil, não é? Se você seguiu todos os passos, seu retângulo deve ter ficado mais ou menos como o da figura abaixo:

Ficou bem legal mesmo!

Tendo como base esse estilo, podemos criar muitos outros de variadas cores e formatos. Veja abaixo alguns outros exemplos:

Você ainda pode baixar um pacote  com todos esses arquivos em SVG – editáveis no Inkscape. Abraço!