Arquivos para categoria: Produção gráfica

Anúncios

Pode parecer óbvio, mas acredite: muita gente não consegue compreender porque, quem desenha para a cultura ocidental, insiste em recitar o mantra “da esquerda para a direita. É assim que se organiza por ordem de importância”.

Esta é a maneira mais fácil de explicar como os designers pensam para organizar a informação de forma que ela seja clara e absorvida o mais rápido possível. Tá certo, tudo depende do contexto, do público e tem uma série de fatores que determinam a decisão final (a cultura ocidental ou oriental, por exemplo), mas acredite: o designer da sua empresa não teve uma visão com esta ideia e decidiu que era o certo. Tudo começou com um cara chamado Leonardo Fibonacci (se você não curte matemática, desaconselho o clique neste link).

Explicando de forma bem tosca, esse matemático descobriu uma sequência numérica utilizada em diversos campos como matemática (lógico), literatura, música, cinema, entre outros que se vê como a mesma proporção que é utilizada pela natureza para criar formas perfeitas. A Proporção áurea, uma espécie de gráfico gerado pela constante do Número de Fibonacci, é utilizada desde a antiguidade para criar formas bem desenhadas. Pode ser vista em obras de Leonardo da Vinci, Giotto e até na marca da Apple, a famosa maçã de Jobs.

Daí, com diversos estudos baseados neste conceito, dentro da disciplina de design, concluiu-se que, há pontos dentro de um suporte (página, site, cartaz, banner, aplicação, tela…) onde a visualização é mais rápida e clara. Esses pontos são o ponto áureo e o centro físico.

O ponto áureo é o ponto que se enxerga primeiro ao visualizarmos algo. Vamos usar uma página, como exemplo. Este ponto é onde se encontra a medida de 3/8 da página tanto na largura como na altura. Difícil? É só dividir sua página em 8 partes iguais (isso serve para as telas, tá?) na altura e na largura (como a página acima) e cruzar linhas partindo do 3º ponto. quando as linhas perpendiculares se encontrarem você achou o seu ponto áureo, ou seja, o ponto que se enxerga primeiro.  São 4 pontos porque eles podem ser contados de cima para baixo, de baixo para cima, da direita para a esquerda, da esquerda para a direita. O que determina qual dos pontos eu vou usar? Os outros fatores sobre os quais eu falei lá em cima, público, cultura, objetivo… além disso, fatores como tamanho dos elementos também. Se você tiver uma imagem bem colorida que ocupa mais da metade da página, via de regra, ela será a primeira coisa a ser visualizada, porque ela cruza as fronteiras dos pontos áureos.

Note que, os capítulos dos livros, títulos de artigos, peças mais importantes, fotos mais importantes, matérias principais muitas vezes não começam no topo da página. Geralmente ficam um pouco mais abaixo. Não é por acaso. Procurou-se usar o ponto áureo para dar destaque.

Esta é a minha primeira linha de visão.

Além do ponto áureo, há o centro físico. Onde duas linhas diagonais se cruzam. Este é o ponto entre os pontos áureos. O segundo lugar mais visualizado e onde é mais fácil concentrar a atenção. Já notou que geralmente executamos tarefas primárias ao centro? O espaço entre as margens de um papel é centralizado, a área de desenho do seu software é centralizada, a página do seu editor de textos é centralizado…

Pode parecer bobagem, mas as placas com nomes das ruas sempre são ao centro ou à esquerda, a sinalização do metrô também. Os menus dos filmes, a abas do seu navegador, as barras de menus. Se bem desenhados, o início das coisas que são primarias não vão ultrapassar nunca a medida de 3/8 para qualquer lado. Ainda que seu texto esteja à direita, pode ter certeza de que você começará a lê-lo muito antes de ultrapassar a “medida mágica”.

Da próxima vez que um designer lhe disser: “Da esquerda para a direita”, ” Um pouco mais pra baixo”, “Deixe uma margem maior”, dê um voto de confiança a ele, lembre da matemática e que o objetivo é chegar à perfeição da natureza.

 

Já se perguntou como são feitos aqueles chocolates perfeitos de propaganda, que deixam a gente com água na boca?

É hora de aprender. Muita gente me pergunta como faço pra criar esse tipo de coisa e esta é uma boa maneira de demonstrar como usar os filtros (:

Passo 1:

Crie uma nova imagem (File > New), de preferência, quadrada (é mais fácil de conseguir um resultado legal). No meu caso, estou usando uma imagem 600 x 600 pixels, mas você pode adequar à sua necessidade.

Passo 2:

Certifique-se de que as cores de primeiro plano e plano de fundo estão no padrão (preto e branco, respectivamente). Pode ser uma outra cor? Pode. Mas assim fica mais fácil de conseguir o tom de chocolate desejado depois.

Passo 3:

Vá até o Menu Filter > Render > Clouds e clique em OK. Eu sei que o resultado não parece nada com chocolate, mas vá por mim, logo a gente chega lá.

Passo 4:

Vá novamente até o menu Filter, mas dessa vez siga Filter > Distort > Twirl.

Na caixa de diálogo você vai ajustar a propriedade Angle, de acordo com sua preferência e tamanho da imagem. Para esse caso, eu usei 600 º, mas talvez seja uma boa oportunidade de experimentar você mesmo o que fica melhor. Depois é só dar “Ok”.

Sua imagem já deve estar lembrando, pelo menos de longe, o chocolate.

Passo 5:

Hora de dar aquele brilho ao seu chocolate. Mais uma vez usando o menu Filter. Siga Filter > Artistic > Plastic Wrap.

Na Filter galery você já vai visualizar a mudança.

Ajuste os sliders que aparecem na lateral direita da caixa (Highlight Strenght, Detail e Smoothness) de acordo com sua preferência (não exagere!) ou use os mesmos valores que eu: 15, 9 e 7, respectivamente.

Passo 6:

Hora de deixar o chocolate com cor de chocolate. Vá até o menu Image > Adjustments > Hue/Saturation…

Na caixa de diálogo que abrir, marque a opção Colorize. A barra “Hue” dá o matiz de marrom, a cor propriamente dita. A barra “Saturation” vai deixar a cor mais viva ou mais amena e “Lightness” mais clara ou mais escura. Sugiro que, se você não tem o hábito de usar esta caixa, utilize os mesmos valores da imagem abaixo (29, 33 e -18, respectivamente) e clique  em Ok.

Sua imagem deve estar como esta abaixo. Isto é, com cor de achocolatado. Mas não esquente. Nós vamos chegar na cor de chocolate perfeita.

Passo 7:

Para melhorar a cor, vamos usar o recurso de Variações. No menu Image, encontre Image > Adjustments > Variations.

Na caixa de diálogo que vai ser aberta é possível escolher variações da mesma imagem com alterações na intensidade de cores (More Green, More Yellow…) e também na iluminação (Lighter e Darker). Clicando nas imagens você pode chegar à cor desejada. Para atingir a cor que eu queria, cliquei Darker 1 vez, More Red uma vez e Darker novamente, nesta sequência. Em seguida Ok.

Está pronto o seu chocolate!

E aí, gostou do resultado?

Excluindo-se aqueles casos em que as fontes (os designers, como eu, preferem “tipos”) são utilizadas como verdadeiras obras de arte (este é um exemplo deste caso) todo mundo deveria saber em primeiríssimo lugar o que até minha priminha de 7 aninhos sabe: uma fonte é bem utilizada quando o público consegue ler aquilo que foi escrito com o mínimo esforço.

Às vezes, por preguiça, por querer ser inovador, por simpatia com o tipo ou mesmo por falta de conhecimento deste ponto muita gente comete erros graves na construção de uma peça, no que se refere ao quesito tipografia, que podem ir desde fazer uma peça feia e primária até uma catástrofe: ninguém entender nada do que está escrito e o seu trabalho ser jogado no lixo.

Para evitar que isso aconteça, na dúvida, observe os pontos abaixo. Mas lembre-se nada disso é regra. Todas as coisas dependem de um contexto. É preciso muito mais que um checklist ou uma receita de bolo para uma peça ter um conjunto tipográfico bem composto.

1)      Evite usar muitas famílias de fontes diferentes em uma mesma peça. A não ser que sua peça queira destacar algo sobre tipografia. Na grande maioria dos casos duas famílias são o suficiente. Por exemplo: você quer fazer um flyer usando fontes com serifa e sem serifa. Se você decidir usar as famílias Helvética e Garamond, terá, no mínimo, 83 variações entre Bold, Light, Italic, Condensed, Thin, Rounded… e assim vai. Não vai precisar mais do que isso, né?

2)      Use, sempre que possível, fontes OpenType. Ou se for imprimir profissionalmente, não use fontes TrueType.  As fontes TrueType são um avanço em relação àquele tempo onde as fontes eram todas pixelizadas e era um suplício aumentar ou reduzir o seu tamanho no começo da década de 80. Mas se você não trabalha com Mac ou Windows, vai ser impresso em fotolito ou se o seu arquivo vai passar por um CTP, usar fonte TrueType é suicídio: na maioria das vezes caracteres especiais são substituídos por quadrados, losangos e pontos… pra garantir, use OpenType.

3)      Não “esprema” ou “estique” o seu texto manualmente. Os tipos são desenhados (ou pelo menos deveriam ser) para terem a melhor visibilidade possível. Quando você modifica isso manualmente mexendo na altura ou largura do texto sem conhecimento vai prejudicar a legibilidade: deslocar as flexões, retirar a harmonia das hastes, reduzir ou ampliar demais os olhos, achatar terminais, entre outros. E se você não entendeu nada desta última sentença, acredite, você não está habilitado a “corrigir” o trabalho de um tipógrafo.

4)      Evite usar palavras, parágrafos, sentenças ou outras coisas inteiramente em caixa alta (tudo em maiúsculo). A explicação é bem simples: quando um texto está todo em caixa alta todas as letras ficam do mesmo tamanho e isso, cognitivamente, torna a vida de quem lê mais difícil. Na pior das hipóteses, tente o recurso de versalete.

5)      Conheça os principais estilos de fonte e use um apropriado para o contexto. Geralmente estilos cursivos não funcionam bem todas em maiúsculas. Estilos blackletter só deveriam ser usados em textos completos se você estiver criando material com contexto épico e mesmo assim, com cuidado.  Fontes pixelizadas costumam funcionar melhor em tamanhos menores e, contrariando o ponto 4, geralmente em uppercase.  Para leitura em tela, as fontes sem serifa costumam ser mais apropriadas, no caso do papel, costuma ser exatamente o contrário que cansa menos a vista.

6)      Se for usar fontes gratuitas tome a precaução de saber se é uma fonte bem desenhada. Se não souber exatamente distinguir uma bem desenhada de uma que não é, procure referências de outros designers.

Para tipos show de bola:

Grátis:

http://www.fontsquirrel.com

http://abduzeedo.com/tags/ffff

Pagos:

http://www.adobe.com/products/fontfolio/

http://www.myfonts.com/category/myfonts/index.html

http://www.linotype.com/

Procurei uma etiqueta (ou tag, se preferir)  para dar um charme a um trabalhinho este fim de semana e não encontrei nada que me agradasse, então desenhei essa em Illustrator, rapidinho. O link para baixar em .ai é esse.

Como outras pessoas podem querer também, decidi compartilhar. Assim como as outras coisas no Blog, pode usar, basta atribuir. ^^

Vetorizar é um exercício de paciência. Mesmo gostando demais de fazê-lo, preciso encontrar algo que inspire e pensar na melhor forma de desenhar.

Ultimamente entrei numa de uns desenhos meio impressionistas com vetor, mesclando preto, suas gradações com uma cor forte. Estou gostando. Este desenho aí em cima, vai receber um tom de amarelo, em homenagem à música do Coldplay. ^^

Fazia muito tempo que eu não desenhava nadinha. Pelo menos nada que não fosse uma tela ou os assets para ela. Desenhei o Marvin, da Warner, no Illustrator e me surpreendi pelo tempo que levei para faze-lo, olhando para outro desenho. Até dois anos atrás, isso levaria no máximo uns 10 minutos… hoje levou quase 20

😛

Você está lá, no meio do seu layout quando o desenvolvedor ao seu lado pergunta: “Que cor é essa?”. Não. Ele não está falando do matiz (vermelho, verde, azul amarelo, laranja…) Ele quer saber qual é o código hexadecimal daquela cor que você colocou ali, no desenho. E, bem, você não tem a mínima ideia, afinal, usou o a Eyedropper tool e capturou aquela cor qualquer de uma outra imagem que você nem lembra mais qual era…

Você tem escolhas: abrir a imagem do carinha (supondo que você ainda a tenha e saiba onde está) e usar o eyedropper novamente. Pode chutar um hexadecimal qualquer (É #9CFF00, agora para de encher o saco!) que é muito indelicado e corre o grande risco de sair a cor errada. Ou não precisar abrir o Photoshop. Basta usar ColorPic (você ou o próprio desenvolvedor).

A grande vantagem do ColorPic é que você não fica restrito à captura de cores do workspace do Photoshop ou Illustrator. Você pode capturar qualquer cor que esteja aparecendo no seu monitor em HSB, RGB ou Hexadecimal com um simples mouse over. Por exemplo: usando a imagem acima, pelos meios tradicionais, para capturar um “Roxo da mesma cor do ícone do Eclipse” eu teria que printar a tela, colar num novo documento do Photoshop, abrir o seletor de cores, clicar nele com o eyedropper. Assim eu saberia a cor. Já usando o ColorPic basta abrir a aplicação (bem levinha, por sinal) e posicionar o mouse no ícone. O ColorPic permite uma boa precisão com lente de aumento na parte inferior e te dá a cor em tempo real #57539B. Beleza, né? A versão básica é free. Só baixar.

Quer rabiscar com sua tablet nova? Usar brushes diferentes facinho, facinho? Usar um aplicativo html 5? Saber o que faz a tag <canvas>? Experimenta o DeviantArtMuro. Para quem já conhece o site de arte digital DeviantArt não vai ser difícil usar o DeviantArtMuro. Os pincéis são show de bola, a página é leve… não e um Painter Pro, tá certo… mas o carinha garante uma diversão. Experimenta lá: http://muro.deviantart.com/ .

Lá de Passo Fundo, no Rio Grande do Sul, um amigo, Jackson Andrade (@jackandrade ), me mandou um link de uma aplicação em Flash (sim, Flash) para desenhar, pra lá de interessante. O nome? Boa pergunta. Não aparece o nome da aplicação, mas os efeitos de pincel e a possibilidade de carregar imagem para desenhar são show de bola pra fazer uma ilustração diferente. Como é desenho à mão livre, precisa ser bom de mouse ou ter uma tablet. A aplicação salva no formato png. Eu gostei e vale a pena brincar.

http://haznos.org/site-fazer-desenho-online-flash/

%d blogueiros gostam disto: