Apostila do Gimp

Prévia do material em texto

* WEBDESIGNER – CONSTRUÇÃO DE SITES*
Índice
Gimp - GNU Image Manipulator Program 
Introdução................................................................................................................ 04
Janelas em paralelo.................................................................................................. 05 
Criando um novo arquivo......................................................................................... 07
Resolução da imagem.............................................................................................. 08
Zoom........................................................................................................................ 08
A barra de Ferramentas............................................................................................09
Salvar como.............................................................................................................. 09
Abrir arquivo............................................................................................................. 10
Camadas.................................................................................................................. 11
Particularidades da janela de camadas.................................................................... 11
abrir como camadas................................................................................................. 12
Redimensionar camadas.......................................................................................... 13
Mover objetos........................................................................................................... 14
Ferramenta de texto................................................................................................. 15
Formatando texto..................................................................................................... 16
Preenchimentos........................................................................................................ 17
 ***Preenchimento de camadas............................................................................. 18
 ***Preenchimento de texto................................................................................... 19
Tesoura inteligente................................................................................................... 20
Ajustar tela às camadas........................................................................................... 20
Desfocagem............................................................................................................. 21
Filtros de cores......................................................................................................... 23
 *** Colorir.............................................................................................................. 23
 ***Mapear com degradê........................................................................................ 23
 ***Rotação do mapa de cores............................................................................... 23
 ***Colorizar a partir da amostra............................................................................ 24
●Desenvolvido por Valdivan Ivan 2
 * WEBDESIGNER – CONSTRUÇÃO DE SITES* 
 
●Desenvolvido por Valdivan Ivan 3 
 
 
 
 
 
 
 
 ***Mapeamento alien2 ....................................................................................................... 24 
Efeitos de vidro ....................................................................................................................... 25 
 ***Aplicar lente ...................................................................................................................... 25 
 ***Pastilhas de vidro .............................................................................................................. 25 
Efeitos de luz ............................................................................................................................ 26 
Distorções ................................................................................................................................ 27 
 ***Empurrar ........................................................................................................................... 27 
 ***Coordenadas polares ........................................................................................................ 27 
 ***Dobra da página ................................................................................................................ 27 
 ***Mosaico ............................................................................................................................. 27 
 ***Dobrar em curva ................................................................................................................ 28 
 ***Esculpir ............................................................................................................................. 28 
 ***Ondas ............................................................................................................................... 28 
 ***Vento ................................................................................................................................. 28 
Script-Fu ................................................................................................................................... 29 
Créditos .................................................................................................................................... 30 
 
 
 
 * WEBDESIGNER – CONSTRUÇÃO DE SITES*
Introdução
Agora iniciaremos o trabalho com Imagens, para tanto, estaremos estudando um software novo 
neste seguimento. O GIMP. Ainda que este programa seja novo, ele já é bastante difundido entre os 
usuários do Sistema Operacional “Linux”, tendo inclusive bons artistas entre os seus usuários. Já 
encontramos também “Sites e Comunidades Virtuais” especializados no desenvolvimento com o GIMP.
Este programa tem bons recursos para tratamento de fotos e edição de imagens, porém, o GIMP 
também agrega recursos de animação, recurso este, que alguns dos demais editores de fotos e imagens 
não possuem.
É importante ressaltar que o Gimp trabalha com duas janelas. Uma para configuração, chamada 
de “Janela Principal”, e outra para desenvolvimento, chamada de “Janela de Desenvolvimento”. Então, 
faz-se necessário dizer que, a medida que selecionamos uma ferramenta na “Janela de 
Desenvolvimento”, devemos configurá-la na “Janela Principal”.
 Para utilizar o GIMP, proceda da seguinte forma:
 
 APLICAÇÕES
 
 GRÁFICOS 
 GIMP IMAGE EDITOR
 E então você terá a tela inicial do GIMP:
De início, alguns usuários poderão ficar “perdidos” com a tela inicial do GIMP, pois, ele não abre 
uma área de desenvolvimento como a maioria dos programas. 
Se você estivesse importando ou recuperando uma figura com o GIMP, ele seria automaticamente 
configurado para exibir tal figura, porém, quando optamos pelo procedimento de abrir primeiro o GIMP 
pelo Menu Aplicações (como ensinado acima na Introdução), teremos que criar um novo arquivo. Outro 
fato importante é que, o Gimp também abre outra janela em conjunto com a sua tela inicial. Esta janela 
em conjunto na verdade é um resumo do Menu “Diálogos”.
●Desenvolvido por Valdivan Ivan 4
Esta é a tela inicial do GIMP, também chamada de “Janela Principal”
Janela Principal
Janela de Desenvolvimento
 * WEBDESIGNER – CONSTRUÇÃO DE SITES*
Janelas em Paralelo
O Gimp também abre na inicialização a janela “Camadas, Canais, Vetores, Desfazer | Pincéis, 
Texturas, Degradês”. Estes recursos estão no Menu “Diálogos”,porém,
 note na figura ao lado que esta janela é um resumo do Menu
 “Diálogos”, tornando-se assim, na verdade, uma janela
que agrupa sete (7) outras.
 Se você desejar fecharesta janela em paralelo, clique no botão “Fechar” no canto superior 
direito da janela para fechá-la. 
 Então, você terá a seguinte caixa de diálogo:
●Desenvolvido por Valdivan Ivan 5
Resumo do Menu Diálogos
Na figura abaixo você vê a janela “Camadas, 
Canais, Vetores, Desfazer| Pincéis, Texturas 
Degradês” que abre na inicialização do Gimp
Clique neste botão
 para confirmar
 * WEBDESIGNER – CONSTRUÇÃO DE SITES*
***DICA DO PHOTOSHOP
Esta é a tela inicial do Photoshop:
●Desenvolvido por Valdivan Ivan 6
Tela inicial do Photoshop
Caixa de Ferramentas do Photoshop
 * WEBDESIGNER – CONSTRUÇÃO DE SITES*
Criando um novo arquivo
Para criar um arquivo novo, você deve clicar no Menu “Arquivo” e escolher a opção “ Novo”, ou 
simplesmente, acionar o atalho “CTRL+N”.
Então, você terá a seguinte tela:
Após escolher a largura e a altura de sua nova imagem, clique no botão OK, e você terá a 
seguinte tela;
●Desenvolvido por Valdivan Ivan 7
Esta é a Janela de Desenvolvimento do Gimp
 * WEBDESIGNER – CONSTRUÇÃO DE SITES*
Resolução da Imagem
A resolução de uma imagem, determina seu grau de detalhe e é medida em pixels, ou pontos, 
que tal imagem tem por polegada (dpi).
Após, criar uma nova imagem, se quisermos alterar a resolução, devemos clicar na guia “Opções 
Avançadas”, para ter a seguinte tela:
 Note que a caixa de diálogo ficou maior. 
Zoom
O Gimp trabalha bem com o recurso de visualizar uma imagem com Zoom. Basta pressionar as 
teclas – (para diminuir o zoom) ou + (para aumentar o zoom).
Outra alternativa é através do comando “Ampliar” do Menu Ferramentas, onde o ponteito do 
mouse se torna uma luneta com um sinal de adição (+), pronto assim para aumentar a visualização ou 
para marcar uma região específica. Para diminuir a visualização você deve antes de clicar ou marcar uma 
região manter pressionada a tecla control (CTRL); Note que o ponteiro do mouse se torna uma luneta com 
um sinal de subtração (-).
●Desenvolvido por Valdivan Ivan 8
Após clicar em 
Opções Avançadas, 
altere a resolução 
aqui
Nesta guia é possível 
escolher como será o 
preenchimento de 
fundo da imagem
Este espaço é utilizado para você 
inserir um comentário sobre a 
imagem a ser criada
Modelos (tamanhos) 
pré-definidos de 
imagens
Pela Barra de Ferramentas do Gimp, clique neste 
 ícone, para ativar a Ferramenta de Zoom
 * WEBDESIGNER – CONSTRUÇÃO DE SITES*
A Barra de Ferramentas
O Gimp tem uma grande barra de ferramentas, com botões para as mais diversas aplicações.
Abaixo, listamos algumas Ferramentas:
Salvar como
A extensão nativa do Gimp é .XCF. Então, caso você esteja trabalhando com uma imagem no 
Gimp, e ainda pretende fazer modificações, sugerimos que você salve seu arquivo na extensão nativa do 
Gimp. Isto preservará todas as camadas e demais particularidades do seu trabalho. Você poderá salvar 
em outro formato depois, através do Menu “Arquivo”, e opção “Salvar como”. Note então que o processo 
de “Salvar como” no Gimp é idêntico ao de qualquer programa.
No comando “salvar como” o Gimp nos possibilita salvar uma imagem com vários formatos 
diferentes. São várias as opções de extensões que o Gimp trabalha, como por exemplo: TIF/TIFF, BMP, 
PNG, JPEG, PNG, GIF, PPM, ICO(ícone do Microsoft Windows), PS, PSD(extensão do Photoshop), dentre 
outras. É importante ressaltar que em alguns casos é preciso exportar a figura.
Então, sua caixa de diálogo 
 terá a seguinte aparência:
●Desenvolvido por Valdivan Ivan 9
Esta é a Barra de Ferramentas do GIMP
Ferramentas de 
Seleção
Ferramenta de Zoom
Ferramenta de 
Mover
Ferramentas de Texto
Ferramentas de 
Preenchimento
Ferramentas de 
Misturar (degradê)
Pincel
Borracha
Ferramenta de 
Rotacionar
Ferramenta Clonar
Clique aqui para selecionar 
outras extensões
Escolha aqui a 
extensão desejada
Confirme clicando no 
botão Salvar
 * WEBDESIGNER – CONSTRUÇÃO DE SITES*
Abrir Arquivo
Já sabemos que o Gimp pode salvar (ainda que seja exportando) uma figura em diversos formatos 
diferentes, porém, o processo de abrir um arquivo no Gimp tem particularidades. Podemos abrir um 
arquivo através da “Janela Principal” ou através da “Janela de Desenvolvimento”. 
Veja as figuras abaixo:
Em qualquer dos dois casos será aberta 
a seguinte caixa de diálogo:
***DICA DO PHOTOSHOP
●Desenvolvido por Valdivan Ivan 10
Abrir arquivo
 através da Janela de 
Desenvolvimento do Gimp
Abrir arquivo 
através da Janela 
Principal do Gimp
Escolha uma imagem aqui
Veja a pré-visualização 
da imagem
Clique no botão Abrir
Pasta ativa
Navegador de pastas
Fecha o arquivo atual
Clique aqui para gerar um arquivo novo
Comando imprimir
Arquivos recentes
Usado para abrir uma imagem
Exportar imagem
Importar imagem
Configura as ferramentas
Fecha o programa
 * WEBDESIGNER – CONSTRUÇÃO DE SITES*
Camadas
Qualquer programa que trabalhe com edição de fotos e imagens possui recursos de edição de 
camadas. Cada camada pode e deve ser trabalhada de forma distinta, visando um melhor resultado final 
do trabalho em curso. Logo, será quase impossível trabalhar editando fotos e/ou imagens sem trabalhar 
com camadas. Para explicar camadas de uma forma bastante simples, pense em uma mesa ou superfície 
lisa. Todos os objetos que precisamos para confeccionar um trabalho devem ser montados sobre a mesa.
Então, esta mesa será chamada de camada de fundo.
Para exibir as camadas de seu trabalho você deve proceder da seguinte forma:
No menu “Diálogos”, escolha a opção “Camadas”. Também funciona pelo atalho “CTRL+L”.
A figura ao lado, mostra 
um arquivo feito no Gimp e 
respectivamente, suas camadas.
Veja uma dica do próprio Gimp que
fala sobre camadas:
Particularidades da Janela de Camadas
Quando exibimos a “janela Camadas”, notamos que ela tem alguns botões e símbolos que 
desempenham importantes comandos. Através dela podemos duplicar, ativar ou desativar camadas, 
abaixar ou levantar camadas, gerar outras camadas e até mesmo excluir camadas. Vejamos:
●Desenvolvido por Valdivan Ivan 11
Janela de camadas do Gimp
Arquivo atual
Modo de exibição da 
camada selecionada
Ativar ou desativar 
visualização de camada
Botão Manter transparência
Botões que fecham a
 janela Camadas
Acompanhamento automático da 
 imagem pelo menu imagem
Grau de opacidade
Nova Camada
Subir Camada Abaixar Camada Duplicar camada 
 selecionada Ancorar Camada
Excluir Camada
Grupo de Camadas
Lançador de opções
 * WEBDESIGNER – CONSTRUÇÃO DE SITES*
***DICA DO PHOTOSHOP
Abrir como Camada
O Gimp possui um recurso bastante prático no que se refere a abrir imagens. Qualquer imagem 
de formato suportado pelo Gimp pode ser aberto em um arquivo atual, como camada. É importante 
ressaltar que este recurso cola a imagem que está sendo aberta sobre a imagem atual.
 Veja o caminho para 
abrir um arquivo como 
camada na figura ao lado:
Na caixa de diálogo que se abre, escolha o arquivo 
para ser adicionado como camada na imagem atual.
●Desenvolvido por Valdivan Ivan 12
Depois clique no 
botão “Abrir”
Clique aqui para 
adicionar uma camada
Clique aqui para duplicar a camada selecionada
Clique aqui para apagar a camada selecionada
Opções de efeitos aplicáveis em camadas
Configuração de camadas
 * WEBDESIGNER – CONSTRUÇÃO DE SITES*
Redimensionar Camadas
Quando adicionamos uma imagem como camada, quase sempre notamos que a imagem 
adicionada é maior ou menor que a imagem ativa. Então, se a imagem adiciona for maior que a ativa, o 
Gimp tomará como base, o tamanho da camada da imagem ativa. Isso significa dizer que a imagem 
adicionada não será totalmente exibida, pois seus lados estarão fora do limite de exibição.
Para corrigir este problema, devemos redimensionar a imagem adicionada como camada.
Para que a figura seja exibida corretamente, acione o comando “RedimensionarCamada” 
do menu Camada. A figura 1 abaixo ilustra este procedimento:
●Desenvolvido por Valdivan Ivan 13
Note pelo pontilhado que os 
limites da figura adicionada como 
camada, são maiores que os 
limites da camada da figura atual
Configure de forma a obter 
um bom resultado e clique 
no botão “Redimensionar”
Veja o resultado após redimensionar
 os limites da camada colada 
Caso sua imagem não esteja mostrando este 
pontilhado, ative sua visualização no menu 
“Visualizar” e escolha os comandos 
“Exibir limites da Camada e Exibir 
Seleção”
1
32
 * WEBDESIGNER – CONSTRUÇÃO DE SITES*
Mover Objetos
No Gimp podemos mover com facilidade objetos, camadas e seleções. Para tanto, devemos ativar 
a ferramenta de transformação “Mover”, ou pressionar a tecla “M”. Veja a montagem de janelas abaixo:
Na figura abaixo, a camada de texto (a palavra imagem), não está sendo exibida por completa. 
Porém, note que ainda há espaço na camada de fundo que poderá ser utilizado. Então, vamos mover a 
camada de texto para o centro da camada de fundo através da ferramenta “Mover”.
Selecione a camada de texto, e ative a ferramenta “Mover”. Depois, clique na camada de texto e 
arraste livremente para o local desejado.
Após mover a camada de texto, a figura ficou assim:
●Desenvolvido por Valdivan Ivan 14
Ferramenta Mover da 
Janela Principal do 
Gimp
Ferramenta Mover da 
Janela de 
Desenvolvimento do Gimp
 * WEBDESIGNER – CONSTRUÇÃO DE SITES*
Ferramenta de Texto
A ferramenta de texto do Gimp é muito eficiente, porém, deve ser usada com extrema destreza, 
pois, constantemente iremos nos utilizar da ferramenta “Mover”.
Para selecionar a ferramenta de texto, basta ativá-la na janela principal do Gimp ou pressionar a 
tecla “T”. Outra opção é através da Janela de Desenvolvimento. As figuras abaixo ilustram como ativar a 
ferramenta de texto através das Janelas de Desenvolvimento e Principal. 
No Gimp você não deve tentar abrir um espaço na área de trabalho para começar a digitar seu 
texto. Note que, depois de ativar a ferramenta de texto, você deve clicar em qualquer lugar na área de 
desenvolvimento para abrir a janela do “Edição de Texto do Gimp”. É na janela do “Editor de Texto do 
Gimp” que você deverá digitar seu texto. 
Simultaneamente, no local da área de desenvolvimento onde você clicou, o texto digitado na 
janela do “Editor de Texto do Gimp”, será inserido. Depois, clique no botão “Fechar” do “Editor de Texto 
do Gimp”.
Veja a simulação abaixo:
Note que o texto será inserido em uma 
nova camada. 
Note também, que é praticamente impossível 
colocar o texto onde queremos sem movê-lo para o 
local desejado.
●Desenvolvido por Valdivan Ivan 15
Janela do Editor de Texto do Gimp
Texto inserido simultaneamente
Botão “Fechar” do Editor 
 de Texto do Gimp
 * WEBDESIGNER – CONSTRUÇÃO DE SITES*
Formatando texto
Para fazer formatação de texto no Gimp, use o seguinte procedimento:
1° Passo: Clique na ferramenta de texto e faça um texto qualquer. Na figura abaixo o texto está com 
tamanho de 130 pixels. Veja o diálogo circulado na figura abaixo:
2° Passo: Exiba “Camadas” (CTRL+L), e certifique-se que a camada de texto é a camada selecionada.
3° Passo: Clique na ferramenta de texto ou pressione a tecla “T”.
4° Passo: Com a ferramenta de texto selecionada, clique no seu texto. Neste momento poderá ou não 
aparecer a janela do “Editor de Texto do Gimp”. 
5° Passo: Na Janela Principal do Gimp, atente para o diálogo “Tamanho”. Coloque o tamanho desejado.
6° Passo: Clique no diálogo “Cor”, e escolha uma nova cor e clique no botão OK. 
Abaixo segue-se uma tela ilustrativa, que servirá como base:
 Segundo a formatação sugerida na figura acima, teremos a seguinte imagem:
●Desenvolvido por Valdivan Ivan 16
Clique aqui para 
ter acesso à lista 
de fontes
Nesta lista escolha a 
fonte desejada
Escolha um novo 
tamanho
Clique aqui para ter acesso à 
caixa de diálogo “Cor do Texto”
Lista de fontes
Caixa de diálogo “Cor do Texto” clique aqui e escolha uma 
nova cor para seu texto
Botão OK
 * WEBDESIGNER – CONSTRUÇÃO DE SITES*
Preenchimentos
No Gimp, podemos preencher um objeto com cor, textura ou degradê de cores. 
É possível aplicar qualquer combinação de cores com o Gimp. Abaixo veja alguns exemplos de 
preenchimentos:
Estes preenchimentos podem ser aplicados em uma camada, um texto ou qualquer outro objeto. 
Para poder utilizar as ferramentas de preenchimento do Gimp, utilize a opção “Ferramentas de Pintura”, 
no menu Ferramentas. 
Veja a figura abaixo:
●Desenvolvido por Valdivan Ivan 17
Preenchimento 
cor sólida
Preenchimento radial
Preenchimento 
quadrado 
Preenchimento 
com textura
Preenchimento 
cônico
Preenchimento 
com degradê
Preenche com um 
degradê de cores 
(Misturar)
Janela Principal 
 do Gimp
Preenche com uma 
cor ou textura 
(Preenchimento)
 * WEBDESIGNER – CONSTRUÇÃO DE SITES*
***Preenchimento de Camadas:
Para preencher uma camada com determinada cor ou efeito de preenchimento, você deverá 
selecioná-la primeiro para poder editá-la.
No exemplo a seguir irei preencher a camada de fundo com cor de frente. Veja a figura e note 
que a cor de frente ativa é a cor preta:
Então, vamos lá. Basta selecionar a camada e executar a seqüência “Editar” “Preencher com cor 
de Frente”, como na figura abaixo:
 e então, assim ficaria sua imagem:
Caso você queira preencher uma camada com cor de fundo ou com uma textura, veja na figura a 
seguir que logo após a opção “Preencher com cor de Frente”, o Gimp lista as opções “Preencher com cor 
de Fundo” e “Preencher com Textura”.
●Desenvolvido por Valdivan Ivan 18
Cor de frente
Cor de fundo
Camada de fundo
Área de 
desenvolvimento
Caso você queira selecionar 
outra textura, clique neste 
lançador, que fica localizado na 
Janela Principal do Gimp
Nesta janela, 
basta escolher 
sua nova textura
Inverter cores de 
frente e de fundo
 * WEBDESIGNER – CONSTRUÇÃO DE SITES*
***Preenchimento de Texto:
No capítulo “Formatação de Texto”, nós aprendemos como formatar um texto com cor sólida. 
Agora, vamos preencher um texto com uma textura. Para tanto, tenha em sua tela do Gimp, um texto 
qualquer. Lembre-se que, para preencher com cor sólida basta selecionar a camada de texto e escolher a 
cor no diálogo “Cor” da ferramenta de texto. Na dúvida releia o capítulo “Formatação de Texto”.
De posse de um texto, siga o exemplo a seguir:
1° Passo: Visualize a janela “Camadas”.
2° Passo: Selecione sua camada de texto.
3° Passo: Com a camada de texto selecionada, marque o botão “Manter Transparência” da janela 
“Camadas”. Caso você não marque o botão “Manter Transparência”, seu texto será engolido pela textura, 
pois, toda a camada será preenchida.
4° Passo: Na Janela Principal do Gimp, selecione uma textura qualquer. Eu vou usar a textura “Leopard”.
5° Passo: Execute a seqüência “Editar” “Preencher com Textura”.
Se você quiser ter cada letra com uma textura diferente, deve selecionar na Janela Principal do 
Gimp a Ferramenta “Preenche com uma cor ou textura” que é a Ferramenta de Preenchimento.
Então, marcar a opção “Preencher cores similares” no campo de diálogo.
Veja na figura abaixo:
●Desenvolvido por Valdivan Ivan 19
Texto preenchido com 
a textura Leopard
Texto com cor 
sólida
Quando ativada 
esta opção, o texto 
será preenchido 
todo de uma vez
Quando esta opção está 
ativada, você deve clicar em 
uma letra. Note que somente 
ela será preenchida
Certifique-se que este 
diálogo está ativado
Textura ativa
Exemplo com várias 
 texturas
 * WEBDESIGNER – CONSTRUÇÃO DE SITES*
Tesoura Inteligente
O Gimp tem uma importante ferramenta de seleção. Eu estou me referindo à “Ferramenta de 
Seleção” tesoura inteligente. Como o próprio nome da sugere, esta ferramenta é inteligente porque tende 
a se ajustar automaticamente na seleção de determinadas áreas, nos poupando tempo paraselecionar 
áreas de muitas curvas em uma imagem.
É importante ressaltar porém que, esta tesoura não irá recortar a área selecionada da imagem, 
pois lembre-se ela é uma ferramenta de seleção.
Então, no menu ferramentas, escolha a tesoura inteligente entre as ferramentas de seleção.
 Suponha que 
 você queira recortar
 o busto da imagem
 Na figura ao lado eu 
 selecionei somente o
 busto da imagem
Cada ponto na imagem
representa um clique 
com a tesoura inteligente
Ajustar tela às camadas
As vezes, temos o inconveniente de uma imagem que é menor ou maior que a tela de exibição do 
Gimp. Para ajustar esta tela é que devemos utilizar o comando de ajuste de tela.
 Execute o comando
 “Ajustar tela às camadas”
●Desenvolvido por Valdivan Ivan 20
imagem original imagem selecionada 
com a tesoura
Uma dica importante é que 
você deve coincidir o 
primeiro clique com o 
último, fechando a seleção
Depois de fechar a seleção 
com o último clique em cima 
do primeiro, clique dentro da 
seleção, para obter uma 
seleção real. Veja a imagem 
ao lado sem os pontos da 
seleção da tesoura:
seleção real
Pronto, agora sua 
imagem está 
selecionada e pronta 
para ser movida ou 
recortada. Ao lado o 
busto da imagem foi 
simplesmente movido
imagem final
Nesta imagem a tela de exibição do 
Gimp é maior que a imagem. Note 
isso através do fundo quadriculado
Após executar o comando de ajuste de tela 
você terá uma tela semelhante à esta:1 2 3
 * WEBDESIGNER – CONSTRUÇÃO DE SITES*
Desfocagem
Por diversas vezes trabalhando com imagens, temos a necessidade de usar desfocagens. O Gimp 
tem vários tipos de desfocagens. Entre outras, temos as desfocagens gaussiana, pixelizar e desfocagem 
de movimento.
Então, vamos aprender como utilizá-las:
Considere as imagens abaixo:
Note que a imagem original está um pouco mais nítida que a desfocada. Então, para desfocar 
uma imagem siga o caminho sugerido na figura abaixo:
 
Veja exemplos de desfocagem com borrão de movimento:
●Desenvolvido por Valdivan Ivan 21
imagem original imagem desgocada
Escolha aqui o tipo de 
desfocagem
Janela de Pré-visualização
 * WEBDESIGNER – CONSTRUÇÃO DE SITES*
Veja alguns exemplos de desfocagem gaussiana:
Agora veja a desfocagem Pixelizar:
 As demais opções de desfocagem (Desfocagem, desfocagem gaussiana seletiva e desfocagem 
encaixável), também são desfocagens gaussianas.
●Desenvolvido por Valdivan Ivan 22
Para ativar a Janela de Pré-visualização ative este botão
Janela de Pré-visualização
desfocagem Gaussiana aplicada 
no fundo da imagem
Desfocagem Gaussiana 
aplicada em uma área da 
imagem
Nesta caixa configure o tamanho dos pixels da sua imagem 
e clique no botão OK
Resultado da desfocagem Pixelizar
 * WEBDESIGNER – CONSTRUÇÃO DE SITES*
Filtros de cores
Para tratamento de imagens, o Gimp tem uma série de filtros aplicáveis, que poderão dar bons 
resultados em suas imagens. 
Estudaremos alguns filtros do Gimp, filtros estes que por vezes vemos algo semelhante em 
algumas imagens publicadas por aí.
***Colorir
Este filtro serve para simular uma lente de cor uniforme sobre a imagem. Veja o exemplo abaixo:
***Mapear com Degradê
Este filtro consiste em “pintar” a imagem com as cores do degradê ativo, tomando como base os 
tons médios da imagem. Isso significa dizer que a maior intensidade de cores do degradê, será aplicado 
em tons médios existentes na imagem.
***Rotação do Mapa de Cores
Com este filtro podemos mudar através de gráfico de rotação as cores de uma imagem. 
Dependendo da configuração que você fizer, poderá trocar várias ou apenas uma cor em sua imagem. Na 
configuração do exemplo abaixo, faremos a cor vermelha de exposição se tornar azul. É possível, ter 
qualquer combinação.
●Desenvolvido por Valdivan Ivan 23
Caminho para a 
aplicação deste filtro
Nesta caixa, escolha a 
cor do seu filtro e 
clique no botão OK
Esta é a imagem com 
filtro de cor aplicado
Esta é a imagem original
Esta é a imagem original Esta é a imagem com 
filtro de cor aplicado
Caminho para a 
aplicação deste filtro
Na Janela Principal do Gimp, 
escolha seu degradê
Clique aqui para abrir a janela 
degradês. É nesta janela que você 
escolherá o degradê ativo
Esta é a imagem original
Esta é a imagem com 
filtro de cor aplicado
Caminho para a 
aplicação deste filtro
Disposição inicial do 
mapa de cores. Esta é 
a chave deste filtro
Note que com esta configuração, a 
cor vermelha foi facilmente 
alterada para a cor azul, 
preservando as demais cores da 
imagem
 * WEBDESIGNER – CONSTRUÇÃO DE SITES*
***Colorizar a partir de amostra
Este filtro altera toda a disposição de cores em uma imagem. Veja um exemplo da aplicação 
deste filtro, bem como o comentário dos principais elementos deste filtro:
Os níveis de “Entrada e Saída”, referem-se única e exclusivamente, ao objeto a ser colorizado.
***Mapeamento Alien2
Este filtro nos possibilita colocar muitas cores nas imagens.
●Desenvolvido por Valdivan Ivan 24
Mostrar seleção e cor
clique neste botão para obter cores da amostra, 
ou seja, da imagem original. Caso este botão não 
seja ativado, o filtro não terá efeito algum
Caso você não goste do 
resultado, clique em “restaurar” Botão “Aplicar”, para iniciar a 
execução do filtro
Aqui você escolhe a amostra que servirá como base para 
o filtro. A amostra pode ser a imagem atual ou um 
degradê
Estes pontilhados 
(pontos de 
composição) são 
tratados aqui como 
subcores
Esta é a imagem original Esta é a imagem com filtro de cor aplicado
Esta é a imagem com filtro de 
cor aplicado
Esta é a imagem original
Como este filtro adiciona 
muitas cores na imagem, neste 
exemplo foi utilizada a 
ferramenta de seleção 
“Tesoura Inteligente”, para 
selecionar somente uma área 
da imagem.
Caminho para executar 
este filtro
Configurações
Canais de cores
 * WEBDESIGNER – CONSTRUÇÃO DE SITES*
Efeitos de vidro
Mais um importante recurso do Gimp para aplicação de efeitos em imagens, os efeitos de vidro, 
nos possibilitam aplicar dois conhecidos efeitos em imagens, que são: “Lente e Pastilhas”.
***Aplicar lente:
Como a titulação do comando sugere, este efeito simula uma lente de aumento em determinada 
área da imagem. Veja como proceder:
***Pastilhas de Vidro:
Este filtro dá a impressão de que estamos vendo a imagem através de um objeto de vidro. 
Configurando bem o tamanho das pastilhas, você terá um importante recurso do Gimp. Veja um exemplo:
●Desenvolvido por Valdivan Ivan 25
De posse de uma figura 
qualquer selecione uma 
área específica para a 
aplicação da Lente
1 2 No Menu “Filtros”, execute 
este caminho mostrado na 
figura abaixo:
Nesta janela, selecione o 
índice de refração da lente. 
escolha também como quer a 
exibição da “Vizinhança” e 
clique no botão OK
Esta é a 
imagem 
modificada.
Note a diferença 
no tamanho do 
anel
Esta é a imagem 
original
3
Dica:
Este efeito também 
pode ser aplicado 
em texto.
A lente foi aplicada na 
letra “P”
Esta é a imagem original
Este é o caminho para a 
aplicação deste filtro: Após executar a 
seqüência anterior, você 
terá esta tela de 
configuração. Configure 
o tamanho das pastilhas 
e clique no botão OK
Pastilhas aplicadas 
somente nas flores 
centrais da imagem Pastilhas 
aplicadas em 
toda a imagem
 * WEBDESIGNER – CONSTRUÇÃO DE SITES*
Efeitos de Luz
Continuando com o estudoc de filtros do Gimp, faremos agora, a aplicação de efeitos de luz. Os 
efeitos de iluminação do Gimp são bastante eficientes. Chama FX, Cintilância, Efeitos de Iluminação, 
Gflare e SuperNova. Estaremos vendo o comportamento de cada um, porém, visualize o caminho 
necessário para executar estes filtros:
●Desenvolvido por Valdivan Ivan 26
Filtros de efeitos de luz
Cintilância: Quanto maior a 
“opacidade” menor será o 
brilho. Na maioria das vezes 
desmarque as guias “Matriz” e 
“Saturação”
Efeitos de Iluminação: O segredo 
deste filtro está nasguias “Luz” e 
“Material”. Em “Luz” atente 
para “TIPO” e “COR”. Já em 
“Material” desmarque a opção 
“METÁLICO”
ChamaFX: Filtro sem opções de 
configuração. Apenas temos que ajustar 
o “CENTRO” da chama
SuperNova: Este filtro nos permite configurar 
“RAIO” e “QUANTIDADE DE PONTAS”. Neste 
filtro a “Matriz Randômica” faz diferença na 
exibição do filtro. Outro detalhe importante é a 
seleção da cor de base do brilho
GFlare: Selecionando a guia 
“CONFIGURAÇÕES”, podemos 
definir a posição do efeito através da 
opção “centro”. Na opção 
“parâmetros”, podemos definir o 
tamanho que é o raio, rotação, ângulo e 
comprimento do vetor. Em 
“SELETOR”, escolheremos o tipo do 
filtro GFlare. São sete opções de filtros 
para a escolha
Hidden Planet GFlare101
Distant Sun
Bright Star
Classic
Default
GFlare102
 * WEBDESIGNER – CONSTRUÇÃO DE SITES*
Distorções
Em distorções, temos alguns efeitos bastante conhecidos como por exemplo: Dobra de página, 
Dobrar em curva, Empurrar, Onda, Mosaico e outros. Na figura abaixo podemos ver o caminho para a 
execução dos filtros de distorções que o Gimp agrega:
***Empurrar ***Coordenadas Polares
 **********************************************
***Dobra da Página
 
 **************************************************
●Desenvolvido por Valdivan Ivan 27
Tela do Gimp mostrando o caminho para as opções de distorções
Na Janela Empurrar, 
escolha como será o 
“empurrão”, se 
horizontal ou vertical. 
Selecione a intensidade 
na guia “Quanto 
empurrar” e clique no 
botão OK
Na Janela “Coord. 
Polares”selecione 
profundidade e ângulo. Se 
você marcar a opção “Para 
Polar” a imagem será 
mapeada a partir de um 
círculo. Se não marcar será 
mapeada circularmente em 
moldura de retângulo. 
Quanto maior for a 
profundidade, mais circular 
será a sua imagem. Se você 
marcar a opção “Mapear a 
partir do topo” a parte 
superior da imagem ficará 
como base ao centro
Imagem 
original
Escolha a localização e a 
orientação da dobra. Para 
obter um melhor 
resultado, marque a opção 
“Sombra sob a dobra”. 
Podemos preencher a 
dobra com degradê ou 
cores de frente/fundo. Já 
em “Opacidade”, 
 podemos colocar a 
 dobra com um certo 
 grau de 
 transparência
Neste filtro podemos 
escolher qual será a 
forma das pastilhas 
do mosaico. 
Configuramos 
tamanho, altura e 
espaçamento, na 
guia configurações
***Mosaico
Na imagem 1, as opções “Pastilhas com relevo” e 
“Luz com cores de frente/fundo”estão desativados. 
Já na imagem 2, estas opções foram ativadas
21
 * WEBDESIGNER – CONSTRUÇÃO DE SITES*
***Dobrar em Curva ***Esculpir
 
**************************************** ************************************************* *
***Ondas ***Vento
***DICA DO PHOTOSHOP
●Desenvolvido por Valdivan Ivan 28
Este filtro pode ser aplicado em uma imagem ou em um 
texto, dando um efeito muito bom. Você pode escolher 
entre os tipos “Livre” e “Uniforme”, que é o mais 
recomendado. Em “Curva para a borda”, pode-se optar 
por curvatura “Superior” ou “Inferior”, porém, exemplo 
acima, optamos por ambas, tendo assim, o efeito de uma 
bandeira tremulando. Então, após arrastar suas linhas 
como desejar, clique no botão OK
Escolha entre as FUNÇÕES: 
“Mapa de relevo” e “Esculpir”. 
Configure as opções 
“Azimute”(direção definida em 
graus), “Elevação” e 
“Profundidade” e clique em OK
Mapa de
 relevo
esculpir
Imagem 
original
Neste filtro escolha entre 
“Manchar” e “Escurecer”, 
o que não dará muita 
 diferença no 
 resultado 
 final. A 
 diferença 
 se dará 
 na opção 
 “Refletivas”. 
 Configure 
 “Amplitute”, 
 “Fase” e 
 “Comprimento 
 da onda” e 
 clique em OK
Na janela de configuração 
deste filtro, escolha entre os 
estilos “Vento” e “Ventania”. 
Escolha também a direção. 
Escolha a “Extremidade 
afetada”, para então descobrir 
o segredo deste filtro que está 
 na boa 
 configuração 
 dos “limites” 
 e da “força” 
 exercida pelo 
 filtro
Adiciona uma textura 
em sua imagem
Cria um agrupamento de padrões de cores
Aplicação de distorções em imagens
Desfocagens diversas 
como por exemplo: 
gaussian, motion, more, 
radius, etc.
Clique aqui para aplicar filtros artísticos 
como por exemplo: aquarela, lápis, pastel 
rugoso, etc.
Adiciona filtros de ruídos em imagens
Aguçar, ou seja, ajustar o 
foco da imagem
 * WEBDESIGNER – CONSTRUÇÃO DE SITES*
Script-Fu
Este menu do Gimp agrupa importantes recursos. Segue-se abaixo alguns efeitos aplicáveis em 
imagens através deste menu. Em tempo, esclarecemos que na “Janela Principal” do Gimp no menu 
“Extras” há uma opção “Script-Fu”, que não é exatamente igual ao contexto descrito neste capítulo. 
Neste capítulo nos referimos ao menu “Script-Fu” existente na “Janela de Desenvolvimento” do Gimp.
Veja ambas as telas:
Veja alguns exemplos de Script-Fu: (Trançar, Foto Atiga, Explosão de Linhas e Mancha de café)
●Desenvolvido por Valdivan Ivan 29
Opção Scrip-Fu da Janela 
Principal
Menu Scrip-Fu da Janela de 
Desenvolvimento
Telas da opção “Trançar” Telas da opção “Foto Antiga”
Telas da opção 
“Explosão de 
Linhas”
Telas da opção 
“Mancha de Café”
 * WEBDESIGNER
 
 
Créditos 
 
© Copyright – Direitos reservados para Valdivan Ivan
Direitos reservados conforme Lei 9.610 de 19 de Fevereiro de 1998.
 
Nenhuma parte deste material (obra) poderá ser reproduzida, utilizada, copiada, modificada ou editada
quaisquer alegações, meios ou motivos, sem autorização prévia e escrita do autor.
quaisquer partes deste material (obra). 
 
 *Todos os softwares aplicativos comentados/utilizados neste material, são marcas registradas e pertencem aos seus 
respectivos proprietários e/ou desenvolvedores. 
 
 
 
 
 
 
Suporte Técnico ao Leitor 
 
 O Suporte Técnico ao Leitor limita
aplicativos comentados/utilizados neste material. Para tanto, o usuário deverá informar o nome do material utilizado
número da página, título do capítulo e especific
Mande suas questões para o e-mail: valdivan_ivan@hotmail.com. 
 
 
 
 
 
 
 Pesquisa e Revisão Técnica 
 Valdivan Ivan 
 
 Redação e Projeto Gráfico 
 Valdivan Ivan 
 
 Tratamento de Imagens e Editoração
 Valdivan Ivan 
 
 Capas 
 Valdivan Ivan 
 
 
 
 
 
 
Dedicatórias 
 
 Para minha filha Natália, que considero a flor mais linda que pude ter em minhas 
Deus em uma criança. 
 
 Sobre todas as coisas dedico e agradeço a Deus, por me dar inspiração quando tudo me faltava e por prover o impossível, 
tornando tudo possível. 
 
 
* WEBDESIGNER – CONSTRUÇÃO DE SITES* 
●Desenvolvido por Valdivan Ivan
Valdivan Ivan (Valdivan França Ramos) 
Lei 9.610 de 19 de Fevereiro de 1998. 
material (obra) poderá ser reproduzida, utilizada, copiada, modificada ou editada
, sem autorização prévia e escrita do autor. É expressamente vedada a prática de plágio de 
*Todos os softwares aplicativos comentados/utilizados neste material, são marcas registradas e pertencem aos seus 
respectivos proprietários e/ou desenvolvedores. 
O Suporte Técnico ao Leitor limita-se ao conteúdo específico deste material, e não à questões gerais referentes aos 
aplicativos comentados/utilizados neste material. Para tanto, o usuário deverá informar o nome do material utilizado
número da página, título do capítulo e especificar o assunto em questão. O suporte técnico ao leitor é uma cortesia do editor.
valdivan_ivan@hotmail.com. O suporte se darásomente através deste endereço de e
 
 
Tratamento de Imagens e Editoração 
Para minha filha Natália, que considero a flor mais linda que pude ter em minhas mãos. Ela é sem dúvida tudo que pedi a 
Sobre todas as coisas dedico e agradeço a Deus, por me dar inspiração quando tudo me faltava e por prover o impossível, 
Porque quantas são as promessas de Deus, todas tê
Desenvolvido por Valdivan Ivan 30 
material (obra) poderá ser reproduzida, utilizada, copiada, modificada ou editada para quaisquer fins, sob 
É expressamente vedada a prática de plágio de 
*Todos os softwares aplicativos comentados/utilizados neste material, são marcas registradas e pertencem aos seus 
ao conteúdo específico deste material, e não à questões gerais referentes aos 
aplicativos comentados/utilizados neste material. Para tanto, o usuário deverá informar o nome do material utilizado (apostila), 
O suporte técnico ao leitor é uma cortesia do editor. 
O suporte se dará somente através deste endereço de e-mail. 
mãos. Ela é sem dúvida tudo que pedi a 
Sobre todas as coisas dedico e agradeço a Deus, por me dar inspiração quando tudo me faltava e por prover o impossível, 
Porque quantas são as promessas de Deus, todas têm Nele o sim 
2Co 1.20