Design de Tela e Hipertexto

Prévia do material em texto

86
Re
vi
sã
o:
 A
lin
e 
- 
Di
ag
ra
m
aç
ão
: M
ár
ci
o 
- 
04
/0
2/
20
16
Unidade III
Unidade III
7 DESIGN DE TELA
7.1 O hipertexto
Os computadores em todo mundo se conectam via internet utilizando protocolos para receber e 
enviar informações. A www permitiu a distribuição desses protocolos, que assumiram o papel de páginas 
de texto e imagens. A navegação não linear, característica do hipertexto, é o que permite ao usuário 
saltar de tela em tela, interagindo e criando sua própria teia de informações.
 Observação
A World Wide Web, comunicação pela rede mundial de 
computadores, ou simplesmente web, é o meio mais interativo entre 
as mídias atuais. Relacionada originalmente a uma possível guerra 
nuclear, a internet nasceu como estratégia de descentralização das 
conexões de comunicação, ou seja, uma rede sem centro que pudesse 
continuar em operação mesmo se uma bomba atômica destruísse 
parte dos Estados Unidos.
As páginas web são criadas por meio do Hypertext Markup Language (HTML), que é enviado pela 
internet e decifrado pelo navegador instalado na máquina do usuário. Mas o que vem a ser o hipertexto? 
A seguir, Lévy nos auxilia nessa questão:
Tecnicamente, um hipertexto é um conjunto de nós ligados por 
conexões. Os nós podem ser palavras, páginas, imagens, gráficos ou 
partes de gráficos, sequências sonoras, documentos complexos que 
podem eles mesmos ser hipertextos. Os itens de informação não são 
ligados linearmente, como em uma corda com nós, mas cada um deles, 
ou a maioria, estende suas conexões em estrela, de modo reticular 
(LÉVY, 1993, p. 33).
O poder informativo do hipertexto, segundo Lévy (1993), não se encontra somente nas possibilidades 
associativas, mas principalmente em sua estrutura não linear, o que permite navegar em uma imensidão 
de informações que direcionam para tantas outras informações, sem, no entanto, perder a visão do 
todo, pois, como ratifica Bairon (1995, p.139 ), “a navegação no hipertexto ou multimídia permite o todo 
no fragmento e este, naquele”.
87
Re
vi
sã
o:
 A
lin
e 
- 
Di
ag
ra
m
aç
ão
: M
ár
ci
o 
- 
04
/0
2/
20
16
Criatividade e teCnologia ofiCina
No processo de comunicação, o hipertexto depende da iniciativa e da constante invenção de seu 
usuário, dinâmica a qual pressupõe a interação e faz do processo uma contínua mutação, ou seja, 
uma experiência infinitamente mais ágil e rica em conhecimento e interação no âmbito das relações 
humanas do que os meios de comunicação do século passado.
Como interpretar é subjetivo e supõe associação, quando o processo de construção hipertextual 
é interpretado pelo groupware, cada membro atribui diferentes sentidos à mensagem que é captada 
(LÉVY, 1993). Só isso, porém, não é suficiente para que a coletividade compartilhe do mesmo 
sentido; para que um grupo construa o senso comum a partir do hipertexto é necessária uma 
sociabilização em que seja possível dialogar e ecoar mutuamente para além da linearidade do 
discurso, como mostra Lévy:
Trabalhar, viver, conversar fraternalmente com outros seres, cruzar um pouco 
por sua história, isto significa, entre outras coisas, construir uma bagagem 
de referências e associações comuns, uma rede hipertextual unificada, um 
contexto compartilhado, capaz de diminuir os riscos de incompreensão 
(LÉVY, 1993, p. 72‑3).
Atualmente, a versão existente do código hipertexto é o HTML5, um conjunto de padrões interativos 
que permitiu a inclusão de vídeos sem a necessidade de plug‑ins. Diante das novas tecnologias e dos 
constantes aperfeiçoamentos da funcionalidade da web, o designer é um dos profissionais que mais 
acompanham as rápidas transformações do século XXI.
Dentro dessa revolução, o designer dito puramente gráfico vem diminuindo gradativamente, ao 
ponto de seu âmbito criativo ser indissociável dos primeiros programadores da revolução da internet, ou 
seja, mais amplo e profissional. Em contrapartida, esse profissional tem de desenvolver constantemente 
suas habilidades técnicas.
 Observação
A base do conteúdo de vídeo do HTML5 é pelo H.264, um codec 
(codificador/decodificar). O Flash, que já foi o principal meio para exibir 
vídeos na web, foi engolido pela evolução do HTML.
7.2 Ferramentas digitais
Como já vimos, o designer gráfico tem uma ampla esfera de sinais visuais nas quais pode atuar, seja 
no papel, na tela ou em smartphones, seja ainda contratado pela agência de publicidade como prestador 
de serviço ou em contato direto com o cliente.
88
Re
vi
sã
o:
 A
lin
e 
- 
Di
ag
ra
m
aç
ão
: M
ár
ci
o 
- 
04
/0
2/
20
16
Unidade III
Figura 58 
A Memphis Notebook é uma revista on‑line dedicada à arte e ao design (na figura anterior). O 
layout do site é como o de uma publicação impressa de conteúdo predominantemente textual. No 
entanto, a mistura entre grandes imagens fotográficas e uma tipografia incomum garante que a 
revista não seja entediante.
Ferramentas emergentes têm explorado as possibilidades oferecidas pelo progresso tecnológico, e 
a variedade do campo de trabalho do designer é tão ampla quanto as inúmeras opções disponíveis no 
mercado, indo desde o desenvolvimento de sites para corporações comerciais e financeiras, instituições 
educacionais, culturais e sem fins lucrativos, até a criação e renovação de identidades visuais e aplicativos 
direcionados ao comércio eletrônico.
Figura 59 
89
Re
vi
sã
o:
 A
lin
e 
- 
Di
ag
ra
m
aç
ão
: M
ár
ci
o 
- 
04
/0
2/
20
16
Criatividade e teCnologia ofiCina
O design gráfico para a web reúne muitas mídias e finalidades diferentes. Aqui, o e‑mail de marketing 
on‑line do site de moda asos.com é cuidadosamente concebido como uma página de revista – atraindo 
os assinantes para a leitura e, ao mesmo tempo, fornecendo vários links para o site, o que estimula os 
leitores a navegar e comorar.
 Saiba mais
Visite o site de moda britânico e observe a diagramação proposta pelos 
webdesigners da página.
<www.asos.com>.
Até onde podemos separar, a função do webdesigner é desenvolver uma página com uma adequada 
estrutura visual. Os fundamentos do design – layout, cores, tipografia e imagens – são essenciais 
para qualquer mídia, mas a natureza do leiaute de tela é particular quanto à variedade de tamanho e 
proporções, além da preocupação exclusiva com os detalhes técnicos e a distribuição na web.
As particularidades da tela fazem o webdesigner considerar primeiro, antes da aparência, as exatas 
possibilidades e limitações da mídia, dependendo da tecnologia, que, por sua vez, depende da finalidade, 
da natureza da atividade, do público‑alvo e do orçamento de produção. No entanto, entender das 
ferramentas gráficas de base, como em qualquer campo da área digital, é o ponto de partida, e, somado 
aos mais essenciais pacotes de programas para webdesign, o caminho a percorrer dependerá do objetivo, 
como destaca o autor:
A extensão de um ou mais desses conhecimentos é algo que depende do 
objetivo: entregar simulações e diretrizes para as equipes de criação; ou 
criar sozinho o site completo; ou, ainda, obter um equilíbrio entre as duas 
coisas. Os designers gráficos que trabalham em empresas de web design 
estão em posição melhor para desenvolver as habilidades necessárias, 
pois observam rapidamente o que precisam dominar e em que nível de 
aprofundamento, e o que pode ser deixado para outras funções (GORDON; 
GORDON, 2012, p. 156).
Interatividade e design de interface são outros pontos importantes o que são de competência do 
webdesigner. A facilidade de navegação na internet é fundamental para qualquer site. Mas antes de 
adentrarmos as principais ferramentas de desenvolvimento web, vamos entender como funciona o 
planejamento de um site.
7.3 Planejamentode sites
O desenvolvimento de um site deve ser tratado de forma sistemática, considerando questões 
organizacionais e incorporadas ao padrão de fluxo de trabalho. O planejamento assegura que, durante 
90
Re
vi
sã
o:
 A
lin
e 
- 
Di
ag
ra
m
aç
ão
: M
ár
ci
o 
- 
04
/0
2/
20
16
Unidade III
o processo de desenvolvimento, a equipe de criação mantenha o controle e o cliente permaneça em 
acordo com o resultado desejado.
Dessa maneira, a partir das fases de um projeto, veremos alguns tópicos importantes para qualquer 
projeto de webdesign.
Fases de planejamento de um site
Definição dos objetivos do site e 
formação da equipe do projeto
Desenvolvimento da estrutura do site
Design e produção
Prova e testes
Edição e marketing
Atualização
Figura 60 
7.3.1 Administração de clientes
A informação para o cliente na fase de um projeto deve ser constante, pois ele precisa entender 
que o processo se articulará e mudará de acordo com as influências que terão no custo final. Essas 
mudanças contínuas, geralmente solicitadas pelo próprio cliente, são chamadas de “incrementite” ou 
“featuritis”, e o acompanhamento da equipe e esclarecimento conjunto tornam o processo menos 
propenso a problemas de funcionamento.
Pela mesma razão, é importante trabalhar com as especificações (lista impressa) do site, bem como 
com o cronograma acordado entre as partes.
7.3.2 Cronogramas e produto final
Não depende apenas da equipe de desenvolvimento para que o cronograma seja cumprido no prazo. 
O cliente deve fornecer detalhes, materiais e comentários, e o designer, o projeto do site contendo as 
páginas concluídas.
91
Re
vi
sã
o:
 A
lin
e 
- 
Di
ag
ra
m
aç
ão
: M
ár
ci
o 
- 
04
/0
2/
20
16
Criatividade e teCnologia ofiCina
O designer tem como responsabilidade também definir um sistema que permita, caso necessário, 
alterar o prazo. É comum o atraso de informações do material por parte do cliente; dessa maneira, o 
designer e toda a equipe devem ter em mente estratégias que contornem esse problema.
7.3.3 Formulário de pesquisa
Uma das estratégias é um questionário respondido previamente pelo cliente e de cujas respostas 
todos os tomadores de decisão da empresa tenham ciência.
A seguir, vemos um exemplo de formulário‑padrão de pesquisa ao cliente:
Quadro 4 
Dirigindo-se ao público-alvo
•	Qual	é	a	principal	mensagem	que	se	deseja	transmitir?
•	Faça	uma	lista	dos	objetivos	secundários.
•	Como	sua	empresa	se	beneficiará	do	uso	do	site?
•	Qual	é	o	seu	público-alvo?
•	Em	que	o	novo	público-alvo	difere	do	atual?
•	Quais	são	as	principais	empresas	concorrentes?
•	Faça	uma	lista	das	URLs	dos	sites da concorrência.
•	Qual	é	o	seu	ponto	de	venda	exclusivo	(unique selling point ou unique selling proposition)?
Definição do site
•	Como	você	gostaria	que	as	pessoas	descrevessem	o	site?
•	Você	deseja	mudar	a	percepção	que	os	clientes	têm	de	sua	empresa?
•	Existem	características	nos	materiais	atuais	de	marketing e na identidade corporativa que deseja manter 
no site?
•	Faça	uma	lista	dos	sites que considera eficientes e descreva por que acha que eles são bem‑sucedidos.
•	Do	que	você	gosta	ou	desgosta	nos	sites da concorrência?
Conteúdo do site
•	O	site	vai	usar	algum	material	existente?	Em	caso	afirmativo,	quem	fornece	esse	material,	e	em	que	
formato (DOC, PDF, JPEG etc.) está disponível no momento? Por favor, forneça o máximo possível de 
informação e descreva os tipos/extensões dos arquivos de imagens e documentos.
•	Se	a	resposta	à	pergunta	anterior	for	“não”,	você	vai	gerar	o	material	novo	ou	terceirizar	essa	tarefa?	Por	
favor, forneça dados completos sobre quaisquer terceiros envolvidos.
•	Quem	vai	ser	o	responsável	pelo	fornecimento	desse	conteúdo?
•	Quem	é	o	responsável	pela	aprovação	do	conteúdo	do	site?
Detalhes técnicos
•	Qual(is)	plataforma(s)	e	navegador(es)	foi(ram)	identificado(s)	para	o	público-alvo?	(Observação:	os	
clientes devem ser aconselhados a seguir os padrões web, para que a informação seja disponibilizada em 
todos os dispositivos para web.)
•	O	site vai usar um banco de dados? Em caso afirmativo, ele já existe? Por favor, forneça detalhes 
sobre o programa usado para criar o banco de dados e todos os problemas de hospedagem que 
você já enfrentou.
•	Dê	os	detalhes	de	todas	as	transações	de	comércio	eletrônico	que	pretende	realizar	no	site.
92
Re
vi
sã
o:
 A
lin
e 
- 
Di
ag
ra
m
aç
ão
: M
ár
ci
o 
- 
04
/0
2/
20
16
Unidade III
Planos de marketing
•	Quais	são	os	planos	de	promover	e	desenvolver	o	site?
•	Como	pretende	fazer	circular	o	conhecimento	sobre	o	site dentro da empresa?
Detalhes da administração
•	Como	pretende	manter	o	site atualizado?
•	Qual	é	a	data	de	lançamento	proposta	para	o	site? Faça uma lista de todos os fatores relacionados a isso, 
como a vinculação ao lançamento de um produto.
•	Já	há	um	nome	de	domínio	registrado?	Em	caso	negativo,	tem	ideia	de	um	possível	nome?
•	Qual	é	o	orçamento	proposto	para	o	site? Considere fazer o site em fases, para diminuir as restrições 
orçamentárias. (Observação: se o cliente deseja trabalhar em fases, ele deve estar ciente de que isso 
acarretará um custo maior do que a execução de uma só vez.)
Fonte: Gordon e Gordon (2012, p. 159).
 Lembrete
Quando	se	define	o	público-alvo,	 também	se	conhecem	seus	hábitos	
de mídia.
7.4 Produção do site
Uma equipe de desenvolvimento de sites é formada por profissionais que conheçam suas atribuições 
e responsabilidades. Porém, no campo do webdesign, não é incomum encontrar indivíduos que assumam 
várias funções, devido a diversos motivos. O mais provável foi que, diante da explosão da internet, 
muitos profissionais não habilitados assumiram as funções por falta de mão de obra especializada. 
Atualmente essa ideia equivocada do profissional multitalentoso tem acabado aos poucos, e indivíduos 
altamente qualificados assumem os cargos do diretor de arte, do programador e do desenvolvedor ao 
mesmo tempo, por exemplo.
Apesar disso, existem algumas funções essenciais para o desenvolvimento de um site, mesmo em 
equipes pequenas. Os profissionais a seguir têm grande importância nesse mercado de trabalho, ainda 
que possam acumular mais de uma função.
7.4.1 Gerente de projeto
Profissional responsável pelo relacionamento com os clientes e pelo acompanhamento de todo o 
desenvolvimento do site. Ele soluciona possíveis problemas e traça uma linha bem‑estabelecida de 
comunicação entre toda a equipe e o cliente.
7.4.2 Diretor de arte e designer
O diretor de arte, que algumas vezes acumula a função do designer, deve estar ciente 
das diferenças entre design impresso e webdesign (como veremos adiante), bem como de 
que todos os elementos da página devem manter a funcionalidade dentro da interface geral. 
93
Re
vi
sã
o:
 A
lin
e 
- 
Di
ag
ra
m
aç
ão
: M
ár
ci
o 
- 
04
/0
2/
20
16
Criatividade e teCnologia ofiCina
Este profissional deve ter bons conhecimentos sobre plataformas, navegadores, HTML, CSS e 
do funcionamento da internet em geral o, principalmente no que se refere à usabilidade, à 
acessibilidade, à navegação etc.
O webdesigner geralmente prepara o layout da página utilizando um editor gráfico, sempre mantendo 
uma estreita colaboração com o programador.
 Lembrete
O webdesigner pode ter uma responsabilidade significativa dentro de 
uma agência, qualificando‑se como uma força motriz criadora, como um 
diretor de arte web. Sua principal função é criar um site funcional, de fácil 
acessibilidade e usabilidade e que desperte, ainda, interesse e interação, 
objetivando o resultado esperado pelo cliente.
7.4.3 Redator e revisor
O revisor tem como função a reestruturaçãodo texto feito pelo redator, adequando‑o de forma que 
possa incluí‑lo na web, considerando barra de rolagem, links e mecanismos de busca. Além disso, o texto 
na web, em comparação com o texto impresso, deve ser breve e objetivo.
Esse profissional é responsável ainda pela atualização do conteúdo do site e pode ser contratado 
pelo cliente ou pela organização, que deverão assegurar que o texto tenha qualidade profissional.
7.4.4 Programador HTML
O programador HTML tende a ser também o designer, mas se as funções forem distintas, ele 
iniciará seu trabalho a partir do layout elaborado pelo webdesigner. Exporta os gráficos necessários 
e recria em HTML e CSS, assegurando que o conteúdo funcione conforme o pretendido e que será 
baixado rapidamente.
Atender aos padrões relevantes da web e operar em todos os navegadores é de grande importância, 
utilizando nessa etapa, geralmente, aplicativos visuais como o Dreamweaver, e adaptando os códigos 
em qualquer editor de textos.
7.4.5 Programador de banco de dados (back‑end)
O engenheiro de back‑end é um profissional específico para atender a marcação e os scripts 
do site. Se não exigir funções distintas, também poderá trabalhar e integrar a programação de 
banco de dados.
Normalmente utiliza para o projeto tecnologias de programação em PHP ou ASP.
94
Re
vi
sã
o:
 A
lin
e 
- 
Di
ag
ra
m
aç
ão
: M
ár
ci
o 
- 
04
/0
2/
20
16
Unidade III
 Observação
•	 Back‑end: costumam ser programas back‑end aqueles executados 
do “lado do servidor”, como os bancos de dados. Em geral, dados 
processados no back‑end são enviados para um programa de 
front‑end (lado do cliente), como um navegador, que permite ao 
usuário visualizá‑los.
•	 CSS:	Cascading	Style	Sheets	é	o	padrão	de	estilização	de	elementos	
em páginas web.
•	 ASP:	Active	Server	Pages	é	uma	tecnologia	da	Microsoft	para	a	criação	
de páginas web dinâmicas, normalmente, utilizadas na integração de 
banco de dados.
•	 PHP:	Hypertext	Preprocessor	é	uma	linguagem	para	a	criação	de	sites 
dinâmicos open source, executado no servidor na integração ao site 
de banco de dados.
7.5 O design impresso versus o webdesign
Vimos que o diretor de arte e o designer devem ter com clareza as diferenças que envolvem o design 
de impressos e o design de tela. Cada um tem seu conjunto de restrições, e o que funciona bem em um 
pode não funcionar tão bem em outro (ou mesmo nem funcionar).
Figura 61 
Desde os tempos mais remotos, estamos acostumados ao fato de o papel ser plano, quer seja 
uma folha solta ou encadernada em um livro. A artista Su Blackwell contraria nossos prognósticos 
construindo mundos tridimensionais de papel usando livros velhos, que contemplamos com fascínio, 
como observamos na figura anterior.
95
Re
vi
sã
o:
 A
lin
e 
- 
Di
ag
ra
m
aç
ão
: M
ár
ci
o 
- 
04
/0
2/
20
16
Criatividade e teCnologia ofiCina
Questões	devem	ser	levantadas	pelo	designer que utiliza um programa de impressos para criar uma 
página na web. As mais importantes se referem à visualização, ao layout, à cor, à tipografia e à interação, 
como vemos no quadro a seguir:
Quadro 5
Impresso Tela
Visualização Páginas impressas podem ser visualizadas na íntegra e de forma aleatória.
A web conta com sistemas de navegação dinâmica, 
que dependem do clique no link e da rolagem.
Layout
O layout da página impressa é algo fixo, e 
pode‑se criá‑lo para esse fim, talvez fazendo 
uma página aparecer como uma página 
dupla.
Ao trabalhar na web, no entanto, não há garantias 
em relação ao design, dado o tamanho da janela do 
navegador do usuário; além disso, o navegador e o 
sistema operacional podem alterar o visual da página.
Cor As imagens impressas usam o CMYK. As imagens da web usam o espaço de cor RGB.
Tipografia Pouca limitação. As opções tipográficas dos webdesigners são relativamente limitadas. 
Interação Não tem interatividade e elementos dinâmicos.
As páginas web contam com a interatividade e com 
elementos dinâmicos.
Talvez a maior problemática enfrentada pelos webdesigners seja a utilização das cores da internet. 
Primeiro, não é possível prever as configurações de cores do computador do usuário, e, segundo, não é 
possível saber como o usuário vê de fato as cores, afinal a percepção de cores é biológica, logo subjetiva 
(além do fato de alguns sofrerem de daltonismo).
Para contornar esses problemas, o webdesigner deve examinar possíveis parâmetros de utilização de 
cores na web e, a partir daí, implementar os textos e as imagens.
Figura 62 
O designer francês Philippe Apeloig desenvolveu uma proposta tipográfica para a escola de cinema 
parisiense La Fémis. Em vez de usar imagens, ele sobrepôs fontes em variações sutis de cor para conferir 
à literatura um forte sentimento pedagógico.
96
Re
vi
sã
o:
 A
lin
e 
- 
Di
ag
ra
m
aç
ão
: M
ár
ci
o 
- 
04
/0
2/
20
16
Unidade III
 Saiba mais
Visite a página web do designer Philippe Apeloig:
<http://apeloig.com>.
A fim de se chegar a esses parâmetros, seguem algumas considerações sobre cores em webdesign:
•	 As	cores	na	tela	têm	comportamentos	diferentes.	O	que	é	visto	é	criado	pela	luz	que	brilha	no	
visor, por isso o branco e cores pálidas podem ser relativamente ofuscantes.
•	 Evitar	o	uso	excessivo	de	cores.	O	que	significa	“cores	em	excesso”?	É	difícil	obter	essa	resposta,	
mas existe uma regra indiscutível?
•	 Utilizar	uma	série	de	diferentes	tons	de	uma	ou	duas	cores	causa	efeito	sutil	e	sofisticado;	ao	
contrário, o aspecto torna‑se confuso. Tudo é questão de equilíbrio e bom senso.
•	 Cuidado	com	combinações	ofuscantes,	pois	dificultam	a	leitura	do	texto.
•	 Atentar	ao	contraste	entre	o	texto	e	o	 fundo.	É	mais	difícil	 ler	um	texto	na	tela	do	que	em	
material impresso.
•	 Atente	ao	efeito	de	confronto	proporcionado	pelas	cores	complementares.
•	 Lembre-se	 de	 que	 as	 cores	 brilhantes	 e	 saturadas	mostram-se	mais	 fortes	 na	 tela	 do	 que	 no	
material impresso.
•	 Analisar	o	aspecto	visual	à	medida	que	trabalha.	Isso	evita	uma	catástrofe	no	uso	das	cores.
8 ILLuSTrATOr, INDESIGN E PhOTOShOP: SOFTwArES DE CrIAçãO, 
DIAGrAmAçãO E EDIçãO DE ArTE E FOTOGrAFIA DA ADObE
8.1 Illustrator – Software da Adobe
8.1.1 Histórico do software
O Illustrator foi lançado em 1986 quando ainda era um projeto gráfico para desenvolvimento de 
logotipo. Inicialmente, funcionava apenas no sistema operacional do Macintosh, ou popularmente 
conhecido como Mac, computador desenvolvido pela Apple. O principal elemento do Illustrator é a 
descrição matemática de linhas e curvas, e, para tanto, sua atuação deriva das curvas de Bézier. Por 
isso, o marketing utilizou a imagem da Vênus de Botticelli em O Nascimento de Vênus, enfatizando 
a capacidade do programa de produzir e editar as linhas e curvas. Conforme novas atualizações eram 
97
Re
vi
sã
o:
 A
lin
e 
- 
Di
ag
ra
m
aç
ão
: M
ár
ci
o 
- 
04
/0
2/
20
16
Criatividade e teCnologia ofiCina
lançadas, a imagem era atualizada para destacar as novas funcionalidades e os novos recursos do 
programa. A partir da criação do pacote Adobe Creative Suite em 2003, a garota‑propaganda Vênus 
deixou de ser utilizada, uma vez que esse pacote integrava outros programas consolidados da Adobe, e 
sua imagem de impacto passou a ser a natureza.
A primeira atualização lançada foi o Adobe Illustrator 88, recebendo esse nome pelo ano de 
lançamento. Para a plataforma Windows, o programa foi habilitado apenas a partir da atualização 
Illustrator 2, lançada um ano depois e tendo baixa aderência, visto o desempenho superior do CorelDraw 
e alguns problemas com a interface para a nova plataforma.
O programa é utilizado por profissionais de design gráfico, moda, web, ilustração,entre outros que 
realizam desenhos e edição vetorial. Sua versão mais atual é a CC (Creative Cloud), em substituição ao 
CS6, que também fazia parte da extinta Creative Suite. Agora a nomenclatura segue como Illustrator CC, 
e sua última atualização foi em agosto de 2015. Na figura a seguir, apresentamos um comparativo entre 
a primeira e a última versão da Creative Suite (Illustrator CS6) e a versão atual (Illustrator CC):
Figura 63 – Arte cronológica do Illustrator
98
Re
vi
sã
o:
 A
lin
e 
- 
Di
ag
ra
m
aç
ão
: M
ár
ci
o 
- 
04
/0
2/
20
16
Unidade III
8.1.2 Illustrator – Oficina – Principais ferramentas e suas funções
O Illustrator faz parte do Pacote Adobe Creative Suite CS6; ele apresenta uma integração entre os 
aplicativos desse pacote, inclusive na interface, que é padrão de todos eles.
Essa padronização torna o uso e o aprendizado desses programas muito mais fáceis, e a diferença 
ficará a cargo dos recursos e das funções de cada um deles.
Figura 64 – Área de Trabalho do Illustrator
As funções dos itens da área de trabalho são enumeradas a seguir:
•	 Painel	de	Ferramentas:	contém	todas	as	ferramentas	e	seus	grupos.
•	 Painel	de	Controle:	exibe	as	opções	da	ferramenta	que	estiver	selecionada.
•	 Menu	de	aplicativos:	contém	os	menus	como	efeitos,	objeto	e	controle	de	outros	aplicativos.
•	 Grupos	de	painéis	no	encaixe	vertical:	local	em	que	os	painéis	ficam	ancorados	por	padrão.
99
Re
vi
sã
o:
 A
lin
e 
- 
Di
ag
ra
m
aç
ão
: M
ár
ci
o 
- 
04
/0
2/
20
16
Criatividade e teCnologia ofiCina
C
B
A D
Figura 65 – Divisão de ferramentas na Área de Trabalho
À esquerda da tela, está o painel de ferramentas, que são apresentadas em uma ou duas colunas.
Seleção (V)
Seleção direta (A)
Varinha mágica (Y)
Laço	(Q)
Pulverizar símbolos (Shift + S)
Gráficos de colunas (J)
Alternar preenchimento e traçado
Traçado
Cor / Gradiente / Nenhum
Modos de desenho
Alterar modo de tela
Prancheta (Shift + O)
Fatia (Shift + K)
Mão (H)
Zoom (Z)
Preenchimento e traçado‑padrão
Preenchimento
Girar (R)
Dimensionar (S)
Largura (Shift + W)
Transformação livre (E)
Formas (Shift + M)
Grade de perspectiva (Shift + P)
Caneta (P)
Tipo (T)
Segmento de linha (/)
Retângulo (M)
Pincel (B)
Lápis (N)
Pincel irregular (Shift + B)
Borracha (Shift + E)
Malha (U)
Gradiente (G)
Conta‑gotas (I)
Mesclagem (W)
Figura 66 – Barra de Ferramentas do Illustrator
100
Re
vi
sã
o:
 A
lin
e 
- 
Di
ag
ra
m
aç
ão
: M
ár
ci
o 
- 
04
/0
2/
20
16
Unidade III
 Observação
Ao lado de cada item de ferramentas, há uma faixa na borda direita 
com uma pequena seta. Nela, o grupo de ferramentas aparece em outras 
opções que estão ocultas.
Para criar um novo documento, existem duas opções: no menu Arquivo, encontra‑se a opção Novo 
Documento, e, ao clicá‑la, uma nova tela aparecerá com as dimensões que serão trabalhadas e podem 
ser alteradas. A outra opção é pressionar as teclas de atalho Ctrl + N (não sendo necessário apertar a 
tecla +), o que resultará na aparição da mesma tela.
•	 Nome:	digite	um	nome	para	o	seu	novo	documento.
•	 Perfil:	 você	 escolhe	 o	 tipo	 de	 documento	 em	 que	 se	 baseará	 para	 o	 fechamento	 do	 arquivo	
(impressão, dispositivos, web, vídeo e filme, RGB básico e personalizado).
•	 Tamanho,	 largura	e	altura:	o	usuário	visualiza	alguns	tamanhos	predefinidos	ou	pode	 inserir	a	
largura e a altura desejadas.
Além dos campos descritos, a caixa Novo documento tem o botão Avançado, exibindo opções de 
modo de cor, efeitos de rasterização e modo de visualização.
Figura 67 – Caixa de especificação de um novo documento
101
Re
vi
sã
o:
 A
lin
e 
- 
Di
ag
ra
m
aç
ão
: M
ár
ci
o 
- 
04
/0
2/
20
16
Criatividade e teCnologia ofiCina
Quando	se	trabalha	com	ilustrações,	compostas	por	diversos	objetos,	a	manipulação	delas	acaba	se	
tornando difícil para uma boa visualização. Para isso, existe a divisão de camadas, que são pastas nas 
quais você armazena cada objeto ou grupo de sua ilustração.
Figura 68 – Painel de encaixe de camadas
Para criar um texto no caminho de um objeto, comece criando o caminho que se deseja aplicar ao 
texto. Pode ser uma forma, como uma elipse, um retângulo ou uma linha.
Figura 69 – Forma elipse
Na Caixa de Ferramentas, escolha, nas opções de texto, a opção Tipo no caminho e clique com 
ela sobre o caminho desenhado.
Figura 70 – Ferramenta Tipo no caminho
102
Re
vi
sã
o:
 A
lin
e 
- 
Di
ag
ra
m
aç
ão
: M
ár
ci
o 
- 
04
/0
2/
20
16
Unidade III
Agora é só digitar o texto, e ele irá seguir o caminho como uma linha‑guia.
Figura 71 – Texto no caminho do objeto com linha‑guia
Para fazer outros ajustes sobre o texto aplicado, no menu principal, ative Tipo > Tipo no 
caminho > Opções de Tipo no caminho:
Figura 72 – Opções do texto no caminho
No painel de opções, ative Visualizar, e você pode inverter o sentido do texto sobre o caminho 
clicando sobre o item Virar.
103
Re
vi
sã
o:
 A
lin
e 
- 
Di
ag
ra
m
aç
ão
: M
ár
ci
o 
- 
04
/0
2/
20
16
Criatividade e teCnologia ofiCina
Figura 73 – Texto invertido
Em Alinhar o caminho, são exibidas opções de alinhamento do texto, o qual pode ser posicionado 
sobre a base da linha, podendo criar diversos movimentos em seu caminho. Em seguida, clique em 
OK, e seu caminho estará finalizado.
TEX
TO NO CAMINHO
Figura 74 – Imagem com o texto no caminho
Use o painel Amostras (Janela > Amostras) para controlar todas as cores, gradientes e padrões do 
documento.	Quando	o	preenchimento	ou	o	traçado	de	um	objeto	selecionado	contiver	uma	cor	(CMYK	
ou RGB), um gradiente, um padrão ou um tom aplicado a partir do painel Amostras, a amostra aplicada 
ficará realçada nesse painel.
104
Re
vi
sã
o:
 A
lin
e 
- 
Di
ag
ra
m
aç
ão
: M
ár
ci
o 
- 
04
/0
2/
20
16
Unidade III
Figura 75 – Caixa de amostra de cores
O Painel Amostras é exibido da forma a seguir:
•	 Preenchimento	ou	Traçado	de	nenhum.
•	 Amostra	de	registros.
•	 Símbolo	CMYK	(quando	o	documento	está	aberto	no	modo	CMYK).
•	 Botão	do	menu	Biblioteca	de	amostras.
•	 Botão	do	menu	Mostrar	tipos	de	amostra.
•	 Botão	Opções	de	amostra.
•	 Botão	Novo	grupo	de	cores.
•	 Botão	Cor	de	amostra.
Para criar uma máscara no Illustrator, abra um arquivo novo e configure no tamanho, na resolução 
e no modo de cor que desejar.
105
Re
vi
sã
o:
 A
lin
e 
- 
Di
ag
ra
m
aç
ão
: M
ár
ci
o 
- 
04
/0
2/
20
16
Criatividade e teCnologia ofiCina
Novo documento
Figura 76 – Caixa de um novo arquivo
Depois, vá até o menu Arquivo e Inserir. Nesse local, procure a imagem que será utilizada para fazer 
a máscara.
Figura 77 – Inserindo uma imagem
106
Re
vi
sã
o:
 A
lin
e 
- 
Di
ag
ra
m
aç
ão
: M
ár
ci
o 
- 
04
/0
2/
20
16
Unidade III
Após encontrar a sua imagem, clique no botão Inserir.
Figura 78 – Local da imagem
O formato da máscara será definido com a imagem na tela.
Figura 79 – Imagem da máscara
De acordo com a imagem, defina o formato de sua máscara utilizando a Ferramenta Retângulo. 
Nela, será utilizado o formato Elipse.
107
Re
vi
sã
o:
 A
lin
e 
- 
Di
ag
ra
m
aç
ão
: M
ár
ci
o 
- 
04
/0
2/
20
16
Criatividade e teCnologia ofiCina
Figura 80 – Ferramenta Elipse
Com a ferramenta Elipse, desenhe‑a na tela em cima da imagem (no local em que deseja mascarar a foto).
Figura 81 – Ferramenta Elipse na imagem
 Observação
Procure deixar um contornona sua máscara para facilitar a criação.
Com a ferramenta de seleção, selecione a forma e a imagem.
Figura 82 – Ferramenta de seleção
108
Re
vi
sã
o:
 A
lin
e 
- 
Di
ag
ra
m
aç
ão
: M
ár
ci
o 
- 
04
/0
2/
20
16
Unidade III
Clique com o botão direito e escolha a opção Criar máscara de recorte.
Figura 83 – Opção Criar máscara de recorte
Ao clicar, você verá que sua imagem ficou com o formato da máscara desenhada.
Figura 84 – Imagem com máscara de recorte
Caso queira ajustar a imagem na máscara, basta clicar duas vezes na imagem e ir mexendo nela.
Figura 85 – Imagem com máscara de recorte finalizada
109
Re
vi
sã
o:
 A
lin
e 
- 
Di
ag
ra
m
aç
ão
: M
ár
ci
o 
- 
04
/0
2/
20
16
Criatividade e teCnologia ofiCina
 Observação
É importante saber que, para esse processo funcionar, a máscara precisa 
estar sempre em cima da imagem.
Para obter o efeito de papel molhado em imagem, vá até o menu Arquivo, depois em Abrir, e selecione 
a imagem de sua preferência.
Figura 86 – Imagem para adicionar o efeito
Depois que a imagem for carregada, clique no item Efeito, que está no menu superior, e vá até a 
opção Galeria de efeitos.
Figura 87 – Menu de efeitos
110
Re
vi
sã
o:
 A
lin
e 
- 
Di
ag
ra
m
aç
ão
: M
ár
ci
o 
- 
04
/0
2/
20
16
Unidade III
No canto superior direito, aparecerão diversas opções de filtros. Clique na opção Croqui > Papel molhado. 
Selecione as opções de ajustes como: tamanho da espessura, intensidade e posterização.
Figura 88 – Opções dos efeitos
Clique em OK e o filtro de papel molhado será inserido na imagem.
Figura 89 – Imagem com filtro de desenho
Para criar objetos vetoriais da ferramenta de formas, basta clicar no ícone Retângulo ou manter o 
botão do mouse pressionado para que as ferramentas que estavam ocultas fiquem visíveis.
111
Re
vi
sã
o:
 A
lin
e 
- 
Di
ag
ra
m
aç
ão
: M
ár
ci
o 
- 
04
/0
2/
20
16
Criatividade e teCnologia ofiCina
Figura 90 – Ícone Rretângulo da barra de ferramentas
Podem ser criadas formas como retângulos, elipses, polígonos, entre outras.
Figura 91 – Objetos vetoriais
Para inserir cores em cada objeto, vá até o Painel de ferramentas e escolha a cor desejada para 
Preenchimento e Traçado.
Figura 92 – Painel de ferramentas de preenchimento e traçado
O zoom é uma lente de aumento que amplia a visualização de objetos; é uma ótima ferramenta para 
trabalhar com detalhes, pois os aproxima, dando a possibilidade de precisão nas criações.
Abra um arquivo com ilustrações.
112
Re
vi
sã
o:
 A
lin
e 
- 
Di
ag
ra
m
aç
ão
: M
ár
ci
o 
- 
04
/0
2/
20
16
Unidade III
Figura 93 – Exemplo de área de trabalho com uma imagem
Para se aplicar a ferramenta zoom nas ilustrações, clique no painel de ferramentas ou insira o atalho 
Ctrl + (para aumentar) ou Ctrl – (para diminuir) a imagem.
Zoom (H)
Figura 94 – Ferramenta zoom
Leve o mouse até a ilustração e dê um clique sobre ela. Você verá que a imagem será ampliada, como 
se você se aproximasse dela.
Figura 95 – Exemplo de uma imagem com zoom
113
Re
vi
sã
o:
 A
lin
e 
- 
Di
ag
ra
m
aç
ão
: M
ár
ci
o 
- 
04
/0
2/
20
16
Criatividade e teCnologia ofiCina
Construindo um logotipo
Para criar um logotipo, como mostra a figura a seguir, você terá contato com as primeiras ferramentas 
do Illustrator.
•	 Criar	o	miolo	de	cada	pétala	da	flor.
•	 Criar	o	cabo	de	base	da	flor.
•	 Criar	o	cabo	da	flor.
•	 Criar	o	texto	do	nome	Mary	Bell.
•	 Criar	o	texto	de	Presentes	e	Acessórios.
Figura 96 – Logotipo Mary Bell
Para fazer o miolo de cada pétala, é necessário utilizar a ferramenta Elipse (L), criando um 
círculo oval.
Figura 97 – Objeto oval vetorial
Depois de criado, clique na ferramenta de Seleção Direta.
Seleção Direta (A)
Figura 98 – Ferramenta Seleção Direta
114
Re
vi
sã
o:
 A
lin
e 
- 
Di
ag
ra
m
aç
ão
: M
ár
ci
o 
- 
04
/0
2/
20
16
Unidade III
Selecione os pontos das curvas para fazer o ajuste de cada ponta da elipse para ficar mais fina 
(semelhante a uma gota d’água).
Figura 99 – Pontos da ferramenta Elipse
Faça três pétalas conforme a imagem a seguir:
Figura 100 – Pétalas vetoriais
Selecione a pétala com a ferramenta Seleção .
Clique na caixa Preenchimento, no painel Ferramentas, ou no painel Cor, e selecione a cor desejada.
Figura 101 – Painel de ferramentas de preenchimento e traçado
 Observação
Como exemplificamos na figura anterior, quando a caixa de Preenchimento 
estiver acima da caixa de Traçado, ela estará ativa, e vice versa.
Selecione uma cor de preenchimento seguindo um dos procedimentos a seguir:
Clique duas vezes na caixa Preenchimento mostrada anteriormente e selecione uma cor no Seletor 
de cores.
115
Re
vi
sã
o:
 A
lin
e 
- 
Di
ag
ra
m
aç
ão
: M
ár
ci
o 
- 
04
/0
2/
20
16
Criatividade e teCnologia ofiCina
Seletor de cores
Figura 102 – Caixa de seletor de cores
Após escolher a cor desejada, clique em OK.
Suas pétalas estarão finalizadas.
Para fazer a base da flor, utilize a ferramenta Caneta (P), criando curvas e adicionando um ponto 
de ancoragem onde uma curva mudar de direção, arrastando as linhas de direção que formam a curva.
 Observação
O comprimento e a inclinação das linhas de direção determinam a 
forma da curva.
Caneta (P)
Figura 103 – Ferramenta Caneta
Contornando a parte inferior das pétalas, posicione a ferramenta Caneta no local de início da curva 
e mantenha o botão do mouse pressionado. Arraste para definir a inclinação do segmento curvado que 
você estiver criando e, em seguida, solte o botão do mouse.
116
Re
vi
sã
o:
 A
lin
e 
- 
Di
ag
ra
m
aç
ão
: M
ár
ci
o 
- 
04
/0
2/
20
16
Unidade III
Figura 104 – Imagem com contorno
Após esse processo, mantenha o uso da Caneta para fazer as curvas e o espiral, clicando no primeiro 
ponto que foi criado para fechar o objeto.
Figura 105 – Ícone do logotipo com miolo
Para fazer o cabo da flor, utilize novamente a ferramenta Caneta (P). Crie o primeiro ponto suave de 
um segmento curvado, conforme a figura a seguir:
Figura 106 – Cabo da flor sem preenchimento
Reposicione a ferramenta Caneta e arraste para criar uma nova; em seguida, mantenha pressionada 
a tecla Alt (Windows), ou Option (Mac OS), e arraste a linha de direção para a aresta (onde está localizado 
o primeiro ponto) para o fechamento do objeto.
Figura 107 – Cabo da flor com ajuste de curvas
Insira o cabo na parte central do miolo da flor e ela estará pronta, conforme a imagem a seguir:
117
Re
vi
sã
o:
 A
lin
e 
- 
Di
ag
ra
m
aç
ão
: M
ár
ci
o 
- 
04
/0
2/
20
16
Criatividade e teCnologia ofiCina
Figura 108 – Ícone final do logotipo
Na etapa final do logotipo, você vai inserir textos (Mary Bell, Presentes e Acessórios), explorando a 
ferramenta Tipo.
Ative a ferramenta Tipo no painel de ferramentas.
Tipo (T)
Figura 109 – Ferramenta Tipo
Posicione o mouse em uma área vazia e dê um clique, fazendo o texto ser exibido para a digitação.
Figura 110 – Caixa de Texto
118
Re
vi
sã
o:
 A
lin
e 
- 
Di
ag
ra
m
aç
ão
: M
ár
ci
o 
- 
04
/0
2/
20
16
Unidade III
Crie duas caixas de texto, uma para Mary Bell e outra para Presentes e Acessórios.
Figura 111 – Textos do logotipo
Ative a ferramenta Seleção no texto. No painel de controle, altere as configurações do texto, como 
mostra a figura a seguir.
Para a caixa de texto Mary Bell:Figura 112 – Área de configuração de texto I
Para a caixa de texto Presentes e Acessórios:
Figura 113 – Área de configuração de texto II
 Observação
Se você não tiver a fonte Gabriola, use outra fonte e faça o ajuste do 
tamanho necessário.
Posicione o texto no logotipo, como mostra a figura a seguir, altere a cor usando a ferramenta 
conta‑gotas e deixe o texto Mary Bell com a cor rosa nas pétalas, e o texto de Presentes e 
Acessórios com a cor do miolo da flor.
Figura 114 – Logotipo Mary Bell
119
Re
vi
sã
o:
 A
lin
e 
- 
Di
ag
ra
m
aç
ão
: M
ár
ci
o 
- 
04
/0
2/
20
16
Criatividade e teCnologia ofiCina
Seu logotipo está finalizado. Salve a ilustração clicando no menu de aplicativos, selecione Arquivo > 
Salvar como ou Arquivo > Salvar, como mostra a figura a seguir:
Figura 115 – Menu para salvar o arquivo
Digite um nome e escolha um local para o arquivo.
Selecione o formato de arquivo desejado e clique em Salvar.
Figura 116 – Caixa para salvar o arquivo
Na caixa de diálogo Opções do Illustrator, defina as opções desejadas e clique em OK.
•	 Versão	–	especifica	a	versão	do	Illustrator	com	a	qual	você	deseja	que	o	seu	arquivo	seja	compatível.
•	 Fontes	–	especifica	quando	incorporar	a	fonte	inteira.
120
Re
vi
sã
o:
 A
lin
e 
- 
Di
ag
ra
m
aç
ão
: M
ár
ci
o 
- 
04
/0
2/
20
16
Unidade III
•	 Criar	arquivo	compatível	com	PDF.
•	 Incluir	arquivos	vinculados.
•	 Incorporar	perfis	ICC	–	cria	um	documento	com	gerenciamento	de	cores.
•	 Usar	compactação	–	compacta	os	dados	PDF	no	arquivo	do	Illustrator.
•	 Salvar	cada	prancheta	em	um	arquivo	separado.
•	 Opções	de	transparência.
Opções do Ilustrator
Figura 117 – Caixa de configurações do documento final
Para enviar seu arquivo, você deve primeiramente verificar se o seu formato, o número de páginas, 
a resolução e as fontes estão correspondentes com as configurações da gráfica.
Os procedimentos para criar um novo documento para impressão são os seguintes:
•	 A	resolução	deverá	estar	sempre	com	300	dpi.	Quanto	maior	o	DPI	da	imagem	original,	maiores	a	
definição e a qualidade dessa imagem.
•	 As	cores	de	seu	documento	deverão	ser	em	CMYK.
•	 Verifique	as	medidas	de	seu	documento,	vá	à	barra	de	ferramentas	e	selecione	a	ferramenta	Prancheta.
121
Re
vi
sã
o:
 A
lin
e 
- 
Di
ag
ra
m
aç
ão
: M
ár
ci
o 
- 
04
/0
2/
20
16
Criatividade e teCnologia ofiCina
Prancheta (Shift + O)
Figura 118 – Ferramenta Prancheta
•	 Analise	as	dimensões	no	menu	superior	direito,	conforme	ilustra	o	exemplo	a	seguir.
Figura 119 – Configurações da prancheta
Com o seu arquivo aberto, vá ate o menu superior e clique no botão Arquivo, Configurações do documento
Figura 120 – Menu de configurações da Sangria
Na opção Sangria, coloque em todos os campos a medida de 3 mm e clique OK.
122
Re
vi
sã
o:
 A
lin
e 
- 
Di
ag
ra
m
aç
ão
: M
ár
ci
o 
- 
04
/0
2/
20
16
Unidade III
Configurações de documento
Figura 121 – Caixa de configurações da Sangria
Seu arquivo deve ficar com uma linha externa cercando o documento, indicando até onde você deve 
“sangrar” os elementos que estão nas extremidades do papel, conforme o exemplo:
Figura 122 – Exemplo de Sangria
Para converter os textos em curvas, selecione‑os, vá ao Menu Superior > Tipo > Criar contornos, 
conforme figura a seguir:
123
Re
vi
sã
o:
 A
lin
e 
- 
Di
ag
ra
m
aç
ão
: M
ár
ci
o 
- 
04
/0
2/
20
16
Criatividade e teCnologia ofiCina
Figura 123 – Menu de converter textos em curvas
 Observação
Converter as fontes em curvas acarretará a perda da possibilidade 
de edição dos textos.
Para aplicar as margens de segurança, selecione a ferramenta Retângulo e dê um clique na tela.
Figura 124 – Ferramenta Retângulo
Abrirá uma janela onde você poderá editar as dimensões do retângulo. O tamanho desse retângulo 
deverá ter sempre 6 mm de largura e 6 mm de altura a menos do que seu arquivo final.
Retângulo
Figura 125 – Opções de configurações do retângulo
124
Re
vi
sã
o:
 A
lin
e 
- 
Di
ag
ra
m
aç
ão
: M
ár
ci
o 
- 
04
/0
2/
20
16
Unidade III
Clique em OK.
Feito o retângulo, você deve centralizá‑lo no centro na página.
Ainda com o retângulo selecionado, clique com o botão direito em qualquer lugar da tela e escolha 
a opção Criar Guias.
Figura 126 – Opções para criar guias
Com isso, as suas margens de segurança estão definidas.
Para gerar um arquivo PDF no Illustrator, com o seu arquivo aberto, vá até o Menu Superior > 
Arquivo > Salvar Como.
Em Formato, escolha Adobe PDF. Clique em Salvar.
Figura 127 – Caixa para salvar um arquivo
125
Re
vi
sã
o:
 A
lin
e 
- 
Di
ag
ra
m
aç
ão
: M
ár
ci
o 
- 
04
/0
2/
20
16
Criatividade e teCnologia ofiCina
Nessa janela, em Predefinição deAdobe PDF, selecione no menu a opção Impressão de alta qualidade.
Salvar Adobe PDF
Figura 128 – Caixa de opções para exportar um PDF
Ao lado esquerdo da janela, há uma lista para definir detalhes mais específicos de preparação do 
arquivo para impressão; clique na opção Marcas e sangrias.
Salvar Adobe PDF
Figura 129 – Caixa de opções de marcas
Nessa janela, no painel Marcas, você deve assinalar as opções Marcas de aparagem e Marcas de registro.
No painel Sangrias, logo a seguir, marque a opção Usar configurações de sangria do documento.
126
Re
vi
sã
o:
 A
lin
e 
- 
Di
ag
ra
m
aç
ão
: M
ár
ci
o 
- 
04
/0
2/
20
16
Unidade III
Salvar Adobe PDF
Figura 130 – Caixa de opções de Sangrias
Verifique se todas as configurações foram feitas e clique em Salvar PDF.
Exemplos de trabalhos no Illustrator
•	 Banner de produtos (informações técnicas – tamanho: 360 mm x 170 mm; sangria 3 mm):
Figura 131 – Banner de produtos alimentícios
127
Re
vi
sã
o:
 A
lin
e 
- 
Di
ag
ra
m
aç
ão
: M
ár
ci
o 
- 
04
/0
2/
20
16
Criatividade e teCnologia ofiCina
•	 E‑mail marketing (informações técnicas – tamanho: 240 mm x 310 mm):
Figura 132 – E‑mail marketing
128
Re
vi
sã
o:
 A
lin
e 
- 
Di
ag
ra
m
aç
ão
: M
ár
ci
o 
- 
04
/0
2/
20
16
Unidade III
•	 Logotipo	ChocoShow	(informações	técnicas	–	tamanho:	170	mm	x	170	mm):
Figura 133 – Logotipo Doceria ChocoShow
8.2 InDesign
O InDesign foi lançado em 1999 pela renomada Adobe Systems e foi uma substituição ao PageMaker, 
uma vez que apresentou maior produtividade em sua utilização. Essa revolução na diagramação de 
páginas e finalização de arquivos foi iniciada em 1994, quando a Adobe comprou a Aldus e iniciou 
o desenvolvimento do K2, protótipo do InDesign, lançado oficialmente apenas cinco anos depois. 
As principais mudanças ocorridas no programa foram em 2003, ano em que o mercado gráfico 
começou a utilizá‑lo com maior frequência, percebendo seu amadurecimento e maior possibilidade 
de ferramentas.
Com o InDesign, é possível criar e diagramar materiais para revistas, embalagens, anúncios, jornais, 
panfletos, material publicitário etc. Com isso, são criados arquivos em formato próprio que posteriormente 
podem ser exportados para PDF (ou outro arquivo compatível) e enviados para impressão. Além disso, 
tem um recurso de edição web, possibilitando a criação de layouts e materiais interativos, nos quais 
existe a utilização do Adobe Flash também.
É uma das principais ferramentas utilizadas por editoras de jornais e revistas, agências de publicidade e marketing, 
juntamente com o Photoshop e Illustrator. Sua versão mais atual é a CC, em substituição à CS6, quefazia parte da 
extinta Creative Suite. O Creative Suite 6 foi o último vendido pela Adobe, não obtendo uma atualização. Agora a 
nomenclatura segue como InDesign CC, de Creative Cloud, e sua última atualização foi em agosto de 2015.
Na figura a seguir, apresentamos uma linha do tempo, e, na sequência, um comparativo entre a 
primeira e a última versão da Creative Suite (InDesign CS6) e a versão atual (InDesign CC):
129
Re
vi
sã
o:
 A
lin
e 
- 
Di
ag
ra
m
aç
ão
: M
ár
ci
o 
- 
04
/0
2/
20
16
Criatividade e teCnologia ofiCina
Figura 134 – Arte cronológica dos softwares elaborada pela autora
8.2.1 Principais ferramentas do InDesign
O InDesign está atualmente na versão CS6 e faz parte da Creative Suite, a suíte criativa, possuindo 
uma integração entre os aplicativos desse pacote, inclusive na interface, que é padrão de todos eles.
A área de trabalho consiste em uma janela de documento (para desenhar e definir o layout de sua 
arte), uma caixa de ferramentas, paletas (para monitorar e modificar a arte) e menus de comandos.
130
Re
vi
sã
o:
 A
lin
e 
- 
Di
ag
ra
m
aç
ão
: M
ár
ci
o 
- 
04
/0
2/
20
16
Unidade III
Figura 135 – Área de trabalho do InDesign
As funções dos principais itens da Área de Trabalho são as seguintes:
•	 Menu	de	aplicativos:	contém	menus	como	objeto,	arquivo,	layout etc.
•	 Painel	de	controle:	exibe	as	opções	da	ferramenta	que	estiver	selecionada.
•	 Painel	de	ferramentas:	contém	todas	as	ferramentas	e	seus	grupos.
•	 Grupos	de	painéis	no	encaixe	vertical:	local	onde	os	painéis	ficam	ancorados	por	padrão.
À esquerda da tela, está o painel de ferramentas, sendo estas apresentadas em uma ou duas colunas.
 Observação
Observe que, ao lado de cada item de ferramentas, há uma faixa na 
borda direita com uma pequena seta. Ao clicar nela, aparece o grupo das 
ferramentas que estão ocultas.
131
Re
vi
sã
o:
 A
lin
e 
- 
Di
ag
ra
m
aç
ão
: M
ár
ci
o 
- 
04
/0
2/
20
16
Criatividade e teCnologia ofiCina
Seleção (V)
Tesoura (C)
Transformação livre (E)
Amostra de gradiente (G)
Difusão de gradiente (Shift + G)
Traçado
Alterar modo de tela
Seleção direta (A)
Página (Shift + P)
Espaço (U)
Coletor de conteúdo (B)
Tipo (T)
Linha (B)
Caneta (P)
Lápis (N)
Quadro	de	retângulo	(F)
Retângulo (M)
Nota
Conta‑gotas (I)
Mão (H)
Zoom (Z)
Preenchimento
Figura 136 – Menu de Ferramentas do InDesign
As guias servem para garantir uniformidade e ergonomia à diagramação, além de facilitar as funções 
de alinhamento e distribuição dos elementos gráficos.
132
Re
vi
sã
o:
 A
lin
e 
- 
Di
ag
ra
m
aç
ão
: M
ár
ci
o 
- 
04
/0
2/
20
16
Unidade III
No InDesign, a definição da quantidade de colunas e a distância entre elas podem ser configuradas 
na criação de um novo documento. Defina as colunas, clicando no menu layout e na opção Criar guias, 
e depois insira 5 linhas com espaçamento de 5 mm entre elas.
Depois de definidas as colunas, vá até o menu Layout > Criar guias e insira 5 linhas com espaçamento 
de 5 mm entre elas.
Figura 137 – Configuração da opção Criar guias
Na caixa de configuração de guias, clique em OK e suas linhas estarão definidas.
Figura 138 – Páginas para serem diagramadas com o auxílio das linhas‑guias
Lembrando que é possível ocultar todas as guias através do menu Exibir > Grades e Guias > 
Ocultar guias.
133
Re
vi
sã
o:
 A
lin
e 
- 
Di
ag
ra
m
aç
ão
: M
ár
ci
o 
- 
04
/0
2/
20
16
Criatividade e teCnologia ofiCina
Figura 139 – Ocultar linha‑guia
Se preferir, será possível utilizar um dos modos de visualização apenas pressionando a tecla W.
 Observação
As guias oferecem maior uniformidade ao processo de diagramação ao 
tornar automática a função de alinhamento. As linhas podem ser utilizadas 
como unidade de medida, por exemplo: o espaçamento entre as fotos será 
de duas linhas, e assim por diante.
No InDesign, a ferramenta Conta‑gotas permite recolher amostras de atributos de cor, de textos e 
de estilos, podendo ser aplicadas a outros objetos.
É uma ferramenta muito fácil de ser utilizada: basta selecionar, na barra de ferramentas, a opção 
Conta‑gotas e clicar em um objeto com os atributos que pretendemos coletar.
134
Re
vi
sã
o:
 A
lin
e 
- 
Di
ag
ra
m
aç
ão
: M
ár
ci
o 
- 
04
/0
2/
20
16
Unidade III
Figura 140 – Selecionando a ferramenta Conta‑gotas no objeto
Em seguida “descarregue” o Conta‑gotas onde pretende que esses atributos fiquem iguais.
Figura 141 – Ferramenta Conta‑gotas no texto
 Observação
Se clicarmos duas vezes sobre a ferramenta Conta‑gotas, o InDesign 
irá apresentar uma caixa com opções. Nessa caixa, podemos marcar ou 
desmarcar as várias opções.
135
Re
vi
sã
o:
 A
lin
e 
- 
Di
ag
ra
m
aç
ão
: M
ár
ci
o 
- 
04
/0
2/
20
16
Criatividade e teCnologia ofiCina
Figura 142 – Caixa de opções de Conta‑gotas
Como criar uma revista no InDesign
Para montar o arquivo da revista, é necessário criar um novo documento. Para isso, vá ao menu 
superior de aplicativos e selecione Arquivo > Novo > Documento.
Figura 143 – Criando um novo documento
Especifique as opções de configuração de documentos. No caso da revista, analise os seguintes 
campos, conforme imagem a seguir:
136
Re
vi
sã
o:
 A
lin
e 
- 
Di
ag
ra
m
aç
ão
: M
ár
ci
o 
- 
04
/0
2/
20
16
Unidade III
Figura 144 – Caixa de especificação de documento para revista
 Observação
Não é necessário inserir o quadro de texto principal, pois com isso será 
inserida uma caixa de texto para todas as páginas‑mestre.
A primeira página do seu layout é a capa da revista. Nesse caso, não é necessário ter 3 colunas como 
no miolo da revista.
Clique no menu de aplicativos e selecione Layout > Margens e Colunas e altere as configurações da 
página, conforme figura a seguir:
Figura 145 – Configurações de margens e colunas
Agora você pode começar a montar a sua capa; caso prefira inserir uma imagem, clique no menu 
Arquivo > Inserir, ou crie algum layout na sua capa, utilizando a barra de ferramentas.
137
Re
vi
sã
o:
 A
lin
e 
- 
Di
ag
ra
m
aç
ão
: M
ár
ci
o 
- 
04
/0
2/
20
16
Criatividade e teCnologia ofiCina
Figura 146 – Menu para inserir uma imagem
 Observação
Ao criar o seu layout, é sempre necessário inserir o objeto a partir da 
linha de Sangria.
Escolha a imagem desejada e clique em OK. Feito isso, você poderá montar todo o seu layout.
Figura 147 – Área de trabalho com imagem
Após a capa pronta, você pode analisar a sua imagem no modo Visualizar, clicando na barra de 
ferramentas ou pressionando a letra W.
138
Re
vi
sã
o:
 A
lin
e 
- 
Di
ag
ra
m
aç
ão
: M
ár
ci
o 
- 
04
/0
2/
20
16
Unidade III
Figura 148 – Modo Visualizar
Adicione um texto à capa: com a ferramenta Tipo , arraste para criar um novo quadro de texto, 
ou clique em um quadro de texto existente, fazendo o texto ser exibido para a digitação.
Figura 149 – Área de trabalho utilizando a ferramenta Tipo
Ative a ferramenta Seleção no texto. No painel de controle, altere as configurações de texto, tamanho 
e cores, como mostra a figura a seguir.
Figura 150 – Menu de Ferramentas de texto
Posicione o texto na capa, podendo inserir informações relacionadas à revista, como: edição, ano e 
matérias importantes.
139
Re
vi
sã
o:
 A
lin
e 
- 
Di
ag
ra
m
aç
ão
: M
ár
ci
o 
- 
04
/0
2/
20
16
Criatividade e teCnologia ofiCinaFigura 151 – Exemplo de capa de revista
Para a montagem do miolo de uma revista no InDesign, é possível criar uma página determinada “mestre”. 
Ela seria o esqueleto‑base da revista e é adicionada automaticamente na criação de um novo arquivo. Para 
adicionar uma nova página‑mestre, você precisará usar a guia Páginas e clicar na página A – Página‑mestre.
Figura 152 – Painel de encaixe para a página‑mestre
Ela funciona de maneira similar às camadas no Photoshop; o ícone demarcado a seguir, ao ser clicado, 
automaticamente, criará uma nova página seguindo a regra esquerda/direita, no caso de uma revista.
 Observação
Todas as informações que você inserir na página‑mestre aparecerão 
automaticamente em todas as páginas da revista ligadas a ela.
140
Re
vi
sã
o:
 A
lin
e 
- 
Di
ag
ra
m
aç
ão
: M
ár
ci
o 
- 
04
/0
2/
20
16
Unidade III
Figura 153 – Exemplo de utilização da página‑mestre
Em uma página em branco, após a capa, crie um layout com todos os textos, imagens e informações 
que são importantes para ser criada uma matéria da revista, conforme a figura a seguir.
Figura 154 – Exemplo de uma matéria para a revista
Insira, em uma nova página da sua revista, textos relacionados à sua matéria. Para isso, um texto em 
um quadro pode ser independente de outros quadros ou pode fluir entre quadros vinculados, que são 
chamados de “encadeamento de texto”.
Na barra de ferramentas, clique no ícone Tipo e crie uma nova caixa de texto.
141
Re
vi
sã
o:
 A
lin
e 
- 
Di
ag
ra
m
aç
ão
: M
ár
ci
o 
- 
04
/0
2/
20
16
Criatividade e teCnologia ofiCina
Figura 155 – Exemplo de caixa de texto
Posicione o ícone de texto carregado no quadro a ser vinculado. O ícone de texto carregado se 
transforma em um ícone de encadeamento.
Figura 156 – Exemplo para criação de encadeamento de texto
Clique no segundo quadro para encadeá‑lo ao primeiro.
Figura 157 – Área de trabalho com encadeamento de texto finalizado
142
Re
vi
sã
o:
 A
lin
e 
- 
Di
ag
ra
m
aç
ão
: M
ár
ci
o 
- 
04
/0
2/
20
16
Unidade III
Para inserir o número das páginas em sua revista, clique na página‑mestre e, com o botão direito do 
mouse, clique em Opções da página‑mestre.
Duplicar página‑mestre espelhada “A‑Página‑mestre”
Figura 158 – Menu de opções da página‑mestre
Altere as configurações conforme a figura e clique em OK.
Opções de páginas‑mestre
Figura 159 – Caixa de configurações da página‑mestre
Dê um duplo clique na página‑mestre para editar. Crie uma caixa de texto no rodapé de cada uma 
das páginas (direita e esquerda) e insira um número para configurar o texto.
Figura 160 – Exemplo de como inserir o texto com numeração da página‑mestre
Para transformar essa caixa de texto da página, vá até o Menu de aplicativos > Marcadores > 
Número de página atual.
143
Re
vi
sã
o:
 A
lin
e 
- 
Di
ag
ra
m
aç
ão
: M
ár
ci
o 
- 
04
/0
2/
20
16
Criatividade e teCnologia ofiCina
Figura 161 – Menu de aplicativos para converter o texto em marcador
Assim que você clicar, aparecerá a letra A, que é a indicação de que você estará na página‑mestre A.
Figura 162 – Exemplo da área de trabalho com marcador
Ajuste o alinhamento do número de páginas e volte para a edição de sua revista; os números estarão 
em todas as páginas.
144
Re
vi
sã
o:
 A
lin
e 
- 
Di
ag
ra
m
aç
ão
: M
ár
ci
o 
- 
04
/0
2/
20
16
Unidade III
Figura 163 – Exemplo da área de trabalho com os números de páginas
A sangria significa algum elemento que ultrapassa as margens de suas páginas. Assim, com o seu 
arquivo aberto, vá ate o menu superior e clique no botão Arquivo > Configurações do documento.
Figura 164 – Menu de configurações do documento
Na caixa de configurações do documento, clique em Mais opções, e aparecerá a opção Sangria. 
Coloque em todos os campos a medida de 3 mm e clique OK.
145
Re
vi
sã
o:
 A
lin
e 
- 
Di
ag
ra
m
aç
ão
: M
ár
ci
o 
- 
04
/0
2/
20
16
Criatividade e teCnologia ofiCina
Configurar documento
Figura 165 – Configurações de sangria
Seu documento deve ficar com aparência semelhante à do documento a seguir.
Figura 166 – Exemplo de uma imagem com sangria
Para fazer as margens de segurança, vá ao Menu Superior > Layout > Margens e colunas
Figura 167 – Menu para inserir/editar margens e colunas
146
Re
vi
sã
o:
 A
lin
e 
- 
Di
ag
ra
m
aç
ão
: M
ár
ci
o 
- 
04
/0
2/
20
16
Unidade III
Na janela seguinte, no painel Margens, coloque a medida de 3 mm em todos os campos. Clique 
em OK.
Margens e colunas
Figura 168 – Caixa de edição de margens e colunas
Seu documento deve ficar com aparência semelhante à do documento a seguir.
Figura 169 – Exemplo de área de trabalho com margem e coluna
Para converter os textos em curvas, vá, com os textos selecionados, ao Menu Superior > Tipo > 
Criar contornos:
147
Re
vi
sã
o:
 A
lin
e 
- 
Di
ag
ra
m
aç
ão
: M
ár
ci
o 
- 
04
/0
2/
20
16
Criatividade e teCnologia ofiCina
Figura 170 – Menu para converter um texto em curvas
 Observação
Converter suas fontes em curvas acarretará a perda da possibilidade 
de edição dos textos.
Para enviar seu arquivo, você deve primeiro verificar se o seu formato, o número de páginas, a 
resolução e as fontes estão correspondentes com as configurações da gráfica.
A	 resolução	das	 imagens	deverá	estar	 sempre	300	dpi.	Quanto	maior	o	DPI	da	 imagem	original,	
maiores a definição e a qualidade dessa imagem.
Para analisar a resolução, vá ao Menu superior > Janelas > Informações.
148
Re
vi
sã
o:
 A
lin
e 
- 
Di
ag
ra
m
aç
ão
: M
ár
ci
o 
- 
04
/0
2/
20
16
Unidade III
Figura 171 – Menu de informações de resolução
A configuração correta de sua imagem deveria estar da seguinte maneira:
Figura 172 – Caixa de informações de resolução
As cores de seu documento deverão ser em CMYK.
Vá ao Menu superior > Arquivo > Configurações do documento:
149
Re
vi
sã
o:
 A
lin
e 
- 
Di
ag
ra
m
aç
ão
: M
ár
ci
o 
- 
04
/0
2/
20
16
Criatividade e teCnologia ofiCina
Figura 173 – Menu de configurações do documento
Uma segunda janela se abrirá, você poderá editar algumas características do documento.
No campo Propósito, escolha opção Imprimir. Ao escolher esta opção, você estará automaticamente 
convertendo o seu arquivo para CMYK.
Figura 174 – Caixa de configurações do documento
•	 Para	fechar	o	arquivo	no	InDesign,	vá	até	o	Menu	superior	>	Exportar.
150
Re
vi
sã
o:
 A
lin
e 
- 
Di
ag
ra
m
aç
ão
: M
ár
ci
o 
- 
04
/0
2/
20
16
Unidade III
Figura 175 – Menu de configurações para exportar um arquivo
Escolha a opção do PDF que deseja utilizar e clique em Salvar.
Figura 176 – Caixa para salvar um arquivo
151
Re
vi
sã
o:
 A
lin
e 
- 
Di
ag
ra
m
aç
ão
: M
ár
ci
o 
- 
04
/0
2/
20
16
Criatividade e teCnologia ofiCina
 Observação
No caso de revistas e panfletos, os arquivos deverão sempre ser salvos 
em PDF para impressão. Já para publicações on‑line, poderá ser utilizado o 
PDF interativo.
Nesse momento se abrirá uma nova janela chamada Exportar Adobe PDF. Selecione no menu 
Predefinição a opção de Alta qualidade.
Exportar Adobe PDF
Figura 177 – Caixa de opções para exportar um PDF
Ao lado esquerdo da janela, há uma lista para definir detalhes mais específicos de preparação do 
arquivo para impressão. Clique na opção Marcas e sangrias.
Na janela que se abriu, no painelMarcas, você deve assinalar as opções:
•	 Marcas	de	corte,	marcas	de	registro,	marcas	de	sangria,	barra	de	cores	e	informações	da	página.
152
Re
vi
sã
o:
 A
lin
e 
- 
Di
ag
ra
m
aç
ão
: M
ár
ci
o 
- 
04
/0
2/
20
16
Unidade III
Exportar Adobe PDF
Figura 178 – Caixa de opções de Marcas
No painel Sangria, na figura logo a seguir, marque a opção Usar configurações de sangria do documento.
Exportar Adobe PDF
Figura 179 – Caixa de opções de Sangrias
Verifique se todas as configurações foram feitas e clique em Exportar PDF, e a imagem será salva 
conforme figura a seguir:
153
Re
vi
sã
o:
 A
lin
e 
- 
Di
ag
ra
m
aç
ão
: M
ár
ci
o 
- 
04
/0
2/
20
16
Criatividade e teCnologia ofiCina
Figura 180 – Exemplo de arquivo finalizado para impressão
Você pode inserir texto em contorno ao redor de qualquer objeto, como quadros de texto, imagens 
importadas e objetos desenhados no InDesign.
Para exibir o painel Texto em contorno, escolha Janela > Texto em contorno.
154
Re
vi
sã
o:
 A
lin
e 
- 
Di
ag
ra
m
aç
ão
: M
ár
ci
o 
- 
04
/0
2/
20
16
Unidade III
Figura 181 – Menu de Texto em contorno
Usando a ferramenta Seleção, ou Seleção Direta, selecione o objeto que deseja contornar com texto.
Figura 182 – Objeto e texto selecionado
No painel Texto em contorno, clique no botão da forma de contorno desejada:
Figura 183 – Caixa de Texto em contorno
155
Re
vi
sã
o:
 A
lin
e 
- 
Di
ag
ra
m
aç
ão
: M
ár
ci
o 
- 
04
/0
2/
20
16
Criatividade e teCnologia ofiCina
A quebra de texto em torno da caixa cria um contorno retangular cuja largura e altura são 
determinadas pela caixa delimitadora do objeto selecionado.
A quebra de texto em torno do objeto cria um limite de texto em contorno com a forma do quadro selecionado.
Saltar objeto impede que o texto apareça em qualquer espaço disponível à direita ou à esquerda do quadro.
Saltar para a próxima coluna força o parágrafo para a parte superior da próxima coluna de texto ou 
do quadro de texto seguinte.
No menu Ajustar a, especifique se o contorno é aplicado a um lado específico, na direção da lombada 
ou na direção oposta à lombada.
Figura 184 – Ajuste de contorno
 Observação
A opção Texto em contorno só estará disponível se você tiver selecionado 
Quebra	de	texto	em	torno	da	caixa	ou	Quebra	de	texto	em	torno	do	objeto.
Arraste a imagem para o local em que deseja fazer o contorno do texto 
para finalizar.
Figura 185 – Texto com contorno
156
Re
vi
sã
o:
 A
lin
e 
- 
Di
ag
ra
m
aç
ão
: M
ár
ci
o 
- 
04
/0
2/
20
16
Unidade III
Para criar notas de rodapé, deve‑se considerar que uma nota de rodapé é formada de duas partes 
vinculadas: o número de referência da nota de rodapé mostrado no texto e o texto da nota de rodapé 
mostrado na parte inferior da coluna. As notas de rodapé são numeradas automaticamente quando são 
incluídas em um documento. A numeração recomeça a cada matéria. É possível determinar o estilo de 
numeração, a aparência e o layout das notas de rodapé.
Posicione o ponto de inserção onde você deseja exibir o número de referência da nota de rodapé.
Figura 186 – Texto para ser inserida a nota de rodapé
Escolha Tipo > Inserir nota de rodapé.
Figura 187 – Menu Tipo
157
Re
vi
sã
o:
 A
lin
e 
- 
Di
ag
ra
m
aç
ão
: M
ár
ci
o 
- 
04
/0
2/
20
16
Criatividade e teCnologia ofiCina
Digite o texto da nota de rodapé.
Figura 188 – Caixa de texto com a nota de rodapé
Na preparação de uma capa de livro, é necessário inserir alguns elementos importantes: a lombada 
(lado vertical do livro em que se liga a capa), a contracapa e o miolo.
Primeiro, analise as medidas de seu documento. Imaginando que vamos fazer um livro com as 
medidas de 130 mm de largura, 200 mm de altura e 12 mm de lombada. Faremos um novo documento, 
e a largura terá de ser somada da seguinte forma: 130 mm + 14 mm + 130 mm (largura da capa + 
lombada + contracapa).
 Novo documento
Figura 189 – Caixa do novo documento
A sangria pode ser definida em 5 mm.
158
Re
vi
sã
o:
 A
lin
e 
- 
Di
ag
ra
m
aç
ão
: M
ár
ci
o 
- 
04
/0
2/
20
16
Unidade III
Agora vamos definir marcas para sabermos onde fica a lombada. Para isso, colocamos a primeira 
linha‑guia arrastando até em 130 mm na régua lateral, e a segunda guia em 144 mm.
Figura 190 – Linha‑guia
A partir disso, podemos fazer o layout para a capa, contando que, no lado direito, temos a capa, no 
meio, a lombada e, no lado esquerdo, a contracapa.
Figura 191 – Linha‑guia com layout
No InDesign, podemos exportar automaticamente um PDF em tons de cinza. Dessa forma, temos 
um controle adequado sobre o nosso projeto e evitamos o trabalho extra de manter diversas versões da 
nossa paginação.
•	 Pré-visualizar	em	tons	de	cinza
159
Re
vi
sã
o:
 A
lin
e 
- 
Di
ag
ra
m
aç
ão
: M
ár
ci
o 
- 
04
/0
2/
20
16
Criatividade e teCnologia ofiCina
Vamos ao menu: Exibir > Configuração de Prova > Personalizar e escolhemos qual o perfil de tons 
de cinza que pretendemos. No caso, foi escolhido, na opção Dispositivo para simulação, o tom Dot 
Gain 25%.
Personalizar condição de prova
Figura 192 – Caixa de Personalizar condição de prova
Depois de configuramos com o perfil desejado, vamos outra vez ao menu Exibir > Cores de prova, 
para podermos então visualizar o nosso trabalho em tons de cinza.
Figura 193 – Menu de Cores de prova
•	 Exportar	para	PDF	em	tons	de	cinza
Quando	exportamos	um	PDF	em	tons	de	cinza	(grayscale), deveremos atentar a que todos os itens da 
página, independentemente do seu espaço de cor original, serão convertidos em tons de cinza, quando 
será feita a exportação para PDF.
Para exportar para PDF, vamos ao menu Arquivo > Exportar.
160
Re
vi
sã
o:
 A
lin
e 
- 
Di
ag
ra
m
aç
ão
: M
ár
ci
o 
- 
04
/0
2/
20
16
Unidade III
Figura 194 – Menu para exportar o PDF
Escolha a opção Adobe PDF (Impressão).
Figura 195 – Exportar o PDF para impressão
Escolher a opção Saída na caixa de diálogo Opções de exportação de PDF.
161
Re
vi
sã
o:
 A
lin
e 
- 
Di
ag
ra
m
aç
ão
: M
ár
ci
o 
- 
04
/0
2/
20
16
Criatividade e teCnologia ofiCina
Exportar Adobe PDF
Figura 196 – Caixa de opções do PDF
Em Conversão de cores, devemos escolher a opção Converter em destino.
Em Destino, escolher um dos perfis de tons de cinza: Dot Gain 25%.
Figura 197 – Opções de cores na caixa de Saída
O resultado será um PDF em tons de cinza finalizado e completamente adaptado para impressão.
162
Re
vi
sã
o:
 A
lin
e 
- 
Di
ag
ra
m
aç
ão
: M
ár
ci
o 
- 
04
/0
2/
20
16
Unidade III
Figura 198 – PDF em tons de cinza
Galeria de trabalhos: exemplos de trabalhos no InDesign
•	 Catálogo	de	produtos (informações técnicas – tamanho: 210 mm x 297 mm; sangria: 3 mm; 
número de páginas: 17).
163
Re
vi
sã
o:
 A
lin
e 
- 
Di
ag
ra
m
aç
ão
: M
ár
ci
o 
- 
04
/0
2/
20
16
Criatividade e teCnologia ofiCina
Figura 199 – Catálogo de produtos
•	 Jornal	on‑line (informações técnicas – tamanho: 200 mm x 290 mm; sangria: 3 mm; número de páginas: 4).
Figura 200 – Jornal on‑line
164
Re
vi
sã
o:
 A
lin
e 
- 
Di
ag
ra
m
aç
ão
: M
ár
ci
o 
- 
04
/0
2/
20
16
Unidade III
•	 E‑mail marketing (informações técnicas – tamanho: 280 mm x 580 mm).
Figura 201 – E‑mail marketing de financiamento
165Re
vi
sã
o:
 A
lin
e 
- 
Di
ag
ra
m
aç
ão
: M
ár
ci
o 
- 
04
/0
2/
20
16
Criatividade e teCnologia ofiCina
•	 Papel	timbrado	(informações	técnicas	–	tamanho:	210	mm	x	297	mm).
Figura 202 – Papel timbrado
8.3 Photoshop – Software da Adobe
O programa que hoje é conhecido como Photoshop nasceu em 1990 e foi criado pelos irmãos Thomas 
e John Knoll. Enquanto Thomas era um aluno da Universidade de Michigan, John era supervisor de 
efeitos visuais para cinema. Eles trabalharam em cima de um programa que poderia ser comercializado, 
que inicialmente recebeu o nome de ImagePro.
Ainda em 1990, o ImagePro foi apresentado oficialmente à Apple e ao Adobe, comprado, e a versão 
do Adobe Photoshop 1.0 foi lançada, sendo um marco revolucionário para a história da edição de 
imagens, visto que, na época, uma simples edição custava milhões de dólares e utilizava vários programas 
específicos. Inicialmente, essa versão dispunha da ferramenta Carimbo, possibilitava o trabalho com 
curvas, níveis, correções de cores com tons e saturação e pedia no mínimo 2 MB de memória RAM de 
seu usuário. Foi apenas a partir da versão 2.0 que o suporte para Windows surgiu, e da versão 3.0, que 
surgiu a possibilidade de trabalhar com camadas.
O Photoshop foi criado para edição de imagem e posterior impressão no papel, mas passou a ser 
cada vez mais utilizado para edições web. Sua versão mais atual é a CC, em substituição ao CS6, que 
166
Re
vi
sã
o:
 A
lin
e 
- 
Di
ag
ra
m
aç
ão
: M
ár
ci
o 
- 
04
/0
2/
20
16
Unidade III
também fazia parte da extinta Creative Suite. Agora a nomenclatura segue como Photoshop CC, e sua 
última atualização foi em agosto de 2015. Na figura a seguir, apresentamos uma linha do tempo, e, na 
sequência, um comparativo entre a primeira e a última versão da Creative Suite (Photoshop CS6) e a 
versão atual (Photoshop CC):
Figura 203 – Arte cronológica dos softwares elaborada pela autora
Figura 204 – Principais ferramentas do software Adobe Photoshop
Permite criar e manipular documentos e arquivos usando vários elementos, como painéis, barras e 
janelas.	Qualquer	organização	desses	elementos	é	denominada	“área	de	trabalho”.
167
Re
vi
sã
o:
 A
lin
e 
- 
Di
ag
ra
m
aç
ão
: M
ár
ci
o 
- 
04
/0
2/
20
16
Criatividade e teCnologia ofiCina
Para adaptar cada aplicativo ao seu modo de trabalho, selecione um dos vários espaços de trabalho 
predefinidos, ou crie seu próprio.
Figura 205 – Área de Trabalho do Photoshop
As funções dos itens da área de trabalho são as seguintes:
•	 Painel	de	Ferramentas.
•	 Painel	de	Controle.
•	 Menu	de	aplicativos.
•	 Grupos	de	painéis	no	encaixe.
C
B
A D
Figura 206 – Divisão de ferramentas na Área de Trabalho
168
Re
vi
sã
o:
 A
lin
e 
- 
Di
ag
ra
m
aç
ão
: M
ár
ci
o 
- 
04
/0
2/
20
16
Unidade III
À esquerda da tela, está o Painel de Ferramentas, sendo apresentado em uma ou duas colunas.
Mover (V)
Degradê (E)
Desfoque
Subexposição (O)
Traçado
Alterar modo de tela
Letreiro retângulo (M)
Laço (L)
Seleção rápida (W)
Corte demarcado (C)
Conta‑gotas (I)
Pincel de recuperação para manchas (J)
Pincel (B)
Carimbo (S)
Pincel histórico (Y)
Borracha (E)
Caneta (P)
Texto horizontal (T)
Seleção de demarcador (A)
Retângulo (M)
Mão (H)
Zoom (Z)
Preenchimento
Editar	no	modo	máscara	rápida	(Q)
Figura 207 – Barra de Ferramentas do Photoshop
169
Re
vi
sã
o:
 A
lin
e 
- 
Di
ag
ra
m
aç
ão
: M
ár
ci
o 
- 
04
/0
2/
20
16
Criatividade e teCnologia ofiCina
 Observação
Ao lado de cada item de ferramentas, há uma faixa na borda direita 
com uma pequena seta, aparecendo o grupo de ferramentas com opções 
que estavam ocultas.
Como de costume, o menu Arquivo lida com abrir, salvar e fechar arquivos. Uma opção diferente 
e de destaque é a Salvar para web, que é muito útil para salvar arquivos com uma qualidade inferior 
a 300 dpi.
Figura 208 – Menu Arquivos do Photoshop
O menu Editar traz recursos como desfazer, refazer, cortar, copiar e colar. No Photoshop, é aqui que 
você transforma suas camadas e define seu espaço de cores.
170
Re
vi
sã
o:
 A
lin
e 
- 
Di
ag
ra
m
aç
ão
: M
ár
ci
o 
- 
04
/0
2/
20
16
Unidade III
Figura 209 – Menu Editar do Photoshop
Podem ser realizados ajustes de imagem e de tela, incluindo efeitos destrutivos que você também 
pode encontrar na paleta Ajustes. As opções nesse menu são feitas para alterar a imagem como um 
todo, apesar de alguns ajustes serem aplicados apenas a uma camada.
Figura 210 – Menu Imagem do Photoshop
171
Re
vi
sã
o:
 A
lin
e 
- 
Di
ag
ra
m
aç
ão
: M
ár
ci
o 
- 
04
/0
2/
20
16
Criatividade e teCnologia ofiCina
O menu Camadas também permite a criação de camadas de ajuste e objetos inteligentes (um grupo 
de camadas tratado como um objeto único).
Figura 211 – Menu Camadas do Photoshop
No menu Tipo, encontram‑se os comandos e opções de textos como: converter, rasterizar, opções de 
idiomas e atualização de camadas de textos.
Figura 212 – Menu Tipo do Photoshop
172
Re
vi
sã
o:
 A
lin
e 
- 
Di
ag
ra
m
aç
ão
: M
ár
ci
o 
- 
04
/0
2/
20
16
Unidade III
O menu Selecionar pode ser usado para criar seleções completamente novas a partir de critérios 
como espectro de cor e luminosidade. As ferramentas Letreiro e Laço serão seus principais meios de 
selecionar partes da sua imagem, mas o menu Selecionar ajuda a refinar a seleção.
Figura 213 – Menu Selecionar do Photoshop
O menu Filtro traz uma coleção de filtros inclusos no Photoshop, que podem borrar, focar, distorcer 
e alterar a sua imagem (ou algumas camadas apenas) de muitos modos diferentes e únicos.
Figura 214 – Menu Filtro do Photoshop
173
Re
vi
sã
o:
 A
lin
e 
- 
Di
ag
ra
m
aç
ão
: M
ár
ci
o 
- 
04
/0
2/
20
16
Criatividade e teCnologia ofiCina
No menu Visualizar, é possível exibir ou esconder guias e réguas e fazer o Photoshop automaticamente 
alinhar objetos em relação a bordas, cantos e/ou uma grade no plano de fundo. A exibição dessa grade 
também pode ser ligada e desligada nesse menu.
Figura 215 – Menu Visualizar do Photoshop
O menu Janela permite esconder e mostrar certas janelas e paletas. Você também pode 
organizar as suas janelas do Photoshop do jeito que quiser e salvar a sua organização para 
carregar posteriormente.
174
Re
vi
sã
o:
 A
lin
e 
- 
Di
ag
ra
m
aç
ão
: M
ár
ci
o 
- 
04
/0
2/
20
16
Unidade III
Figura 216 – Menu Janela do Photoshop
O painel Camadas do Photoshop relaciona todas as camadas, grupos e efeitos de camada em uma 
imagem. Esse painel pode ser usado para mostrar e ocultar camadas, criar novas camadas e trabalhar 
com grupos de camadas. No menu do painel Camadas, podem‑se acessar comandos e opções adicionais, 
tais como:
175
Re
vi
sã
o:
 A
lin
e 
- 
Di
ag
ra
m
aç
ão
: M
ár
ci
o 
- 
04
/0
2/
20
16
Criatividade e teCnologia ofiCina
A
B
C
D
E
F
Figura 217 – Painel de Camadas
A) Menu do painel Camadas.
B) Grupo de camadas.
C) Camada.
D) Expandir/recolher efeitos da camada.
E) Efeito da camada.
F) Miniatura da camada.
176
Re
vi
sã
o:
 A
lin
e 
- 
Di
ag
ra
m
aç
ão
: M
ár
ci
o 
- 
04
/0
2/
20
16
Unidade III
8.3.1 Edição de imagens
Insira a imagem que deseja ajustar.
Figura 218 – Imagem para ajuste
Através do menu de brilho e contraste, podemos alterar