006 Planejamento Visual

406 visualizações

Publicada em

Novo conteúdo da disciplina de Planejamento Visual, Computação Gráfica e Design do curso de Publicidade e Propaganda.

Publicada em: Design
  • Seja o primeiro a comentar

  • Seja a primeira pessoa a gostar disto

006 Planejamento Visual

  1. 1. O Photoshop vem melhorando constantemente seu algoritmo de compressão para imagens web. E desde que a Adobe adquiriu a Macromedia (e seu Fireworks) o processo de salvar imagens mais leves e de melhor qualidade ficou ainda melhor. A opção "save for web" é repleta de opções e, por assim dizer, armadilhas para quem não é familiarizado com a ferramenta. Com a imagem aberta no Photoshop selecione o menu File > Save for Web ou pressione Alt+Sh¡ft+Ctr| +S. Da janela que se abre. o que interessa pra nós são as opções da coluna direita, apresentada abaixo:
  2. 2. GIF v'- : vã Selecüve v Colors: 256 'gíkoiffusion v Dither: 100% 7 A »l Transparency Matte: None " NoTransparencyDitlwer v Am¡ n: : *E - da _ , , _ ! à _Intae ted WebSnap. 0h L A. . l " CConverttosRGB q e Color Table ' llll
  3. 3. Para efeito de comparação entre o original e o resultado final. sugiro escolher a opção "2-Up". que mantém as imagens lado a lado (ou em cima e abaixo se ela for muito comprida na horizontal). Save for Web 81 Devices (100%)
  4. 4. 1. GIF, JPG, PNG-8 ou PNG-24? São as extensões de arquivo e definem a taxa de compressão e a qualidade da imagem. Discutir sobre qual extensão é a ideal depende tão somente do tipo de imagem (foto, figura, logomarca, textura, etc. ) e a abordagem pode girar em torno do conceito técnico ou gosto pessoal. A princípio, todas essas extensões têm u m só objetivo: reduzir o peso do arquivo. Tanto melhor se mantiverem a qualidade da imagem. E é ai' que reside o diferencial de cada uma.
  5. 5. GIF e PNG-B trabalham com compressão de imagem através da quantidade de cores que você escolhe e permitem fundo transparente. JPG tem seu algorítimo de compressão baseado na qualidade desejada (baixa. média. alta, muito alta ou máxima) e não permite transparência. Já o PNG-24 não é configurável e se baseia na quantidade de cores da imagem e transparência. É o mais fiel ao arquivo original e também o que pode gerar os arquivos optimizados mais pesados. o GIF (Graphics lnterchange Format) serve para imagens com cores sólidas (chapadas) sem muitas nuances (degradés) em grandes áreas e permite escolher a quantidade de cores para sua composição (item 8). Recomendado para: logomarcas, ícones e textos (como IR para títulos, por exemplo).
  6. 6. I PNG-8 (Portable Network Graphics de 8 bits), como o próprio nome já diz, é uma extensão voltada para distribuição em rede. Veio para substituir o GIF mas nem sempre gera arquivos menores que seu concorrente. Por conta disso sempre procurei. sem sucesso, um estudo científico que comparasse o algorítimo de compressão de ambos para fins de benchmarking. Sendo assim, recomendo que você teste entre um e outro para ver qual gera o menor arquivo, pois a olho nu são absolutamente idênticos. Particularmente percebo que o PNG-8 se sai melhor do que o GIF. No entanto, se tiver fundo transparente você pode esbarrar em um problema ainda conhecido: compatibilidade com o lEó. Também é recomendado para: logomarcas, textos e ícones.
  7. 7. o JPEG (Joint Picture Experts Group) - ou simplesmente JPG - foi criado para fins fotográficos e seu método de compressão foi pensado para fins de armazenamento. Imagens de alta qualidade necessitam de maior espaço, e vice- versa. Para fins de internet, configurar a qualidade em torno de 40% (média) a 60% (alta) geram resultados mais que satisfatórios e não existe padrão específico. Tudo vai depender do original e da necessidade. Lembrando que um original ruim gera uma imagem ruim e, nesse aspecto. o JPG se assemelha muito às fotocópias impressas. Ou seja, a cópia da cópia va¡ piorando gradativamente. Assim. o JPG do JPG perde cerca de 20% da qualidade. Portanto, mantenha sempre a matriz para eventuais alterações e poder gerar novos JPGs. Recomendado para: fotos, textu ras, amplos degradés e imagens de grandes dimensões em geral.
  8. 8. o PNG-24 (Portable Network Graphics de 24 bits) vem sendo utilizado amplamente não só por sua fidelidade ao original mas por permitir transparência real, sem matte (explico mais adiante o item 5D). Pensando no custo-beneficio, se a imagem for uma foto, o JPG sai ganhando pela compressão.
  9. 9. 2. Tipos de optimização (GIF e PNG-8) É a maneira com que a tabela de cores é gerada. O extinto programa Adobe ImageReady (vinculado ao Photoshop ó) chamava isso de "algoritmo de redução de cores". v Perceptiva gera uma tabela de cores com base na percepção do olho humano. o Seletiva é semelhante a anterior, porém tenta preservar cores sem contraste e também as web-safe colors. Tende a gerar arquivos ligeiramente maiores, mas _e'_a mais recomendada.
  10. 10. - Adaptativa se baseia na porção do espectro de cores que representa a maioria das cores na imagem e, portanto. também gera arquivos um pouco maiores que a anterior. - Restritiva é a que mais "foge" da semelhança com o original, pois transforma todas as cores da imagem em web-safe colors. E permite que você escolha a quantidade de cores. Curiosamente é a que pode gerar o arquivo de maior tamanho. Mas isso acontece devido a inserção de novos pixels na imagem para que duas ou mais cores, próximas, tentem se parecer mais com o original. O que, de fato, nem sempre acontece. Não recomendo essa optimização pois seu uso é muito específico.
  11. 11. 2. Tipos de optimização (J PG) Tanto em qualidade baixa, média, alta, muito alta e máxima, a compressão do JPG pode ser: - Progressiva exibe a imagem aos poucos, permitindo que o usuário perceba que uma imagem está sendo carregada. Deixe esta opção marcada caso sua finalidade seja para dispositivos móveis ou de conexão mais lenta. JPGs progessivos são ligeiramente mais pesados, pois carregam informações extras para a exibição gradativa. - Otimizada usa uma tabela de compressão mais efetiva e reduz consideravelmente o peso do arquivo sem perda visual de qualidade. Deixe essa opção marcada sempre.
  12. 12. 3. Quantidade de cores (somente GIF e PNG-8) Desnecessário explicar muito. Mas procure evitar a quantidade máxima (256). A diferença visual usando a metade das cores pode ser imperceptivel. ja' o tamanho do arquivo, não. Na maioria das vezes, botões de menu, itens de navegação e icones podem ser exibidos muito bem com 32 ou ó4 cores. E vale lembrar que você pode escolher um número qualquer de cores além das pré-definidas. mas não recomendo. exceto em casos muito especificos.
  13. 13. 4. Dithering l °'l9¡"°' Ditheré um "ruido" aplicado intencionalmente para sem díther fr" 'com dm”, dm”, tornar mais homogenea a passagem de uma cor para outra, prevenindo grandes áreas de cor chapada (steps visíveis do degradé). Sem ele a imagem pode ficar com um aspecto de ilustração. Já os 3 métodos de dithering são muito parecidos a olho nu e o único que pode alterar significativamente no tamanho do arquivo é a 3° opção. 0 Diffusion, o método mais comum e mais utilizado, por randomização de pixels. Permite ajustar sua intensidade. o Pattern, por porções da cor. Padrões definidos se misturam. o Noise resulta num ruído mais intenso, inserindo pixels de cor não semelhantes aos seus vizinhos.
  14. 14. 5. Transparência (somente GIF, PNG-8 e PNG- 24) i Apesar de GIF/ PNG-8e o PNG-24 permitirem 20cm 5,39% transparência, somente no PNG-24 ela é, gr. .. _, r'«. _ digamos, real. No GIF e PNG-8 a transparência 'Í i7- é obtida por matte. uma espécie de "calço de N” "i "a cor". Veja na imagem ao lado. figuras com SEM "mm SEM "“°"°'¡°' linhas retas como o quadrado não necessitam j"? P, de matte (e nesse caso nem de transparência, 'f Y kl_ concorda? ) COM mana , _ _ Ja rotacionando o quadrado temos linhas diagonais cujo efeito serrilhado. conhecido tecnicamente como alias gera pixels com cores intermediárias para suavizar visualmente o limite de resolução da tela. Quanto menor a resolução da tela. mais perceptível o serrilhado.
  15. 15. O matte entra exatamente onde o anti-alias age. Os pixels transparentes gerados pelo anti-alias são "calçados" previamente pela cor de fundo para causar um melhor recorte. Então. se gerarmos um GIF/ PNG-8 transparente com matte em branco, como no exemplo ao lado, o serrilhado continua perceptível em fundos que não sejam o branco, dando uma impressão de falsa transparência. O PNG-24 acaba com essa limitação, eliminando a necessidade do matte e ampliando o uso de imagens com muitas transparências, sombras. reflexos e etc.
  16. 16. ó. Modo Entrelaçado Entrelaçado e Não Entrelaçado são os modos de exibição da imagem no monitor. GIFs não entrelaçados são exibidos de cima para baixo de uma só vez. Mesmo que muito rápido, dependendo do tamanho da imagem pode gerar um efeito chamado "flickering" (cintilante) pois o espaço a ser exibida a imagem aparece antes de ela própria.
  17. 17. Já imagens entrelaçadas são exibidas em 4 etapas. A primeira etapa exibe as linhas 8,1ó,24, . .. (1/8 dos dados da imagem) a segunda as linhas 4. 12. 20. (1/4 dos dados), depois as linhas 2, ó, 10. (1/2 dos dados) e finalmente as linhas 1. 3, 5. completando o carregamento.
  18. 18. Felizmente, desde a chegada da internet banda larga, não existe mais perceptível vantagem ou desvantagem entre um modo e outro. No entanto, para seu conhecimento, mesmo em conexões mais lentas a desvantagem do modo entrelaçado só era percebida em arquivos muito pequenos (algo em torno de óKb), pois este acrescenta alguns bytes no tamanho do arquivo. Por serem pequenos, carregavam mais rápido, não havendo necessidade de mudar seu modo de exibição. Afinal, alguns bytes para um arquivo de cerca de 6Kb f-az fazia mais diferença do que uns poucos kbytes para um arquivo de 200, 300. 50OKb.
  19. 19. 7. Perfil de cor Explicar perfis de cores vai além do propósito deste artigo. Melhor deixar essa opção sempre marcada para que toda e qualquer imagem gerada saia com o perfil de cor ideal para internet: O padrão sRGB.
  20. 20. 8. Tabela de cores (somente GIF e PNG-8) Mesmo que você escolha a quantidade de cores (item 3) para compressão, se a imagem contiver um número menor de cores, a tabela exibirá apenas as cores existentes, ignorando a quantidade máxima que você escolheu. Já se a imagem for muito elaborada você pode limitar o número de cores a serem exibidas. Os pequenos Iosa ngos brancos em algumas cores representam as web-safe colors. Se você for editar a tabela (remover ou adicionar cores por sua conta) evite remover qualquer uma das web-safe colors.
  21. 21. si: 'TÍIFJ s. . ; IÚVJIC 1:4 “I-Jcin-: ci-uuuo Ramiro), - Um guia visual para Flexbox Artigo original escrito por . que gentilmente me permitiu traduzi-lo para o nosso idioma. A propriedade C553 Flexbox. oficialmente chamada de e um "novo" modelo de layout em C553 feito para melhorar o alinhamento. di¡ eção e ordenação de itens em um container. mesmo tjuando estes possuem dimensões diferentes ou desconhecidas. A principal caracteristica de um containertipo flex e a capacidade de alterar a largura ou altura de seus elementos filhos para preencher o espaço disponivel da melhor maneira possivel em qualquer resolução de tela. Flexbox e fácil de innplementar. Designers e desenvolvedores não tem maiores dificuldades em criar' um layout com Flexbox (exceto pelo suporte de alguns navegadores). Como o posicionamento dos itens é quase que automatico. layouts mais complexos podem ser criados com menos código, tornando o processo de desenvolvimento

×