A apresentação está carregando. Por favor, espere

A apresentação está carregando. Por favor, espere

Editoração Eletrônica e Diagramação

Apresentações semelhantes


Apresentação em tema: "Editoração Eletrônica e Diagramação"— Transcrição da apresentação:

1 Editoração Eletrônica e Diagramação
AULA 001 Principios de Tipografia

2 Editoração Eletrônica e Diagramação
O que e tipografia? • É a arte, o processo de criação e a classificação do desenho de letras do alfabeto e de caracteres usados para formar as palavras; • É a principal ferramenta de comunicação, que permite dar expressão ao documento, transmitindo instantaneamente uma atmosfera e imagem.

3 Editoração Eletrônica e Diagramação
A tipografia nos envolve em todos os momentos do dia – dos mundanos itens listados nas contas que pagamos, nas etiquetas de alimentos até aos bombardeios de experiências alfabéticas em cartazes, na internet e na TV. Passamos por milhares de mensagens tipográficas todos os dias, a maioria das quais ignoramos ou nem mesmo enxergamos.

4 Editoração Eletrônica e Diagramação
Existe uma crescente valorização de imagens e suas aplicações, mas a palavra escrita continua muito importante para informar e comunicar. A tipografia desempenha um papel muito importante na sinalização. As regras para utilização de tipografia para sinalização podem sofrer algumas alterações em relação às utilizadas para a área editorial, ela precisa ser de rápida compreenssão e legibilidade.

5 Editoração Eletrônica e Diagramação
As tipografias podem ser avaliadas de acordo sua: • Anatomia • Genealogia • Classificação • Composição

6 Editoração Eletrônica e Diagramação
• Anatomia Claro que nenhum designer/publicitário seria demitido de um emprego por se referir à orelha da letra g, por exemplo, como “aquela coisinha bonitinha que sai da parte de cima e que faz um ‘rabinho’”, ou por não saber a diferença entre uma terminal e um remate, mas certamente não custa nada aprender.

7 Editoração Eletrônica e Diagramação
• Anatomia

8 Editoração Eletrônica e Diagramação
• Anatomia

9 Editoração Eletrônica e Diagramação
• Anatomia Bojo = pança ou barriga (olho) Haste = fuste ou poste Barra = Travessão

10 Editoração Eletrônica e Diagramação
• Anatomia Ligação = enlace Volta presente na letra g Espora = rebarba E ainda temos o arco (s | S) e o eixo (o) de uma tipografia.

11 Editoração Eletrônica e Diagramação
• Anatomia A tipografia pode ser apresentada de 3 formas:

12 Editoração Eletrônica e Diagramação
• Anatomia (curiosidade) Caixa alta e baixa derivam da organização dos tipos em caixas de madeira sobre um cavalete, na oficina.

13 Editoração Eletrônica e Diagramação
• Anatomia (curiosidade)

14 Editoração Eletrônica e Diagramação
• Genealogia ou família É um conjunto de tipograficas com as mesmas características estilísticas fundamentais, porém apresentadas com variações de espessura, largura, altura e outros detalhes.

15 Editoração Eletrônica e Diagramação
• Genealogia ou família Algumas destas variações são mais frequentes nas famílias tipográficas e recebem nomes que se tornaram conhecidos pelo público em geral, tais como bold (negrito), light (claro), regular, itálico, condensed, dentre outros.

16 Editoração Eletrônica e Diagramação
• Genealogia ou família

17 Editoração Eletrônica e Diagramação
• Genealogia ou família

18 Editoração Eletrônica e Diagramação
• Classificação Tradicionalmente a tipografia é classificada em 6 grandes grupos: estilo antigo, moderno, serifado, sem serifa, manuscrito/cursivo e decorativas.

19 Editoração Eletrônica e Diagramação
• Classificação Outra forma de classificar os tipos é agrupá-los segundo correntes históricas, esse tipo de classificação leva em consideração os diferentes movimentos tipográficos ao longo do tempo e as suas consequentes transformações estéticas.

20 Editoração Eletrônica e Diagramação
• Classificação Estilo Antigo Baseado na escrita à mão dos escribas, que trabalhavam com uma pena na mão;

21 Editoração Eletrônica e Diagramação
• Classificação Estilo Antigo Exemplos de sensações: antigo, tradição, requinte, confiabilidade, artesanal, sofisticação. Exemplos: Goudy, Times e Palatino.

22 Editoração Eletrônica e Diagramação
• Classificação Estilo Antigo

23 Editoração Eletrônica e Diagramação
• Classificação Moderno Criado em 1700 na Itália, com a evolução das técnicas de impressão mecânica. É derivado do romano clássico, visando uma melhora na legibilidade das letras.

24 Editoração Eletrônica e Diagramação
• Classificação Moderno Exemplos de sensações: solidez, força, robustez, destaque. Exemplos: Bodoni, Times Bold e New Century Schoolbook.

25 Editoração Eletrônica e Diagramação
• Classificação Moderno

26 Editoração Eletrônica e Diagramação
• Classificação Serifado Também conhecido como estilo egípcio, surgiu depois da Revolução Industrial como conceito de propaganda.

27 Editoração Eletrônica e Diagramação
• Classificação Serifado Exemplos de sensações: padronização, seriedade. Exemplos: Clarendon, Memphis e Memphis Bold.

28 Editoração Eletrônica e Diagramação
• Classificação Serifado

29 Editoração Eletrônica e Diagramação
• Classificação Sem serifa Mais conhecido como sans serif, foi elaborada em 1919, pela Escola de Artes Alemã e Ofício de Weimar, Bauhaus. Estética clara legível, letras minúsculas e geométricas com linhas obliquas e verticais, rejeita ornamentos e apresenta grandes numerais e símbolos.

30 Editoração Eletrônica e Diagramação
• Classificação Sem serifa Exemplos de sensações: clean, rigidez, exatidão, inovação. Exemplos: Antique Olive, Formata, Gill Sans, Sans serif, Arial, Franklin Gothic.

31 Editoração Eletrônica e Diagramação
• Classificação Sem serifa

32 Editoração Eletrônica e Diagramação
• Classificação Manuscrito Simulam letras cursivas, como se fossem feitas a mão. Possui vários estilos que se apropriam de alguns elementos de outros tipos.

33 Editoração Eletrônica e Diagramação
• Classificação Manuscrito Exemplos de sensações: realidade, verídico, artesanal.

34 Editoração Eletrônica e Diagramação
• Classificação Manuscrito

35 Editoração Eletrônica e Diagramação
• Classificação Decorativo Apresenta variações exageradas de peso e tamanho, contornos algumas vezes arrojados e ornamentos. Criada em paralelo ao estilo de design Vitoriano (1820).

36 Editoração Eletrônica e Diagramação
• Classificação Decorativo Exemplos de sensações: luxo, encanto, requinte, riqueza, extravagância, excesso.

37 Editoração Eletrônica e Diagramação
• Classificação Decorativo

38 Editoração Eletrônica e Diagramação
• Classificação

39 Editoração Eletrônica e Diagramação
• Classificação CUIDADO AO SELECIONAR UMA TIPOGRAFIA!!!

40 Editoração Eletrônica e Diagramação
• Classificação • O que vai ser lido? • Por quem vai ser lido? • Em que vai ser aplicado o texto? • Onde vai ser lido?

41 Editoração Eletrônica e Diagramação
• Classificação • A personalidade da fonte; • A natureza da ideia/conceito; • O perfil do cliente-anunciante; • O Público-alvo; • A Legibilidade.

42 Editoração Eletrônica e Diagramação
• Composição Esta é a atividade que ocupa maior tempo do designer – de maneira bem direta, dispor as letras em palavras, palavras em frases, frases em parágrafos e parágrafos em layout. Alguns princípios e semânticaa respeito de espaçamento, organização e uso adequado de pontuação são imperativos para uma composição competente.

43 Editoração Eletrônica e Diagramação
• Composição Alinhamento; Espaço entre linhas (leading); Espaço entre letras/entreletras (tracking); Kerning;

44 Editoração Eletrônica e Diagramação
• Composição Órfãs e Viúvas (Forcas); Pontuação pendente; Pontuação; Legibilidade e Leiturabilidade.

45 Editoração Eletrônica e Diagramação
• Composição » Alinhamento

46 Editoração Eletrônica e Diagramação
• Composição » Espaço entre linhas (leading) Também chamado de entrelinha, é o espaço colocado entre duas linhas de texto. O inglês ‘leading’ vem das tiras de chumbo (‘lead’) que eram usadas para este efeito.

47 Editoração Eletrônica e Diagramação
• Composição » Espaço entre linhas (leading) A medida da entrelinha é igual ao corpo mais o espaço ou, mais corretamente, de linha de base a linha de base.

48 Editoração Eletrônica e Diagramação
• Composição » Espaço entre linhas (leading)

49 Editoração Eletrônica e Diagramação
• Composição » Espaço entre letras (tracking) Também chamado de entreletras, é o espaço total entre cada letra. É possível espaçar as letras de maneira fechada ou mais aberta. Versaletes e maiúsculas se beneficiam de uma espaçamento mais generoso.

50 Editoração Eletrônica e Diagramação
• Composição » Espaço entre letras (tracking) Trata-se de um processo de adicionar ou remover espaço em todo um bloco de texto, ou seja, mexe-se no espaçamento existente em todo o conjunto de letras por igual, seja uma única palavra, frase, parágrafo inteiro.

51 Editoração Eletrônica e Diagramação
• Composição » Espaço entre letras (tracking) Normal, aberto e mais aberto

52 Editoração Eletrônica e Diagramação
• Composição » Espaço entre letras (tracking) O espaçamento entre palavras deve ser o menor possível e sobretudo consistente. Espaço inconsistente cria ‘rios’ no texto, dificultando a leitura. Estes espaços são também conhecidos como ‘dentes de cavalo’ ou ‘janelas’.

53 Editoração Eletrônica e Diagramação
• Composição » Espaço entre letras (tracking)

54 Editoração Eletrônica e Diagramação
• Composição » Espaço entre letras (tracking)

55 Editoração Eletrônica e Diagramação
• Composição » Kerning É o espaço entre duas letras específicas. É ajustado independente do tracking. Cada par de letras tem o seu kerning definido na fonte digital, mas por vezes são necessários ajustes manuais, sobretudo em tamanhos grandes.

56 Editoração Eletrônica e Diagramação
• Composição » Kerning Parte das letras que ‘sai fora’ do bloco para permitir o encaixe de outras letras que caso contrário ficariam demasiado afastadas, opticamente.

57 Editoração Eletrônica e Diagramação
• Composição » Kerning

58 Editoração Eletrônica e Diagramação
• Composição » Órfãs e viúvas (Forcas) • Órfãs: ocorrem quando a primeira linha de um parágrafo começa no final de uma página ou coluna. • Víuvas: ocorrem quando a última linha do parágrafo é a primeira de uma coluna ou página. • Forcas: são sílabas de palavras hifenizadas que ficam soltas no final ou no inicio de uma coluna ou página.

59 Editoração Eletrônica e Diagramação
• Composição » Órfãs e viúvas (Forcas)

60 Editoração Eletrônica e Diagramação
• Composição » Pontuação pendente

61 Editoração Eletrônica e Diagramação
• Composição » Pontuação pendente

62 Editoração Eletrônica e Diagramação
• Composição » Pontuação • Aspas: “aspas” • Primo: ‘primo’ | 15’ (minutos) | 30’’ (segundos) • Hífen: neo-acadêmico | pre-pa-ra!

63 Editoração Eletrônica e Diagramação
• Composição » Pontuação • Travessão-n: aberto das 13:00 – 15:00 (alt ) • Travessão-m: Então — timidamente — beijaram-se. (alt ) • Reticências: E … Ação! (alt )

64 Editoração Eletrônica e Diagramação
• Composição » Legibilidade Refere-se ao aspecto geral de cada letra e a habilidade do leitor em distinguir uma das outras. • C – G • I – l – 1 • c – e • E – F • i – j • rn – m • N – H • b – h • Ti – T1

65 Editoração Eletrônica e Diagramação
• Composição » Legibilidade A legibilidade deve manter um equilíbrio entre: • Necessidades expressivas; • Tamanho do texto; • Corpo de fonte; • Adequação à mídia.

66 Editoração Eletrônica e Diagramação
• Composição » Leiturabilidade Refere-se a como o tipo se comporta em um texto. • Tipografia de leitura contínua ou de longa durabilidade (funcionais) • Tipografia efêmera ou de impacto (características) Funcionais = Livros | Jornais | Revistas | Manuais | Hipertexto • Caracteristicas = Cartazes | Capas | Logotipos | Embalagens | Anúncios | Sinalização

67 leitura contínua ou de longa durabilidade

68 leitura contínua ou de longa durabilidade

69 efêmera ou de impacto

70 efêmera ou de impacto

71 13 REGRINHAS BÁSICAS PARA O USO CORRETO DE TIPOGRAFIAS

72 Editoração Eletrônica e Diagramação
01. Para uma legibilidade máxima, escolha tipos clássicos e testados ao longo do tempo, com um “cadastro” comprovado.

73 Editoração Eletrônica e Diagramação
01.

74 Editoração Eletrônica e Diagramação
02. Um texto composto somente em caixa-alta atrasa muito a leitura. Utilize caixa-alta e baixa para obter a melhor leiturabilidade possível.

75 Editoração Eletrônica e Diagramação
03. Tenha o bom senso de não utilizar demasiados tipos diferentes ao mesmo tempo. A simplicidade é mais importante que o exibicionismo.

76 Editoração Eletrônica e Diagramação
03.

77 Editoração Eletrônica e Diagramação
03.

78 Editoração Eletrônica e Diagramação
04. Realce os elementos no texto com sutileza e sem perturbar o fluxo da leitura. No design, menos é mais.

79 Editoração Eletrônica e Diagramação
04.

80 Editoração Eletrônica e Diagramação
05. Utilize comprimentos de linha adequados. As linhas demasiado curtas ou compridas prejudicam o processo de leitura. Pois os olhos devem viajar pelas linhas, captando as palavras em grupos de três ou quatro de cada vez e saltando de linha sem esforço.

81 Editoração Eletrônica e Diagramação
05.

82 Editoração Eletrônica e Diagramação
05.

83 Editoração Eletrônica e Diagramação
06. Os títulos devem ser maiores que o corpo do texto e surgir acima deste. O estabelecimento de uma hierarquia visual é importante para comunicar claramente.

84 Editoração Eletrônica e Diagramação
07. O texto principal deve ser de um tamanho legível para o meio em que é aplicado. Texto demasiado pequeno ou demasiado grande torna-se cansativo e difícil de ler. A distância e o tempo de leitura é um dos fatores mais importantes a ter em mente.

85 Editoração Eletrônica e Diagramação
08. Deve utilizar-se um tipo de letra standardizado. Letras decorativas e de pobre legibilidade devem ser escassamente usadas e nunca para texto corrido.

86 Editoração Eletrônica e Diagramação
08.

87 Editoração Eletrônica e Diagramação
09. O espaço entre pares de letras, letras numa frase e palavras deve ser consistente. O texto deve criar linhas fáceis de seguir pelo olhar, letras ou palavras demasiado juntas ou afastadas criam distração e impedem a leitura.

88 Editoração Eletrônica e Diagramação
10. Elementos de ênfase devem ser discretos. O itálico e o negrito são formas preferenciais de dar ênfase a uma passagem, pois não quebra o ritmo de leitura e não deixa de transmitir a enfatização pretendida.

89 Editoração Eletrônica e Diagramação
11. Apenas se deve recorrer à justificação completa (esquerda e direita), quando temos controle total sobre kerning, tracking e hifenização, caso contrário, deve alinhar-se à esquerda. A justificação total em sistemas que não suportam controle tipográfico do espacejamento criam espaços e perdem a consistência.

90 Editoração Eletrônica e Diagramação
12. As linhas não devem ser curtas, nem longas demais. A linha ideal tem 66 caracteres* (incluindo espaços), porque ajuda a ler rapidamente e permite uma eficiente mudança de linha (fim de uma linha para o início da linha seguinte). *50 a 80 caracteres é aceitável.

91 Editoração Eletrônica e Diagramação
12. Se a linha for mais curta, deve reduzir-se o tamanho da letra, se for mais longa, deve aumentar-se o tamanho da letra. Se o leitor sentir, fisicamente, os olhos a andar da direita para a esquerda no fim de uma linha... está longa demais.

92 Editoração Eletrônica e Diagramação
13. Quando possível, deve indentar-se os parágrafos. O primeiro parágrafo de uma página não precisa de indentação.

93 Editoração Eletrônica e Diagramação
13.

94

95 estudiomultifoco.com.br/ftc
Editoração Eletrônica e Diagramação estudiomultifoco.com.br/ftc


Carregar ppt "Editoração Eletrônica e Diagramação"

Apresentações semelhantes


Anúncios Google