Criando um preenchimento gradiente no Fireworks

por Marcos Elias

Hoje uma amiga me perguntou como fazer esse preenchimento gradiente que uso na barra superior do Explorando:

E também no logo "mep", na bolinha. Esses preenchimentos servem para barras, botões, logotipos, marcas, banners, fundos, uma infinidade de coisas.

Há vários editores de imagens que fazem isso. Em se tratando de edição de imagens para web, eu não troco o Fireworks por nada (antes da Macromedia, hoje nas mãos da Adobe).

Basicamente tendo o desenho que você quer, uma área vetorial (como um quadrado ou círculo), escolha o tipo de preenchimento desejado, no caso, gradiente. E também um tipo de gradiente. No exemplo, estou usando o Fireworks 8, e escolhi o gradiente radial, que é aplicado a partir do centro:

O padrão selecionado é "Solid", que apresenta um preenchimento sólido. Basta clicar na lista suspensa, e escolher "Gradient". Não se preocupe com as cores por enquanto.

No primeiro campo de cor, com a cor roxa na imagem acima, é o que será aplicado no fundo. A borda da imagem é definida no segundo campo de cor, à direita, que está branco com um traço vertical (indicando transparente / inexistente, ou seja, sem borda colorida). O gradiente usará mais de uma cor, que se encontrarão.

Escolhido o gradiente radial, agora clique no quadradinho da cor. Veja que tem duas setinhas:

Cada uma é para uma cor. Clicando dentro dela, pode-se trocar a cor. Se você clicar no meio, entre as barrinhas, uma nova será adicionada, definindo mais uma cor ao gradiente. Para remover uma barrinha de cor, clique nela e arraste para baixo, para fora. (As barrinhas que estou falando são as circuladas em azul na imagem acima).

Para escolher outro tipo de gradiente, clique na lista suspensa (no mesmo lugar que antes estava "Solid" e agora está "Radial"). Um que eu gosto é esse: "Satin". Dá para gerar imagens psicodélicas, fundos diferentes.

Em qualquer um dos gradientes, aparecerá na imagem uma linha com pontos de controle. Por ela, você pode mover o centro do gradiente, e também "girá-lo", fazendo alternar o preenchimento, para outra direção, ou mais próximo ao centro, ou mais longe. Clique no ponto indicado abaixo, e arraste, para experimentar:

Concluído, vá em "File > Export preview", escolha GIF (ou o formato de sua preferência) e mande ver.

No caso da barrinha superior aqui no site, é uma imagem fina, que se repete continuamente até preencher a barra. Mas a idéia do preenchimento é essa :)

Não se esqueça que para a web ou arquivo final, deverá ser salvo em GIF ou JPEG (GIF seria melhor para desenhos computadorizados, mas dependendo dos gradientes pode ficar feio devido a falta de suporte à mais de 256 cores; nesse caso, a saída é usar JPEG ou PNG com alguma compressão). Salve sempre o arquivo .png do Fireworks, em separado, pois ele é editável: é um modelo, que poderá ser modificado depois. Se você exportar e só salvar o GIF, depois não conseguirá alterar as cores, o tipo de gradiente e outras propriedades ou objetos (como textos), sendo necessário recriá-lo. E publicar o PNG na web geralmente é besteira, o arquivo fica mais pesado - apesar de alguns programas gerarem PNG sem perda de qualidade, com ótima compressão.

Para aplicar gradientes nos preenchimentos das letras (textos), selecione com a ferramenta de seleção o objeto de texto desejado (não no modo de edição de textos), clique no campo para alterar a cor normal, e ali tem um botão "Fill Options" (Opções de Preenchimento). Clique nele, e então escolha o gradiente como quiser, da mesma forma que com os objetos gráficos. O texto depois continua editável!

Em vez de gradientes é possível aplicar uma série de efeitos ou planos de fundo para preenchimento, vale a pena mexer um pouco nisso se for do seu interesse criar banners e logotipos diferentes.

Com relativamente pouco trabalho, dá para fazer gradientes como estes, ou mais elaborados até:

O preenchimento gradiente dá um toque profissional à vários tipos de imagens, mesmo que seja um mero ponto no canto, com uma cor pouca coisa mais clara do que o preenchimento do objeto (dando efeito de luz ou brilho). Perto de uma imagem com uma cor sólida, isso faz muita diferença.

Algumas pessoas reclamam de eu colocar o nome do site nas imagens de tela, mas não páro não, pois muita gente copia inadvertidamente e republica em outros blogs sem citar referências.