Aula 1 - Composicao e Projeto Visual (1)

Prévia do material em texto

Composição e Projeto Visual
Prof. Mauricio Failache
Belas artes e 
artes aplicadas
Capela Sistina, Michelangelo entre 1508 e 
1512.
Belas artes e 
artes aplicadas
Belas artes e 
artes aplicadas
Belas artes e 
artes aplicadas
Portinari, Guerra e paz, 1952-1956
Belas artes e 
artes aplicadas
Picasso, Guernica, 1937 – sobre a guerra civil espanhola.
Belas artes e 
artes aplicadas
Lasr Segall, 1927. Bananal.
Belas artes e 
artes aplicadas
Lasar Segall, 1940-1943 –
do caderno visões de 
guerra 
Diferença entre arquivos básicos.
• Arquivos de Vetor:
Os gráficos vetoriais não são construídos por pixels (embora sejam exibidos 
na tela do computador como pixels). Eles são, na verdade, formados através 
de expressões matemáticas e as instruções inseridas produzem linhas, curvas 
e formas preenchidas. Logotipos de empresas são, muitas vezes, gráficos 
vetoriais e normalmente trabalhados com quantidade de cores limitadas.
Diferença entre arquivos básicos.
• Arquivos de Vetor:
Os gráficos vetoriais são, geralmente, muito menores em tamanho do que os 
gráficos de bitmap. Porém, se imagens bitmap são encaixadas dentro do vetor, 
o tamanho do arquivo geralmente será maior. Já se os gráficos de bitmap são 
incorporados em arquivos vetoriais (por exemplo, um EPS), o elemento bitmap 
do gráfico vai sofrer em termos de qualidade, se redimensionado.
*EPS (Encapsulated PostScript)
Diferença entre arquivos básicos.
• Arquivos de Vetor:
Os gráficos vetoriais são criados em aplicativos como o Adobe Illustrator ou Corel 
Draw. Eles não têm um DPI nativo como uma imagem bitmap e pode ser 
redimensionado em qualquer tamanho sem perder a qualidade. Formatos de 
arquivos comuns para os gráficos vetoriais são EPS, CDR e AI. A grande vantagem 
dos vetores é a possibilidade de aumentar e diminuir sem perder a resolução, 
além de favorecer o isolamento de partes do objeto para serem trabalhadas 
separadamente.
Diferença entre arquivos básicos.
• Arquivos de Vetor:
DPI (dots per inch, pontos por polegadas) é a medida utilizada pelos 
fabricantes de impressora para determinar a resolução da imagem impressa. 
Normalmente máquinas para uso residencial possuem menor resolução 
máxima, enquanto as impressoras fotográficas têm um elevado valor de dpi.
Diferença entre arquivos básicos.
• Arquivos de Bitmap:
Os gráficos de bitmap são os tipos mais comuns e são compostos de pixels coloridos. 
Pixels são definidos como pequenos quadrados, de diferentes cores que, uma vez 
juntos, formam uma imagem.
Ilustrações bitmap podem ser, por exemplo, fotos de natureza. Essas imagens 
possuem transição de tons de forma sutil e muitas vezes são compostas por milhões 
de cores. A dificuldade em trabalhar com os gráficos bitmap é que, ao ampliá-los, 
ocorre a perda de definição e uma diminuição considerável na qualidade.
Diferença entre arquivos básicos.
• Arquivos de Bitmap:
Formatos de arquivos comuns de dados de imagem de bitmap incluem PSP, BMP, GIF, JPEG e PNG para o uso da 
Internet e TIFF para o uso de impressão.
Imagens preparadas para impressão comercial de alta qualidade são geralmente preparadas em 300 DPI para 
formatos até o A3. Já para imagens muito grandes (por exemplo, o formato A1) pode ser com 
aproximadamente 150 DPI. Não há necessidade de fechar arquivos com resolução superior a 300 DPI, já que 
uma resolução maior não ira proporcionar melhorias na qualidade de saída do impresso.
Diferença entre arquivos básicos.
• Arquivos de Bitmap:
Rasterização, é a tarefa de converter uma imagem vetorial (curvas funcionais) em 
uma imagem raster (pixels ou pontos) para a possível leitura do documento. 
Diferença entre arquivos básicos.
• Composição:
O que é?
Composição
• 1.constituição de um todo.
• 2.modo pelo qual os elementos constituintes do todo se 
dispõem e integram; organização.
• É o passo mais crucial na solução de problemas visuais. 
Os resultados das decisões compositivas determinam o 
objetivo e o significado da manifestação visual e têm 
implicações com relação ao que é recebido pelo 
espectador.
• Lingüísticamente, Sintaxe = disposição ordenada das 
palavras seguindo forma e ordem adequada, com 
regras definidas.
• No contexto do alfabetismo visual, a sintaxe só 
pode referir-se à disposição ordenada de 
partes, deixando aberto o problema de como 
abordar o processo de composição com 
inteligência e conhecimento de como as 
decisões compositivas irão afetar o resultado 
final. 
• Não há regras absolutas. 
• Existe é um alto grau de compreensão do que 
vai acontecer em termos de significado, se 
fizermos determinadas ordenações das partes 
que nos permitam organizar e orquestrar os 
meios visuais.
• Muitos critérios para o entendimento do 
significado na forma visual, decorre de 
pesquisas sobre a percepção humana. 
• Com base nessas pesquisas sobre percepção 
visual, e com uma função ligada ao design, 
foram desenvolvidos princípios (ou técnicas) 
para transmitir uma mensagem na produção 
gráfica visual.
• Podemos separar por enquanto, 4 princípios 
básicos: contraste, repetição, alinhamento e 
proximidade. 
Contraste
Esse princípio é direto e claro: 
acende os holofotes para as 
áreas que devem atrair a 
atenção.
O contraste é o responsável por 
dar relevância visual ao que 
deve ser atrativo. Ou seja, dar 
destaque a algumas áreas no 
layout. Isso além de atribuir um 
ritmo a arte, define o que 
possui maior relevância e 
possibilita o observador a 
compreender todo o enredo do 
layout com apenas uma 
passagem de olhar.
Esse princípio pode ser aplicado de 
diversas formas em um layout como 
através de textos em negrito, 
backgrounds coloridos, elementos 
destacados, imagens, entre outras. 
O importante é colocar em 
evidência o que é valioso. 
• Agora, cuidado! Os elementos 
que criam contraste devem ser 
destacados de verdade, se não, 
ao invés de contraste eles 
causaram conflitos.
Contraste 
cromático
Repetição
Este princípio atribui consistência ao design através da 
repetição de elementos.
O ato de repetir um elemento no layout faz com que o 
observador siga um fluxo de leitura. E ausentar a 
repetição de elementos pode deixar a arte sem um 
conectivo visual, fazendo com que o observador se sinta 
perdido. É obvio que a repetição em demasia também 
cria confusão, então para evitar esse ruído visual utilize o 
princípio da repetição com o intuito de organizar as 
informações da composição.
Nesse exemplo conseguimos 
perceber facilmente a 
repetição:
- Link para o site com a cor 
azul;
- Url do site com a cor verde
- Descrição do conteúdo do 
link na cor cinza.
Esse padrão é replicado ao 
longo de todas as páginas de 
pesquisa, o que facilita 
imediatamente a leitura do 
observador, guiado-o a 
realizar apenas uma ação 
neste momento: acessar o 
link que apresenta o melhor 
resposta para a sua busca.
- Título em negrito;
- Mancha textual sem 
negrito;
- Botão com uma “chamada 
para ação”
Alinhamento
Ao inserir textos e imagens em um layout precisamos ter em mente que 
mantê-las organizadas é fundamental para a compreensão do observador, e o 
alinhamento ajuda muito nisso.
Nós, seres humanos, começamos a alinhar informações desda a nossa 
alfabetização, onde nossas queridas professoras nos ensinam que devemos 
escrever de cima para baixo, da esquerda para a direta (escrita e leitura 
ocidental). Esse ensinamento desenvolve em nós o senso de estética, que nos 
possibilita alinhar um texto à esquerda, à direta, ao centro ou justificá-lo.
Alinhamento
- Título com texto serifado 
alinhado à esquerda e com o 
princípio do contraste;
- Subtítulo com texto sem serifa e 
alinhamento justificado também 
com o princípio de contraste;
- Complemento com texto sem 
serifa alinhado à esquerda.
Nesse exemplo, foram utilizadas 
três tipos diferentes de fontes, 
cada uma respeitando o seu 
espaço sem deixar de transmitir e 
complementar a mensagem do 
layout como um todo. E claro, 
receberam um suculento apelo 
visualda carne posicionada à 
direta do banner, em uma área 
disponível para ela.
Esse outro exemplo possui o princípio do alinhamento, 
com imagens à esquerda do texto, todos os títulos e 
subtítulos alinhados à esquerda, complementados com o 
princípio da repetição com títulos em negrito e subtítulos 
com peso normal.
Proximidade
Quando aproximamos os elementos que se relacionam conseguimos dar 
pistas para o observador de qual a ordem de leitura ele deve seguir. Isso 
acontece instantaneamente, pois, primeiramente, o nosso cérebro 
escaneia o layout como um todo e depois inicia o processo de leitura das 
partes.
Não haveria sentido se o nome do produto, estivesse distante de sua 
descrição e do seu preço. Agrupar informações facilita a leitura, organiza 
os elementos do design e auxilia o observador na tomada de decisões
Ainda existe outra série de técnicas (não exaustivas) que 
podem ser aplicadas na busca de soluções visuais
Os princípios do design possuem um objetivo em comum: 
organizar. A organização do layout é uma das habilidades que 
distingue o designer.
(p. 24 de Donis A. Dondis)
Contraste Harmonia
Instabilidade Equilíbrio
Assimetria Simetria
Irregularidade Regularidade
Complexidade Simplicidade
Fragmentação Unidade
Profusão Economia 
Exagero Minimização
Espontaneidade Previsibilidade
Atividade Estase
Ousadia Sutileza
Atividade
• Individualmente ou em pequenos grupos de até 3 
pessoas, encontre duas imagens onde possa ser 
identificado algum (ou alguns) dos princípios 
vistos em aula para ser apresentado e discutido 
brevemente. 
	Slide 1: Composição e Projeto Visual
	Slide 2: Belas artes e artes aplicadas
	Slide 3: Belas artes e artes aplicadas
	Slide 4: Belas artes e artes aplicadas
	Slide 5: Belas artes e artes aplicadas
	Slide 6: Belas artes e artes aplicadas
	Slide 7: Belas artes e artes aplicadas
	Slide 8: Belas artes e artes aplicadas
	Slide 9: Diferença entre arquivos básicos.
	Slide 10: Diferença entre arquivos básicos.
	Slide 11: Diferença entre arquivos básicos.
	Slide 12: Diferença entre arquivos básicos.
	Slide 13: Diferença entre arquivos básicos.
	Slide 14: Diferença entre arquivos básicos.
	Slide 15: Diferença entre arquivos básicos.
	Slide 16: Diferença entre arquivos básicos.
	Slide 17: Composição
	Slide 18
	Slide 19
	Slide 20
	Slide 21
	Slide 22
	Slide 23
	Slide 24
	Slide 25
	Slide 26
	Slide 27
	Slide 28
	Slide 29
	Slide 30
	Slide 31
	Slide 32
	Slide 33
	Slide 34
	Slide 35
	Slide 36
	Slide 37
	Slide 38
	Slide 39
	Slide 40
	Slide 41: Ainda existe outra série de técnicas (não exaustivas) que podem ser aplicadas na busca de soluções visuais Os princípios do design possuem um objetivo em comum: organizar. A organização do layout é uma das habilidades que distingue o designer.
	Slide 42: Atividade