O documento discute elementos importantes na criação de uma capa, incluindo:
- O uso de grids para organizar elementos de forma precisa e clara;
- Diferentes tipos de grids como retangular, de colunas e modular;
- Técnicas como variação, desconstrução e alinhamentos para criar interesse visual.
Uma básica introdução a respeito do que é o Bootstrap, fazendo referências sobre o que é a grid, conceito e metodologia de trabalho oriundos do mundo do design gráfico. Bem como uma rápida explicação do LESS, o que é e como funciona.
Aula preparada para a UniverCidade (Rio), sobre o grid. Baseado no livro "A Construção do Grid", de Timothy Samara. Disciplina Produção e Análise da Imagem 2.
Grid Systems in Graphic Design by ADMEC Multimedia InstituteRavi Bhadauria
ADMEC Multimedia Institute is growing institute that is providing industry oriented training to the world at large. Being a multimedia institute we offer training for creating or designing content for information technology mainly.
Grid Systems: Building Blocks to a Better User ExperienceDustin DiTommaso
A structural design method benefitting both the designer and the end-user, grid systems have been used for generations in print design, architecture and urban planning to lay out and optimize spaces for readability and comprehension, wayfinding and navigation, utility and usability.
As a framework for screen-based design, grids enable efficiencies in the planning, execution and presentation of UIs and content and imparts a refined aesthetic and sense of order improving perceived usability and intuitive behavior.
Estrategia de AI - Criando o Relatorio de EstratégiaLuiz Agner
Aula sobre o Relatório de Estratégia da Arquitetura de Informação - ESPM-Rio - Prof. Luiz Agner. Pós-graduação em Design e Marketing Digital. Disciplina de Arquitetura de Informação, 2009.
Uma básica introdução a respeito do que é o Bootstrap, fazendo referências sobre o que é a grid, conceito e metodologia de trabalho oriundos do mundo do design gráfico. Bem como uma rápida explicação do LESS, o que é e como funciona.
Aula preparada para a UniverCidade (Rio), sobre o grid. Baseado no livro "A Construção do Grid", de Timothy Samara. Disciplina Produção e Análise da Imagem 2.
Grid Systems in Graphic Design by ADMEC Multimedia InstituteRavi Bhadauria
ADMEC Multimedia Institute is growing institute that is providing industry oriented training to the world at large. Being a multimedia institute we offer training for creating or designing content for information technology mainly.
Grid Systems: Building Blocks to a Better User ExperienceDustin DiTommaso
A structural design method benefitting both the designer and the end-user, grid systems have been used for generations in print design, architecture and urban planning to lay out and optimize spaces for readability and comprehension, wayfinding and navigation, utility and usability.
As a framework for screen-based design, grids enable efficiencies in the planning, execution and presentation of UIs and content and imparts a refined aesthetic and sense of order improving perceived usability and intuitive behavior.
Estrategia de AI - Criando o Relatorio de EstratégiaLuiz Agner
Aula sobre o Relatório de Estratégia da Arquitetura de Informação - ESPM-Rio - Prof. Luiz Agner. Pós-graduação em Design e Marketing Digital. Disciplina de Arquitetura de Informação, 2009.
Os dados podem ser esclarecedores e poderosos.
A finalidade dos dados não é simplesmente criar tabelas e gráficos.
A finalidade dos dados é responder a perguntas e despertar a curiosidade.
Palestra proferida no Seminário de Comunicação do Banco do Brasil e da Previ, em novembro de 2013, apresentando casos de sucesso, vencedores da 5ª edição do Prêmio Intranet Portal.
Resumo do livro "Recursos Audiovisuais nas apresentações de sucesso, de Reinaldo Polito.
Demóstenes Muniz Brito
demostenes.com.br
Prof. Sandra Márcia Liger
INPG - Instituto Nacional de Pós-Graduação (www.inpg.edu.br)
Unidade Curricular de Laboratório Web, Curso de Licenciatura em Audiovisual e Multimédia, Escola Superior de Comunicação Social / Instituto Politécnico de Lisboa.
Anotações de aula da disciplina Modelagem de Sistemas de Informação de Rede do curso de Gestão de Tecnologia da Informação - 3º semestre - UNIP Paulista.
Mais conteúdo relacionado
Semelhante a SUPORTES E FERRAMENTAS GRÁFICAS, ELEMENTOS DA CRIAÇÃO DE UMA CAPA
Os dados podem ser esclarecedores e poderosos.
A finalidade dos dados não é simplesmente criar tabelas e gráficos.
A finalidade dos dados é responder a perguntas e despertar a curiosidade.
Palestra proferida no Seminário de Comunicação do Banco do Brasil e da Previ, em novembro de 2013, apresentando casos de sucesso, vencedores da 5ª edição do Prêmio Intranet Portal.
Resumo do livro "Recursos Audiovisuais nas apresentações de sucesso, de Reinaldo Polito.
Demóstenes Muniz Brito
demostenes.com.br
Prof. Sandra Márcia Liger
INPG - Instituto Nacional de Pós-Graduação (www.inpg.edu.br)
Unidade Curricular de Laboratório Web, Curso de Licenciatura em Audiovisual e Multimédia, Escola Superior de Comunicação Social / Instituto Politécnico de Lisboa.
Anotações de aula da disciplina Modelagem de Sistemas de Informação de Rede do curso de Gestão de Tecnologia da Informação - 3º semestre - UNIP Paulista.
Semelhante a SUPORTES E FERRAMENTAS GRÁFICAS, ELEMENTOS DA CRIAÇÃO DE UMA CAPA (20)
SUPORTES E FERRAMENTAS GRÁFICAS, ELEMENTOS DA CRIAÇÃO DE UMA CAPA
1. S U P O R T E S E F E R R A M E N T A S G R Á F I C A S
3 0 H
- E L E M E N T O S D A C R I A Ç Ã O D E U M A C A P A
- - O G R I D
- O S P R I N C I P A I S A S P E T O S D A C O R
- D I N Â M I C A D E U M L A Y O U T
- P R I N C I P I O D O L A Y O U T
- - A P R E S E N T A Ç Ã O G R Á F I C A D E P R O J E T O S
Comunicação Gráfica e
Audiovisual mód III
Sancho Mesquita
2. Elementos da criação de uma capa
Sancho Mesquita
TEMA
O Melhor Argumento De
Vendas
DIRETA INDIRETA
Benefícios Desperta Curiosidade
TEXTO RACIONAL TEXTO EMOTIVO
Dirige-se A Inteligência Lógica Dos Fatos,
Informa, Descreve O Produto, Dá Razões,
Vantagens, Tem Fortes Argumentos De
Vendas. Direto Objetivo.
• Dirige-se às emoções.
• Salienta os efeitos do produto e os efeitos
dos efeitos.
• Qualidades extrínsecas e que influem.
• Criar o desejo pelo produto.
TÍTULO DIRETO TÍTULO INDIRETO
• Seleciona o leitor.
• Informa sobre o produto.
• Expõe uma vantagem.
• Promete um benefício.
• Provoca curiosidade.
• Promete soluções de dificuldade.
• Desperta o interesse.
3. O TÍTULO DEVE
CONTER:
Uma afirmação,
Uma promessa,
Um conselho,
Ser noticioso,
Ser dramatizado,
Fazer comparação,
Criar suspense,
Dar testemunho,
Ser interrogativo,
Ser negativo.
Sancho Mesquita
9. CORPO DO TEXTO:
• vá direto ao assunto.
• Evite superlativos, generalizações e lugares comuns.
• Use linguagem simples.
• Lembre-se que o destaque é no produto, bem ou serviço.
Sancho Mesquita
11. O texto da publicidade impressa não tem de ser
necessariamente ser curto.
A) Pela ótica do “produto” anunciado.
• textos mais longos em campanhas de:
lançamento de Produto;
produto com novo atributo;
produto de alto investimento;
produto de contrapartida a longo prazo ou incerta;
promoção de vendas com mecânica complexa.
• Já textos curtos são comuns em campanhas de:
produto tradicional, consolidado e/ou bem posicionado;
produto de consumo diário.
ALGUMAS TÉCNICAS DE REDAÇÃO
Sancho Mesquita
12. B) Pela ótica do público alvo.
Quanto menor a classe social, menos
texto a peça deve conter.
C) Pela ótica do meio utilizado.
Quanto maior a dispersão do meio,
menos texto a peça deve conter.
Sancho Mesquita
ALGUMAS TÉCNICAS DE REDAÇÃO
14. Vocês poderiam escrever assim:
Com a nova linha de produtos para cama,
mesa e banho das Indústrias Sanidusa, você
tem a possibilidade de aproveitar tudo o
que vida pode oferecer de bom.
Mas é muito melhor ser objetivo,
direto e claro:
Nova linha Sanidusa de cama, mesa e
banho. Aproveite o que a vida tem de bom.
Independente da quantidade de texto, garanta sua
objetividade e clareza.
Sancho Mesquita
15. O Prever Renda é o plano de previdência
complementar ideal para quem deseja
manter seu padrão de vida quando quiser
diminuir o ritmo de trabalho. Com aplicações
mensais por um período determinado, você
acumula recursos que podem ser resgatados
ou transformados em renda mensal para
recebimento como e quando desejar,
observadas as condições contratadas. Ao
aderir ao plano você fica automaticamente
protegido durante o período de contribuição
em caso de morte e/ou invalidez, dependendo
das coberturas que você escolher. Você decide
entre as modalidades PGBL e VGBL, de
acordo com o seu tipo de declaração de
Imposto de Renda e o regime tributário
Progressivo ou Regressivo. Você pode
escolher os fundos de investimento de acordo
com o seu perfil: conservador (100% Renda
Fixa) ou moderado (30% Renda Variável e
70% Renda Fixa).
O Prever Renda é o plano de previdência
complementar ideal para quem deseja manter seu
padrão de vida quando quiser diminuir o ritmo de
trabalho.
Com aplicações mensais por um período
determinado, você acumula recursos que podem ser
resgatados ou transformados em renda mensal para
recebimento como e quando desejar, observadas as
condições contratadas.
Ao aderir ao plano, você fica automaticamente
protegido durante o
período de contribuição em caso de morte e/ou
invalidez, dependendo das coberturas que você
escolher.
Você decide entre as modalidades PGBL e VGBL, de
acordo com o seu tipo de declaração de Imposto de
Renda e o regime tributário Progressivo ou
Regressivo.
Você pode escolher os fundos de investimento de
acordo com o seu perfil: conservador (100% Renda
Fixa) ou moderado (30% Renda Variável e 70%
Renda Fixa).
Independente da quantidade de texto, usem períodos curtos/
paragrafos.
Sancho Mesquita
18. A) Roberto caiu do telhado e morreu.
B) Roberto caiu do telhado, morreu.
C) Roberto caiu do telhado. Morreu.
Ex: Com a nova linha SONY VAIO NR você assiste a filmes, vê fotos,
ouve músicas, trabalha com planilhas, textos e apresentações.
E o melhor: com 2 anos de garantia.
Usem a pontuação de forma estratégica e significativa.
Sancho Mesquita
21. O Grid
Sancho Mesquita
— O grid é o esqueleto de um trabalho. São esquemas
de linhas, colunas e eixos que separam e organizam
os elementos num layout.
22. Opiniões sobre o grid
— Para os simpatizantes:
¡ Fator essencial do projeto visual, possibilitando precisão,
ordem e clareza das informações.
— Para outros:
¡ Oprime a criatividade, limitando o trabalho.
22
23. Regra dos terços
— Tanto na pintura quanto na fotografia é comum o
uso da grid para ajudar a compor visualmente uma
imagem, enquadrando as informações de forma mais
atraente.
23
25. Vantagens
— Clareza:
¡ Permite uma ordem sistemática de leitura, facilitando sua leitura e interpretação
— Eficiência:
¡ Uma vez que a estrutura foi planeada, um designer (ou vários) pode diagramar
rapidamente uma quantidade enorme de informações
— Economia:
¡ É possível planear melhor a utilização de todo o espaço disponível
— Identidade:
¡ A estrutura cria um padrão visual único, dando personalidade à composição
25
26. Elementos da grid
— Margens
¡ Espaços negativos que indicam
o limite do conteúdo.
¡ Ajudam a estabelecer a tensão
geral dentro da composição.
¡ Pode ser utilizada para:
÷ Orientar o foco
÷ Respirar
÷ Área secundária de informação
26
27. Elementos da grid
— Coluna
¡ Alinhamento vertical que
“bloqueia” a continuação de
informação, contribuindo com a
orientação da leitura.
¡ Ajuda ao designer dividir a sua
composição
¡ A diferença da largura pode da
mais peso a uma informação
27
28. Elementos da grid
— Guias horizontais
¡ Alinhamento horizontal que
ajudam a orientar o sentido da
leitura
¡ Definem pontos de partida
¡ Criam respiração entre as
informações
28
30. Elementos da grid
— Zonas espaciais
¡ Agrupamento de módulos
utilizados para reunir uma
informação
¡ A sua disposição é que definirá
÷ A geometrização (vamos ver à frente)
÷ O agrupamento
÷ A direção visual
30
31. Elementos da grid
— Marcadores
¡ Indicam a posição de
informações secundárias ou
elementos de repetição, como:
÷ Cabeçalho
÷ Rodapé
÷ Nome da secção
÷ Paginação
÷ Créditos
÷ Etc
31
34. Fases de desenvolvimento
1. Avaliação
¡ Analisar as características do conteúdo e a existência de
produção do material.
¡ Deve-se prever problemas de posicionamento, como títulos
muito cumpridos, corte de imagens e espaços vazios por falta
de conteúdo.
¡ A grid deve ser flexível e dinâmica. Uma boa grid deve permitir
infinitas possibilidades para a exploração.
2. Diagramação
¡ Dispor o conteúdo na grid desenvolvida, mantendo a unidade
do conteúdo sem comprometer a composição.
34
35. Tipos de grid
— Retangular
¡ Versão mais simples que
acomoda um longo texto
corrido, como um livro.
¡ Esse tipo causa cansaço,
necessitando criar algo
diferente para estimular a
leitura.
35
37. Tipos de grid
— Colunas
¡ É flexível e pode ser utilizado
para separar diversos tipos de
texto ou mesmo informação.
¡ Pode ser composto por grids
diferentes para cada tipo de
conteúdo.
37
38. Exemplo de 3 colunas
Sancho Mesquita
Text Picture
42. Tipos de grid
— Modular
¡ Originário da Bauhaus e do
Estilo Internacional suíço, é
utilizado para combinar os
vários tipos de grids com o
intuito de unificar o conteúdo.
¡ Quanto mais módulos, maior
a flexibilidade, mas também
aumenta o excesso de
subdivisões, podendo gerar
confusão ou redundância.
42
44. Tipos de grade
— Hierárquico
¡ Ordena as informações de
forma semântica e
ergonômica, dando mais peso
e contraste para uma
informação, variando a área
viva em que ocupa.
¡ É preciso fazer um estudo da
interação ótica entre os
elementos para criar uma
estrutura racional.
44
46. Tipos de Grid
Sancho Mesquita
— No Grid as coisas fazem sentido. E para os
clientes elas precisam fazer sentido. Esse aspeto
pragmático e com bases na razão ajuda os clientes a
entender e a confiar nos recursos do Publicitário/
Designer.
47. Variação e violação
— O designer não deve temer sua grid. A grid é um
guia invisível que existe para orientá-lo e não limitá-
lo.
— Crie esboços e experimente novos arranjos,
principalmente em páginas duplas.
47
50. Desconstruindo a grid
— Nem sempre um conteúdo permite que uma grade
consiga transmitir os valores de uma forma
adequada.
— As vezes, pode ser que necessite extrair um
envolvimento emocional e intelectual mais complexo
do público alvo.
— Uma forma simples de fazer isso é deslocar colunas e
guias para formar uma ilusão tridimensional.
50
54. Alinhamentos
Sancho Mesquita
Alinhado à esquerda. Estável, bom para longos
textos.Porém criam os famosos dentes que, em
contraste ao espaço negativo, acabam por se tornar em
elementos visuais.
56. Alinhamento
Alinhado à direita –
Traz algo ousado à peça, pois é
mais raro que os outros. Porém é
ruim para textos longos, pois
causa cansaço visual.
57. Alinhamento
Justificado: Ideal para um grid de colunas, pois a
mancha tipográfica define visualmente os
limites da coluna.
¡ Porém pode criar caminhos de um rato se não
houver espaço para um número confortável de
caracteres por linha.
¡ Em última instância, você pode tentar ajustar “na mão”,
brincando com o kerning e com o tracking.
58. Alinhamento
Viúvas- Tomem cuidado com as temidas
Viúvas.
÷ Elas são as palavras que sobram, sozinhas, na última linha
da caixa de texto. Agem como ruído, além de correrem o
risco de passarem despercebidas.
59. Tipo e largura das colunas
O comprimento das linhas está relacionado à largura
da coluna de texto, o tamanho do tipo e fonte
escolhida.
Procurem uma medida
que inclua entre 60 a
75 caracteres.
60. Tipo de fonte
Fontes condensadas: muitas foram pensadas de
modo a ajustarem-se a colunas de texto estreitas.
61. DINÂMICA do LAYOUT
Sancho Mesquita
— Layout, seja em formato
impresso ou Web, exige um
equilíbrio hábil de diversos
elementos visuais de todo o
projeto .Várias páginas, e às
vezes vários documentos,
devem ser integrados uns com
os outros através da repetição,
vários visuais relacionados
com os temas conceituais.
62. O equilíbrio do layout
Sancho Mesquita
— O projeto do layout é um ato de
equilíbrio em dois sentidos. Primeiro,
ele relaciona os diversos elementos
sobre uma página impressa de uma
forma que comunique e tenha um
apelo estético.
— Idealmente, o forma melhora a
comunicação, não importa o estilo que
se usa. A figura7-2 usa distribuição de
textos para ilustrar o medo de voar e
tudo que ele simboliza. Cada elemento
na Página afeta a forma como os
outros elementos são percebidos.
Layout não é simplesmente a adição
de fotografias, tipo de texto, tipo de
exibição, ou obras de arte. É uma
integração cuidadosamente
equilibrada de elementos.
63. Equilíbrio
Alinhamento
esquerdo
¡ Padrão de leitura ocidental
¡ As pessoas reconhecem com
mais naturalidade
63
Alinhamento
Direito
§ Algumas pessoas
interpretam como irregular
Alinhamento
Centralizado
§ Se for para centralizar, faça
com que seja óbvio
A l i n h a m e n t o J u s t i f i c a d o
§ Algumas pessoas tendem a ter uma visualização bloqueada
do conteúdo, forçando o enquadramento de forma geométrica.
§
§ Só utilizem esse tipo de alinhamento se a distância entre as
palavras obedecerem a regra da entrelinha, evitando gerar
espaços vazios entre as palavras.
64. O equilíbrio do layout
Sancho Mesquita
— Um artista do layout deve selecionar uma fonte
apropriada a partir da grande variedade disponível.
— O formato, tamanho e contraste valor dos elementos
tipográficos deve ser intimamente relacionados com
fotografias explicativas e ilustrações.
— Layout pode ser o ato de equilíbrio mais difícil que
um designer é sempre chamado a desempenhar.
65. O equilíbrio do layout
Sancho Mesquita
— Um bom relacionamento entre figura e fundo é
essencial. A elaboração cuidadosa de uma página
com fundo branco dá coesão e unidade das figuras
ou dos elementos colocados.
— Em caso de não sobrar espaços vazios o projeto deve
ser redesenhado porque o espaços do fundo branco
funciona como uma parte ativa, participando no
design.
66. O equilíbrio do layout
Sancho Mesquita
— Há duas formas principais de equilíbrio visual:
¡ simétrica e assimétrica
71. EQUILÍBRIO SIMÉTRICO
Sancho Mesquita
— Como é que o equilíbrio simétrico funciona num
layout?
¡ Não é prático para todos os clientes e designs
¡ Pode ser aplicado aos layouts centralizando-se o conteúdo
ou organizando-o proporcionalmente em colunas
72. EQUILÍBRIO ASSIMÉTRICO
Sancho Mesquita
— Em vez de preocupar-se com imagens reflexas em
ambos os lados do layout, o balanço assimétrico
envolve objetos de diferentes tamanhos, formas,
tonalidades ou posicionamento.
75. Harmonia
— O cérebro tende a perceber mais rápido e fácil as
formas organizadas (Pregnância, Leis da Gestalt).
— A pregnância de uma forma pode ser medida de
acordo com sua:
¡ Legibilidade
¡ Compreensão
¡ Máximo de clareza possível
— Sua utilização pode ser aplicada estrategicamente
como recurso de narrativa para controlar a leitura
75
77. Tamanho e proporção
Sancho Mesquita
— Este tipo de equilíbrio a exige difícil
sensibilidade para proporção, a
organização de várias coisas em
numa relação entre o tamanho, o
grau e a quantidade ou.
— Os artistas têm compreender a
importância das relações de
tamanho à séculos.
— O Partenão expressa o sentido de
proporção dos gregos. Foi baseado
num princípio matemático que veio
a ser conhecido como Secção de
ouro. No 15 século o pintor e
gravador Albrecht Dürer utilizou a
secção de ouro para analisar e
construir o seu alfabeto.
78. Tamanho e proporção
Sancho Mesquita
— Uma divisão e de uma
página em harmonia com
umas e outras áreas é o
coração de todo o projeto
de layout.
— Emil Ruder, um influente
designer suíço tipográfico
Internacional, do século
20, construiu uma série de
páginas com as suas áreas
em harmonia.
79. Proporção
— Para manter o equilíbrio, é importante que as áreas
com conteúdos tenham o mesmo volume visual de
informação.
79
80. Agrupamento
— Conjuntos de elementos relacionados mediante sua
hierarquia de informação, levando em consideração
os seguintes critérios:
¡ Proximidade: Tendemos a agrupar aqueles objetos que estão
próximos, mais pertos entre si.
¡ Semelhança: Tendemos a agrupar os elementos iguais ou
parecidos.
¡ Continuidade: A nossa mente tende a agrupar aqueles
elementos que têm uma continuidade significativa.
¡ Simetria: Tendemos a agrupar os elementos para que
apareçam ordenados formando figuras conhecidas.
80
81. UNIDADE
Sancho Mesquita
— É a forma com que os diferentes elementos de uma
composição interagem.
— A unidade num layout pode ser empregada de duas
formas: proximidade e repetição.
84. Grafismos
— São elementos visuais que ajudam a comunicar uma
mensagem.
¡ Elementos gráficos simples: pontos e linhas de todo tipo
(livres, retas, quebradas curvas, etc.)
¡ Elementos geométricos, com ou sem contorno:
polígonos, círculos, elipses, ovais, etc.
¡ Tipos: letras de diferentes formas e estrutura, utilizadas para
apresentar mensagens textuais.
¡ Gráficos: logotipos, ícones, etc.
¡ Ilustrações
¡ Fotografias
84
86. 86
Design invisível
— Um bom projeto editorial é aquele que conduz os olhos dos leitores sem se
tornar o elemento principal.
— Deve existir um equilíbrio entre a informação visual e a informação textual.
87. 87
Geometrização
— Ênfase nos pontos de visão direta e visão periférica com as informações
principais da matéria.
— A fotografia tem uma grande importância no traçado geométrico de uma
página.
— Os olhos das pessoas caminham pela página de acordo com a força visual de
cada elemento apresentado na diagramação.
— Esse traçado geométrico feito, inconscientemente, pelos olhos transmite ao
cérebro informações de caráter sinestésico, além de facilitar ou dificultar o
entendimento geral.
91. FOTOGRAFIA num layout
Sancho Mesquita
— Design de página pobre
pode fazer uma fotografia
bonita perder todo o seu
impacto e recurso. Por
outro lado, uma fotografia
pobre pode ser reforçada
por um bom design.
— Aqui ficam umas dicas de
como colocar uma foto na
composição do layout.
92. Direção Visual
— Diagramação que conduz a leitura de um conteúdo
de forma controlada como elemento de narrativa.
— O intuito é direcionar o olho da pessoas para pontos
estratégicos e dar uma sensação de movimento.
92
95. Direção Visual
— Diagramação que conduz a leitura de um conteúdo
— Diagonal
— Triangular ou pirâmide
— S
— Z
— L ou Ângulo reto
— Circulo
— Cruz
95
96. Movimentos óbvios de narrativa visual
— Diagonal
¡ Os olhos seguem uma
vértice por pontos opostos
¡ Gera uma linha imaginária
que divide a composição
¡ Deve-se evitar a igualdade
excessiva
96
97. Movimentos óbvios de narrativa visual
— Triangular ou pirâmide
¡ Aplicada em composições
simétricas, com peso e
solidez marcados na base
¡ Assegura unidade do
conjunto
¡ Estabiliza o equilíbrio
97
98. Movimentos óbvios de narrativa visual
— S
¡ Sugere ação e graça
¡ Permite uma leitura em
etapas
¡ Se houver massas muito
concentradas e distantes
(sem unidade) provoca uma
dispersão visual na leitura.
98
99. Movimentos óbvios de narrativa visual
— Z
¡ Possui um movimento
vigoroso e definitivo
¡ Similar a movimentação em
S, mas com mais intensidade
e velocidade na leitura
99
100. Movimentos óbvios de narrativa visual
— L ou Ângulo reto
¡ Utilizadas para indicar algo
¡ Relaciona diretamente um
objeto para a informação
¡ O movimento é muito mais
vigoroso, por isso, deve-se
tomar muito cuidado com a
unidade, pois a leitura pode
conduzir para fora da
comunciação
100
101. Movimentos óbvios de narrativa visual
— Cruz
¡ Utilizada para separar poucos
elementos, aproveitando
melhor o espaço
¡ Sugere dinamismo e
modernidade
101
Ad layout - 3
Dennis Wang (dennisong)
http://dennisong.deviantart.com/
102. Movimentos óbvios de narrativa visual
— Círculo
¡ Cria uma sensação de fluxo
¡ Possibilita uma sequência de
leitura
¡ Relaciona elementos a um
tema central
102
magazine-converse
Derrick Fong (derrickfong)
http://derrickfong.deviantart.com/
103. Ritmo
— Movimento, massa e harmonia podem sugerir ritmo, tornando a leitura
de alguns elementos mais rápidos ou lentos.
— Podem ser pontuados por:
¡ Linha
¡ Massa
¡ Tom
¡ Cor
¡ Texto
— É utilizado para manipular a leitura, oferecendo um “caminho”
confortável e racional, orientando os olhos pelos pontos de interesse.
103
104. Impressões do ritmo
— Quando traçam uma linha imaginária linear, podem
sugerir sensações durante a leitura.
¡ Retas sugerem força
¡ Linhas horizontais sugerem calma ou harmonia
¡ Linhas verticais sugerem elevação ou sublimidade
¡ Curvas sugerem ação, energia, sensualidade e graça
— Essas sensação são importantes porque
impressionam e ajudam a fixar a comunicação na
memória.
104
106. Ritmo dinâmico
— Composição que
impõem um ritmo
diferenciado
combinando cores,
linhas ou formas.
— O tempo de leitura varia
de acordo com a ênfase
desejada.
106
Workshop PTK Undiksha 2011
Herry Sucahya (herryC)
http://herryc.deviantart.com/
107. Ritmo estacionário
— Relacionada as leis
fundamentais da
decoração.
— O objetivo é fazer com
que o olho se fixe num
conteúdo, aumentando
seu tempo de leitura de
forma estratégica.
107
Visual Magazine Cover
Cristhian (burnsflipper)
http://burnsflipper.deviantart.com/
108. Ritmo Visual
Sancho Mesquita
— Ritmo visual é baseado na repetição de
formas, valores, cores e texturas.
— A recorrência de formas e o
espaçamento entre elas estabelece um
padrão ou ritmo.
— Pode ser alegre e lírico ou solene e
digna.
— Na figura representada o artista repetiu
as formas da água, nas arvores e no o
céu vibrante com energia. o pássaro e o
barco e reforçam-se mutuamente,
levando nossos olhos numa corrida em
direção ao canto inferior direito da
composição, enquanto que os
triângulos arredondados de veleiros
(em cores primárias) criam um
contraponto ao ritmo primário.
109. Ritmo Visual
Sancho Mesquita
— O espaço entre letras e
palavras podem estabelecer
um movimento tipográfico de
ritmos variados, como podem
mudar o valor e tamanho.
— O layout total da página é
outra oportunidade para
formar um padrão rítmico. O
tipo de linhas pode formar
um ritmo de pausas de
silêncio, de saltos, de subidas
e descidas lentas. Uma
variedade infinita de ritmos
podem ser criados desta
maneira.
110. Ritmo Visual
Sancho Mesquita
— O espaço e o tamanho das
fotografias podem
intercalar com a tipografia.
— Um ritmo alternado pode
reservar uma pagina
direita para uma fotografia
de pagina inteira enquanto
a esquerda é reservada
para pequenos elementos e
textos.
— Alterar numa maneira
regular é centro de um
ritmo progressivo
111. A COR
Sancho Mesquita
— Este é um elemento básico da linguagem visual que
merece um estudo maior, descrevendo seus aspetos,
características, composição e classificação básicas.
Ao longo da história, teóricos e artistas tentaram
explicar a natureza da cor e como o ela ocorre
enquanto fenômeno percebido pela visão
112. A COR
Sancho Mesquita
— As cores principais do espectro luminoso visível
obtido através da decomposição da luz branca são:
vermelho, laranja, amarelo, verde, azul e violeta.
Estas cores podem ser observadas na natureza na
forma do arco-íris, com as gotículas de água
suspensa na atmosfera funcionando como prismas
para a decomposição da luz branca.
113. A COR
Sancho Mesquita
— A cor, enquanto fenômeno físico, possui leis naturais
que a regem, e, enquanto fenômeno fisiológico,
possui características identificáveis quanto ao modo
como é percebida pelo olho humano.
— De acordo com a perceção, as cores possuem três
dimensões: matiz(croma), saturação (pureza relativa
da cor) e brilho (valor tonal).
115. A saturação
Sancho Mesquita
— A saturação é a pureza relativa da cor ou a
intensidade da sua presença, indo da presença
máxima do seu matiz até um cinza neutro.
117. Síntese aditiva.
Sancho Mesquita
— As cores são divididas em cor luz e cor
pigmento, cada qual com uma classificação para os
diferentes matizes.
— Para os que trabalham com cor-luz (como na
televisão ou no cinema), as primárias
são: vermelho, verde e azul-violeta. A
mistura dessas três luzes coloridas
produzem o branco, denominando-se
o fenômeno síntese aditiva.
118. Síntese subtrativa –cor pigmento opaco
Sancho Mesquita
— Para o químico, o artista e todos que trabalham com
substâncias corantes opacas (cores-pigmento) as
cores primárias são o vermelho, o amarelo e o azul. A
mistura das cores-pigmento vermelho, amarelo e
azul produz o cinza neutro por síntese subtrativa.
119. Síntese subtrativa –cor pigmento transparente.
Sancho Mesquita
— Nas artes gráficas, pintura em aquarela e para todos
que utilizam cor-pigmento transparente, ou por
transparência em retículas, as primárias são o
magenta, o amarelo e o ciano. A mistura dessas três
cores também produz o cinza neutro por síntese
subtrativa.
120. Cores complementares
Sancho Mesquita
— Para entendermos as cores complementares
devemos deixar claro que as cores primárias
fundamentais são indivisíveis no campo percetivo
visual: vermelho, azul e amarelo. As complementares
derivam da relação destas três cores fundamentais.
121. Cores complementares
Sancho Mesquita
— O azul mais o vermelho originam o violeta ou roxo,
que é uma cor secundária por ter sido obtida da
combinação de duas primárias em igual porção.
— A cor amarela não participou desta combinação
logo, a cor violeta ou roxo e a cor amarela são
complementares. Assim, o verde é o
complementar do vermelho, e o
laranja é complementar do azul e o
roxo é complementar do amarelo.
Círculo cromático
122. Jogo de cores
Sancho Mesquita
— As cores têm forte influência sobre as pessoas.
Animam, relaxam, provocam emoções boas e más.
As cores quentes aumentam o apetite nas pessoas,
não é à toa que as lanchonetes preferem os tons de
vermelho, laranja e amarelo na decoração. Já as
chamadas cores frias têm efeito inverso.
123. Principais características da cor
Sancho Mesquita
— Cores análogas– cores vizinhas no círculo cromático.
— Cores complementares– cores diametralmente
opostas no círculo cromático
125. Principais características da cor
Sancho Mesquita
— Cores primárias – cores puras, não se formam da
mistura de outras cores (azul, vermelho e amarelo).
— Cores secundárias – resultam da mistura de duas
cores primárias.
126. Principais características da cor
Sancho Mesquita
— Cores terciárias – resultam da mistura de uma cor
primária com uma secundária.
— Cores neutras – não existe predominância de
tonalidades quentes ou frias (cinzas, bege, marrons,
preto e branco).
127. Principais características da cor
Sancho Mesquita
— Contraste de cores - o contraste é o efeito produzido
pela oposição entre as cores, podendo ser:
— Complementar – resultada aplicação de cores
opostas no círculo cromático, ou
— Simultâneo – obtido pela aplicação de uma mesma
cor sobre fundos diferentes e que provoca aparente
mudanças de tonalidade, devido à interferência da
cor de fundo sobre a cor aplicada.
128. Principais características da cor
Sancho Mesquita
— Monocromia – pintura feita utilizando apenas uma
cor (matiz)com gradações
(variações) de tonalidades.
— Policromia – pintura realizada utilizando-se várias
cores(matizes)
129. A reprodução da cor
Sancho Mesquita
— Há duas formas de criarmos cor, uma através
da luz e outra através da tinta. A primeira é
conhecida como RGB e consiste na mistura das
cores aditivas e a segunda como CMYK e consiste na
mistura das cores subtrativas. Em artes gráficas à
medida que se vai avançando no processo de
reprodução as limitações vão aumentando e a gama
de cores possíveis de reproduzir vai reduzindo.
130. CMYK
Sancho Mesquita
— CMYK é a sigla do sistema de cores formado por Ciano (Cyan),
Magenta (Magenta), Amarelo (Yellow) e Preto (black).
— A partir destas cores primárias Ciano, Magenta e Amarelo
obtemos todas as outras cores, porém só CMY não reproduz
fielmente tons mais escuros, sendo necessária a aplicação de
preto.
CMYK é o sistema mais utilizado pelas gráficas para a
produção de material impresso: revistas, cartões de visita,
panfletos, etc.
131. RGB
Sancho Mesquita
— RGB é a sigla do sistema de cores
formado por Vermelho (Red), Verde
(Green) e Azul (Blue).
— O propósito principal do sistema
RGB é a reprodução de cores em
dispositivos eletrônicos como
monitores de TV e computador,
“datashows”, scanners e câmeras
digitais, assim como na fotografia
tradicional.
132. Pantone
Sancho Mesquita
— Pantone é um sistema de cores prontas, em
muitos casos, apenas com a mistura das quatro
cores básicas (CMYK) não conseguimos obter a
tonalidade que desejamos. Pois, o CMYK tem uma
limitação para representar todas as cores que o
olho humano consegue enxergar.
— Com o Pantone você escolhe a cor exata que você
irá trabalhar, como por exemplo, um vermelho
especial que faz parte da identidade visual do seu
cliente. Este processo é ideal para evitar variações
de cores na impressão.
— Existem vários Pantones entre eles os
metalizados, que o CMYK não consegue
reproduzir com exatidão. Aquele dourado ou
prateado que você já deve ter visto em alguma
capa de livro.
133. Resumindo
Sancho Mesquita
— É luz e é projetado: RGB
— É tinta e impresso: CMYK
— É tinta, é impresso e é cor especial: Pantone.
134. Como escolher CMYK ou PANTONE
Sancho Mesquita
— Escolher entre CMYK e PANTONE depende de vários fatores:
1. Se o trabalho tiver fotos a cores, será obrigatório imprimir em CMYK;
2. Se o trabalho não tiver fotos a cores pode imprimir-se na mesma em
CMYK (sendo que as cores são obtidas com a mistura CMYK após a
impressão), mas por vezes, há vantagens em imprimir com PANTONES:
¡ se o trabalho tiver só duas ou três cores é preferível fazer as tintas respetivas e imprimir
com essas cores, (cores diretas) poupando uma ou duas cores na tiragem e com a vantagem
de evitar os problemas de registro da impressão CMYK.
¡ Se o trabalho tiver fotos a cores e uma ou duas cores “rigorosas” (por exemplo, num
logotipo, com indicação das respetivas referências PANTONE), então o trabalho terá que ser
impresso em CMYK, para a reprodução das fotos a cores, com acréscimo das cores
PANTONE. Será, então, um trabalho com 5 ou 6 cores.
— No entanto, isto é válido para impressão OFFSET. Em impressão digital,
por vezes não é possível imprimir com outras cores sem ser as de CMYK,
necessitando converter todas as cores para CMYK.
135. Em quais casos utilizamos o PANTONE?
Sancho Mesquita
— A PANTONE pode ser utilizada nas seguintes
situações:
¡ Quando desejam trabalhar com uma imagem colorida (CMYK)
e mais uma cor especial que o CMYK não consegue
representar.
¡ Quando querem fazer um impresso a uma, duas ou três cores
apenas. Então deve-se usar cores especiais para não utilizar
CMYK e com isso aumentar os custos do processo.
¡ Quando vão imprimir um logotipo de uma empresa que só
permite ser impresso na cor específica do logo.
¡ Existem vários Pantones, entre eles os metalizados. Estes o
CMYK não passa nem perto, aquele dourado que vocês com
certeza já viram em alguma capa de revista, por exemplo.
136. EXERCÍCIO
Sancho Mesquita
— Analise os seguintes layout de páginas e aplicativos
para iPhone, destacando suas características quanto
ao equilíbrio e unidade.
161. Glossário
Sancho Mesquita
— Acabamento: Série de operações posteriores à impressão que convertem as folhas impressas no produto
— final.
— Alvura: O quanto um papel é branco.
— Arte-fínal: Transformação de textos e fotos em originais.
— Artes Gráficas: Conjunto de ações visando à repetição, com qualidade, de originais e reprodução de
— informações e conhecimento.
— Brndav: Aplicação de retícula no fundo ou em partes de um trabalho gráfico para dar uma tonalidade
— cinza (nos casos das peças em preto-e-branco) ou colorida. Também pode ser usada sobre letras ou
— ilustrações, para dar o mesmo efeito (de cinza ou colorido). Pode ser lisa ou com desenhos. Pode ser
— aplicada em porcentagens de 5% a 95%.
— Birô (ou Bureau): Local onde são processados arquivos originais para reprodução.
— Blend: Passagem suave entre duas ou mais cores, criando eleito de graduação (degrade).
— Boneco: Modelo do impresso acabado.
— Brochura: Sistema de encadernação que utiliza capa flexível, que se cola ao miolo pela lombada.
— C.T.P.: Computer to plate, do computador para a chapa. Sistema de gravação de chapas que não utiliza
— íotolitos.
— Chapado: Área extensa de cobertura de tinta na proporção de 100%.
— CMYK: As quatro cores básicas de impressão. C: Azul Cyan, ou Ciano. M: Magenta. Y: Yellow (Amarelo). K:
— Key (Preto), pois o preto é a cor-chave do processo (em inglês, chave=key).
— Couchê: Papel revestido, liso, e de alta alvura.
— Cromalin: (fem. Diz-se “a prova Cromalin”) - Sistema de prova gráfica desenvolvido pela DuPont, onde a
— prova é obtida pela adição de tinta em pó sobre as retículas.
— Cromos: Fotos para reprodução.
— Cyan: Azul para Artes Gráficas.
— Degrade: Ver Blend.
— Design: Desenho, projeto.
— Designer: Desenhista, projetista.
— Diagramação: Dispor, de acordo com estrutura predeterminada, o que vai ser impresso.
— DTP (Desk Top Publishing): Literalmente, “editoração de tampo de mesa”.
— Editoração eletrônica: Editoração de publicações, obtida por meios eletrônicos (computação).
— Escala: Relativo às cores básicas de impressão, que são as cores de escala (CMYK).
162. Glossário
Sancho Mesquita
— Escanear: Digitalizar (texto, imagem, etc.) por meio de scanner.
— Estocas tifa: Defração da imagem em pontos de frequência modulada. Sistema de reticulagem de originais
— onde a trama de pontos é irregular e com maior concentração de pontos por área (frequência modulada).
— FTP: File Transport Protocol, protocolo de transporte de arquivos. Protocolo para transmissão de arquivos
— pela Internet, com compartilhamento virtual de diretórios entre diferentes usuários.
— Fôlder: Folheto publicitário constituído de uma única folha, com uma ou mais dobras; anúncio de revista
— com uma ou mais dobras; pasta, diretório.
— Formato: Válido para impressos e para arquivos. Para impressos, é o tamanho.
— Fotolito: Filme usado para gravar a imagem para impressão. Cada cor (Cyan, Magenta, Y - amarelo e K -
— preto) usam-se filmes, que gravam as chapas; no processo gráfico obtêm-se sempre quatro fotolitos e quatro
— chapas.
— Fotossensível: Sensível à luz
— Fundo: Área extensa de cobertura de tinta (retícula ou imagem).
— Heliográfica: Cópia de transparências (p. ex., fotolitos) em papel, reveladas por amoníaco.
— Imagesetter: Equipamento que grava arquivos digitais em filmes fotossensíveis através de um laser.
— Imposição: Montagem de páginas em folha inteira, para que, após as dobras, seja respeitada a paginação
— de um impresso.
— Layout: Esboço do impresso, mostrando a distribuição física e tamanhos de elementos como texto,
— gráficos ou Link, linkadas: Vínculo, vinculadas. Informações que estão gravadas junto ao arquivo.
— LWC: (Low Weight Coated - Revestido de baixo peso): Papel de pouca espessura e baixa alvura.
— Magenta: Cor rósea utilizada na escala gráfica; seu nome vem da batalha travada nas cercanias da
— cidade de Magenta (Itália).
— Margem de sangra: Área que se deixa à mais na imagem para corte posterior.
— Máximas: Porcentagens de retícula das imagens impressas entre 76% e 100%.
— Médias: Porcentagens de retícula das imagens impressas entre 16% e 75%.
— Mídia: Meio de comunicação. Mídias de envio (ou transporte): meios para arquivamento e envio de dados
— digitais (disquetes).
— Mínimas: Porcentagens de retícula das imagens impressas entre 1% e 15%.
— Mockup: Modelo do impresso acabado.
— Offset: Sistema indireto de impressão.
— Original: Toda informação (textos e imagens) que será reproduzida.
— PCP: Planejamento e Controle de Produção.
163. Glossário
Sancho Mesquita
— PDF: Portable document formai, protocolo que mantém todas as características do arquivo, compactando-o
— para transmissão.
— Paginação: Sequência de páginas numa publicação, em ordem crescente.
— Paste up: Montagem manual de textos que era feita antes da informatização do processo gráfico.
— Platesetter: Máquina que sensibiliza a chapa através de um laser. Algumas também sensibilizam filmes.
— Pós-Impressão: Acabamento.
— PostScript: Linguagem de representação de dados utilizada para descrever para o dispositivo de
— impressão ou para o monitor o layout final da página a ser impressa.
— Pre-flight de arquivos: Conferência dos arquivos antes do envio para a gráfica ou bureau.
— Pré-impressão: Conjunto de ações gráficas posteriores ao design e anteriores à impressão, para
— tratamento e preparação de originais para gravação de matrizes (chapas) de impressão.
— Prelo: Máquina de provas que simula a impressão Offset.
— Processo: Modo por que se realiza ou executa uma coisa; método, técnica. Em Artes Gráficas, relativo às
— cores básicas do processo de impressão, ou cores de escala (CMYK).
— Retícula: Defração da imagem em pontos de amplitude modulada. Sistema de divisão da imagem em
— pontos onde a trama de pontos é regular.
— RIP: Raster Image Processor, processador de imagens raster (imagens que contêm a descrição de cada
— pixel). O RIP é um programa que traduz as informações de uma página em linguagem de descrição na
— forma de pontos, interpretada pelo dispositivo de gravação de chapas (fotolito ou CTP).
— Sangra (ou sangria): Área que extrapola um formato gráfico, garantindo que não apareçam áreas do
— papel em branco.
— Serifa: Desenho no pé e na cabeça de tipos gráficos criados para facilitar a leitura de textos corridos,
— criando ilusão óptica de continuidade entre letras.
— Tablóide: Impresso comercial publicitário (ou jornal de ofertas).
— Tiragem: Quantidade de impressões.
— UV: Ultravioleta.
— Workflow: Fluxo de trabalho.