Projeto Software Livre - Bahia

Slides da Apresentação "Arte Digital Livre"

Start Presentation

Slide 1: Arte Digital Livre

Usando Software Livre para produzir Arte Gráfica Digital

Aurélio A. Heckert
aurium@gmail.com

PSL-BA - Colivre
Última modificação: 26 Apr 2008 (rev 16)

Slide 2: Classes de Imagens

BitMap
Borboleta sem lupa
Vetorial

Slide 3: BitMap

Borboleta sem lupa     Borboleta bitmap

Slide 4: Vetorial

Borboleta sem lupa     Borboleta Vetorial

Slide 5: Tipos de Arquivo

  • Bitmaps: JPG PNG GIF
  • Vetoriais: PS EPS SVG

Slide 6: Caracteristicas do tipo PNG

Compressão em imagens indexadas ou RGB 24 bits,
Correção de Gama, Entrelaçamento, Integridade, e...
Canal Alfa:
Alfa 100%
100% 		Alfa 85%
85% 		Alfa 70%
70% 		Alfa 55%
55% 		Alfa 40%
40% 		Alfa 25%
25% 		Alfa 13%
13%

Slide 7: PNG x GIF

Borboleta Ceu Azul (PNG)     Borboleta Ceu Azul (GIF)       PNG x GIF

arrowup PNG compacta mais que GIF E permite variar o grau de compactação
arrowup PNG suporta imagens com mais que 256 cores (não exige indexação)
arrowup PNG suporta Canal Alfa
arrowdown MNG não é popular e não está implementado nos principais navegadores. (http://www.libpng.org/pub/mng/)

Slide 8: PNG x JPG

Borboleta Ceu Azul (PNG)     Borboleta Ceu Azul (JPG)

arrowup PNG não causa perda de qualidade
arrowup PNG suporta Canal Alfa
arrowdown JPG é melhor para imagens com muita variação de cor (como esta)

Slide 9: The GIMP

GNU Image Manipulation Program
Wilber       Wilber Painter       Wilber Work       Wilber Wizard

Variações:

  • GIMPshop é uma modificação do GIMP por Scott Moschella para clonar a interface do PhotoShop. Já existe também o port para Linux.
  • CinePaint é um editor de frames para retocar filmes baseado no GIMP. Foi usado em filmes como "O Último Samurai", "Harry Potter", "Stuart Little II", entre outros.

Slide 10: Perigo! Use seu Sabre de Luz.

Sabre_de_Luz__com.jpg
( Imagem Original )

Slide 11: Ligando o Sabre de Luz...

Sabre_de_Luz__sem.jpg           Sabre_de_Luz__com.jpg
  1. Crie um vetor na área da espada
  2. Crie uma seleção a partir do vetor
  3. Enevoe num raio de 35 pixels e crie uma camada
  4. Pinte a camada de verde e duplique-a para reforçar
  5. Crie outra seleção a partir do vetor
  6. Enevoe num raio de 4 pixels e crie uma camada
  7. Pinte a camada de branco
  8. Escureça o ambiente

Slide 12: O Gato e a Caneca

Gato_e_Caneca.jpg

Slide 13: Montando a Cena...

Gato_Deitado.jpg       Caneca_Debian.jpg       Gato_e_Caneca.jpg
  1. Selecione a caneca de Caneca_Debian.jpg
  2. Enevoe num raio de 4 pixels, recorte e cole em Gato_Deitado.jpg
  3. Ajuste a Matiz e a Saturação na cor vermelha da caneca: Matiz -145, Luminosidade = 10 e Saturação = -60
  4. Faça a desfocagem gaussiana com raio 3 na caneca
  5. Duplique e faça o espelhamento vertical e reduza a opacidade para 30% para termos um reflexo
  6. Crie uma seleção da caneca executando alfa para seleção e enevoe com raio 40
  7. Crie uma camada a partir da seleção e pinte-a de preto (temos uma sombra)
  8. Adicione uma máscara na camada de sombra e pinte-a com um degradê de branco para preto
  9. Achate a camada e reduza a opacidade para 60%

Slide 14: Desenho com lápis 6B

Desenho_Gato.jpg

Slide 15: Desenhando...

Gato_Sentado.jpg           Desenho_Gato.jpg
  1. Converta a imagem Gato_Sentado.jpg para tons de cinza
  2. Duplique a camada e Inverta as cores
  3. Na camada invertida faça a desfocagem gaussiana de raio 4
  4. Ajuste a opacidade para 50%
  5. Combine as camadas
  6. Ajuste o brilho para 15 e o contraste para 115
  7. Ajuste novamente o brilho para -45 e o contraste para 110

Slide 16: Comercial

Desenho_Gato.jpg

Slide 17: Produzindo o comercial...

Gato_Sentado.jpg           Gato_Comercial.jpg
  1. Selecione o gato em Gato_Sentado.jpg com a tesoura mágica
  2. Enevoe a seleção em um raio de 4 pixels e crie uma camada a partir da seleção
  3. Retire toda a saturação do fundo
  4. Adicione saturação ao gato
  5. Escreva a parte clara do texto e diminua a opacidade para 70%
  6. Escreva a parte vermelha
  7. Adicione uma sombra projetada com a cor branca e opacidade 50% no texto vermelho
  8. Desenhe a parte de baixo do logo com vetor e clique shift + v para tranformar em seleção
  9. complete o logo com a seleção retangular
  10. crie uma camada a partir da seleção e pinte-a de vermelho

Slide 18: Bellis Perennis à Brasileira

Bellis_Perennis_a_Brasileira.jpg
(Fotografia original por André Karwath sob a GNU-FDL)

Slide 19: Pintando a Flor...

Bellis_Perennis_branca.jpg       Bellis_Perennis_a_Brasileira.jpg
(Fotografia original por André Karwath sob a GNU-FDL)
  1. Contorne cada uma das pétalas com a ferramenta de vetor
  2. Crie a seleção a partir do vetor e crie uma camada para cada petala
  3. Colorize a primeira pétala: Matiz 120, Saturação = 45 e luminosidade = -5
  4. Colorize a segunda pétala: Matiz 50, Saturação = 85 e luminosidade = -2

Slide 20: Animando com GIMP

Bolinha

Slide 21: Vetores Legiveis

Exemplo SVG
Baixar SVG

Slide 22: Inkscape

Editor Vetorial para o padrão aberto SVG

Inkscape

Slide 23: Desenhando...

Logo do FISL no tema cristal   Logo do Banco de Sementes Livres   Logo da Gnosis

Slide 24: Vetorizando...

Original:
Memorial to Juri Dolgoruky 		Vetorizado:
Memorial to Juri Dolgoruky - Vetorizado 		Malvados
Andre Dahmer Pereira
Malvados - a verdade doi

Slide 25: ImageMagick para Web e Butiquim

MUSIComp_Menu_puro.jpg         MUSIComp_Menu_anotado.jpg

Slide 26: Menu dinâmico com ImageMagick

Arquivo anota_menu: 

#!/bin/sh

convert  -gravity NorthEast -font helvetica -pointsize 20 \
         -fill '#504090' -draw "rotate 3 text 100,160 '$1'" \
          MUSIComp_Menu_puro.jpg  MUSIComp_Menu_anotado.jpg

Exemplo de uso: 

 ./anota_menu "Cerveja    1,00\nPastel  0,80\nSanduba    1,30"

Tutorial de uso do ImageMagick:
http://www.cit.gu.edu.au/~anthony/graphics/imagick6/

Slide 27: Lugar legal

%CELULAINI_COL2%
ArteLivre
Arte.SoftwareLivre.org
Wilber Painter
www.Gimp.org
GUG.sunsite.dk
OGimp.CodigoLivre.org.br

OpenClipArt.org
www.OpenClipart.org

Inkscape
www.Inkscape.org

WikiMedia Commons
Commons.WikiMedia.org

Slide 28: Acabou

FIM

aurium@gmail.com

 

 

A borboleta que aparece em vários dos slides dessa apresentação
é parte do logo da Associação Software Livre.Org

► Attachments

▼ Attachments
Topic attachments
I Attachment Action Size Date Who Comment
pngpng Alfa0pct.png manage 9.6 K 08 Apr 2005 - 03:41 AurelioAHeckert  
pngpng Alfa100pct.png manage 9.1 K 08 Apr 2005 - 03:37 AurelioAHeckert  
pngpng Alfa13pct.png manage 15.3 K 08 Apr 2005 - 03:41 AurelioAHeckert  
pngpng Alfa25pct.png manage 15.3 K 08 Apr 2005 - 03:40 AurelioAHeckert  
pngpng Alfa40pct.png manage 15.4 K 08 Apr 2005 - 03:40 AurelioAHeckert  
pngpng Alfa55pct.png manage 15.2 K 08 Apr 2005 - 03:40 AurelioAHeckert  
pngpng Alfa70pct.png manage 15.6 K 08 Apr 2005 - 03:40 AurelioAHeckert  
pngpng Alfa85pct.png manage 14.8 K 08 Apr 2005 - 03:38 AurelioAHeckert  
pngpng ArteLivre.png manage 12.8 K 22 May 2005 - 01:25 AurelioAHeckert  
jpgjpg Bellis_Perennis_a_Brasileira.jpg manage 49.1 K 21 May 2005 - 20:34 AurelioAHeckert  
jpgjpg Bellis_Perennis_branca.jpg manage 58.5 K 21 May 2005 - 20:34 AurelioAHeckert  
gifgif Bolinha.gif manage 119.2 K 22 May 2005 - 00:15 AurelioAHeckert  
elsexcf Borboleta.xcf manage 213.9 K 08 Apr 2005 - 02:09 AurelioAHeckert  
pngpng Borboleta_bitmap.png manage 63.5 K 08 Apr 2005 - 02:10 AurelioAHeckert  
gifgif Borboleta_ceu_azul.gif manage 9.4 K 08 Apr 2005 - 04:34 AurelioAHeckert  
jpgjpg Borboleta_ceu_azul.jpg manage 12.8 K 08 Apr 2005 - 04:33 AurelioAHeckert  
pngpng Borboleta_ceu_azul.png manage 69.6 K 08 Apr 2005 - 04:33 AurelioAHeckert  
pngpng Borboleta_sem_lupa.png manage 24.8 K 08 Apr 2005 - 02:09 AurelioAHeckert  
pngpng Borboleta_vetorial.png manage 67.7 K 08 Apr 2005 - 02:10 AurelioAHeckert  
jpgjpg Caneca_Debian.jpg manage 31.0 K 21 May 2005 - 18:34 AurelioAHeckert  
pngpng Commons.png manage 7.6 K 08 Apr 2005 - 01:59 AurelioAHeckert  
jpgjpg Desenho_Gato.jpg manage 94.4 K 21 May 2005 - 19:08 AurelioAHeckert  
jpgjpg Gato_Comercial.jpg manage 40.7 K 21 May 2005 - 19:47 AurelioAHeckert  
jpgjpg Gato_Deitado.jpg manage 32.4 K 21 May 2005 - 18:33 AurelioAHeckert  
jpgjpg Gato_Sentado.jpg manage 39.5 K 21 May 2005 - 19:08 AurelioAHeckert  
jpgjpg Gato_e_Caneca.jpg manage 32.1 K 21 May 2005 - 18:34 AurelioAHeckert  
pngpng LogoGnosis.png manage 15.2 K 02 Jun 2005 - 20:17 AurelioAHeckert  
jpgjpg Logo_SementesLivres.jpg manage 22.4 K 02 Jun 2005 - 20:17 AurelioAHeckert  
jpgjpg MUSIComp_Menu_anotado.jpg manage 18.2 K 22 May 2005 - 18:47 AurelioAHeckert  
jpgjpg MUSIComp_Menu_puro.jpg manage 14.1 K 22 May 2005 - 18:46 AurelioAHeckert  
jpgjpg MemorialToJuriDolgoruky.jpg manage 48.8 K 03 Jun 2005 - 13:32 AurelioAHeckert  
jpgjpg MemorialToJuriDolgorukyVet.jpg manage 19.8 K 03 Jun 2005 - 13:46 AurelioAHeckert  
jpgjpg Sabre_de_Luz__com.jpg manage 100.8 K 21 May 2005 - 16:08 AurelioAHeckert  
jpgjpg Sabre_de_Luz__sem.jpg manage 110.8 K 21 May 2005 - 15:50 AurelioAHeckert  
jpgjpg fisl_cristal.jpg manage 15.7 K 02 Jun 2005 - 20:16 AurelioAHeckert  
svgsvg fisl_cristal.svg manage 8.2 K 02 Jun 2005 - 20:16 AurelioAHeckert  
pngpng inkscape.logo.png manage 2.4 K 08 Apr 2005 - 01:57 AurelioAHeckert  
pngpng inkscape.png manage 43.0 K 21 May 2005 - 22:24 AurelioAHeckert  
pngpng openClipArt.png manage 10.8 K 08 Apr 2005 - 01:59 AurelioAHeckert  
pngpng png_x_gif.png manage 1.7 K 21 May 2005 - 21:43 AurelioAHeckert  
gifgif quadrinho5.gif manage 5.8 K 03 Jun 2005 - 13:32 AurelioAHeckert  
pngpng wilber_painter.png manage 6.0 K 21 May 2005 - 22:05 AurelioAHeckert  
pngpng wilber_the_gimp2.png manage 5.6 K 21 May 2005 - 22:07 AurelioAHeckert  
pngpng wilber_wizard.png manage 6.7 K 21 May 2005 - 22:08 AurelioAHeckert  
pngpng wilber_work.png manage 6.5 K 21 May 2005 - 22:08 AurelioAHeckert  
revisão: r16 - 26 Apr 2008 - 01:20:21 - AurelioAHeckert
Licença Creative Commons - Atribuição, Não Comercial e Permanência da Licença Copyright © 2003 - 2010, pelos colaboradores do Projeto Software Livre - Bahia. Todo o conteúdo desta página pode ser utilizado segundo os termos da Creative Commons License: Atribuição, Uso não Comercial e Permanência da Licença, salvo disposição em contrário indicada de forma explícita no tópico correspondente. 

eXTReMe Tracker
TableLess - Coerência, Simplicidade e Acessibilidade no código HTML TWiki - Ambiente Web Colaborativo Esse documento é XHTML 1.0 Valido! Esse documento contém CSS-2 Valido! Debian - GNU/Linux Visível no browser que você preferir