[tutorial flopez] p.5 - vetor etc

Page 1

puc_rio v.3.2 (2023) parte 5 vetor
ref +

_intro

o é um resumo das aulas de conteúdo tutorial flopez em programação visual apresentadas às turmas de projeto e tipografia II do curso de design da Puc-Rio.

este material tem finalidade estritamente acadêmica. diversos casos, exemplos e comentários feitos em sala de aula não foram incluídos neste compacto, que tem por objetivo reforçar de forma remota os principais pontos do conteúdo teórico das aulas.

as imagens que não pertencem ao acervo pessoal do autor foram encontradas na internet e estão aqui por uma boa causa (sempre que possível com créditos).

bom proveito, Fabio Lopez

3
(versão 3.2 - 2023)
tutorial flopez

vetor conteúdo: definição vetorização funcionamento construção

referências bibliografia links sobre o autor agradecimentos

4 tutorial
flopez

tutorial flopez

_vetor

5

_definição

as letras em uma fonte digital são constituídas por segmentos de curva gerados a partir de complexas equações matemáticas. estes segmentos, quando fechados, dão origem ao que chamamos de contorno vetorial das letras.

com o auxílio de softwares esses contornos podem ser ampliados ou reduzidos sem alterar sua forma, o que permite que uma letra tenha sempre a mesma aparência quando reproduzida. (scalable outlines)

o vetor matemático é a matéria-prima da tipografia digital.

6
x² x³ x = at³ + bt² + ct + d / x = at² + bt + c vetor
tutorial flopez

_definição

o vetor se parece a uma linha tênsil unida por pontos e encurvada por meio de alavancas. classificação quanto a localização e manuseio dos pontos:

direção

cúspide (cusp) suave (smooth) simétrico pontos da curva (on-curve)

end point

tangente

/ bézier control points bcp * (off-curve) handles (alavancas para controlar as curvas)

tutorial flopez

x x 7
*baseiam-se em técnicas algébricas desenvolvidas por Pierre Bézier na França, nos anos 1960 e 70.
end point vetor

_vetorização

a (construção de vetores) é uma etapa extremamente importante vetorização no processo de criação de uma fonte digital. na maioria das vezes essa tarefa consiste na de um desenho analógico. reinterpretação alguns programas automatizam essa etapa do trabalho, exigindo que designers tenham um bom controle sobre as definições técnicas da ferramenta responsável por ou características do desenho analógico na versão vetorial. preservar eliminar

original analógico:

fidelidade x reinterpretação

baixo nível de ruído alto nível de ruído

8
vetor
tutorial flopez

_funcionamento

noções básicas: linha/forma . dentro/fora

2 formas combinadas (interseção)

linha forma

o contorno vetorial deve estar completamente fechado para (path)

o computador interpretar um conjunto de vetores como e não forma como , permitindo assim o seu preenchimento. linha

quando combinamos duas formas que se interceptam inteira ou parcialmente o computador interpreta a interseção como um limite interno da forma, e essa parte permanece vazada. (não preenchida)

dentro fora
forma linha
dentro fora dentro 9 vetor
fora
tutorial flopez

_construção

1. quantidade: nem de menos, nem de mais > apenas o necessário.

a. poucos pontos > poucas curvas longas. gera alavancas muito sensíveis controlando curvas muito tensionadas. controle prejudicado.

b. muitos pontos > muitas curvas curtas além de constituir informação inútil, o excesso de pontos e alavancas torna a manipulação das curvas muito mais complexa, criando grande possibilidade de irregularidades no desenho.

10 vetor tutorial
a. b.
ok!
flopez
11 tutorial flopez vetor https://foundrysupport.monotype.com
12 vetor tutorial
flopez

_construção

2. localização: extremidades e paralelismo

identifique as horizontais e verticais do seu extremidades desenho: esses locais necessitam de pontos (on-curve).

(bcp) nas extremidades verticais os pontos de controle estarão sempre horizontalmente; enquanto nas extremidades alinhados horizontais os pontos estarão alinhados verticalmente.

regra do paralelismo

tutorial flopez

13
incorreto correto alinhado horizontalmente alinhado verticalmente vetor

_construção

3. sobreposição de curvas: overlapping

overlapping é uma técnica de construção vetorial recomendada e largamente utilizada no type design. trabalhando com estruturas desconectadas e curvas sobrepostas o designer ganha na montagem dos caracteres e na edição de pontos do contorno vetorial. mobilidade este procedimento também permite maior controle sobre a geração automática de variantes tipográficas conhecida como interpolação.

detalhes de construção da fonte Pocket, de Gustavo Soares:

14
vetor
tutorial flopez

_construção

4. similaridade: regra do 1/3 outra prática tradicional no type design é a divisão de curvas em três partes regulares menores e iguais. apesar de não constituir uma exigência técnica, esse procedimento leva a criação de alavancas de tamanhos , distribuindo de maneira (handles) similares equilibrada a influência de cada ponto na curva e facilitando sua manipulação.

a regra do 1/3 é mais uma técnica de refinamento que efetivamente de construção.

15 1/3 1/3 1/3
ok! tutorial flopez vetor
16
tutorial flopez

tutorial flopez

_referências

17

bibliografia sugerida:

tipografia

Pensar com Tipos, Ellen Lupton, ed. CosacNaif

Esse é Meu Tipo, Simon Garfield, ed. Zahar

Elementos do Estilo Tipográfico, Robert Bringhurst, ed. CosacNaif

A Forma Sólida da Linguagem, Robert Bringhurst, ed. Rosari

Sinais e Símbolos, Adrian Frutiger, ed. Martins Fontes

A Linguagem Invisível da Tipografia, Erik Spiekermann, ed. Blucher

Escritas, Espelho dos Homens e das Sociedades, Ladislas Mandel, ed. Rosari

A Herança Escultórica da Tipografia, Norberto Guadêncio Jr., ed. Rosari

Histórias de Alfabetos, Hermann Zapf, ed. Rosari

18
referências tutorial flopez

Designing Typefaces, David Earl, RotoVision

The Education of a Typographer, Steven Heller, Allworth Press

Anatomy of a Typeface, Alexander Lawson, David Godine Publisher

The Stroke - Theory of Writing, Gerrit Noordzij, Hyphen Press

Counterpunch, Fred Smeijers, Hyphen Press

Designing Type, Karen Cheng, ed. Yale University Press

While you're Reading, Gerard Unger, ed. Mark Batty Publisher

About Face: Reviving the Rules of Typography, David Jury, RotoVision

Revista Tupigrafia, Claudio Rocha e Tony de Marco, OTSP Press

Tipografía Latinoamericana, Un Panorama Actual y Futuro, org. Vicente Lamónaca,Wolkowicz Editores

tutorial flopez

19
+
tipografia
referências

referências

+ tipografia

O Design Brasileiro de Tipos Digitais, Ricardo Esteves, ed. Blucher Tipografia Vernacular Urbana, Fátima Finizola, ed. Blucher

Tipografia Digital, Priscila Farias, ed. 2AB

branding

estratégia

gestão

The Brand Gap - O Abismo da Marca, Marty Neumeier, Bookman

Zag, a Estratégia Número 1 das Marcas de Sucesso, Marty Neumeier, Bookman

Design Thinking, Tim Brown, ed. Campus

Design Thinking - Inovação em Negócios, vários autores, MJV Press

Briefing: a Gestão do Projeto de Design, Peter L. Phillips, ed. Blucher

Gestão Estratégica do Design, Robert Brunner & Stewart Emery, M. Books

O Fator VDM, Luis Marcelo Mendes, Ímã Editorial

20
tutorial flopez

A herança do Olhar: o Design de Aloísio Magalhães, João Leite, Senac Rio

Sistemas de Identidade Visual, de Maria Luísa Peón, ed. 2AB

Manual de Identidade Visual, Daniella Michelena Munhoz, ed. 2AB

Logotipo vs Logomarca - a Luta do Século, Bruno Porto, ed. 2AB

Design de Identidade da Marca, Alina Wheeler, Bookman

Design de Logotipos que Todos Amam, David Airey, Alta Books Editora

Conversas com Paul Rand, Michael Kroeger (org.), ed. CosacNaif

Paul Rand, Steven Heller, Phaidon Press

Marks of Excellence, Per Mollerup, Phaidon Press

Symbol, Steven Bateman & Angus Hyland, Laurence King Publishers

21 id. visual
tutorial flopez
referências

referências

naming

Naming, o Nome da Marca, Delano Rodrigues, ed. 2AB

Marcas & Sinalização, Norberto "Lelé" Chamma, ed. Senac SP

diagram.

Grids (coleção Design Básico), Gavin Ambrose & Paul Harris, Bookman

Grid: Construção e Desconstrução, Timothy Samara, ed. CosacNaif

Grid Systems in Graphic Design, Josef Müller-Brockmann, ed. Niggli

O Livro e o Designer II, Andrew Haslam, ed. Rosari

outros

Novos Fundamentos do Design, Ellen Lupton & Jennifer Cole, ed. CosacNaif

Design, Cultura e Sociedade, Gui Bonsiepe, ed. Blucher

As Leis da Simplicidade, John Maeda, ed. Novo Conceito

tutorial flopez

Linguagens do design: Compreendendo o Design Gráfico, Steven Heller, ed. Rosari 22

links interessantes:

tipografia

Font Squirrel (free fonts): www.fontsquirrel.com

Lost Type-Co (pay-what-you-want type foundry): www.losttype.com

My Fonts (distribuidora): www.myfonts.com

Thinking with Type (Ellen Lupton): www.thinkingwithtype.com

Fontstruct: http://fontstruct.fontshop.com

FontForge (editor de tipografia online): http://fontforge.org/

Typophile (forum): www.typophile.com

Font Feed (informativo Font Shop): http://fontfeed.com

Google Web Fonts: www.google.com/fonts/

23
referências
tutorial flopez

referências

tipografia

I Love Typography (blog): http://ilovetypography.com

ATypI: www.atypi.org

Type Directors Club: www.tdc.org

SOTA (aficcionados por tipografia): www.typesociety.org

We Love Typography (blog): http://welovetypography.com

Ralf Herrmann, Wayfinding & Typography: http://opentype.info/blog

type games

Kern Type: http://type.method.ac

Type Pairs: www.outrasfontes.com/typepairs.htm

Shape Type: http://shape.method.ac

Type Connection: www.typeconnection.com

tutorial flopez

24

foundries

+ designers

Tipos Latinos: www.tiposlatinos.com

Tipos do Brasil (blog): www.tiposdobrasil.com

Tipocracia: www.tipocracia.com.br

Outras Fontes (Ricardo Esteves): www.outrasfontes.com

Just in Type (Tony de Marco): www.justintype.com.br

Tipos do Acaso: www.tiposdoacaso.com.br

Eduardo Recife: www.misprintedtype.com

Isacotype (Isac Rodrigues): http://isacotype.com

foundries

+ designers

Tipógrafos.Net (pt): http://tipografos.net

DSType (Dino dos Santos): www.dstype.com

BR 25
PT referências
tutorial flopez

referências

foundries

+ designers AL

Type Together: www.type-together.com

Omnibus-Type (ar): http://omnibus-type.com

Pampa Type (mx): http://pampatype.com

Gabriel Martínez Meave (mx): www.meave.org/78054/typography

Sudtipos (ar): http://sudtipos.com

Latinotype (cl): www.latinotype.com

Huerta Tipográfica (ar): www.huertatipografica.com.ar

Tipotype (uy): www.tipotype.com

Vicente Lamónaca (uy): http://lamonaca.org

Letritas (cl): http://letritas.blogspot.com.br

tutorial flopez

26

foundries

+ designers

Underware: www.underware.nl Linotype: www.linotype.com

Font Shop: www.fontshop.com

Hoefler & Frere-Jones: www.typography.com

Font Bureau (David Berlow): www.fontbureau.com

Type-o-Tones: www.type-o-tones.com

T-26: www.t26.com

FontSmith: www.fontsmith.com

Ex Ljbris (Jos Buivenga): www.exljbris.com

Letterror (tipografia experimental): http://letterror.com

referências

27
W
tutorial flopez

referências

foundries

designers

Büro destruct: www.typedifferent.com

House Industries: www.houseind.com

Rian Hughes, Device Fonts: www.devicefonts.co.uk

Luc(as) de Groot: www.lucasfonts.com

Gerard Unger: www.gerardunger.com

Marian Bantjes: www.bantjes.com

Jessica Hische: www.jessicahische.is

Ed Fella: www.edfella.com

Veer: www.veer.com

Our Type (Fred Smeijers): www.ourtype.com

tutorial flopez

28
+
W

Brand New: www.underconsideration.com/brandnew

Logo Design Love: www.logodesignlove.com

Brandemia: www.brandemia.org

LogoBR: http://logobr.org/

Leader Creative (Lindon Leader): www.leadercreative.com

Wolff Olins: www.wolffolins.com

Stefan Kanchev (bu): http://stefankanchev.com/

Logo Design Blog: http://imjustcreative.com/blog/

Logo Lounge: www.logolounge.com/ the Branding Source: http://brandingsource.blogspot.com.br/

29
id. visual
referências
tutorial flopez

referências

diagram. naming

The Grid System: www.thegridsystem.org

Grid Pack: www.gridpack.com

The Elements of Typographic Style (web): http://webtypography.net

Design by Grid: www.designbygrid.com

Drive Thru Names: www.drivethrunames.com

Naming Brasil (blog): http://namingbrasil.blogspot.com

Creative Review: www.creativereview.co.uk/home

Designboom: www.designboom.com

ForoAlfa: http://foroalfa.org/

Co.Design: www.fastcodesign.com outros 30 tutorial flopez

sobre o autor:

Fabio Lopez é carioca de 1978, designer e mestre pela , professor do ESDI departamento de Artes e Design da . Desde 2000 trabalha em projetos PUC-Rio pessoais e demandas de mercado, sobretudo nas áreas de identidade visual, tipografia, pictogramas, impressos e design autoral. Em 2016 criou o projeto , um extenso exercício de representação visual que resultou na mini Rio criação de mais de 200 pictogramas e padronagens sobre o Rio de Janeiro. É autor dos polêmicos projetos ' ' e War in Rio ‘ ', Bando Imobiliário Carioca da identidade visual do , do emblema do Centro Carioca de Design - CCD Patrimônio Cultural Brasileiro Rio 2016 (IPHAN), do lettering Olímpico ‘ ' e dos projetos de redesign da identidade visual do (2018) e da (2022). Pesquisa Clube de Regatas do Flamengo PUC-Rio design filatélico e cria selos postais para os . É palestrante, consultor, ilustra e escreve. Correios do Brasil

email: fltypedesigner@hotmail.com

twitter: @flopezdesign

instagram: @flopezdesign blogs: www.jogowarinrio.blogspot.com bandoimobiliario.wordpress.com //

site: www.minirio.com.br

issuu: http://issuu.com/fabiolopez/docs

tumblr: http://picote.tumblr.com

hello!
31 tutorial flopez

agradecimentos:

a todes que tiveram nomes citados ou projetos apresentados, que ajudaram a criação desse material com comentários e observações ou que contribuíram para tornar o tutorial flopez mais completo: meu muito obrigado!

Adrian Room, Adriana Calderoni, Alexandre Teixeira, Alexandre Wollner, Alejandro Paul, Aline Miguel, Aloísio Magalhães, Amandine Alessandra, Angelo Bottino, Augusto Seibel, Armin Vit, April Greiman, Bruno Porto, Clarissa Biolchini, Claudio Gil, Daniel Campos, Daniel Neves, Daniel Sousa, Daniella Michellena Munhoz, David Airey, David Carson, Delano Rodrigues, Diego Cataldo, Dominic Flask, Ellen Lupton, Emil Ruder, Erik Spiekermann, Evelyn Grumach, Fátima F inizola, Fred Eerdekens, George Bernard Shaw, Gerard Unger, Gui Bonsiepe, Guilherme Capilé, Guilherme T oledo, Gustavo Ferreira, Gustavo Soares, Henrique Nardi, Ivan Chermayeff, Izabel Oliveira, Jamil Li Causi, Jennifer Higerd, Jeremy T ankard, Joaquim Redig, Joana Pessoa, João de Souza Leite, John Langdon, John Maeda, John Moore, Jonathan Barnbrook, Jorge Duro, Josef Müller-Brockmann, Julia G., Julia Valle, Karen Cheng, Ken Barber, Lance Schmittling, Lauro Machado, Lindon Leader, Luc(as) de Groot, Ludwig Wittgenstein, Luisa Schroder, Maitê Lacerda, Márcia Martins, Marty Neumeier, Matheus Barbosa, Maria Luísa Peón, Max Miedinger, Maximilien Vox, Michael Bierut, Modo Design, Norberto Chamma, Norberto Chaves, Paul Rand, Paula Scher, Pedro Moura, Per Mollerup, Peter Bil'ak, Raphael Abreu, Raul Bellúcia, Renata Freeland, Ricardo Esteves, Robert Bringhurst, Roberta Portas, Rodolfo Capeto, Sergio Rodriguez, Tátil Design, Vera Bernardes, Vladimir Tomin, Washington Dias Lessa, Wim Crouwel, Zuzana Licko e você!

32 tutorial flopez

mais de 120.000 visitas. \o/ compartilhe!

Issuu converts static files into: digital portfolios, online yearbooks, online catalogs, digital photo albums and more. Sign up and create your flipbook.