Visão geral

Apresentação da disciplina:
Olá, vamos apresentar a vocês nessas webs aulas um pouco daquele que
acredito ser o programa de edição e tratamento de imagens fixas mais famosas
e versáteis de todos os tempos: o Photoshop. Desenvolvido pela californiana
adobe. Este programa reúne o que há de mais útil e funcional para tais
finalidades e durante nossos encontros você mesmo vai descobrir os porquês
dessa sua fabulosa reputação.
Além do Photoshop, vamos trabalhar com o Adobe Fireworks que talvez seja a
ferramenta de composição de layout mais maleável e interessante de se
trabalhar quando o assunto é a integração com o Photoshop. Aliás, sua
compatibilidade com os demais programas da Adobe (Illustrator, Flash e
Dreamweaver, por exemplo) o torna um instrumento de montagem
extremamente versátil em nosso dia a dia como programadores visuais.

Objetivos:

Nesta unidade, além de entender conceitos sobre o Photoshop, abordaremos o

contexto sobre a ferramenta Fireworks.

Conteúdo Programático:
PhotoShop

 Iniciando o PhotoShop
 As Ferramentas Básicas de Trabalho
 Trabalhando com seleções
 Pintando e Editando
 Trabalhando com textos
 Trabalhando com camadas
 Trabalhando com canais
 Utilizando o Menu Imagem
 Usando Filtros do PhotoShop
 Impressão no PhotoShop

Fireworks

 Apresentação da interface do programa

 Descrição dos itens do menu horizontal
 Explorando a Barra de Ferramentas
 Criando um layout para homepage
 Compondo um banner para websites

Metodologia:
Na unidade utilizaremos todos os recursos necessários e disponíveis para o
desenvolvimento da discussão do conteúdo, sendo assim, faremos uso de:

 Textos da própria web-aula e de outros sites que possam contribuir para

a discussão;
 Vídeos que podem esclarecer ou aprofundar determinados conteúdos;
 Avaliações virtuais onde será realizado a verificação do aprendizado;
  Entre outros recursos que poderão ser utilizados visando maior
entendimento da matéria.

Avaliação Prevista:

Cada web aula conterá uma avaliação virtual composta de 5 questões (sendo
assim, temos 2 web aulas com 5 questões cada).

Habilidades e competências

TECNOLOGIAS PARA APLICAÇÕES WEB

WEBAULA 1
Unidade 1 – Ferramentas Visuais

ADOBE PHOTOSHOP CS5 ORIENTADO Á WEB

1) APRESENTAÇÃO DO PROGRAMA

Bem sabemos que a tecnologia está aí e sempre à disposição do homem

e de seus interesses. Conhecer sobre novas tecnologias é ter a noção de que poderemos estar
sempre um passo adiante em relação a nossos próprios conhecimentos, nos destacando assim
da concorrência, sobretudo no mundo do trabalho. A informática - mais especificamente – o
design gráfico e o web design - é um campo onde o conhecimento de novos processos e
ferramentas é determinante. E o Photoshop faz parte deste mundo, e você, ao conhecê-lo um
pouquinho, se surpreenderá com suas possibilidades.
 O Photoshop é um programa que tem como finalidade básica o
tratamento de imagens digitais. Estas se formam através de uma combinação de bits e bytes
(zeros e uns sistematicamente agrupados) que o computador lê, interpreta e atribui a esta a
formação de um ponto e a este um valor de cor e uma posição definida.

Em outras palavras, se pegarmos como exemplo uma fotografia

impressa (química fixa sobre papel) e seu processamento em um scanner (digitalizador),
veremos que este aparelho converte, através de uma leitura ótica, as informações pictóricas da
imagem impressa em dados. Estes dados são interpretados pelo computador e seus valores
geram pontos dispostos em um dispositivo de saída (um monitor de vídeo, por exemplo),
recompondo a imagem. Portanto ela ganhou uma versão virtual, ou seja, extrapolou de uma
origem física à computadorizada através do processo de scanning.
O Photoshop justamente entra em processos onde exige-se algo para além do que a imagem
real trouxe estampada fisicamente. Muito útil em composições gráficas como cartazes, capas de
livros, agendas, calendários, enfim, numa infinidade de aplicações em que faz-se necessária a
intervenção ou supressão de elementos visuais ou ainda correções na imagem a fim de se
enriquecer uma mensagem. Veja uma breve demonstração em:
 < https://youtu.be/-7SSb4YWKI8 >.

Vale lembrar que neste módulo trataremos de alguns comandos tidos como fundamentais do
Photoshop para seu trabalho com imagens na web. Porém, como todo programa, você também
poderá procurar maior aprofundamento sobre ele em outras fontes, necessitando dedicar muitas
horas de incessantes estudos, o que será muito divertido, garanto. Além de se conhecer bem os
comandos do Photoshop, faz-se importante procurar obter também conhecimentos periféricos
relacionados às imagens e à luz, como física, ótica, cromática, teoria das cores, composição,
técnicas de artes plásticas e fotografia, entre outros, para que seus trabalhos ganhem a qualidade
e os diferencias que você procura. Vamos começar?

a) COMENTANDO A INTERFACE
Como a maioria dos softwares de edição, o Adobe Photoshop possui uma interface que aproveita
o cognitivo dos usuários, ou seja, distribui itens de menu e sua caixa de ferramentas como que
seguindo um certo padrão já conhecido, ficando assim mais fácil de se encontrar os comandos
que se queira aplicar pois você já vem sendo “historicamente treinado” para isto. E em relação
às versões anteriores à CS5 a sua interface aparentemente não apresentou mudanças estruturais
significativas, e lembramos que esta versão já trabalha (assim como desde a versão CS3)
otimizações e integrações com outros softwares da própria Adobe, como o Illustrator, o Fireworks
e o InDesign, por exemplo.

À esquerda, encontra-se o painel Ferramentas (ou caixa de ferramentas). Estas são utilizadas
para operar a imagens. Estão dispostas em grupos e subgrupos (para vê-los basta clicar e
segurar um pouquinho o mouse). Na parte superior temos a Barra de Aplicativos que contém os
menus de opções de áreas de trabalho e outros aplicativos.

Logo abaixo desta encontra-se a Barra de Opções, cuja função é especificar as ações das
ferramentas acionadas. Á direita encontra-se a Área de Painéis, onde serão ajustadas todas as
funções complementares e informativas da imagem tratada. Também trará controles
importantes como o Histórico de ações, os Layers (camadas), entre outros.
A área central é destinada ao trabalho em si, ou seja, é ali que sua imagem será exibida e
editada. Alguns técnicos a chamam de Área de trabalho ou ainda de Palco. Percebe-se que a
ergonomia (modo com que os elementos da interface estão compostos e distribuídos) ajuda
bastante, pois o espaço para se trabalhar com as imagens é bem amplo. E se você tiver um
monitor de vídeo de grande formato, melhor ainda. Na parte inferior temos a Barra de Status que
informa dados genéricos como o nome do nosso arquivo a quantidade de zoom (ampliação da
visualização da imagem) e sua taxa de resolução (tamanho da imagem em pixels).
Conheça um pouco mais do visual da interface em:

< http://www.youtube.com/watch?v=9M-5JEqfhFc >.

IMAGENS DE BITMAP – TIPOS MAIS UTILIZADOS NA WEB

Imagens raster (ou bitmap - que significa mapa de bits em inglês) são imagens formadas
por pixels, ou seja, por pontos quadráticos com qualidades como tamanho e cores e que se
encontram organizados em um grande diagrama. Elas diferem das imagens em vetores. As
imagens vetoriais não são compostas por pixels e sim por infinitos pontos organizados em
coordenadas e frutos de cálculos matemáticos. A grande vantagem das imagens vetoriais é que
pode ser ampliadas e reduzidas praticamente sem perdas de qualidade gráfica, o que não ocorre
com as imagens raster, pois são compostas por um número definido de pixels por área
(geralmente polegadas).
Um bitmap pode ser monocromático, em escala de cinza ou colorido. Na web, os pixels possuem
por padrão o sistema de cores RGB (Red, Green, Blue) conhecidas como cores-luz e que,
combinadas, formam as 16 milhões de cores possíveis para representar o mundo real. Quando
a imagem possuir além das três cores matrizes uma transparência ele será RGBA (sendo A o
nível de alfa de cada pixel). Para mídias impressas (livros, cartazes, revistas, por exemplo)
utiliza-se o modo de cor CMYK (Ciano, Magenta, Amarelo e Preto), pois são as quatro cores
primárias para pigmentos em impressões (na prática as tintas para offset podem exemplificá-
las).
Um pouco desta teoria você pode conhecer melhor em:
<http://www.criarweb.com/artigos/teoria-da-cor-modelos-de-cor.html>
A maioria das imagens requer um número muito grande de pixels para ser representada completa
e integralmente, e isso implica diretamente no tamanho de seus arquivos em unidades de
memória (bits, bytes, kilobytes, etc.). Quando se fala em um grande número de imagens
armazenadas em discos magnéticos ou transmitidas via rede, surge a necessidade de
compactação destas para reduzir espaço em memória e aumentar a velocidade de transmissão
entre máquinas. Esta compactação pode ser com ou sem perdas.
Os principais formatos adotados com possibilidade de compactação e exibição de imagens na
internet são: GIF (máximo 256 cores, indicado para desenhos como ícones, carttons, entre
outros), o JPEG (ou JPGs, do P&B até 16 milhões de cores) prioritariamente indicado para
fotografias e com alto poder de compressão e o mais recente, o PNG (também até 16 milhões
de cores) suportando também transparências e excelentes para cores uniformes. Os JPEGs
podem se apresentar também no sistema CMYK, mas este formato de 24 milhões de cores é
recomendável apenas para impressões, como dito anteriormente. O Photoshop é totalmente
compatível com estes tipos de arquivos e consegue trabalhar não apenas com estes, mas com
outros formatos como o BMP (bitmap da Microsoft), o TIFF (alta resolução para impressões), o
PDF (formato para distribuição), os EPSs (encapsulados), entre tantos outros.
Veja a origem destes arquivos em detalhes em: <http://www.infowester.com/imagens.php>.

2) EDIÇÃO DE IMAGEM – FUNÇÕES INICIAIS

Editar imagem significa trabalhar uma imagem, ou seja, alterar suas características visuais
procurando os resultados desejados para ela. Pode ser um desenho à mão livre posteriormente
digitalizado, uma fotografia digital, um gráfico de natureza vetorial, enfim, qualquer tipo de
imagem é passível de edição e o Photoshop é o software mais indicado, sobretudo para imagens
de natureza raster (bitmaps). Como dito nos permite concluir que, ao operarmos com o
Photoshop, trabalharemos prioritariamente com pixels.
ABRIR ARQUIVO
Para trabalharmos com o Photoshop vamos partir do princípio de que você tenha uma versão do
CS5 em português. Mas como muitos termos são genéricos do inglês, vamos misturá-los um
pouquinho para você já ir adquirindo o jargão do software.
Inicialmente, abra o programa clicando no ícone respectivo dentro do meu iniciar de seu sistema
operacional (Windows, MacOS, etc.). Aparecerá de pronto a tela de Splash indicando que o
programa está sendo carregado. Ao término do carregamento você verá a interface do programa
como apresentada no item 1/a desta web-aula. No menu (superior) localize Abrir. Uma caixa de
diálogo aparecerá e você poderá escolher, navegando em suas pastas qual imagem gostaria de
abrir. Lembrando que ele está habilitado abrir inúmeras extensões (tipos) de imagens, como por
exemplo, jpegs, bmps, gifs, pngs e claro, os psds, que são os arquivos de edição nativos do
Photoshop. Escolha e marque um arquivo de imagem e, em seguida, clique em abrir (open). Lá
estará a imagem ao centro do programa, pronta para ser editada.

A ferramenta inicial mais utilizada é a de Seleção. Com ela você poderá editar as posições
de linhas-guias, arrastar imagens, marcar layers, entre outras funções. É a primeira da Barra de
Ferramentas.
O LAYER (CAMADA)

Assim como uma revista possui várias páginas sobrepostas, o Photoshop também possui um
sistema muito interessante e funcional para lidar com as imagens composto por layers
(camadas). Dominar os layers é assegurar-se de que você fará muita coisa no Photoshop com
absoluto sucesso. Você pode criar, apagar, combinar e até apagar layers. Por enquanto, basta
dizer que toda a ação que você aplicar incidirá apenas no layer trabalhado, ou seja, na camada
que você marcar como ativa no painel Camadas. É possível, também esconder ou visualizar um
layer. clicando no ícone “olho” neste painel. Mas, se a sua imagem está colocada no Plano de
Fundo (background) e não em um layer específico, não lhe será possível, por exemplo, contar
com seu fundo em transparência.
Para criar um novo layer basta clicar com o mouse em um ícone que se assemelha a uma folha
de papel com canto dobrado na base do painel Camadas. Caso queira, você também pode
duplicar o plano de fundo que aparecerá como novo layer, clicando como lado direito do mouse
sobre ele no painel e clicando em duplicar camada nas opções que surgem. Também é possível
selecionar toda a imagem – menu Seleção > Tudo, ir em menu Editar > Copiar (ou simplesmente
teclar Control C) e, em seguida clicar em Editar > Colar (ou teclar Control V). Pronto! Uma nova
camada aparecerá.
Você poderá criar também um novo layer através de uma seleção. Daí somente a área
selecionada será transportada como um novo layer. Para isso faça a seleção, clique com o lado
direito do mouse sobre ela e escola a opção Camada por cópia (ou, em inglês, Layer via copy).
Também é possível alterar o nível de transparência de layers criados. Falaremos sobre seleções
mais adiante.

CANVAS (TELA DE PINTURA) E TAMANHO DA IMAGEM

É muito comum as pessoas fazerem certa confusão a respeito de “tamanho de imagem” x
“tamanho da tela de pintura (canvas)”. Toda imagem pode ser mensurada em área, tendo em
sua largura e altura tanto uma quantidade limitada de pixels como suas dimensões em
milímetros. Estas dimensões podem ser alteradas no Menu > Imagem, pela janela “Tamanho
da tela de pintura”, onde ajustamos o tamanho da imagem tendo como valores altura e
largura. Uma redução do tamanho do canvas implica diretamente em uma mutilação (corte) da
imagem (esta será cortada em função das novas dimensões, porém preservando-se ainda a
sua taxa de pixels por polegada - DPIs) como a original.

Diferentemente é o comando “tamanho da imagem” onde teremos também uma diminuição das
dimensões da imagem, porém sem mutilações e com possibilidades de alteração na sua taxa de
pixels por polegada (DPIs). É no “tamanho da imagem” que podemos reduzir ou ampliar as
dimensões em milímetros das imagens, bem como sua taxa de pixels por polegadas. Lembrando
que aumentar o tamanho físico das imagens de bitmaps implica em se reduzir a taxa de pixels
por polegada, pois aumentaremos o tamanho destes. Como resultado teremos imagens
serrilhadas e de difícil aplicação, sobretudo nos meios impressos. Ainda no Canvas podemos ter
a opção em rotacioná-lo ou espelhá-lo vertical ou horizontalmente e estas opções valerão para
todas as camadas e imagens nele contidas.
TAMANHO DA IMAGEM PARA WEB
Este tipo de ajuste interfere tanto no tamanho da imagem quanto no tamanho de seu canvas
(área da imagem) simultaneamente. Portanto é um comando importante porque além de
alterar o tamanho físico da imagem permite-nos também propor uma taxa de pixels por
polegadas (DPIs) para aplicações em websites. Basta clicar no menu Imagem > Tamanho da
imagem e na caixa de diálogo especificar as novas dimensões desejadas.
Lembrando que é possível reduzir a taxa de pixels por polegada atual da imagem trabalhada e
isso é o recomendável para arquivos de internet (até 96 DPIs no máximo), mas não se
recomenda aumentar esta taxa a partir de um arquivo pequeno, ou seja se temos um arquivo
com 72 DPIs de internet e precisamos de um com 300 DPIs para impressão, o Photoshop até
consegue converter, mas a qualidade gráfica da imagem continuará a de 72 DPIs. Tome
cuidado com isso, principalmente na hora de usar imagens de internet em impressos, o que
não é recomendado, pois como dito, elas não têm taxa de pixels suficiente para este fim.
Este vídeo explica com mais detalhes e passo a passo a questão de tamanhos de imagem e
telas de pintura. Confira:
 < https://youtu.be/KF4gfgsX2XI >.

RÉGUAS E LINHAS GUIA

Com sua imagem aberta, perceba que, por convenção, existe às bordas da mesma uma
estrutura escalonada. Trata-se de réguas, cuja função é auxiliar em operações como
alinhamentos, seleções e recortes mais precisos de elementos. Para exibir a régua vá
em Visualizar e habilite Réguas. Para se obter as linhas guias basta posicionar o mouse sobre a
régua (horizontal ou vertical) e com o mouse pressionado arrastar a mesma onde se queira.
Para remover a linha, basta arrastá-la com a ferramenta Seleção até à régua novamente. Você
pode apenas ocultar as linhas desabilitando em Visualizar > Extras (ou control H).
Uma explicação bem bacana sobre linhas guias você vê em:
 < https://youtu.be/XvuivE7YgjU >.

HISTORY (HISTÓRICO)
O recurso Histórico é muito importante, pois permite que você experimente ações e comandos
com toda tranquilidade e caso necessário for o refaça de acordo com o ponto que achar
conveniente. Ele atua em praticamente todos os seus movimentos no programa em relação à
imagem trabalhada. Assim como a grande maioria dos programas conhecidos permite que se
desfaça as operações não desejadas, o Photoshop também o faz. Todos os passos que você der
podem ser desfeitos acoinando-se Control Z. Porém este comando, no Photoshop reverte apenas
o último passo. Para retroceder mais passos, acione Control Alt Z. Mas o Photoshop tem um
painel específico para você monitorar seus passos realizados, um a um e você pode regressar
passos quantos quiser. Por padrão ele registra os últimos vinte passos, mas você pode alterar
esta quantidade de “memorização” clicando em Editar > Preferências. Lá você encontrará a opção
níveis de histórico. Altere de acordo com sua necessidade.

AJUSTES BÁSICOS
Neste momento vamos trabalhar com o que chamo de ajustes básicos. São retoques simples que
não implicam em intervenções mais complexas nas imagens mas que sempre são necessários
quando queremos melhorar a qualidade geral de uma imagem. Estas opções você as encontrará
sempre no Menu > Imagens > Ajustes. Além das funções que cito aqui, existem várias outras
que você pode experimentar livremente, como a de ajuste de cor seletiva, a de curva de tons, a
de ajustes por canais de cor, etc. As funções que especifico, a seguir, são como que essenciais
para o seu trabalho com imagens para web.
BRILHO E CONTRASTE

No menu Imagens > Ajustes procure a opção Brilho e Contraste (1a. opção). Comece a deslizar
os controles da caixa de diálogo que aparece de maneira a perceber, já na imagem as
variações de claro a escuro (brilho) de meio tons à saturação luminosa (contraste). Se você
estiver em um layer, ou em uma seleção, assim como todos os demais comandos, este
também vai atuar somente neles. Clique ok para concluir a operação.
MATIZ, SATURAÇÃO E INTENSIDADE DE CORES
Este comando, também acessível no submenu Ajustes, diferentemente do brilho e contraste atua
mais diretamente na qualidade das cores (tons e matizes). Como se sabe, os tons são variações
dentro de uma mesma cor (ex. tons de azul, de verde, etc). Já as matizes são as cores puras,
propriamente ditas (ex.: amarelo, vermelho, etc.). Quando você atuar na Matiz, verá que há
uma mudança nítida no valor essencial das cores.
Um exemplo é que, atuando com este comando, você poderá criar uma tulipa roxa. Mas cuidado,
porque se sua tulipa - que antes era amarela e agora tornou-se roxa devido ao seu ajuste de
Matiz – estiver acompanhada de algum elemento de outra cor, este se alterará também. Se
quiser alterar apenas o amarelo, utilize a opção Cor Seletiva. Em Menu > Imagem > Cor
seletiva, selecione e clique em Amarelos, habilite a caixinha Absoluto e proceda o ajuste (no
caso: Ciano 10, Magenta 15, Amarelo -100, Preto 30). Perceba que só o que estava em amarelo
tornou-se roxo. Você pode também selecionar manualmente uma determinada área colorida
(com a varinha mágica ou laço poligonal) e aplicar o ajuste de Matiz.

Em relação à saturação, esta se refere ao passeio entre o não cromático – tons de cinza – e o
cromático – saturação da cor. Ideal para ajustar fotos em que as cores estão muito fortes,
intensas e se faz necessário um ajuste para diminuir este excesso.
A luminosidade altera a posição da cor em relação ao claro (tendendo ao branco) e ao escuro
(tendendo ao negro). Seu efeito, na prática é muito parecido com o ajuste de brilho e contraste.

MESCLAGEM DE CAMADA
Outro recurso para se aplicar um efeito de cores é o chamado Mesclagem de camada. Ele
funciona de várias formas, mas vamos demostrar o processo mais simples. Com sua imagem
aberta, observe a caixa Camadas. Você verá uma miniatura de sua imagem na camada Plano de
Fundo (background). Crie uma nova camada como já explicado (ícone ao pé a caixa Camadas).
Agora na Barra de Ferramentas, clique e pressione o ícone Degradê. Mude a opção para Lata de
tinta. Em seguida, clique no quadradinho de cores que se encontra em primeiro plano logo abaixo
da Caixa de Ferramentas. Abrirá uma caixa de diálogo de cores (Seletor de cores). Escolha uma
cor que quiser clicando sobre ela (neste exemplo um tom de laranja) e dê ok.

Ainda com a ferramenta Lata de tinta, clique sobre a imagem, certificando-se de que o layer
marcado é o Layer 1 (novo) e não o Plano de fundo (imagem). Você verá que toda a área da
imagem foi pintada com a cor que escolheu (laranja). Pois bem, não se assuste. Na parte superior
direita da caixa de Camadas existe um ícone como o de um pequeno triângulo negro ao lado de
um indicador escrito “Normal”.
Clicando neste triângulo você selecionará os vários efeitos de mesclagem. Teste, por exemplo, o
efeito “Multiplicação”. Veja que a imagem de plano de fundo ganhou uma mistura alaranjada
muito interessante. Pois bem este efeito permitiu que a cor laranja fosse fundida como se fosse
uma película sobre a imagem original. Você pode alterar a intensidade, calibrando a
transparência desta camada no controle deslizante que está na parte superior da caixa Camada.
Para concluir o efeito, clique com o lado direito do mouse na camada 1 escolha a função combinar
abaixo para mesclá-las de maneira definitiva. Você também pode mesclar imagens diferentes
gerando efeitos interessantes.

Um bom exemplo de mesclagem está em:

 < http://www.youtube.com/watch?v=LkAn4gJwizI >.

ESCALAR, ESPELHAR, GIRAR, DISTORCER E ADICIONAR PERSPECTIVA

Estas funções estão disponíveis no menu Editar. Elas atuam em nível de camada e seleção e não
em imagens ainda condição de Plano de Fundo. A opção Redimensionar nos permite diminuir ou
aumentar uma imagem de acordo com sua preferência, seja manualmente (pelos nós da imagem
via mouse) ou digitando-se valores de porcentagem ou dimensões na Barra de Opções. Se
preferir o ajuste manual, não se esqueça de manter a tecla Shift apertada ao arrastar os pontos
com o mouse para não haver distorções na imagem (esticada ou achatada). Tecle Enter para
concluir. O mesmo princípio vale para as demais opções: girar, inclinar, distorcer, etc. A imagem
será editada livremente com o auxílio mouse ou especificando-se parâmetros para a imagem
selecionada.

CORTE DEMARCADO

Na Barra de ferramentas você encontrará um ícone semelhante a um pequeno quadrado com

uma diagonal, logo abaixo das setas de seleção. Também conhecido como “crop” este comando,
ao arrastar-se o mouse pela imagem permite com que esta, após demarcada a área e
devidamente ajustada, seja aparada (cortada), mantendo-se apenas um trecho da mesma e
descartando-se o restante. Procedimento semelhante pode ser feito, por exemplo, especificando-
se um novo tamanho para o canvas.

CARIMBO

Uma das ferramentas mais curiosas e interessantes do Photoshop. Localizada na Barra de

ferramentas e identificada com um ícone representando um carimbo, ela é capaz de copiar
trechos da imagem para outros campos da mesma. Basta você clicar na ferramenta Carimbo,
escolher a forma e o tamanho de seu raio de ação (painel de pincéis na Barra de Opções) segurar
a tecla Alt e com o mouse clicar na área desejada que se queira duplicar (matriz). Em seguida,
solte a tecla alt e com o mouse vá clicando e/ou arrastando o cursor por sobre a área que deseja
clonar a imagem. Você verá que a parte da imagem clicada com Alt será duplicada fielmente no
campo que você está passando e/ou clicando o carimbo. Experimente! Com um pouco de treino
e paciência você consegue!
Veja um exemplo em:
 < https://youtu.be/pwpkQa13K_4 >

ZOOM
Esta ferramenta auxilia na visualização e merece algumas observações. Com as teclas de atalho
Control (+) e Control (-) você aproxima e afasta a imagem de maneira a se trabalhar de forma
mais geral ou em detalhes na mesma. Mas isto não implicará no seu tamanho enquanto imagem
a ser visualizada ou impressa após ser salva. O Zoom não altera o tamanho da imagem, é apenas
visualização. Outra dica é procurar trabalhar os níveis de visualização nos múltiplos 6.25%,
12.5%, 25%, 50% e 100% pois estas taxas permitem com que você visualize sua imagem sem
distorções nos pixels (serrilhados). Esta ferramenta caracteriza-se por uma pequena lupa (ícone)
localizada na barra de ferramentas.

DESFOQUES
Falar de desfoques é sempre muito interessante, pois bem aplicados podem trazer um requinte
bem interessante para as imagens. No menu Filtro, escolha Desfoque. Você vai encontrar várias
opções no sub menu como desfocagem gaussiana (desfoque geral), desfoque radial ou de
movimento, cada um deles trazendo uma característica distinta e inúmeras possibilidades de
ajustes. Podem ser aplicados tanto em imagens inteiras, seleções ou textos.
3) CORES: MODOS E CANAIS
De maneira bem sucinta, em relação à teoria das cores aplicada na Computação Gráfica podemos
classificá-las em grupos, de acordo com suas características visíveis e internas. Existem as
imagens em tom absoluto (branco e preto), os tons de cinza (monocromática) as RGB (cores luz)
e as CMYK que são cores de impressão. Como previamente explicado, as cores luz (RGB)
possuem 03 canais de cores e as cores pigmento (CMYK) possuem 04 canais. Para internet não
se usa o padrão CMYK assim como que para impressão não se usa o padrão RGB. São dois
mundos distintos. Mas é possível converter CMYK em RGB e vice-versa. Basta ir ao menu Imagem
> Modo e fazer sua escolha. Lembrando que nestas conversões costuma haver alterações nas
cores (leves ou severas). Preste atenção se estas são preponderantes para seu projeto ou não.
Se ocorrerem distorções importantes nas cores, tente minimizar tais efeitos em Imagens >
Ajustes compensando as perdas com os recursos ali disponíveis. Para monitorar os canais de
cores de sua imagem, vá em Janelas > Canais. É possível visualizá-los individualmente e até
excluir canais, mas cuidado isto não e um mero ajuste e sim alteração no estrutural da imagem.
Lidando com canais, máscaras e recortes veja:
 < http://www.youtube.com/watch?v=9Pki_TecvEk&feature=fvwrel >.
4) SELEÇÃO
Uma seleção nada mais é do que uma marcação de área que o Photoshop oferece de modo a se
tratar especificamente um trecho da sua imagem. Esta seleção pode ter sua forma pré-definida
(demarcada por retângulos e círculos) ou aleatória (ferramentas como laço poligonal). Se você
quiser trabalhar pontualmente um trecho da sua imagem, deve selecioná-lo.
Recomenda-se após a seleção copiar e colar ou seja, criar um novo layer só com o trecho
selecionado fim de se trabalhar com ele de maneira mais particular. A seleção pode ser utilizada
para se retirar o fundo, ou seja, contorna-se a imagem com a ferramenta laço poligonal e, em
seguida copia-se e cola-se de modo que um novo layer apareça. O layer primitivo (ou ainda o
background) poderá ser descartado. O resultado será um Layer com um trecho da imagem e
destituído do restante (que agora se tornou transparente).
A seleção também pode escolher o trecho de uma imagem a fim de apagá-lo. Basta gerar a
seleção como preferir e apertar a tecla delete ou (ainda usar a ferramenta borracha descrita mais
adiante) dentro da mesma. Lembramos que se fizer isso no plano de fundo (background) o
mesmo não se tornará transparente e sim obedecerá a cor que está indicada em um dos dois
quadradinhos sobrepostos logo abaixo da barra de ferramentas (o inferior). Como já explicado o
quadradinho superior indica as cores que o balde e os pincéis portarão (pintura de figuras) e o
sobreposto a cor do fundo.

CRIANDO ÁREAS COLORIDAS A PARTIR DAS SELEÇÕES

Você também pode criar áreas de tons contínuos (chapados) a partir de seleções. Basta você
criar a área de seleção (via formas geométricas ou pela ferramenta Laço poligonal) disponíveis
na Caixa de ferramentas e com a ferramenta Lata de tinta ir preenchendo estas áreas marcadas.
Procure fazer isso em um novo layer, pois fica mais fácil editá-lo.
FERRAMENTA MAGIC WAND (VARINHA MÁGICA)

Tão importante quanto esta ferramenta é saber como e quando

utilizá-la. A varinha mágica (magic wand) é uma maneira rápida e eficiente de selecionar áreas
de cores em uma imagem (seu ícone acionador está na barra de ferramentas). Se você tiver uma
imagem que contenha uma informação colorida em um fundo branco, por exemplo, e deseja
extrair este fundo, comece clicando com a varinha mágica nesta área branca.
Você vai notar que uma seleção a marcou. Mas o raciocínio é este: marcamos a minha não-figura
(fundo branco) mas eu quero apenas a figura (não-branco). O que temos a fazer é ir em: Menu
> Selecionar e clicar em Inverter (ou teclar Shift + Control + i). Pronto! Tudo o que era não-
selecionado agora é selecionado. Basta agora você teclar Control C (ou Menu > Editar > Copiar)
e Control V (ou Menu > Editar > Colar). A figura selecionada foi sem o fundo branco para um
novo layer. Caso queira, apague o layer original para perceber que o fundo não mais existe.
Veja um exemplo de sua aplicação em:
 < https://youtu.be/kmR0yUrlCJA >.

Você pode calibrar a intensidade da força da varinha mágica na Barra de Opções em Tolerância. Porém,
com muita tolerância: ela corre o risco de invadir áreas que você não queira selecionar. Pouca
tolerância: se tiver áreas de tonalidades muito próximas, elas não vão ser selecionadas. Outro detalhe:
cuidado, pois este tipo de seleção em recortes costuma propiciar, principalmente em imagens de baixa
resolução um serrilhado indesejado nas extremidades da imagem copiada em um novo layer. Isso pode
ser atenuado dando à seleção (logo antes do Copiar e Colar) um tratamento de difusão (Feather) de
pouca intensidade. Está em Selecionar > Modificar > Difusão ou digitando o atalho Control Alt D. Mas
pondere, veja qual o melhor meio de se selecionar um trecho de uma imagem: laço poligonal, figuras
geométricas ou curvas em seleção, como veremos melhor mais adiante. Em matéria de seleção rápida,
nem tudo se resolve com a varinha mágica.

RECORTES E TRATAMENTOS PONTUAIS EM SELEÇÕES

Já lhe pediram para gerar uma imagem em fundo transparente? Pois bem, isto é feito no
Photoshop. Tudo que você tem a fazer é selecionar a área desejada que se mantenha com as
ferramentas de seleção, copiar e colar gerando um novo layer e deletar o layer original. Simples,
não é? Pois bem, existe um ajuste que se chama Suavizador (Feather) que pode melhorar a
qualidade de seu recorte. Como visto, ele se encontra em Selecionar > Modificar. Dependendo
do desenho de 0,2 a 5 pixels de taxa será suficiente para que seu recorte seja suavizado e não
fique com aspecto grosseiro (cheio de pixels serrilhados nas extremidades), pois o suavizador
implementa uma leve e delicada transparência gradual nas bordas da sua área selecionada. Você
o aplicará logo após realizar a seleção e antes dos movimentos de copiar e colar. Faça um teste
de recorte com e sem suavizador e compare a diferença.
MÁSCARAS
São muito úteis para seleção e tratamento de imagens. Com as máscaras você pode trabalhar
em nível de profundidade e limites de pixels. Veja algumas aplicações em:
< http://www.youtube.com/watch?v=_nv96jCQatA >.
 < https://youtu.be/u3ykm-MnGek >

5) BALDE DE CORES, PINCÉIS, BORRACHA E BORRÕES

Estas ferramentas estão também no painel à esquerda e destinam-se à aplicação de cores em

áreas definidas por seleções ou pinturas livres na tela. A Lata de tinta, como já brevemente
descrita no item Mesclar camadas tem a propriedade de aplicar massas de cores previamente
escolhidas em áreas selecionadas ou por todo o canvas. A Borracha, por sua vez, faz o papel
inverso: ela retira tanto aplicação de cores chapadas quanto remove áreas de imagens, deixando
o fundo com a cor especificada lá no quadradinho inferior da Barra de ferramentas (ou ainda
áreas vazias, no caso de layers já com fundo em transparência – não plano de fundo). A
ferramenta Borrar (ilustrada com um dedinho) consegue “arrastar” pixels nas imagens
passando-nos a sensação de borrões, ou seja, como de estivéssemos trabalhando com tintas
frescas e passássemos o dedo nas mesmas em uma tela de pintura à óleo. Importante para leves
retoques ou para acabamentos artísticos.
O mais bacana destas e de tantas outras ferramentas é que você pode escolher o diâmetro, a
forma e a intensidade dos pincéis que as aplicarão para cada uma delas. Por exemplo, se
quiséssemos gastar as extremidades de uma imagem dando-nos a sensação de bordas
envelhecidas, rasgadas, poderíamos apagá-las com a ferramenta Borracha, escolhendo um pincel
no formato Arranhado (Barra de opções – formato de pincéis).

A ferramenta “mão” é muito útil neste momento, pois clicada e arrastada consegue deslocar
nossa visualização por toda a extensão da imagem.

6) TEXTOS
O Photoshop possui um interessante editor de texto, porém não podemos nos esquecer de que
ele não é necessariamente um programa específico para diagramação de textos e sim um
poderoso editor de imagens. Clicando na letra T da barra de ferramentas, o cursor de seu mouse
automaticamente mudará de forma para que você possa clicar na imagem e, a partir deste clique
começar a digitar. Também permite, ao arrastá-lo, abrir uma caixa de texto para que você possa
inserir grandes massas de textos em parágrafos. Selecionando o texto digitado (arrastando o
mouse sobre ele como você faz no MS Word, por exemplo) é possível escolher e alterar a sua
cor, o tipo de fonte (letra), especificar alinhamentos, entrelinhas, etc.; tudo editável na Barra de
opções.

7) ACTIONS
Este recurso é muito útil para quando você tiver que executar as mesmas ações (por exemplo,
alterar o tamanho da imagem, ou descolori-la, etc.) em diferentes arquivos. Você não precisa
fazer tudo repetitivamente um por um. Supondo que você pretenda aplicar em duzentas imagens
cinco procedimentos comuns. E fazer isso uma a uma, fica bastante complicado, não é? Então,
pensando nisso o Photoshop criou o comando Actions, que tem a capacidade de gravar as suas
ações e depois, apenas um clique, aplicá-las instantaneamente na sua sequência de imagens.
Vamos ver?
Abra todas as imagens que você deseja tratar com os mesmos efeitos. Agora, localize o
painel Ações no menu Janelas. Se houver alguma pasta lá, apague-as. Na sua parte inferior você
verá o ícone par criar uma nova ação. Clique-o. Ao abrir uma janela dê o nome para esta ação e
clique em Gravar. Volte ao painel Ações, lá terá uma bolinha vermelha ativa (tipo REC de
gravadores). Escolha uma imagem, ela será a primeira e servirá de referencial para as demais.
Agora comece a trabalhar a imagem como preferir: altere sua cor, recorte com Crop, espelhe,
etc. Neste momento o Photoshop já começou a gravar seus passos, e você pode acompanhá-los
no painel Actions. Comandos como Salvar e Fechar também podem ser gravados. Terminados
os procedimentos na primeira imagem, clique no quadradinho (stop) na parte inferior do
painel Ações para cessar a gravação. Para aplicar nas demais basta apenas ir clicando no botão
triangular PLAY que se encontra também na parte inferior do painel Actions e observar que a
cada clique, as suas imagens vão sendo submetidas às ações gravadas e, se você gravou Arquivo
> Fechar elas vão também se fechando. Interessante, não é?
Mas veja na prática em:
< http://www.youtube.com/watch?v=4jG5iiBj0sA >.
 < https://youtu.be/EPxBiYItMOs >.
8) PRINCIPAIS EFEITOS
O Photoshop possui uma infinidade de efeitos que podem ser aplicados isoladamente ou
combinados em suas imagens. Para especificá-los todos seriam necessárias muitas horas de
extensa dedicação e comentários explicativos. Porém, como sugestão para o seu cotidiano como
webdesigners, foram selecionados alguns efeitos considerados imprescindíveis e que, de fato
podem trazer bons diferenciais aos seus trabalhos.

FILTROS
No menu Filtro encontramos uma série de possibilidade que você poderá explorar e que são bem
interessantes. Podemos dividi-las em grupos de acordo com as características de seus efeitos.

ACABAMENTO
Estes efeitos propiciam imitar situações de spots de luz (como os de estúdios fotográficos).
Também nos permite criar reflexos de flash apara acentuar pontos brilhantes em nossa imagem,
como se fosse um estouro de luz de flash fotográfico na mesma.

CAMADAS
Em Camada > Estilo de camada encontram-se efeitos bastante comuns por aí em muitos
materiais impressos ou digitais que conhecemos. Porém recomenda-se serem usados com
cautela e bom senso para não tornar seu trabalho visualmente “poluído”. A aplicação destes
efeitos somente é perceptível quando a imagem que os receberá estiver em layer com fundo
transparente e menor que o seu próprio Canvas, pois são efeitos que trabalham, sobretudo nas
bordas das imagens. Se você tiver uma foto, por exemplo, não perceberá estes efeitos se suas
04 bordas estiverem coincidentes com os limites do canvas. O ideal seria selecioná-la toda, copiar
e colar a fim de se criar um novo layer (camada), com o comando do menu: Editar > Escala
reduzi-la um pouquinho com o Shift apertado para não distorcer suas proporções e assim, no
menu Camada > Efeitos de Camadas escolher e aplicar o desejado.
Damos como sugestão experimentar os três mais trabalhados: Drop shadow (sombra
projetada), outer glow (brilho externo) e Bevel and emboss (chanfro e entalhe). A
sombra projetada, como o próprio nome diz cria uma sombra por detrás da imagem e sua
intensidade e característica pode ser controlada pelo painel referente. O efeito é como se a
imagem estivesse levemente elevada e projetando uma sombra sobre o que está no layer abaixo.
O brilho externo, por sua vez, pode ser trabalhado como se fosse um brilho uniforme e luminoso
ao redor da imagem. Dá-nos a impressão de que o objeto possui uma aura, um esfumaçado
luminoso em seu contorno. Ambos os efeitos de sombra podem ser trabalhados em seus valores
de cores. Vai do efeito que você queira explorar. Os efeitos seguintes (chanfro / entalhe e relevo)
simulam alto e baixo relevo nas bordas das imagens e são muito interessantes, principalmente
para se criar botões para websites. Eles rebaixam ou elevam as bordas da imagem e trabalham
sombra e luz nas mesmas a fim de se ter a sensação de um efeito tridimensional.
 < https://youtu.be/j91NNBNHIa4 >.
9) SMART OBJECT E CURVAS VETORIAIS
O Photoshop oferece a possibilidade de se trabalhar também com vetores, além dos bitmaps. Em
outras palavras podemos fazer e tratar desenhos com curvas vetoriais no mesmo arquivo em
que estamos editando, por exemplo, fotografias (rasters). É possível trabalhar em camadas,
objetos importados do illustrator, por exemplo, como desenhos de marcas, grafismos e
ilustrações diversas. Isso é uma possibilidade extremamente útil porque bem sabemos que a
qualidade das imagens vetoriais é infinitamente maior do que as de bitmap, pois se baseiam em
cálculos matemáticos que podem ser reorganizados livremente. Na prática, significa que
podemos aumentar ou diminuir livremente o tamanho dos desenhos vetoriais (que no programa
necessitam estar em layers separados) sem que sua qualidade gráfica seja alterada.
Porém, em relação às imagens de bitmap (raster) observamos que se a diminuirmos suas
dimensões no Photoshop, ela pode sofrer um leve desfoque (suavização de serrilhado) que pode
interferir na sua apresentação visual. E uma vez diminuído, não podemos mais aumentar porque
o inverso é mais crítico ainda: ao redimensionarmos para aumentar o tamanho de uma imagem
(vide Editar > Escala), o objeto selecionado, que é composto por pixels, terá alterada sua taxa
de pixels por polegada em função deste aumento e se aparentará totalmente distorcida
(serrilhada) com seus pixels aumentados e evidenciados. Como resultado teremos imagens
pixeladas e de péssima qualidade gráfica.
E também não adiantará tentarmos diminuí-la novamente no intento de "consertar", pois a
mesma já se converteu em uma imagem com uma nova taxa de pixel. A sugestão então é, ao
lidar com imagens raster (bitmap), procurar trabalhar com o tamanho exato das mesmas, ou
se for reduzir, que esta redução não seja tão acentuada. E aumentar imagens dentro dos
layers, evite, pois pode serrilhar (estourar pixels)!
Retomando nosso raciocínio, para importar uma imagem vetorial do Illustrator para o Photoshop
proceda assim: No menu Arquivo, clique em Abrir. Na sua Caixa de diálogos procure um arquivo
do Illustrator que contenha a imagem que deseja trazer para o Photoshop. Clique em abrir e
imediatamente um quadro de importar PDF aparecerá (é desta forma que ocorre a conversão /
migração).
Dimensione a imagem para o tamanho desejado (em área e em pixels), lembrando que uma
imagem de boa qualidade para impressão é gerada com 300 DPIs de resolução e dimensionada
no tamanho ideal para sua aplicação. Por exemplo, se tivermos uma imagem para uma capa de
CD criada no Illustrator, devemos abri-la no Photoshop como descrito, colocando como valores
300 DPIs e tamanho de área aproximadamente 110 x 110 mm (11 x 11 cm) que é o tamanho
médio de um encarte de CD. E claro: escolhamos o modo de cor CMYK por se tratar de imagem
a ser impressa. Para arquivos de internet o raciocínio é o mesmo, porém trabalhe com taxas de
bitmap de no máximo 96 DPIs de resolução (para que seus arquivos não fiquem muito pesados)
o, modo de cor será RGB e suas dimensões tratadas em pixels e não em milímetros, de acordo
com a aplicação destinada. Depois destas configurações, basta clicar em ok e seu vetor já estará
no Photoshop.
Agora, resta apenas você clicar com o lado direito do mouse no layer (painel camada) referente
a ela e selecionar a opção “Converter em objeto inteligente”. Deste modo, esta imagem poderá
ser redimensionada livremente sem problemas de “estourar pixels”, pois se tratará de uma
referência vetorial.
Veja um exemplo em:
 < http://www.youtube.com/watch?v=PjZF0KpSGJs >.
Outro recurso muito útil do Photoshop é o de se poder desenhar com curvas. Para tanto utilize a
ferramenta “Caneta”, que se encontra na sua Barra de ferramentas, à esquerda da tela. Com ela
você pode desenhar livremente formas como se fosse uma ferramenta de ilustração vetorial.
Para desenhar curvas basta utilizar a ferramenta caneta, aplicando-a no arquivo e, através da
ferramenta Seleção direta, ir inserindo nós (pontos de ancoragem) e mantendo o mouse
pressionado ir arrastando-os e modelando-os até atingir a forma ideal. Utilize a tecla Alt do
teclado para suavizá-las.
Uma utilização muito comum para estie tipo de trabalho é em recortes pela possibilidade de
convertê-la em seleção. Você pode ir desenhando curvas em um layer acima da imagem que se
queira extrair do fundo. Contorne toda a imagem, faça os ajustes nos nós como preferir e depois
da imagem totalmente contornada, clique com o lado direito do mouse na curva e clique na
opção Criar seleção. Você perceberá o que era curva se transformou em seleção. O que você tem
a fazer agora é deletar este layer (a seleção ficará flutuante), copiar e colar para ver sua imagem
duplicada e sem o fundo. A imagem selecionada foi para um novo layer. Delete o layer de baixo
(o da imagem original) para você ver que esta imagem estará perfeitamente recortada (sem
fundo). Este tipo de trabalho dará um refinamento bem melhor ao recorte do que se você utilizar,
por exemplo, a ferramenta varinha mágica ou o laço poligonal.
Confira outras informações em:
< http://www.tecmundo.com.br/imagem/2554-photoshop-domine-a-pen-tool-e-faca-curvas-
elaboradas-.htm > ou

< http://www.youtube.com/watch?v=yUDBFoQ8EI4 >.

10) FILTROS DIVERSOS
No Menu > Filtro, poderão ser encontrados uma infinidade de efeitos aplicáveis em seus
trabalhos. São efeitos das mais variadas naturezas. Efeitos que imitam pinceladas artísticas, lápis
de cor, texturizadores, simuladores de materiais e volumes, etc. Também é possível distorcer as
imagens criando efeitos de lentes e espelhos muito interessantes. Convém você abrir uma
imagem no Photoshop (de preferência uma foto da internet por ser mais leve) e ir
experimentando livremente estes efeitos a fim de se acostumar com eles. São efeitos que, se
aplicados com bom senso e imaginação, podem gerar trabalhos incríveis e diferenciados.
11) SALVAR
ARQUIVOS DE IMAGEM
Ao terminar seu trabalho, você pode salvá-lo em seu computador no formato de imagem que
desejar, a partir das opções que o Photoshop lhe propor. Lembrando que o formato. PSD é o
nativo e, uma vez criado, tem a propriedade de conservar todas as propriedades do mesmo,
como layers criados, efeitos aplicados, entre outros e permite, desta forma, que você continue a
edição de onde parou. Cada formato a ser salvo depende de alguns parâmetros que você mesmo
propõe no momento do salvamento. Para web os mais comuns são GIF, JPG e PNG.
Um exemplo: se optar em salvar no formato JPG, o Photoshop pedirá, além do local onde será
salvo, as especificações de compactação.
DOIS MODOS PARA WEB
Supondo que você criou uma imagem para web que será aplicada em um topo de um site, mas
o webdeveloper (programador) solicitou a você que a enviasse toda recortada (fatiada) para que
a mesma pudesse ser carregada em etapas visando a aceleração do carregamento do site. Pois
bem, você não precisa fazer isso manualmente, selecionando, recortando e salvando pedaço por
pedaço. Existe um comando que se chama “Fatiar” (slicer) também na barra de ferramentas,
sendo um submenu do Corte demarcado. Para aplicá-lo basta ir arrastando o fatiador sobre a
imagem criando áreas demarcadas por linhas que limitarão os campos de recortes.

Por fim, entre no Menu > Salvar para web, configure a extensão e a qualidade da imagem e, ao
salvar verifique se, na parte inferior da caixa de diálogos estará a opção 'todas as fatias”. Salve.
Pelo navegador de seu sistema operacional (Windows Explore, por exemplo) localize a pasta em
que você salvou e verá que lá estarão em arquivos distintos todos os pedaços da sua imagem
em uma pasta que o próprio programa criou.

Além desta forma, para se gerar uma imagem compatível com uma boa aplicação na internet,
utilize a opção no Menu > Salvar para Web. Isto faz com que os arquivos gerados tenham uma
otimização para esta aplicação em específico, otimização, sobretudo, no que diz respeito à seu
tamanho em KB e à qualidade geral da imagem.
CONCLUSÃO
Embora seja um software bastante complexo, com uma infinidade de possibilidades de aplicações
e comandos, o Photoshop é um programa muito bem resolvido tanto gráfica quanto
ergonomicamente. Seu conceito de funcionalidade o torna bastante intuitivo. Isto permite com
que você possa ir experimentando os filtros, investigue e estude a natureza dos efeitos e dos
ajustes e ir aplicando em seus projetos. Enfim, que estes conhecimentos possam de fato irem se
somando e desta forma abrirem novos horizontes para seus trabalhos com imagens. No próximo
módulo vamos conhecer um pouco do Adobe Fireworks e procurar integrá-lo com o Photoshop
em um exemplo de aplicação prática para um projeto de interface de um website.