Design de tela e planejamento de sites

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”.
86
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.
87
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
88
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 Planejamento de 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
89
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.
90
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.
91
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.
92
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ção do 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.
93
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.
94
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 A web conta com sistemas de navegação dinâmica,
íntegra e de forma aleatória. que dependem do clique no link e da rolagem.
O layout da página impressa é algo fixo, e Ao trabalhar na web, no entanto, não há garantias
Layout pode‑se criá‑lo para esse fim, talvez fazendo em relação ao design, dado o tamanho da janela do
uma página aparecer como uma página navegador do usuário; além disso, o navegador e o
dupla. 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 As opções tipográficas dos webdesigners são

Pouca limitação. relativamente limitadas.
Interação Não tem interatividade e elementos As páginas web contam com a interatividade e com
dinâmicos. 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.
95
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
96
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
97
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.
98
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)
Caneta (P)
Tipo (T)
Segmento de linha (/)
Retângulo (M)
Pincel (B)
Lápis (N)
Pincel irregular (Shift + B)
Borracha (Shift + E)
Girar (R)
Dimensionar (S)
Largura (Shift + W)
Transformação livre (E)
Formas (Shift + M)
Grade de perspectiva (Shift + P)
Malha (U)
Gradiente (G)
Conta-gotas (I)
Mesclagem (W)
Pulverizar símbolos (Shift + S)
Gráficos de colunas (J)
Prancheta (Shift + O)
Fatia (Shift + K)
Mão (H)
Zoom (Z)
Preenchimento e traçado‑padrão Alternar preenchimento e traçado
Preenchimento Traçado
Cor / Gradiente / Nenhum
Modos de desenho
Alterar modo de tela
Figura 66 – Barra de Ferramentas do Illustrator
99
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
100
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
101
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.
102
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.
C
E X TO N O A M I N H O
T
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.
103
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.
104
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
105
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.
106
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 contorno na 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
107
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
108
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
109
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.
110
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.
111
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
112
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
113
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.
114
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.
115
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:
116
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
117
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
118
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.
119
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.
120
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.
121
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:
122
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
123
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
124
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.
125
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
126
• E‑mail marketing (informações técnicas – tamanho: 240 mm x 310 mm):
Figura 132 – E‑mail marketing
127
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, que fazia 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):
128
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.
129
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.
130
Seleção (V)
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)
Tesoura (C)
Transformação livre (E)
Amostra de gradiente (G)
Difusão de gradiente (Shift + G)
Nota
Conta‑gotas (I)
Mão (H)
Zoom (Z)
Preenchimento
Traçado
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.
131
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.
132
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.
133
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.
134
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:
135
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.
136
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.
137
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.
138
Figura 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.
139
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.
140
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
141
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.
142
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.
143
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.
144
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
145
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:
146
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.
147
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:
148
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.
149
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
150
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 painel Marcas, você deve assinalar as opções:
• Marcas de corte, marcas de registro, marcas de sangria, barra de cores e informações da página.
151
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:
152
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.
153
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
154
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
155
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
156
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.
157
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
158
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.
159
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.
160
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.
161
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).
162
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
163
Unidade III
• E‑mail marketing (informações técnicas – tamanho: 280 mm x 580 mm).
Figura 201 – E‑mail marketing de financiamento
164
• 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
165
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”.
166
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
167
Unidade III
À esquerda da tela, está o Painel de Ferramentas, sendo apresentado em uma ou duas colunas.
Mover (V)
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)
Degradê (E)
Desfoque
Subexposição (O)
Caneta (P)
Texto horizontal (T)
Seleção de demarcador (A)
Retângulo (M)
Mão (H)
Zoom (Z)
Preenchimento
Traçado
Editar no modo máscara rápida (Q)
Figura 207 – Barra de Ferramentas do Photoshop
168
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.
169
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
170
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
171
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
172
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.
173
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:
174
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.
175
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 facilmente as características em uma

imagem. Clique em Imagem > Ajustes > Brilho/Contraste.
Figura 219 – Caixa de diálogo para ajuste de brilho e contraste
Arraste a setinha de brilho para a direita para aumentar o brilho da imagem e para a esquerda para
diminuir o brilho. Faça o mesmo com a setinha de contraste.
176
Figura 220 – Imagem com ajuste de Brilho e Contraste
A alteração das dimensões de pixel de uma imagem afeta não só seu tamanho na tela, mas também
sua qualidade e suas características impressas.
Figura 221 – Imagem para ajustar o tamanho
No menu de aplicativos, clique em Imagem > Tamanho da imagem.
Figura 222 – Caixa de configuração de Tamanho da Imagem
177
Unidade III
Observação
Para manter as proporções atuais entre a largura e a altura dos

pixels, selecione Restringir proporções. No campo de resolução, defina
o valor de dpi.
Em Dimensões em pixels, digite valores para Largura e Altura.
Figura 223 – Caixa de configuração de Tamanho da Imagem
Ao concluir a configuração das opções, clique em OK.
Figura 224 – Caixa de configuração de Tamanho da Imagem ajustado
Para transformar uma imagem em uma pintura a óleo, escolha uma imagem da sua preferência e vá
ao menu Arquivo > Abrir.
178
Figura 225 – Imagem para obter foto com efeito
Com a imagem já aberta, clique em Filtro, seguido de Pintura a Óleo.
Figura 226 – Menu de aplicativo para Pintura a Óleo
A janela do filtro Pintura a Óleo apresenta seis opções. As quatro primeiras determinam a força e o
formato das pinceladas virtuais, enquanto as duas últimas modificam a luz da imagem.
179
Unidade III
Figura 227 – Caixa de menu de Pintura a Óleo
Faça os ajustes de acordo com as opções da figura a seguir.
Figura 228 – Opções de Pintura a Óleo
Feitas as alterações, basta clicar em OK e sua imagem estará com o filtro de Pintura a Óleo.
180
Figura 229 – Imagem com Pintura a Óleo
Para obter o efeito de desenho em uma imagem, vá até o menu Arquivo, depois em Abrir, e selecione
a imagem de sua preferência.
Figura 230 – Imagem com Pintura a Óleo
Depois que a imagem for carregada, clique no item Filtro, que está no menu superior, e escolha a
opção Galeria de filtros.
181
Unidade III
Figura 231 – Menu de filtros
No canto superior direito, aparecerão diversas opções de filtros. Clique na opção Artístico > Arestas
Posterizadas. Selecione as opções de ajustes como tamanho da espessura, intensidade e posterização.
Figura 232 – Opções dos filtros
Clique em OK e seu filtro de desenho será inseridos na imagem.
Figura 233 – Imagem com filtro de desenho
182
Para converter uma imagem para preto e branco, abra a imagem desejada no Photoshop.
Figura 234 – Foto importada para o editor
Após escolher a imagem preferida, clique em Imagem > Ajustes > Preto e branco.
Figura 235 – Menu do recurso em preto e branco
Ao clicar na opção Preto e branco, automaticamente, sua imagem ficará em preto e branco.
183
Unidade III
Figura 236 – Fotografia em preto e branco
Observação
Ao abrir uma caixa de opções predefinida como Padrão, você

poderá manipular as cores originais de sua foto colorida, obtendo
resultados diferenciados.
Para remover imperfeições da pele, abra uma nova imagem no menu Arquivo > Abrir.
Figura 237 – Imagem para o ajuste
Selecione a ferramenta Correção e clique na imagem escolhida.
184
Figura 238 – Opção da ferramenta de Correção
Crie uma seleção ao redor de uma imperfeição usando a ferramenta.
Figura 239 – Seleção na imperfeição
Arraste a seleção para partes limpas da pele.
Figura 240 – Imagem com as partes limpas da pele
185
Unidade III
Agora altere para a ferramenta Carimbo.
Figura 241 – Ferramenta de Carimbo
Nesse exemplo, as configurações do Carimbo foram utilizadas com 30 pixels de diâmetro e 100% de
dureza, conforme figura a seguir.
Figura 242 – Configurações da ferramenta Carimbo
Pressione Alt e clique em uma área limpa da pele para selecionar esta área. Solte a tecla Alt e clique
nas áreas que você deseja limpar.
Figura 243 – Imagem com imperfeições tratadas
186
O Adobe Photoshop oferece ferramentas completas para remover o fundo das fotos. Dessa forma, você
pode adicionar elementos em outra paisagem, deixar em destaque ou apenas adicionar um background branco.
Abra o Photoshop no computador, selecione Arquivo e depois Abrir.
Figura 244 – Área de trabalho para procurar um documento
Selecione a imagem que deseja e confirme em Abrir.
Figura 245 – Área de trabalho para procurar um documento
187
Unidade III
Crie uma nova camada da imagem. Para isso, acesse a lateral na aba Camadas, clique com o botão
direito no ícone da foto e selecione Duplicar Camada. Confirme a ação em OK.
Figura 246 – Duplicar Camada
Depois, desmarque o Plano de Fundo da visão, no ícone de “olho”, para ver as mudanças. Deixe a
camada do topo selecionada.
Figura 247 – Área de camadas sem o plano de fundo
188
A Ferramenta Seleção Rápida também é prática para fotos com fundo de cores e características
semelhantes. Basta clicar no fundo para criar a seleção completa.
Figura 248 – Ferramenta Seleção Rápida
Faça a marcação de todas as áreas do fundo e, se necessário, aperte o botão Shift para somar áreas
e Alt para reduzir áreas, caso tenha passado de algum limite que não queira cortar.
Figura 249 – Área com marcação da ferramenta de seleção
Finalize com o botão Delete. Note que cada área ficará em quadriculado, ou seja, sem fundo.
Figura 250 – Imagem sem o plano de fundo
189
Unidade III
Para criar um convite para web, você deve definir todas as imagens que serão utilizadas. Abra a
primeira que ficará como plano de fundo.
Figura 251 – Imagem de plano de fundo
Na área de aplicativos, clique no botão Arquivo e depois na opção Inserir. Selecione a imagem em
que será feita a montagem e clique. Ao inserir a imagem, utilize a ferramenta Mover que aparecerá na
sequência e a posicione no local desejado.
Figura 252 – Imagem para a montagem
Na Caixa de Ferramentas, utilize a ferramenta de seleção rápida para selecionar apenas a imagem
que está em segundo plano (a senhora).
190
Figura 253 – Imagem selecionada
Vá ao menu de aplicativos e clique em Imagem > Ajustes > Matiz/Saturação. Isso permite ajustar
o matiz, a saturação e o brilho de um componente de cor específico em uma imagem ou ajustar
simultaneamente todas as cores em uma imagem.
Figura 254 – Máscara de corte
Ajuste a configuração das cores conforme a figura a seguir e clique em OK.
Figura 255 – Montagem de um cartão de Natal
191
Unidade III
No menu de ferramentas, clique na opção Tipo e insira textos para as informações do seu convite.
Figura 256 – Utilizando caixas de textos
Configure as opções de tipografia e tamanho de fonte, conforme figura a seguir.
Figura 257 – Opções de textos
Após fazer todos os ajustes de textos e imagens, vá para Menu > Arquivo > Salvar para a web. Na
Caixa de Opções, escolha o formato JPEG, defina qual qualidade será melhor para o envio do convite e
clique em Salvar.
Figura 258 – Caixa de salvar um arquivo para web
192
Defina o local em que será salvo o arquivo e clique em Salvar novamente.
Figura 259 – Opções do local do arquivo
Seu convite estará pronto para ser enviado via web.
Figura 260 – Opções do local do arquivo
Para utilizar a ferramenta Dissolver, insira uma imagem em que deseja deixar um objeto mais fino,
por exemplo, um rosto de uma pessoa.
193
Unidade III
Figura 261 – Imagem para utilizar a ferramenta Dissolver
No menu de aplicativos, clique em Filtro e Dissolver. Na janela que aparece, clique no primeiro ícone
da barra à esquerda: é a Ferramenta de Deformação Progressiva.
Figura 262 – Ferramenta de Deformação Progressiva
Com essa ferramenta, clique nas bordas do rosto do fotografado e faça movimentos leves em direção
ao centro. Faça com calma e experimente diferentes configurações de tamanho e pressão dos pincéis
que se encontram no canto superior esquerdo. Dessa forma, você afina a moldura da face e já consegue
dar uma aparência mais “leve” ao objeto da foto.
194
Figura 263 – Ferramenta de Deformação Progressiva ajustada
Depois disso, utilize a ferramenta Enrugar, o terceiro ícone da janela do filtro Dissolver. Após
selecioná‑la, você deve escolher áreas como bochechas ou olheiras, pressionar o botão do mouse e
mantê‑lo pressionado por alguns poucos segundos.
Figura 264 – Ferramenta Enrugar
Observação
Os pixels das bordas do pincel são absorvidos para o meio da área selecionada.
Após esse processo, clique em OK, e sua imagem estará ajustada.
195
Unidade III
Figura 265 – Imagem com ferramentas de dissolver
Na imagem a seguir, será utilizada a mesma ferramenta Dissolver para o efeito emagrecedor, porém
com outro exemplo.
Insira uma imagem que deseja deixar mais magra.
Figura 266 – Imagem para utilizar o efeito emagrecedor
196
Com a ferramenta de Deformação Progressiva, clique nas bordas das pernas e da barriga do
fotografado e faça movimentos leves em direção ao centro.
Figura 267 – Ferramenta de Deformação Progressiva ajustada
Utilize a ferramenta Enrugar para diminuir o volume, escolhendo áreas como a parte inferior da
barriga e das pernas e os braços, pressionando o botão do mouse; mantê‑lo pressionado por alguns
poucos segundos. Após esse processo, clique em OK, e sua imagem estará ajustada.
197
Unidade III
Figura 268 – Imagem com o efeito emagrecedor em braços, pernas e barriga
Para deixar apenas um objeto colorido em uma foto em preto e branco, abra o Photoshop no
computador, selecione Arquivo e depois Abrir, escolha uma imagem e clique em Abrir novamente.
Figura 269 – Imagem colorida
198
Acesse a lateral na aba Camadas, clique com o botão direito no ícone da foto e selecione Duplicar
Camada. Confirme a ação em OK.
Figura 270 – Duplicar Camada
Selecione a camada que foi criada e pressione Ctrl+U; isso fará a caixa de Matriz/Saturação
ser aberta.
Figura 271 – Caixa de Matriz/Saturação
Agora vá ao campo Saturação e puxe‑o até deixar a foto sem nenhuma saturação; a imagem deverá
ficar em preto e branco.
199
Unidade III
Figura 272 – Caixa de Matriz/Saturação alterada
Pressione a letra E do teclado ou clique na Barra de Ferramentas no ícone da borracha e comece

a apagar a parte que você deseja que esteja colorida na foto; use a ferramenta de zoom , nessa parte,
aproxime bastante para pegar os detalhes mínimos e, ao final, sua imagem estará assim.
Figura 273 – Imagem com apenas alguns objetos coloridos
Para criar uma montagem, você precisará de duas imagens. Abra a primeira, que ficará como plano
de fundo.
200
Clique na ferramenta Caneta e insira as configurações da Caneta conforme imagem a seguir:
Figura 275 – Configurações da Caneta
Faça as marcações no local do plano de fundo em que deseja inserir a outra imagem. Posicionando
no local de início, clique para definir o primeiro ponto e continue clicando até definir todo o local
em que deseja inserir a imagem e, para finalizar, clique novamente no primeiro ponto criado para
fechar o retângulo.
Ponto da caneta
Na área de aplicativos, clique em Arquivo e Inserir. Selecione a imagem em que será feita a montagem
e clique em Inserir.
201
Unidade III
Figura 277 – Imagem para a montagem
Posicione a imagem com a ferramenta Mover no local em que deseja fazer a montagem e ajuste o
seu tamanho com o comando Ctrl+T.
Figura 278 – Imagem para a montagem posicionada
Vá até a Caixa de Camadas e deixe a imagem em cima do retângulo que foi criado.
202
Figura 279 – Painel de Camadas
Clique com o botão direito sobre a imagem selecionada e vá em Criar máscara de corte.
Figura 280 – Máscara de corte
203
Unidade III
Observação
Máscaras são utilizadas para ocultar partes de uma camada e revelar

partes das camadas.
Sua imagem ficará dentro do retângulo de acordo com os pontos que foram criados. Após esse
procedimento, selecione as duas camadas e insira abaixo da camada do plano de fundo.
Figura 281 – Camadas com a máscara de corte
Ajuste a posição do retângulo e a sua montagem estará pronta.
Figura 282 – Montagem de um cartão de Natal
204
Galeria de trabalhos: exemplos de trabalhos no Photoshop
• Convites de aniversário:
Informações técnicas – Tamanho: 380 mm x 240 mm:
Figura 283 – Convite
Informações técnicas – Tamanho 380 mm x 240 mm:
205
Unidade III
206
• Campanhas para web (informações técnicas – Tamanho: 380 mm x 240 mm):
Figura 288 – Campanha de Dia das Mães
207
Unidade III
• Convite de Exposições (informações técnicas – Tamanho: 250 mm x 166 mm):
Figura 289 – Convite de Exposições
• Cartões de Visita (Informações técnicas – Tamanho: 90 mm x 50 mm, Frente e Verso):
Figura 290 – Cartões de Visita
Resumo
Pudemos observar no tópico que abrange o design de tela que a www

e o hipertexto foram o estopim de uma nova forma de comunicação e
informação, surgindo novos profissionais: o designer e o webdesigner.
208
Com a digitalização, novas ferramentas foram sendo desenvolvidas, e,

com elas, o profissionalismo na área tornou‑se cada vez mais exigente.
Desenvolvimento e planejamento de websites, administração de um novo
cliente, estratégias de pesquisa e cronogramas de produção são apenas
algumas funções que se formaram no ambiente digital.
Abordamos também a dimensão e as possibilidades que temos ao

trabalhar com softwares. Pudemos colocar em prática de maneira muito
mais rápida o que levaríamos horas e até dias para fazer se fosse no processo
manual. Abordamos e exemplificamos aqui como trabalhar com os três
principais softwares de criação, diagramação e edição, respectivamente:
Illustrator, InDesign e Photoshop. Apresentamos ainda ao final de cada
software uma galeria de trabalhos, em que o aluno pode ver exemplos de
criações já finalizadas de diferentes segmentos.
Exercícios
Questão 1. O texto apresenta um histórico do Photoshop. Leia-o, com atenção, e leia também as
afirmativas a seguir.
Adobe Photoshop 1.0
A primeira versão oficial do aplicativo foi lançada em 1990, em uma época em que simples
retoques nas imagens poderiam custar alguns milhares de dólares e dependiam de programas e vários
equipamentos que preparavam o conteúdo para a impressão.
Rapidamente, o software se tornou popular, pois era capaz de fazer um trabalho de qualidade a um
custo bem menor. A versão 1.0 pedia no mínimo 2 MB de memória RAM, fazia correção de cores com
tons e saturação, além de trabalhar com curvas, níveis e a ferramenta Carimbo.
Gradualmente, melhorias foram apresentadas, modos diferenciados de cor e maior número de

ferramentas foram incluídos. O Photoshop 2.0 já surgiu com suporte para Windows e a versão 3.0 trouxe
o uso de camadas, o que facilitou ainda mais o trabalho da manipulação digital.
Junto com o crescimento do Photoshop, também assistimos ao desenvolvimento das câmeras

digitais, que chegaram ao mercado da fotografia na década de 1990 e avançaram rapidamente na
substituição das câmeras analógicas.
Photoshop CS
O lançamento da Creative Suite da Adobe representou uma nova fase para o programa de edição de
imagem. A partir de sua oitava versão, o app passou a se chamar Photoshop CS, sendo o CS6 a sua 13ª versão.
209
Unidade III
Desde então, as atualizações têm demorado uma média de dois anos, e a cada lançamento mais
uma leva de funcionalidades surge. A grande novidade a partir do CS foi a possibilidade de trabalhar
com imagens em RAW, arquivos não processados pela câmera que permitem manipular conteúdo com
maior qualidade.
O Photoshop hoje
Atualmente, é indiscutível a liderança do aplicativo da Adobe no mundo do design e da fotografia. De

acordo com um de seus criadores, Thomas Knoll, a importância do PS se dá pelo fato de que o projeto já está
em um estágio de desenvolvimento que é impossível alcançar, já que ele tomou “sua própria personalidade”.
O desenvolvedor ainda afirma que “(...) para fazer tudo o que o Photoshop faz, você teria que fazer
da mesma maneira que o Photoshop faz”. Sendo assim, não faria sentido criar um novo software para
a mesma função.
O app já está no imaginário das pessoas – tem seu nome conhecido até por quem não trabalha
com foto, design ou mesmo computadores –, e é responsável por verdadeiras obras de arte do design
digital, assim como já se tornou notório por alguns erros grosseiros de manipulação de imagem –
aparecendo em grandes campanhas de moda e capas de revista, inclusive.
Mesmo assim, ele segue como líder de mercado, mas já não está mais nas mãos do time de
desenvolvedores original. A nova “diversão” de Thomas Knoll é um novo aplicativo, um programa voltado
para o tratamento de imagens que se tornou o queridinho dos fotógrafos.
Disponível em: <http://www.tecmundo.com.br/photoshop/37907-a-historia-do-photoshop-o-

editor-de-imagens-mais-usado-no-mundo.htm>. Acesso em: 12 fev. 2016.
I – O Adobe Photoshop 1.0, em sua primeira versão, era capaz de fazer correção de cores com tons e
saturação e uso de camadas, facilitando o trabalho da manipulação digital.
II – O modelo CS propiciou o trabalho com imagens em RAW. O app passou a se chamar Photoshop
CS em sua 13ª versão.
III – O aplicativo Photoshop, atualmente, está no imaginário das pessoas. É líder de mercado, sendo
conhecido, inclusive, por pessoas que não trabalham na área da informática.
É correto o que se afirma em:
A) I e III, apenas.
B) I, apenas.
C) II, apenas.
210
D) III, apenas.
E) II e III, apenas.
Resposta correta: alternativa correta D.
Análise das afirmativas
I – Afirmativa incorreta.
Justificativa: o Photoshop 2.0 surgiu com suporte para Windows e foi a versão 3.0 que trouxe o uso
de camadas, o que facilitou ainda mais o trabalho da manipulação digital.
II – Afirmativa incorreta.
Justificativa: a 13ª versão do app passou a chamar-se Photoshop CS6, não CS.
III – Afirmativa correta.
Justificativa: o Photoshop é um aplicativo popular, conhecido, inclusive, por pessoas que não
trabalham na área de informática.
Questão 2. Leia o texto a seguir:
Revista que manipulou foto de Preta Gil lamenta resultado do Photoshop
Depois que Preta Gil foi às redes sociais manifestar seu descontentamento com o uso do Photoshop
em uma foto sua que foi capa de uma revista de moda, a publicação lamentou as críticas que recebeu
e justificou o resultado da manipulação.
211
Unidade III
– A imagem digital não é como a impressa. Todo mundo deveria ter pego também a revista de papel para
ver. A capa ganha uma aplicação de verniz especial, que a faz brilhar um pouco mais – justificou Aline Ribeiro,
a editora da revista Moda Moldes. – Em nenhum momento quisemos desvalorizar a imagem da Preta Gil. A
admiramos muito como mulher e profissional. Fizemos uma bela matéria com um ensaio bacana, de oito
páginas, pois rendeu muito. Normalmente, as nossas capas têm entre quatro e seis páginas.
Aline também lamentou as acusações que surgiram nas redes sociais, após a publicação que Preta
Gil fez na tarde da última quarta-feira:
– Estamos tristes pelas acusações de racismo que tivemos. Elas não partiram da Preta, mas de
pessoas que comentam livremente na internet. Em 5 anos de mercado, esse tipo de coisa nunca tinha
acontecido. Lamentamos a repercussão.
Preta Gil havia manifestado seu descontentamento com a edição da revista pelas redes sociais. Em
seu Facebook e Instagram, ela disse que estava chocada e indignada com o uso da manipulação em sua
foto.
Disponível em: <http://extra.globo.com/mulher/revista-que-manipulou-foto-de-preta-gil-lamenta-

resultado-do-photoshop-13902387.html>. Acesso em: 12 fev. 2016.
São justificativas da revista às críticas recebidas pela capa da Moda Moldes com a artista Preta Gil.
I – A imagem digital é diferente da imagem impressa. A capa impressa ganha uma aplicação de
verniz especial, que a faz brilhar um pouco mais.
II – Não houve intenção da revista em desvalorizar a imagem da artista, pelo contrário, o rebuliço
em torno da polêmica rendeu um ensaio de oito páginas, maior do que a maioria dos ensaios com
outras celebridades.
III – A publicação lamentou as acusações de racismo feitas pela artista Preta Gil em suas redes
sociais, após ela ter publicado cópia da capa da revista.
De acordo com o texto, são justificativas corretas:
A) I, II e III.
B) I e III, apenas.
C) I, apenas.
D) II, apenas.
E) III, apenas.
Resolução desta questão na plataforma.
212
FIGURAS E ILUSTRAÇÕES
Figura 1
VAN GOGH, V. O quarto. 1888. Óleo sobre tela, 72,4 cm x 91,3 cm. Museu Van Gogh.
Figura 2
VAN GOGH, V. Os girassóis. 1889. Óleo sobre tela, 95 cm x 73 cm. Museu Van Gogh.
Figura 3
OSTROWER, F. Universos da arte. 30. ed. Rio de Janeiro: Elsevier, 2003. p. 239.
Figura 4
839872. Disponível em: <http://www.morguefile.com/archive/display/839872>. Acesso em:

12 jan. 2016.
Figura 5
GOMES FILHO, J. Gestalt do objeto: sistema de leitura visual da forma. 6. ed. São Paulo: Escrituras,
2004. p. 19.
Figura 6
GOMES FILHO, J. Gestalt do objeto: sistema de leitura visual da forma. 6. ed. São Paulo: Escrituras,
2004. p. 24.
Figura 8
BERGSTRÖM, B. Fundamentos da comunicação visual. São Paulo: Edições Rosari, 2009. p. 32.
Figura 9
Figura 10
Figura 11
213
Figura 12
A) BERGSTRÖM, B. Fundamentos da comunicação visual. São Paulo: Edições Rosari, 2009. p. 40.
B) BERGSTRÖM, B. Fundamentos da comunicação visual. São Paulo: Edições Rosari, 2009. p. 40.
Figura 13
C) BERGSTRÖM, B. Fundamentos da comunicação visual. São Paulo: Edições Rosari, 2009. p. 40.
Figura 14
Figura 15
VEJA. São Paulo, edição 2.214, ano 44, n. 17, 27 abril 2011. Capa.
Figura 16
FOLHA DE S. PAULO, São Paulo. n. 31.657, ano 95, 5 dez 2015. Primeira página.
Figura 17
ARQUITETURA & CONSTRUÇÃO. São Paulo, n. 338, jun. 2015. Capa.
Figura 18
Frame do filme CASABLANCA. Dir. Michael Curtiz. EUA: Warner Bros, 1942. 102 minutos.
Figura 19
A) Print screen do jornal O ESTADO DE S. PAULO. Disponível em: <http://www.estadao.com.br/>.

Acesso em: 5 dez. 2015.
B) O ESTADO DE S. PAULO. São Paulo, n. 44.608, ano 135. Primeira página.
Figura 20
Frame do filme A CHEGADA de trem à Estação Ciotat. Dir. Irmãos Lumière. França: Irmãos Lumière, 1895. 1 minuto.
214
Figura 21
Figura 22
Figura 23
Figura 24
Figura 25
Figura 26
Figura 27
Figura 28
Figura 29
Figura 30
215
Figura 31
Figura 32
Figura 33
Figura 34
Figura 38
GORDON, B.; GORDON, M. O essencial do design gráfico. São Paulo: Senac, 2012. p. 20.
Figura 39
Figura 43
Figura 44
Figura 45
Figura 46
MESTRINER, F. Design de embalagem. São Paulo: Makron Books, 2001. p. 9. (Curso básico).
Figura 47
MESTRINER, F. Design de embalagem. São Paulo: Makron Books, 2001. p. 9. (Curso básico).
216
Figura 48
MESTRINER, F. Design de embalagem: curso básico. São Paulo: Makron Books, 2001. p. 9.
Figura 49
MESTRINER, F. Design de embalagem: curso básico. São Paulo: Makron Books, 2001. p. 57.
Figura 50
GORDON, B.; GORDON, M. O essencial do design gráfico. São Paulo: Senac, 2014. p. 145
Figura 51
Figura 52
GORDON, B; GORDON, M. O essencial do design gráfico. São Paulo: Senac, 2012. p. 145.
Figura 53
Figura 54
Figura 55
Figura 56
ARENS W F, SCHAEFER D H, WEIGOLD M F. Propaganda: Série A. Porto Alegre: Bookman Editora, 2013. p. 12.
Figura 57
ARENS W. F.; SCHAEFER D. H.; WEIGOLD M. F. Propaganda: Série A. Porto Alegre: Bookman Editora, 2013 p. 60.
Figura 58
217
Figura 59
Figura 60
Figura 61
Figura 62
REFERÊNCIAS
Audiovisuais
A CHEGADA de trem à Estação Ciotat. Dir. Irmãos Lumière. França: Irmãos Lumière 1895. 1 minuto.
CASABLANCA. Dir. Michael Curtiz. EUA: Warner Bros, 1942. 102 minutos.
Textuais
ADOKA, F. 10 lições que aprendi no negócio mais difícil do país. Pará de Minas: Virtual Books, 2014.
ARENS W. F., SCHAEFER D. H., WEIGOLD M. F. Propaganda: série A. Nova Iorque: McGraw‑Hill, 2013.
ARQUITETURA & CONSTRUÇÃO. São Paulo, n. 338, jun. 2015.
BAIRON, S. Multimídia. São Paulo: Global, 1995.
BERGSTRÖM, B. Fundamentos da comunicação visual. São Paulo: Edições Rosari, 2009.
COSSIO, G.; CATTANI, A. Design de exposição e experiência estética no museu contemporâneo. [s.d.].
Disponível em: <http://pablolisboa.com/wp‑content/uploads/2014/02/COSSIO‑e‑CATTANI‑Design
‑de‑exposicao‑e‑experiencia‑estetica‑ARTIGO.pdf>. Acesso em: 2 out. 2016.
CURTIS, H. Flash web design: a arte das animações gráficas. São Paulo: Market Books do Brasil, 2001.
FOLHA DE S. PAULO. São Paulo, n. 31.657, ano 95, 5 dez. 2015.
218
GOMES FILHO, J. Gestalt do objeto: sistema de leitura visual da forma. 6. ed. São Paulo: Escrituras, 2004.
GORDON, B.; GORDON, M. O essencial do design gráfico. São Paulo: Senac, 2012.
GOSCIOLA, V. Roteiro para as novas mídias: do game à TV interativa. São Paulo: Senac, 2003.
HUYSSEN, A. Escapando da amnésia: o museu como cultura de massa. Revista do Patrimônio Histórico
e Artístico Nacional, Rio de Janeiro, n. 23, 1994, p. 34‑57.
KAFKA, F. A metamorfose. São Paulo: Companhia das Letras, 1997.
LAYOUT. In: PANITZ, A. M. Dicionário técnico: português‑inglês. Porto Alegre: EDIPUCRS, 2003. p. 210.
LÉVY, P. As tecnologias da inteligência. Rio de Janeiro: 34, 1993.
MCLUHAN, M. Os meios de comunicação como extensões do homem. 13. ed. São Paulo: Cultrix, 2003.
MESTRINER, F. Design de embalagem: curso avançado. São Paulo: Pearson Education, 2005.
___. Design de embalagem: curso básico. São Paulo: Makron Books, 2001.
MIRANDA, S. Oficina de dinâmica de grupos para empresas, escolas e grupos comunitários. 14. ed.
Campinas: Papirus, 2006.
MOLETTA, A. Criação de curta‑metragem em vídeo digital: uma proposta para produções de baixo
custo. 3. ed. São Paulo: Summus, 2009.
NEMES, A. Comic Sans, a fonte mais odiada do mundo. Tec Mundo, [s.l.], 2013. Disponível em: <http://www.
tecmundocom.br/fotografia‑e‑design/44292‑comic‑sans‑a‑fonte‑mais‑odiada‑do‑mundo.htm>
Acesso em: 14 jan. 2016.
O ESTADO DE S. PAULO. São Paulo, n. 44.608, ano 135.
OSTROWER, F. A sensibilidade do intelecto. Rio de Janeiro: Campus, 1998.
___. Criatividade e processos de criação. 15. ed. Petrópolis: Vozes, 2001.
___. Universos da arte. 30. ed. Rio de Janeiro: Elsevier, 2003.
PINHO. J. P. Comunicação em marketing: princípios da comunicação mercadológica. 9. ed. Campinas:

Papirus, 2001.
SÃO PAULO. Cidade Limpa. São Paulo, 2013. Disponível em: <http://ww2.prefeitura.sp.gov.br//
cidadelimpa/home/default.html>. Acesso em: 13 jan. 2016.
219
SUBJETIVIDADE. In: HOUAISS, A.; VILLAR, M. S. Dicionário Houaiss da língua portuguesa. Rio de
Janeiro: Objetiva, 2009, p. 1779.
VEJA. São Paulo, edição 2214, ano 44, n. 17, 27 abr. 2011.
Sites
<http://apeloig.com>.
<www.asos.com>.
<http://vejasp.abril.com.br>.
<http://www.estadao.com.br>.
220
221
222
223
224
Informações:
www.sepi.unip.br ou 0800 010 9000

Design de tela e planejamento de sites

Diunggah oleh

Informasi Dokumen

Deskripsi Asli:

Judul Asli

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

Design de tela e planejamento de sites

Diunggah oleh

Hak Cipta:

Format Tersedia

Unidade III

A World Wide Web, comunicação pela rede mundial de

Tecnicamente, um hipertexto é um conjunto de nós ligados por

No processo de comunicação, o hipertexto depende da iniciativa e da constante invenção de seu

Como interpretar é subjetivo e supõe associação, quando o processo de construção hipertextual

Trabalhar, viver, conversar fraternalmente com outros seres, cruzar um pouco

Atualmente, a versão existente do código hipertexto é o HTML5, um conjunto de padrões interativos

A base do conteúdo de vídeo do HTML5 é pelo H.264, um codec

7.2 Ferramentas digitais

Ferramentas emergentes têm explorado as possibilidades oferecidas pelo progresso tecnológico, e

Visite o site de moda britânico e observe a diagramação proposta pelos

As particularidades da tela fazem o webdesigner considerar primeiro, antes da aparência, as exatas

A extensão de um ou mais desses conhecimentos é algo que depende do

7.3 Planejamento de sites

O desenvolvimento de um site deve ser tratado de forma sistemática, considerando questões

o processo de desenvolvimento, a equipe de criação mantenha o controle e o cliente permaneça em

Fases de planejamento de um site

Definição dos objetivos do site e

Desenvolvimento da estrutura do site

7.3.1 Administração de clientes

7.3.2 Cronogramas e produto final

7.3.3 Formulário de pesquisa

A seguir, vemos um exemplo de formulário‑padrão de pesquisa ao cliente:

Fonte: Gordon e Gordon (2012, p. 159).

Quando se define o público‑alvo, também se conhecem seus hábitos

7.4 Produção do site

7.4.1 Gerente de projeto

Profissional responsável pelo relacionamento com os clientes e pelo acompanhamento de todo o

7.4.2 Diretor de arte e designer

O webdesigner pode ter uma responsabilidade significativa dentro de

7.4.3 Redator e revisor

7.4.4 Programador HTML

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

Normalmente utiliza para o projeto tecnologias de programação em PHP ou ASP.

• Back‑end: costumam ser programas back‑end aqueles executados

• CSS: Cascading Style Sheets é o padrão de estilização de elementos

• ASP: Active Server Pages é uma tecnologia da Microsoft para a criação

• PHP: Hypertext Preprocessor é uma linguagem para a criação de sites

7.5 O design impresso versus o webdesign

Tipografia As opções tipográficas dos webdesigners são

Visite a página web do designer Philippe Apeloig:

• Cuidado com combinações ofuscantes, pois dificultam a leitura do texto.

• Atente ao efeito de confronto proporcionado pelas cores complementares.

8 Illustrator, InDesign e Photoshop: Softwares de Criação,

8.1 Illustrator – Software da Adobe

8.1.1 Histórico do software

Figura 63 – Arte cronológica do Illustrator

8.1.2 Illustrator – Oficina – Principais ferramentas e suas funções

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.

Figura 65 – Divisão de ferramentas na Área de Trabalho

Figura 66 – Barra de Ferramentas do Illustrator

Ao lado de cada item de ferramentas, há uma faixa na borda direita

• Nome: digite um nome para o seu novo documento.

Figura 67 – Caixa de especificação de um novo documento

Figura 68 – Painel de encaixe de camadas

Figura 69 – Forma elipse

Figura 70 – Ferramenta Tipo no caminho

Figura 71 – Texto no caminho do objeto com linha‑guia

Figura 72 – Opções do texto no caminho