ADEUS    GORDURINHAS!  WORKSHOP BÁSICO DE EMAGRECIMENTO DIGITALpara DESIGNERS INSTRUCIONAIS, DESENVOLVEDORES e DESIGNERS c...
Como funcionam as imagens  criadas em FlashFatores que aumentam o peso   dos arquivos, e o que fazer   para reduzi-losPrát...
oTamanhodo   ProblemaComo funcionam as imagens           criadas em Flash
COMO FUNCIONA O FLASHAs ilustrações criadas em FLASH são imagens vetoriais.Outros programas vetoriais: CorelDraw, Illustra...
IMAGENS VETORIAISPor exemplo, para criar um círculo, Flash define um EIXO  CENTRAL e um RAIO.O cálculo é o mesmo se o RAIO...
IMAGENS VETORIAIS                          Quanto maior a                       quantidade de pontos                      ...
IMAGENS VETORIAISO peso independe do tamanho na tela.PEQUENO.SWF – 8Kb          GRANDE.SWF – 8Kb
IMAGENS VETORIAISDesenho mais ‘duro’,com bordas bem definidas.Menos recursos desombreado e difusão.Não perdem qualidade ao...
IMAGENS BITMAPImagens bitmap são construidas  com matrizes de pixels.Melhor para sombras e  transições de cor.Programas de...
IMAGENS BITMAPCada pixel (célula da imagem) acrescenta informação à  imagem.Quanto maior a quantidade de píxels, maior a r...
IMAGENS BITMAPQuanto maiores as dimensõesem pixels de uma imagem bitmap,MAIOR O SEU PESO.        IPOD_PEQ.PNG – 30Kb      ...
REDIMENSIONANDO BITMAPSAo redimensionar ou fazer zoomna imagem, ela perde qualidade.Redimensionar bitmapsno Photoshop eimp...
VETOR vs. BITMAPVetores costumam ser mais leves e maleáveis que bitmaps.Usamos imagens vetoriais, sempre que possível.    ...
SÍMBOLOSOs símbolos são grupos de objetos que podem ser reutilizados  sem precisar ser carregados novamente.Tudo que for u...
SÍMBOLOSSímbolos podem ser aplicados com diferentes efeitos de cor.
SÍMBOLOSSímbolos podem ser compartilhados entre arquivos SWF.
Botando na   BalançaFatores que aumentam o peso    dos arquivos, e o que fazer               para reduzi-los.
MEDINDO O PESOUtilize Size ReportPara ativar Size Report,marque ‘Create Size Report’nas Publish Settingse publique o SWFco...
MEDINDO O PESOO Size Report é um arquivo de texto que Flash cria junto ao  SWF, com informações sobre a animação, incluind...
MEDINDO O PESOOutra ferramenta útil para avaliar visualmente o peso de cada  frame é o Bandwidth Profiler.
POR QUE EU ESTOU GORDA #1                            Excesso de                       elementos na tela.
A DIETA PRA MIM #1Reduzir elementos e ilustrações ao mínimo necessário.Separar conteúdo em várias telas.Reutilizar element...
POR QUE EU ESTOU GORDA #2Imagens com pontos em excesso.                       MAPA1.SWF – 59Kb
A DIETA PRA MIM #2                     Otimizar vetores utilizando                         MODIFY > SHAPE >               ...
A DIETA PRA MIM #2Se selecionamos 0% e marcamos a opção ‘Use multiple  passes’, o número de pontos é reduzido sem deformar...
POR QUE EU ESTOU GORDA #3Bordas complexas aumentam o peso.                                    BORDA1.SWF – 2Kb
A DIETA PRA MIM #3Substituir por linhas sólidas.                                 BORDA1.SWF – 170b
POR QUE EU ESTOU GORDA #4Gradientes e transparências tornam o arquivo mais pesado.      COM_GRADIENTE.SWF – 12kb
A DIETA PRA MIM #4Reduzir quantidade de preenchimentos com gradiente e  transparência.          SEM_GRADIENTE.SWF – 5kb
POR QUE EU ESTOU GORDA #5Traços modulados pesam mais,pois têm mais de uma borda.PERSONA.SWF – 4Kb
A DIETA PRA MIM #5Reduzir utilização de pincel e tablet.Utilizar traços criados com   caneta ou linha.PERSONA.SWF – 2kb
POR QUE EU ESTOU GORDA #6Partes da ilustraçãonão são utilizadas.
A DIETA PRA MIM #6Cortar partesnão visíveis.
NÃO SE SIRVASE NÃO  FORCOMER! Práticas para  otimização de imagens bitmap
QUANDO UTILIZAR BITMAPSQuando o equivalente vetorialfor mais pesado.Em fotos.Em capturas de tela.
DIMENSÕES DO BITMAPExportar bitmaps no tamanho máximo utilizado no Flash.Utilizar o comandoIMAGE > TRIM...do Photoshop.
IMPORTAÇÃO DE BITMAPSNas propriedades do bitmap,marcar a opçãoALLOW SMOOTHINGpara ter ganho de qualidade.
FORMATOS BITMAP: JPGO formato JPG é usado preferentemente para   fotos e imagens com muitas cores.Pode-se controlar seu ní...
FORMATOS BITMAP: GIFO formato GIF é usado preferentemente para   logomarcas e imagens com poucas cores.Pode-se controlar s...
FORMATOS BITMAP: PNGO formato PNG é usado indistintamente para todo tipo de   imagem.Permite a criação de imagens transpar...
TENTAÇÕESOCASIONAIS Oimizando 3D,  audio e video.
3D ESTÁTICOImagens 3D são produzidas usando 3DStudio ou Swift3D.Os programas renderizam a imagem em vetor, bitmap ou  vídeo.
3D ANIMADOImagens animadas são uma seqüência de imagens estáticas  em vetor ou bitmap.O peso total da animação é a soma da...
AUDIOPeso depende de vários fatores:Freqüência:   - para música, usar 44.000 KHz   - para locução, usar 22.000 KHzBit:   -...
IMPORTANDO AUDIOEditar arquivo para eliminar regiões não utilizadasImportar com a melhor qualidade possível e comprimir no...
VIDEOArquivos MUITO pesados.Utilizar o mínimo necessário.
OPÇÕES DE IMPORTAÇÃO DE VIDEOExistem duas formas de inserir vídeo em um SWF:                                              ...
IMPORTANDO VIDEOImportar com tamanho final em pixels, no máximo de  qualidade.Transformar em FLVno Video Encoder.Cortar se...
CAPTIVATEColocar todas as imagensqualidade Standard.
CAPTIVATEAções: tirar todosos links de Quiz.
CAPTIVATENa hora de fechar o projeto,desmarcar utilizaçãode ‘mouse’ e ‘audio’.
PROCESSAMENTO   Quando o problema       não é o peso      mas a lentidão
ENTENDENDO O PROCESSAMENTOIndepende do peso do arquivo.Problemas de processamento são gerados por alguma tarefa  que exige...
MEDINDO O PROCESSAMENTOUtilizar o Gerenciador de Tarefas do Windows, painel   Processos:CTRL + SHIFT + ESCVerificar o valo...
FPS (Frames Por Segundo)Valor constante que define a quantidade de quadros exibidos  por segundo.Se define no início no pr...
FATORES QUE AUMENTAM OPROCESSAMENTO #1Animações em tela inteira.Evitar uso de Zoom, Fade In e movimentos de câmera.
FATORES QUE AUMENTAM OPROCESSAMENTO #2Animação de efeitos de Flash 8Reduzir animação  de Glow, Blur,  Shadow, etc.Ou subst...
FATORES QUE AUMENTAM OPROCESSAMENTO #3Máscara cobrindo todos   Substituir por index vazadoos conteúdos do index.   em laye...
FATORES QUE AUMENTAM OPROCESSAMENTO #4Muitas animações simultâneas.Shape tween e animações  quadro-a-quadro.Bitmaps animad...
QUASE LÁ,GAROTA! Dicas finais para ter  sempre em mente
DICAS FINAIS #1Planejar projeto como um todo e definir limites claros de peso   e processamento.
DICAS FINAIS #2Reunir Design Instrucional, Desenvolvimento e Ilustraçãoantes de enviar roteiro inicial para cliente, sempr...
DICAS FINAIS #3...bom senso!
* TABELA DE CALORIASTIPO       ARQUIVO            MEDIDAS              QUALIDADE             PESO APROXIMADOILUSTRAÇÃO    ...
PERGUNTE-ME COMO!Se você tiver alguma dica,crítica ou sugestão parareduzir o peso, envie paranicolasmonasterio@gmail.com
Próximos SlideShares
Carregando em…5
×

Adeus Gordurinhas

888 visualizações

Publicada em

Workshop sobre redução de peso de arquivos, desenvolvido por Nicolás Monasterio

Publicada em: Tecnologia, Arte e fotografia
0 comentários
2 gostaram
Estatísticas
Notas
  • Seja o primeiro a comentar

Sem downloads
Visualizações
Visualizações totais
888
No SlideShare
0
A partir de incorporações
0
Número de incorporações
2
Ações
Compartilhamentos
0
Downloads
1
Comentários
0
Gostaram
2
Incorporações 0
Nenhuma incorporação

Nenhuma nota no slide

Adeus Gordurinhas

  1. 1. ADEUS GORDURINHAS! WORKSHOP BÁSICO DE EMAGRECIMENTO DIGITALpara DESIGNERS INSTRUCIONAIS, DESENVOLVEDORES e DESIGNERS com PROBLEMAS DE PESO
  2. 2. Como funcionam as imagens criadas em FlashFatores que aumentam o peso dos arquivos, e o que fazer para reduzi-losPráticas para otimização de Imagens BitmapOtimizando 3D, audio e videoProcessamento: quando o problema não é o pesoDicas finais para ter sempre em mente
  3. 3. oTamanhodo ProblemaComo funcionam as imagens criadas em Flash
  4. 4. COMO FUNCIONA O FLASHAs ilustrações criadas em FLASH são imagens vetoriais.Outros programas vetoriais: CorelDraw, Illustrator.Ilustrações vetoriais são criadas a partir de pontos e curvas. Ponto 3 Ponto 2 Ponto 1
  5. 5. IMAGENS VETORIAISPor exemplo, para criar um círculo, Flash define um EIXO CENTRAL e um RAIO.O cálculo é o mesmo se o RAIO for maior ou menor. R R
  6. 6. IMAGENS VETORIAIS Quanto maior a quantidade de pontos e de informação em uma ilustração vetorial, mais complexo é o cálculo e MAIOR O SEU PESO.CONTORNO.SWF – 1Kb COMPLETO.SWF – 8Kb
  7. 7. IMAGENS VETORIAISO peso independe do tamanho na tela.PEQUENO.SWF – 8Kb GRANDE.SWF – 8Kb
  8. 8. IMAGENS VETORIAISDesenho mais ‘duro’,com bordas bem definidas.Menos recursos desombreado e difusão.Não perdem qualidade ao ampliar.
  9. 9. IMAGENS BITMAPImagens bitmap são construidas com matrizes de pixels.Melhor para sombras e transições de cor.Programas de edição bitmap:Photoshop, ImageReady.Flash não edita bitmapsmas pode importá-los.
  10. 10. IMAGENS BITMAPCada pixel (célula da imagem) acrescenta informação à imagem.Quanto maior a quantidade de píxels, maior a resolução e qualidade da imagem.A resolução máxima para monitor é 72 ppi (pixels por polegada).
  11. 11. IMAGENS BITMAPQuanto maiores as dimensõesem pixels de uma imagem bitmap,MAIOR O SEU PESO. IPOD_PEQ.PNG – 30Kb IPOD_GRANDE.PNG – 64Kb
  12. 12. REDIMENSIONANDO BITMAPSAo redimensionar ou fazer zoomna imagem, ela perde qualidade.Redimensionar bitmapsno Photoshop eimportar com o tamanho certo.
  13. 13. VETOR vs. BITMAPVetores costumam ser mais leves e maleáveis que bitmaps.Usamos imagens vetoriais, sempre que possível. TENIS.SWF – 11Kb TENIS.PNG – 40Kb
  14. 14. SÍMBOLOSOs símbolos são grupos de objetos que podem ser reutilizados sem precisar ser carregados novamente.Tudo que for utilizado mais de uma vez deve ser símbolo.
  15. 15. SÍMBOLOSSímbolos podem ser aplicados com diferentes efeitos de cor.
  16. 16. SÍMBOLOSSímbolos podem ser compartilhados entre arquivos SWF.
  17. 17. Botando na BalançaFatores que aumentam o peso dos arquivos, e o que fazer para reduzi-los.
  18. 18. MEDINDO O PESOUtilize Size ReportPara ativar Size Report,marque ‘Create Size Report’nas Publish Settingse publique o SWFcom CTRL + ENTER.
  19. 19. MEDINDO O PESOO Size Report é um arquivo de texto que Flash cria junto ao SWF, com informações sobre a animação, incluindo o peso de cada frame.Através do Size Reporté possível descobrirqual frame contémalgum elemento compeso excessivo.
  20. 20. MEDINDO O PESOOutra ferramenta útil para avaliar visualmente o peso de cada frame é o Bandwidth Profiler.
  21. 21. POR QUE EU ESTOU GORDA #1 Excesso de elementos na tela.
  22. 22. A DIETA PRA MIM #1Reduzir elementos e ilustrações ao mínimo necessário.Separar conteúdo em várias telas.Reutilizar elementosusando símbolos.
  23. 23. POR QUE EU ESTOU GORDA #2Imagens com pontos em excesso. MAPA1.SWF – 59Kb
  24. 24. A DIETA PRA MIM #2 Otimizar vetores utilizando MODIFY > SHAPE > OPTIMIZE...
  25. 25. A DIETA PRA MIM #2Se selecionamos 0% e marcamos a opção ‘Use multiple passes’, o número de pontos é reduzido sem deformar a imagem.
  26. 26. POR QUE EU ESTOU GORDA #3Bordas complexas aumentam o peso. BORDA1.SWF – 2Kb
  27. 27. A DIETA PRA MIM #3Substituir por linhas sólidas. BORDA1.SWF – 170b
  28. 28. POR QUE EU ESTOU GORDA #4Gradientes e transparências tornam o arquivo mais pesado. COM_GRADIENTE.SWF – 12kb
  29. 29. A DIETA PRA MIM #4Reduzir quantidade de preenchimentos com gradiente e transparência. SEM_GRADIENTE.SWF – 5kb
  30. 30. POR QUE EU ESTOU GORDA #5Traços modulados pesam mais,pois têm mais de uma borda.PERSONA.SWF – 4Kb
  31. 31. A DIETA PRA MIM #5Reduzir utilização de pincel e tablet.Utilizar traços criados com caneta ou linha.PERSONA.SWF – 2kb
  32. 32. POR QUE EU ESTOU GORDA #6Partes da ilustraçãonão são utilizadas.
  33. 33. A DIETA PRA MIM #6Cortar partesnão visíveis.
  34. 34. NÃO SE SIRVASE NÃO FORCOMER! Práticas para otimização de imagens bitmap
  35. 35. QUANDO UTILIZAR BITMAPSQuando o equivalente vetorialfor mais pesado.Em fotos.Em capturas de tela.
  36. 36. DIMENSÕES DO BITMAPExportar bitmaps no tamanho máximo utilizado no Flash.Utilizar o comandoIMAGE > TRIM...do Photoshop.
  37. 37. IMPORTAÇÃO DE BITMAPSNas propriedades do bitmap,marcar a opçãoALLOW SMOOTHINGpara ter ganho de qualidade.
  38. 38. FORMATOS BITMAP: JPGO formato JPG é usado preferentemente para fotos e imagens com muitas cores.Pode-se controlar seu nível de qualidade, de 0 a 100%Sua compactação é destrutiva(com perda).
  39. 39. FORMATOS BITMAP: GIFO formato GIF é usado preferentemente para logomarcas e imagens com poucas cores.Pode-se controlar seu peso pela quantidade de cores, de 0 a 256.Permite definir uma ou mais cores transparentes, com borda pixelizada.
  40. 40. FORMATOS BITMAP: PNGO formato PNG é usado indistintamente para todo tipo de imagem.Permite a criação de imagens transparentes com canal Alpha.Costuma criar imagensmais pesadas queJPG e GIF.
  41. 41. TENTAÇÕESOCASIONAIS Oimizando 3D, audio e video.
  42. 42. 3D ESTÁTICOImagens 3D são produzidas usando 3DStudio ou Swift3D.Os programas renderizam a imagem em vetor, bitmap ou vídeo.
  43. 43. 3D ANIMADOImagens animadas são uma seqüência de imagens estáticas em vetor ou bitmap.O peso total da animação é a soma das imagens em seqüência.
  44. 44. AUDIOPeso depende de vários fatores:Freqüência: - para música, usar 44.000 KHz - para locução, usar 22.000 KHzBit: - para som de qualidade média a alta, usar 16bit - para ruídos, usar 8bit
  45. 45. IMPORTANDO AUDIOEditar arquivo para eliminar regiões não utilizadasImportar com a melhor qualidade possível e comprimir no próprio FlashUsar compactação MP3 e definir taxa apropriada:Kbps: - para qualidade média (locuções), usar de 16 a 92 Kbps - para qualidade alta (música), usar de 92 a 256 Kbps*Utilizar arquivos em MONO, pois possuem metade do peso do STEREO.
  46. 46. VIDEOArquivos MUITO pesados.Utilizar o mínimo necessário.
  47. 47. OPÇÕES DE IMPORTAÇÃO DE VIDEOExistem duas formas de inserir vídeo em um SWF: 505Kb - Embutido (Embed) . PRO: permite sincronizar animação e vídeo . CONTRA: insere o peso do vídeo no SWF500Kb 500Kb - FLV externo . PRO: não aumenta o peso do SWF . CONTRA: não permite sincronizar com animação 5Kb
  48. 48. IMPORTANDO VIDEOImportar com tamanho final em pixels, no máximo de qualidade.Transformar em FLVno Video Encoder.Cortar segundosdesnecessáriosusando TRIM.Cortar pixelsdesnecessáriosusando CROP.
  49. 49. CAPTIVATEColocar todas as imagensqualidade Standard.
  50. 50. CAPTIVATEAções: tirar todosos links de Quiz.
  51. 51. CAPTIVATENa hora de fechar o projeto,desmarcar utilizaçãode ‘mouse’ e ‘audio’.
  52. 52. PROCESSAMENTO Quando o problema não é o peso mas a lentidão
  53. 53. ENTENDENDO O PROCESSAMENTOIndepende do peso do arquivo.Problemas de processamento são gerados por alguma tarefa que exige demais do computador do usuário.
  54. 54. MEDINDO O PROCESSAMENTOUtilizar o Gerenciador de Tarefas do Windows, painel Processos:CTRL + SHIFT + ESCVerificar o valorda coluna CPU
  55. 55. FPS (Frames Por Segundo)Valor constante que define a quantidade de quadros exibidos por segundo.Se define no início no projeto e não deve ser alterado.FPS maior (24, 30): Maior qualidade, maior processamento.FPS menor (12, 15, 18): Menor qualidade, menor processamento. 12 FPS 24 FPS
  56. 56. FATORES QUE AUMENTAM OPROCESSAMENTO #1Animações em tela inteira.Evitar uso de Zoom, Fade In e movimentos de câmera.
  57. 57. FATORES QUE AUMENTAM OPROCESSAMENTO #2Animação de efeitos de Flash 8Reduzir animação de Glow, Blur, Shadow, etc.Ou substituir por vetores ou bitmaps.
  58. 58. FATORES QUE AUMENTAM OPROCESSAMENTO #3Máscara cobrindo todos Substituir por index vazadoos conteúdos do index. em layer superior, sobreposto a conteúdos. MÁSCARA
  59. 59. FATORES QUE AUMENTAM OPROCESSAMENTO #4Muitas animações simultâneas.Shape tween e animações quadro-a-quadro.Bitmaps animados.
  60. 60. QUASE LÁ,GAROTA! Dicas finais para ter sempre em mente
  61. 61. DICAS FINAIS #1Planejar projeto como um todo e definir limites claros de peso e processamento.
  62. 62. DICAS FINAIS #2Reunir Design Instrucional, Desenvolvimento e Ilustraçãoantes de enviar roteiro inicial para cliente, sempre que possível. DES Roteiro Roteiro para Briefing Inicial DI ILU aprovação
  63. 63. DICAS FINAIS #3...bom senso!
  64. 64. * TABELA DE CALORIASTIPO ARQUIVO MEDIDAS QUALIDADE PESO APROXIMADOILUSTRAÇÃO PERSONAGEM SIMPLES 3 – 8 Kb PERSONAGEM COMPLEXO 12 – 24 Kb CENÁRIO SIMPLES 12 – 15 Kb CENÁRIO COMPLEXO 30 – 50 KbBITMAP IMAGEM JPG 100 x 100 px 100% 12 Kb IMAGEM JPG 100 x 100 px 60% 4 Kb IMAGEM JPG 500 x 500 px 100% 200 Kb IMAGEM JPG 500 x 500 px 60% 54 KbAUDIO LOCUÇÃO 15” 22KHz, 16 bit Mono MP3 16 Kbps 37 Kb LOCUÇÃO 30” 22KHz, 16 bit Mono MP3 16 Kbps 57 Kb LOOP 15” 44KHz, 16 bit Mono MP3 32 Kbps 57 Kb LOOP 30” 44KHz, 16 bit Mono MP3 32 Kbps 116 KbVIDEO FLV 15” 640 x 480 px 400 Kbps 1 Mb FLV 15” 640 x 480 px 900 Kbps 2 Mb FLV 15” 320 x 240 px 400 Kbps 1,5 Mb FLV 15” 320 x 240 px 900 Kbps 2,5 Mb * (Valores médios aproximados.)
  65. 65. PERGUNTE-ME COMO!Se você tiver alguma dica,crítica ou sugestão parareduzir o peso, envie paranicolasmonasterio@gmail.com

×