INformatica WEB PDF

INFORMTICA
Informtica | Redes de Computadores | Volume 01 1

Web Design e Formatao de Imagem
VOLUME 01
Governador | Eduardo Campos
Vice-Governador | Joo Soares Lyra Neto
Secretrio de Educao | Nilton Mota
Secretrio Executivo de Educao Profissional | Paulo Dutra
Gerente Geral da Educao Profissional | Luciane Pula
Gestor de Educao a Distncia | Marcos Paulo de Assis Castro
Coordenador do Curso | Almir Pires
Professor Conteudista | Carlos Jos
Equipe Central de Educao a Distncia

Andre Fellipe Pinto | Andria Guerra | Augusto Andrade |
Eber Gomes | George Bento | Jannine Moreno | Marcos Vincius Clemente
Maria de Lourdes Cordeiro Marques | Maria Helena Cavalcanti
Mauro de Pinho Vieira | Pedro Luna
Imagem da capa: http://www.imagemativa.com.br/
Informtica | Web Design e Formatao de Imagem | Volume 01 3

SUMRIO
PROGRAMA DA DISCIPLINA .................................................................... 5

CONTEDO PROGRAMTICO.................................................................. 6
APRESENTAO DA DISCIPLINA ........................................................... 7
INTRODUO ............................................................................................. 8
1. APRENDENDO A UTILIZAR O ADOBE PHOTOSHOP CS5 .............. 10
RESUMO.................................................................................................... 39
2. OTIMIZANDO IMAGENS E CRIANDO TEMPLATE PARA WEB ........ 40
RESUMO.................................................................................................... 51
3. APRENDENDO A UTILIZAR O ADOBE FLASH CS5 PARA CRIAO DE
ANIMAES PARA WEB. ........................................................................ 52
RESUMO.................................................................................................... 67
REFERNCIAS BIBLIOGRFICAS ......................................................... 68
4 Informtica | Web Design e Formatao de Imagem | Volume 01

PROGRAMA DA DISCIPLINA
Disciplina: Web Design e Formatao de Imagem

Prof: Carlos Jos Pereira da Silva
Carga Horria: 75hs
Ementa:
Fundamentos do projeto de programao visual de Web. Metodologia de
projeto de programao visual de Web; Elementos de projeto de programao
visual de Web; principais conceitos do ambiente web: design, interatividade e
ambiente. Formatos de sons e imagens para a Web.
Utilizao do software para tratamento de imagens para a Web (reduo de
resoluo, de tamanho, de cores), aplicao de mscaras e efeitos ao vivo
(sombra, brilho, relevo, dentre outros), restaurao de imagens (nitidez e
correo de pixaes e manchas, por exemplo) e montagens de imagens em
camadas.
Utilizao de software para criao de animaes simples (aplicao de
transparncia, transformao de tamanho, cor e forma), introduo a
Actionscript e movieclips. Exemplos de gerao de CD-ROMs, importao de
imagens JPG, GIF animado, udio e vdeo.
Utilizao do software para criao de pginas com tabelas, camadas,
templates, formulrios, animaes e pginas em framesets. Insero de
javascripts prontos, imagens fatiadas prontas do fireworks e animaes.
Publicao do site em um provedor atravs de FTP.

Objetivo Geral
Esta disciplina tem como objetivo desenvolver competncias e habilidades
que garantiro a insero dos nossos alunos no mercado de trabalho como
profissionais qualificados a exercerem a profisso de Web Designers para
desenvolver projetos visuais para web.
Objetivos Especficos
Formar profissionais na rea de Web Design aptos para a criao,
desenvolvimentos e manuteno de sites para web.
CONTEDO PROGRAMTICO
Volume 1
1 Aprendendo a utilizar o Adobe Photoshop CS5
2 Otimizando imagens e criando template para web.
3 Aprendendo a utilizar o Adobe Flash CS5 para criao de animaes para
web.
Volume 2
4 Aprendendo a utilizar o Adobe Flash CS5 para criao de interatividade
via Actionscript para web.
5 Aprendendo a utilizar o Adobe Dreamweaver CS5 para criao de sites
para web parte I.
6 Aprendendo a utilizar o Adobe Dreamweaver CS5 para criao de sites
para web parte II.

APRESENTAO DA DISCIPLINA
Ol pessoal, sou Carlos Jos, professor que tive a imensa satisfao e o

privilegio de preparar o contedo dessas aulas para vocs. O universo do
Web Design que um assunto que eu gosto muito e fui privilegiado em poder
acompanhar a sua evoluo assim que a Internet chegou no Brasil em 1995
quando era iniciante como profissional nesta rea. Comecei a ministrar aulas
de Web Design em 2000 na Unibratec, de l para c muita coisa mudou e
mudou para melhor.
Sou Bacharel em Cincia da Computao pela FACULDADE DOS
GUARARAPES-PE, Especialista em Front-End Engineering and Design
(Desenvolvimento de Sistemas Avanados para Web) pela FACULDADE
MARISTA-PE e professor de informtica h 10 anos na UNIBRATEC-PE nos
cursos superior e tcnico.
A minha misso com esta disciplina compartilhar o meu conhecimento e
experincia em Web Design com todos vocs, capacit-lo a construir um site
com tudo que tem direito e mais um pouquinho. Outra coisa eu mantenho um
blog desde 2007 (www.carlosjose.net), mais uma fonte de informao e
construo do conhecimento.
Bom estudo!
Carlos Jos

INTRODUO
Antes de ministrar qualquer assunto, gostaria de lhe situar sobre o ambiente

em que vamos trabalhar. Capitalismo e socialismo, conflitos de ordem
poltica, econmica, social e militar entre Estados Unidos e Unio Sovitica
originaram a chamada corrida espacial tecnolgica, passada no perodo da
guerra fria, que deu origem a diversos segmentos tecnolgicos utilizados por
ns nos dias de hoje.
Por volta da dcada 50, o presidente norte americano Dwight Eisenhower

anuncia a inteno de seu pas em lanar um satlite artificial em volta da
orbita da terra. No entanto, a Rssia saiu na frente lanando o Sputnik que
fazia transmisses de rdio.
No auge da guerra fria em uma disputa chegar em segundo lugar onde s

existiam dois competidores, foi de mais para os Estados Unidos. Deu incio
corrida espacial com a criao da ARPA (Advanced Research Projects
Agency) com o objetivo de criar mecanismos de defesa avanados
tecnologicamente aos quais existiam na poca. Na criao desses
mecanismos de defesa, alguns cientistas concentraram seus esforos na
transmisso de dados eletrnicos.
O cientista John Licklider propem a criao da rede galctica, uma viso
futurista para a interligao de milhares de computadores inspirado como as
galxias se organizam no cosmo, John Licklider foi transferido para ARPA
com a finalidade de desenvolver a rede galctica que tinha duas premissas:

Cada computador deveria ter uma porta de entrada permanentemente
aberta para outros computadores, permitindo o acesso a dados
comuns a todos e no aos dados particulares de cada um.
As modificaes particulares em cada computador no poderiam
afetar os outros computadores ligados rede.
Essas premissas deram incio tecnologia de troca de pacotes que foi
fundamental para o nascimento da rede de computadores.
Isso mesmo, os princpios definidos pelo cientista John Licklider nos

proporcionaram a Internet que temos hoje, um grande e complexo
emaranhado de computadores interligados e trocando informaes. Com isso
apresento para voc que esta fazendo este curso o nosso ambiente de
trabalho: a Internet. Vamos desenvolver sites que sero armazenados em
computadores e estes esto interligados a outros e a outros e assim por
diante. Agora que j sabemos o ambiente de trabalho, vamos aprender as
tcnicas para criao e desenvolvimento de sites para Internet.

1. APRENDENDO A UTILIZAR O ADOBE PHOTOSHOP CS5
Desde sua criao no to humilde como programa de edio de imagens, o

Adobe Photoshop tornou-se o principal software de edio grfica do mundo.
Ano aps ano as revistas especializadas tem o apontado como o melhor.
Quando a Internet comeou a despontar com fora no Brasil em meados do

ano 2000 a Adobe lanou a verso 5.5 que tinha ferramentas apropriadas
para tambm atender aos Web Designers.
O Adobe Photoshop continua a mostrar que realmente veio para ficar e
permanecer como o melhor e mais poderoso, devido aos seus recursos
poderosos, o Adobe Photoshop pode intimidar um pouco os usurios
iniciantes. Mas queremos com este material e o auxlio do seu professor,
desmistificar tudo isso, ao longo do curso voc vai poder observar o quanto
bom trabalhar com este software.
O Adobe Photoshop CS5 vem em duas verses:

Adobe Photoshop CS5
o Projetado para fotgrafos e designes de impresso
Adobe Photoshop CS5 Extended
o Projetado para Web designers, designers interativos e
designers de vrias mdias.

Fonte: http://www.adobe.com/br/products/photoshop/family/?promoid=BOZRN
Requisitos de sistema para Windows

Processador Intel Pentium 4 ou AMD Athlon 64
Microsoft Windows XP com Service Pack 3; Windows Vista Home
Premium, Business, Ultimate ou Enterprise com Service Pack 1 (recomenda-
se o Service Pack 2) ou Windows 7
1 GB de RAM
1 GB de espao livre em disco para a instalao; ser necessrio espao
adicional livre durante a instalao (no possvel instalar em dispositivos de
armazenamento removveis com base em memria flash)

Monitor de 1.024 x 768 (recomenda-se 1.280 x 800) com placa de vdeo
aceleradora de hardware OpenGL, colorida, de 16 bits e 256MB de VRAM
Alguns recursos acionados por GPU precisam de suporte grfico para Shader
Model 3.0 e OpenGL 2.0
Unidade de DVD-ROM
Software QuickTime 7.6.2 necessrio para recursos multimdia
necessria conexo de banda larga com a Internet para servios on-line.
Fonte: http://www.adobe.com/br/products/photoshop/photoshop/systemreqs/
Fique de olho
Se voc no possui uma verso do Adobe Photoshop CS5, possvel baixar
uma verso Trial para testar por trinta (30) dias, e assim poder realizar as
atividades das aulas. Na url abaixo, mediante preenchimento de um cadastro
simples, para nossa disciplina voc deve marcar a opo do pacote Creative
Suite Web Premium.
https://www.adobe.com/cfusion/mmform/index.cfm?name=product_notify&loc
=pt_br
Fim do boxe
rea de trabalho do Adobe Photoshop

A cada nova verso a Adobe vem fazendo modificaes importantes na rea
de trabalho dos seus softwares ao ponto de unificar a aparncia de todos,
com o Photoshop no foi diferente para facilitar o nosso trabalho no dia a dia.
Vamos aprender a identificar os elementos que compem a rea de trabalho,
se voc j conhece o Adobe Photoshop vai perceber as mudanas, mais se
voc nunca utilizou este software, vai aprender como trabalhar com ele.

rea de trabalho padro do Adobe Photoshop:
1. Barra de Menus Todas as opes de menu.
2. Paleta Options Essa paleta ela e contextual, ou seja, ela muda de acordo
com a ferramenta selecionada.
3. Caixa de Ferramentas esta a nossa disponibilidade todas as ferramentas
necessrias para trabalhar as imagens.
4. Barra de Titulo Traz informaes importantes como: o nome da imagem,
tamanho de zoom, formato do arquivo e o modelo de cor.
5. Rguas As rguas do Photoshop tm a funo de auxiliar na produo
das imagens trazendo assim linhas guias.
6. Tela de Pintura No Photoshop a janela de imagem voc vai encontrar
como CANVAS.
7. Barra de Status Traz informaes como: tamanho de armazenamento da
imagem, quando voc aplica um filtro ela mostra o tempo decorrido e etc.
8. Painel Color Traz as cores disponveis para pintura, cores RGB, CMYK e
at PANTONE.
9. Painel Layer Esse fundamental no Adobe Photoshop, sem ele no ser
possvel criar as montagens, aplicar os ajustes de camadas, criar efeitos,
enfim no ser possvel fazer nada.
10. Encaixe de painis Os painis que no esto em uso ficam recolhidos
em forma de cones.
11. Painel Adjustments Este painel ser utilizado para realizar ajustes nas
imagens por meio das Layers.
12. Workspace A rea de trabalho(workspace) totalmente configurvel e
j vem com algumas predefinies, possibilita ainda que o usurio crie o seu

prprio workspace. Por padro o Essentials que ser apresentado ao utilizar
o Adobe Photoshop pela primeira vez.
Fonte: captura de tela do Adobe Photoshop CS5 feita pelo autor.
Saiba mais
Para aprender mais assista ao vdeo 01 rea de trabalho do Adobe
Photoshop, publicado no ambiente.
Fim do boxe

A caixa de ferramentas
F
onte: imagens produzidas pelo autor.
Saiba mais

Observe que na parte inferior direita das ferramentas aparece um tringulo
preto, este indica que existem outras ferramentas que fazem parte do mesmo
grupo. Para exibi-las basta clicar na ferramenta e aguardar um pouco.
Fim do boxe
Imagens Rasterizadas versus Imagens Vetoriais

H duas maneiras bsicas de se trabalhar imagens no computador: com
pixels e com vetores. Vou explicar cada uma.
Imagens vetoriais
Vou comear com as imagens vetoriais que so a base para chegar s
imagens Rasterizadas. Programas baseados em vetores, como o Adobe
Illustrator, CorelDRAW ou at mesmo o Adobe Flash, usam a matemtica, ou
vetores, para desenhar as imagens. Os programas vetoriais so mais
adequados para as ilustraes.
Imagens Rasterizadas
O Adobe Photoshop um programa baseado em pixels (tambm conhecido
como programa de mapas de bits ou imagens raster). Em outras palavras, ele
utiliza pixels, ou pequenos pontos de luz, para descrever, armazenar e
manipular imagens no computador.
A tarefa de converter uma imagem Vetorial em Pixel chama-se: Rasterizar.
Talvez voc tenha ouvidor falar em Renderizar! Um termo bastante conhecido
para quem trabalha com programas que geram imagens tridimensionais, ou
simplesmente 3D. Quando voc manipula um objeto 3D em um software, por

exemplo, 3D Max. O objeto 3D vetorial, quando aplicar a renderizao a
este vetor, passar a ser uma imagem rasterizada, por tanto, uma imagem
baseada em pixel. Cada tipo de programa, no entanto, pode complementar
facilmente um ao outro.
Fonte: imagem produzida pelo autor.
A primeira bicicleta uma imagem rasterizada e a segunda bicicleta uma

imagem vetorial.
Formatos de Arquivos
O Adobe Photoshop capaz de ler e gravar vrios formatos de arquivos. Hoje
em dia dispomos de muitos formatos de arquivos, mas gostaria de destacar
os formatos que mais iremos trabalhar como web design:
PSD
Salvar um arquivo no formato PSD preserva todas as layers (camadas), mask
(mscaras), channels (canais) e selees que voc tiver criado. possvel
tambm salvar informaes de copyright. Se voc precisar retomar um

trabalho finalizado anteriormente para atualizar qualquer coisa neste trabalho,
o formato de arquivo PSD o mais indicado neste caso. A nica
desvantagem dos arquivos PSD o tamanho de armazenamento.
Fique de olho
Sempre guarde seus trabalhos realizados no Adobe Photoshop no formato
PSD para garantir modificaes futuras.
Fim do boxe
JPEG ou JPG
As imagens JPEG (Joint Photographic Experts Group) de 8-bits possuem uma
faixa de cor de 16,7 milhes de cores, que pode variar para mais modificando
a quantidade de bits. Devido intensidade de cores disponvel nesse formato,
trata-se de uma boa opo para fotografias e imagens com variaes de
sombras, degrades ou combinaes suaves de cores. Infelizmente este
formato no suporta transparncia de background (segundo plano) na
imagem.
Fique de olho
O formato JPEG um formato de imagem compacto, por desfazer-se de
algumas das informaes da imagem digital que so repetitivas, o formato
JPEG capaz de conseguir nveis notveis de compactao de arquivo.
Muito usado na Internet.
Fim do boxe
GIF

O GIF (Graphical Interchange Format) um formato de arquivo que foi
desenvolvido, inicialmente, pelos membros da CompuServe, para possibilitar
o envio de imagens on-line. Esse antigo formato ainda usado atualmente e
foi alvo de novas atenes, devido sua capacidade de armazenam vrios
quadros de imagens que podem ser apresentados um aps o outro gerando
assim animaes, o que ouvimos falar de GIF animado. Esse recurso fez do
GIF um formato popular na Web.
As imagens GIF de 8-bits possuem uma tabela de cor de 256 tons de cores,
tambm tem a caracterstica de transparncia de background (segundo plano)
da imagem.
TIFF
O formato TIFF (Tagged Image Format) um bom formato multiplataformas,
que usa o mtodo de compactao LZW. E uma boa opo quando preciso
usar uma imagem para impresso.
As imagens TIFF de 8-bits possuem uma faixa de cor de 16,7 milhes de
cores, muitas das caractersticas do JPG e mais utilizado para impresso.
Saiba mais
O LZW (Lempel-Ziv-Welch) um algoritmo de compresso de dados,
derivado do algoritmo LZ78, baseado na localizao e no registro das
padronagens de uma estrutura. Foi desenvolvido e patenteado em 1984 por
Terry Welch[1].
Fim do boxe
PDF

O PDF(Portable Document Format), mais um formato da Adobe. O
Photoshop capaz de exportar arquivos PDF e, usando esse formato,
possvel criar layouts de pginas que podem ser lidos em qualquer plataforma
de computadores atravs de um leitor gratuito, o Adobe Acrobat Reader.
O formato PDF tambm facilita a impresso de arquivos. Voc pode colocar
esses documentos na Web ou envi-los por e-mail para outras pessoas, que
podero ento imprimir os arquivos. Com o PDF tambm totalmente
possvel criar manuais e apresentaes on-line.
PNG
O PNG (Portable Network Graphic), um formato bem interessante, pois ele
tem as mesmas caractersticas dos formatos j apresentados JPG e GIF. O
formato PNG esta dividido em:
PNG 8 formato com as mesmas caractersticas do GIF, PNG 24 formato com
as caractersticas do JPG.
Fique de olho
Independente do tipo PNG 8 ou PNG 24, possvel salvar as imagens com o
background (segundo plano) transparente.
Fim do boxe
EPS
O formato EPS (Encapsulated PostScript) uma boa opo para a
transferncia de arquivos entre o CoreIDRAW e o Photoshop. O Photoshop

no capaz de ler arquivos CDR (o formato de arquivo nativo do
CoreIDRAW), mas l perfeitamente arquivos EPS. Voc poder exportar um
arquivo CDR no formato EPS e abrir no Photoshop.
Criando uma nova imagem

Agora que voc j conhece a interface do programa, os tipos de arquivos do
Adobe Photoshop, j esta mais do que na hora de colocarmos a mo na
massa.
Nova imagem
Proceda da seguinte forma, na barra de menu > File > New..., ao abrir a
janela de dilogo NEW, configure da seguinte forma:

Name: Aqui vamos dar o nome para a nossa imagem.
Preset: So algumas predefinies de formatos de pginas ou tela.
Width: Definimos a largura da tela.
Height: Definimos a altura da tela.
Resolution: Definimos a resoluo da imagem em pixel de acordo
com a mdia final.
Color mode: Definimos o padro de cores da imagem, o melhor
formato o RGB Color.
Background contents: Definimos a cor de segundo plano da nossa
imagem, bom eu acho melhor comear com a imagem transparente
para depois criar um segundo plano mais agradvel.
Fique de olho
A resoluo de uma imagem rasterizada em pixel, como j aprendemos. No
Adobe Photoshop pixel/inch, neste caso inch significa uma unidade de
medida pequena, mais precisamente polegada, isto quer dizer que a cada
polegada temos uma aglomerao de pixels. Por exemplo: monitor = 72
pixel/inch; impresso = 300 pixel/inch; para Internet = 150 pixel/inch.
Fim do boxe
Fique de olho
Todas as funcionalidades do Adobe Photoshop, s esto disponveis para
Color Mode: RGB Color. RGB representa Red, Green e Blue os feixes de luz
que combinados entre si formas todas as cores.
Fim do boxe

Saiba mais
Leia no meu blog sobre a Teoria da cor: Sistemas de cores. Segue abaixo a
url: http://carlosjose.net/?p=198
Fim do boxe
Na barra de titulo da nossa imagem, temos informaes muito importantes

tais como:
O nome da imagem, o zoom atual (100%), qual a layer e o padro de cor
desta imagem (RGB/8bits). Quase esqueci de dizer que esse quadriculado na
imagem e a forma que a Adobe achou para representa o transparente.

Modos de imagem
H alguns modelos de imagem que se faz necessrio voc conhecer. Para ter
acesso aos diversos modos de cores, proceda da seguinte forma, na barra de
menu > Image > selecione a opo Mode. Abaixo resolvi falar apenas dos
modos de imagens para o trabalho de Web Design
Fique de olho
Para poder visualizar dos modos de imagem, necessrio estar com uma
imagem aberta.
Fim do boxe
Indexed Color
O modo Indexed Color um subgrupo do RGB. Normalmente aplicados nos
formatos de arquivos GIF que estudamos anteriormente.
RGB Color.
Usada principalmente em trabalhos para ser apresentados em tela/monitor e
na Web.
Canais
Os canais so um recurso importante e extremamente poderoso do Adobe
Photoshop. tambm um dos recursos mais ignorado e subutilizado. Os
canais podem ser uma grande ajuda na criao de mscaras exatas, em
restauraes de fotografias, e na criao de efeitos especiais e para salvar
selees.

O que um canal?
Toda imagem possui pelo menos um canal. Os canais contm as informaes
que compem uma imagem.
Uma imagem com Color Mode: RGB Color, contm quatro canais: um para as
informaes de vermelho, um para o verde e azul, e um canal composto que
contm todas as informaes contidas nos outros trs canais.
Fique de olho
Ao criar um canal personalizado em uma imagem, este ser chamado de
cana alpha.
Fim do boxe
Saiba mais
Para aprender mais assista ao vdeo 02 Canais do Adobe
Photoshop, publicado no ambiente.

Pratique a utilizao de canais atravs do tutorial 01 Criando um
efeito de pedra com canais, publicado no ambiente.
Leia no meu blog: Tutorial Photoshop: Criando texturas de Rocha.
Segue abaixo a url: http://carlosjose.net/?p=302
Fim do boxe
Utilizando as Ferramentas
Vamos colocar em prtica a utilizao das ferramentas que aprendemos no
item 1.2.1 A caixa de ferramentas. Cada conjunto de ferramentas contm
um tutorial para que voc possa praticar.
Ferramentas de Tonalidade
As ferramentas Dodge, Burn e Sponge formam o grupo de ferramentas Tone.
Juntas, essas ferramentas podem afetar a tonalidade dos pixels das imagens.
Com elas possvel clarear, escurecer e alterar a saturao de qualquer rea
da imagem.

Saiba mais
Pratique a utilizao das ferramentas de tonalidade atravs do tutorial 02
Clareando pixel de uma imagem com a ferramenta Dodge, publicado no
ambiente.
Fim do boxe
Saiba mais
Escurecendo pixel de uma imagem com a ferramenta Burn, publicado no
ambiente.
Fim do boxe
Saiba mais
Saturando pixel de uma imagem com a ferramenta Sponge, publicado no
ambiente.
Fim do boxe
Ferramentas de Focalizao
O prximo grupo de ferramentas e formado pelas ferramentas Blur, Sharpen e
Smudge. Juntas, essas ferramentas podem afetar o foco das imagens e
misturar os pixels.

Saiba mais
Pratique a utilizao das ferramentas de focalizao atravs do tutorial 05
Parte de uma imagem desfocado com a ferramenta Blur, publicado no
ambiente.
Fim do boxe
Saiba mais
Enfatizando os pixels de uma imagem com a ferramenta Sharpen, publicado
no ambiente.
Fim do boxe
Saiba mais
Misturando os pixels de uma imagem com a ferramenta Smudge, publicado
no ambiente.
Fim do boxe

Ferramentas de retoque
Este grupo de ferramentas muito utilizado nos retoques de imagens
publicitrias, de gamos para ns Web Designs uma mo na roda para
solucionar problemas inesperados. Geralmente meus alunos querem retirar
marcas de espinhas, cicatrizes e outras coisas. O Adobe Photoshop CS5 traz
novidades e facilidades para retocar uma imagem.
As ferramentas de retoques so: Clone Stamp, Pattern Stamp, Spot Healing,
Healing Brush e Patch.
Saiba mais
Pratique a utilizao das ferramentas de retoque atravs do vdeo 03
Aprendendo a retocar imagens, publicado no ambiente.
Fim do boxe
Saiba mais
Criando padres com a ferramenta Pattern Stamp, publicado no ambiente.
Fim do boxe

Saiba mais
Leia no meu blog: Photoshop Utilizando Patch Tool e Mask Layer. Segue
abaixo a url: http://carlosjose.net/?p=847
Fim do boxe
Ferramentas de Seleo e corte.

Uma parte do verdadeiro poder do Photoshop est em sua capacidade de
manipular imagens. Os efeitos que se podem aplicar so ainda mais
poderosos, no entanto, quando se pode limitar o local onde os efeitos so
aplicados, o que pode ser feito selecionando-se antes uma rea da imagem.
As selees podem ser feitas de vrias maneiras no Photoshop, e as
ferramentas de seleo disponveis so bastante poderosas.
Fique de olho
Alm dessas ferramentas de seleo, ainda contamos com uma opo na
Barra de Menu > Select, onde encontramos opes para inverter, transformar,
modificar, salvar e cancelar uma seleo criada por qualquer ferramenta de
seleo.
Fim do boxe

Ferramenta Rectangular Marquee Tool
Estas ferramentas so de fcil manuseio, basta escolher uma destas e clicar
e arrastar para criar uma seleo. Para adicionar uma rea a mais em uma
seleo, ou seja, continuar selecionando, basta pressionar a tecla SHIFT e
continuar a selecionar, para subtrair uma rea de seleo, pressione a tecla
ALT. Isto funciona com qualquer ferramenta de seleo.
As Ferramentas Lasso
Quando precisamos fazer uma seleo, que no seja retangular ou muito
menos circular, temos o auxilio destas ferramentas para ajudar a criar
selees mais precisas.
Lasso Tool Cria uma seleo mo livre, para quem no tem
problemas com coordenao motora ser, no ter dificuldades.
Polygonal Lasso Tool Criamos nossa seleo a partir de clique do
mouse at fechar o ponto inicial com o final, essa uma forma de
criar selees geomtricas.
Magnetc Lasso Tool Essa bem interessante, pois a base para
criar a seleo so os pixels, pois voc clica em um ponto e pronto
no faz mais nada, sem estar com o boto do mouse pressionado,
voc vai contornando a imagem e automaticamente vai atraindo a
seleo ao pixel correspondente ao do inicio da seleo, realmente
uma moleza!
Ferramenta Quick selection e Magic Wand Tool

A ferramenta Quick Selection permite fazer uma seleo como se voc
estivesse pintando a rea a ser selecionada. Os ajustes de tamanho do pincel
ajudam a ter selees mais precisas.
A ferramenta Magic Wand seleciona um grupo de pixels adjacentes ao pixel
clicado que possuam a mesma tolerncia/tonalidade de cor. s vezes fica
muito ruim para criar a seleo com esta ferramenta. Mais possvel fazer
ajustes de valores na paleta options na opo TOLERANCE, significa que de
pendendo do valor de tolerncia aplicado, captura mais ou menos pixels.
Saiba mais
Leia no meu blog: Como recortar cabelo no Photoshop CS5. Segue abaixo a
Fim do boxe
Ferramenta Crop Tool

Essa ferramenta cria uma seleo de forma retangular que possibilita cortar a
imagem de forma muito rpida. Todas as ferramentas de seleo podem
cortar uma imagem, basta para isto ir ao Menu > Image > Crop.
Mas com esta voc vai selecionando, ajustando at chegar ao ponto certo e
pressionar ENTER para confirmar ou ESC para cancelar.
Saiba mais
Pratique a utilizao das ferramentas de seleo atravs do vdeo 04
Ferramentas de seleo, publicado no ambiente.

Fim do boxe
Como pintar com tintas, padres e degrades.

O Adobe Photoshop possui recursos que permitem que seja utilizado para
desenhar e pintar. Voc pode desenhar com spray, pincel ou lpis. Com
cores slidas, padres e degrades, e pode definir seus prprios padres e
pincis.
Ferramenta Paint Bucket Tool

Para pintar com esta ferramenta basta escolher uma cor de preenchimento no
painel Swatches e clicar na rea que vai receber o preenchimento. Isto pode
acontecer tambm com uma rea que esteja selecionada. Utilizamos esta
ferramenta no tutorial 01 Criando um efeito de pedra com canais no item 1.6
Canais.
Fique de olho
Dica: para pintar com as cores de primeiro e segundo plano, voc pode usar
as teclas de atalho que so: ALT+DEL = primeiro plano, CTRL+DEL =
segundo plano.
Fim do boxe
Ferramenta Gradient Tool

Esta ferramenta possui varias predefinies de degrades, voc pode criar as
suas prprias. As formas que podem ser aplicadas so selecionadas na

paleta Option, aps escolher a forma, clique e araste na rea da imagem com
a ferramenta Gradient para preencher, possvel realizar esta mesma ao
sobre uma rea que tenha sido selecionada previamente.
Como podemos observar imagem acima, os tipos de degrades so:

Linear, Radial, Angular, Refletido e Diamante.
Saiba mais
Pratique a utilizao da ferramenta de preenchimento degrade atravs do
tutorial 09 Como editar e criar seus prprios efeitos de degrades, publicado
no ambiente.
Fim do boxe
Saiba mais
Leia no meu blog: Photoshop: Criando uma garota dourada. Segue abaixo a
Fim do boxe

Ferramenta Horizontal Type Tool
Podemos dizer que uma ferramenta fundamental e muito fcil de usar, s
clicar na imagem e digitar o que se quer. possvel criar textos na horizontal
e vertical. Texto em forma de seleo na horizontal e vertical.
A questo de configurao de texto semelhante como se voc estivesse em
um editor de texto normal. Cada texto individual digitado criado uma layer
para ele, para voltar a digitar ou alterar o que foi digitado, de um duplo clique
no T que aparece na layer.
Style
Cada layer de texto pode ter um ou mais style, para dar um visual bem
agradvel ao texto possvel aplicar sombra, contorno, extruso e etc. Temos
acesso ao style na paleta.
Saiba mais
Leia no meu blog: Photoshop: Efeito Transformers. Segue abaixo a url:
http://carlosjose.net/?p=519
Fim do boxe
Ferramenta Brush e Pencil

Podemos contar ainda com o Brush e o Pencil para pintar e desenhar. Cada
um possui caractersticas nas tais como, formas de pinceis que variam entre
os macios, duros, artsticos e tipos de cerdas (Bristle Tips), podemos varias o
dimetro de cada pincel e do lpis.
Como organizar as imagens em layers (camadas)

As layars so utilizadas para realizar a composio de vrias imagens e
textos. Voc pode encarar as layers como folhas dispostas umas sobre as
outras, pois com isso que se parecem as layers no Adobe Photoshop.
Contudo, so muito mais do que essa simples analogia, porque possvel
adicionar, excluir, ordenar, duplicar ou copiar.
Mais do que isso possvel mudar a opacidade ou mesclar uma layer com
outra. Sem a layer no seria possvel fazer nada do que podemos fazer hoje
em termos de composio de imagem.
Saiba mais
Entenda mais sobre a utilizao das layers atravs do vdeo 05 Entendendo
as layers, publicado no ambiente.
Leia no meu blog: Photoshop: Pequenos ajustes, grandes resultados. Segue
abaixo a http://carlosjose.net/?p=767
Leia no meu blog: Photoshop: Tratando de melhorar o dia. Segue abaixo a
Leia no meu blog: Making of anncio revista Veja Escola Criativa. Segue
abaixo a http://carlosjose.net/?p=913
Fim do boxe
Mask Layer (Mscaras de camada)

Mask Layers andam de mos dadas com as layers, onde quer que estejam.
Cada layer pode ter uma mask layer, embora no tenha que possuir uma.
A mask layer permite a viso de partes da layer inferior, o quanto aparecer
depende da mscara. Se a mask for preta, a layer inferior ser visvel, e se for
branca, a layer inferior no ser visvel atravs da layer com a mask.

Alm do preto e do branco, a mask layer tambm pode ter tons de cinza.
Quanto mais escuro o tom de cinza, mais a layer ser visvel atravs da mask
layer, por outro lado, quanto mais claro o tom de cinza, menos visvel ser a
layer inferior.
Saiba mais
Leia no meu blog: Photoshop Utilizando Patch Tool e Mask Layer. Segue
Fim do boxe
Adjustment Layer (camadas de ajuste)

Adjustment layer so um tipo de mscara que permite que voc veja como
correes, tais como alteraes em brilho e contraste, mudanas de cores, e
alteraes de curvas, afetam suas imagens. A vantagem das camadas de
ajuste (Adjustment layer), que no so permanentes. Voc poder escluir
com a mesma facilidade que as pode inserir.
Saiba mais
Leia no meu blog: Photoshop CS4 Adjustment Layer. Segue abaixo a url:
Leia no meu blog: Efeito aurora do Windows Vista. Segue abaixo a url:
Fim do boxe

Smart Filter
A medida que vocs forem crescendo no conhecimento dos recursos do
Adobe Photoshop, vocs vo perceber que na aplicao de filter em cima de
filter para chegar no efeito desejado, e percebe que faltou um peque ajuste
em um determinado filter que estava no comeo e aia tem que fazer tudo de
novo!
Quando estamos fazendo ajustes quer seja de brilho/contraste, cor em uma
imagem possvel resolver este problema usado s camadas de ajustes
(Adjustment Layer) como acabamos de estudar.
Graas ao recurso de converter uma layer em Smart Filters, podemos
resolver o problema acima citado.
Saiba mais
Leia no meu blog: Tutorial Photoshop CS3: Smart Filters. Segue abaixo a url:
Fim do boxe

RESUMO
Aprendemos muitas coisas importantes que vai nos ajudar nesta caminhada
como profissional de Web Designer, tais como:
A origem do nosso ambiente de trabalho: a Internet;
Aprendemos as diferenas entre imagens rasterizadas e vetorizadas;
Os formatos de arquivos utilizados no Adobe Photoshop ;
A ligao entre os modos de imagens com os canais;
E o quanto o Adobe Photoshop fundamental para o trabalho do
profissional de Web Design
Mais isso s o comeo, pois na sequncia iremos aprender a otimizar
imagens para web e criar templates.

2. OTIMIZANDO IMAGENS E CRIANDO TEMPLATE PARA
WEB
Como o tamanho de arquivo um fator importante na publicao web, a

otimizao/compactao de arquivo e uma necessidade absoluta. O Adobe
Photoshop permitem otimizar a exibio e o tamanho de arquivo das imagens
para obter resultados satisfatrios na publicao Web.
Fique de olho
Em geral, o tamanho de uma imagem deve ser pequeno o bastante para
permitir tempos de download razoveis de um servidor Web, mas grande o
suficiente para representar as cores e os detalhes desejados na imagem.
Fim do boxe
Aprendemos na unidade 1 os formatos de arquivos que devemos utilizar na
web, para relembrar so: JPG, GIF e PNG. Mais s a escolha do formato de
arquivo suficiente? Claro que no! Dos trs formatos de arquivos, apenas o
GIF e JPG incluem otimizao/compactao automtica.
O que otimizao?
Voc deve estar se perguntando o porqu desta palavrinha: otimizao, que
venho escrevendo em conjunto com compactao. Compactar um arquivo
voc j fez na vida, por exemplo, pegar um arquivo do Microsoft Word e com
o auxilio de um software de compactao zipou o arquivo e ele ficou
pequenino. Com certeza voc fez a mesma coisa com uma foto e... o
resultado no foi o mesmo, o arquivo diminuiu quase nada, porque?

Voc vai entender tudo agora, os softwares como Winzip, Winrar e outros que
utilizamos para compactar fazem o que chamamos de compactao sem
perda, ou seja, uma vez compactado o arquivo do tipo texto, eu posso
recuperar o arquivo original fazendo o processo inverso, no verdade!
Quando fazemos isso com uma foto, no funciona porque os softwares como
Winzip, Winrar a principio no foram criados para compactar este formato de
arquivo. Por isso chamamos de otimizar, pois este processo nas imagens
gera uma perda de informao que no tem volta, e isto ocorre para poder
diminuir a quantidade de informao redundante na foto e assim reduzir o
tamanho final do arquivo.
Fique de olho
Os arquivos no-otimizados: possuem informaes redundantes. Por
exemplo, vamos pegar como base apenas uma linha de uma imagem
qualquer com 35 pixels brancos. Um arquivo no-otimizado repete a
informao pixel branco 35 vezes. Isto uma redundncia de informao
desnecessria que s faz aumentar o tamanho de armazenamento da
imagem.
Fim do boxe
A utilizao desta e outras tcnicas que vamos aprender se faz necessrio
para o profissional de Web Design, facilitando assim os usurios que deveram
acessar os websites que criaremos. Para que vocs possam ter uma ideia
mais precisa do que queremos transmitir vou dar um exemplo: pegar uma
imagem que tem 5 Gb e reduzir o tamanho para 45 Mb.

Tipos de otimizao de imagens
Os dois tipos bsicos de compactao so lossy e nonlossy (ou lossless).
Lossy
A compactao lossy elimina informaes redundantes para tornar o arquivo
menor. Por exemplo, se existirem 30 pixels brancos seguidos de um pixel
cinza e mais quatro pixels brancos ps o pixel cinza, uma compactao lossy
converte o pixel cinza em um pixel branco e escreve uma nica informao
35 pixels brancos aqui.
Apenas o formato de arquivo JPG suporta compactao lossy e permite

escolher o nvel de otimizao para que voc possa equilibrar a fidelidade da
imagem contra o tamanho de armazenamento do arquivo.

Nveis
Uma otimizao JPEG baixa resulta em arquivos que so quase
idnticos ao original.
Uma otimizao JPEG mdia elimina detalhes que podem ou no ser
visveis na tela.
Uma otimizao JPEG alta costuma embaar as imagens e prejudicar
um pouco do detalhe, mas, em muitas imagens, o resultado ainda
perfeitamente satisfatrio .
Nonlossy (lossless)
A compactao nonlossy nunca elimina totalmente as informaes
redundantes, mas procura meios mais eficientes de definir a otimizao de
uma imagem. Tomando como base o exemplo que utilizamos acima, se
existirem 30 pixels brancos seguidos de um pixel cinza e mais quatro pixels
brancos ps o pixel cinza, uma compactao nonlossy deixa a imagem final
assim: 30 pixels brancos aqui, um pixel cinza em seguida, 4 pixels brancos.

Fique de olho
Observe que ainda existe informao redundante na otimizao nonlossy,
pois existem duas informaes iguais (30 pixels brancos e 4 pixels branco), a
princpio pode parecer uma coisa ruim, mas a utilizao da otimizao
nonlossy vai depender da qualidade final que queremos obter em uma
imagem.
Fim do boxe
Apenas o formato de arquivo GIF suporta compactao nolossy e permite
escolher o a quantidade de cores de acordo com a tabela de cor da imagem
para que voc possa equilibrar a fidelidade da imagem contra o tamanho de
armazenamento do arquivo.
O GIF tambm conhecido como um arquivo de cores indexadas que
significa que as cores so armazenas em uma tabela de cor ou mapa de cor
como vimos na Unidade 1.

Podemos ver a tabela de cores desta imagem simples.
Tabela
As variaes de cores podem ser: 2, 4, 8, 16, 32, 64, 128 e 256
Fique de olho
A compactao no diminui a dimenso de uma imagem, por exemplo, uma
imagem com 640480 pixels no muda absolutamente nada, apenas torna o
arquivo menor para armazenamento.
A otimizao nunca substitui a prtica de manter a resoluo ao mximo
necessrio.
Fim do boxe
Otimizando imagens com o Adobe Photoshop

Agora que j temos uma boa ideia do que uma otimizao, vamos aprender
como o Adobe Photoshop pode nos ajudar a otimizar as imagens que
utilizaremos em um website.
Estas imagens podem ser:
Uma galeria de fotos;
Fotos dos produtos de uma empresa;
E as imagens que compem o layout do website.
Fique de olho
Antes de prosseguir com os seus estudos, baixe no ambiente o conjunto de
imagens otimizando_imagens_para_web.rar
Fim do boxe
Saiba mais
Para aprender mais assista ao vdeo 06 Salvando imagens otimizadas para
web, publicado no ambiente.
Fim do boxe
Otimizando uma imagem JPG

Abaixo segue um roteiro para que voc possa entender o recurso de
otimizao utilizado pelo Adobe Photoshop:
1- Inicie o Adobe Photoshop.
2- Menu > File > Open... abra o arquivo 14start1.psd, localizado na pasta
Otimizando imagens para web que voc j fez o download no ambiente.
3- Menu > File > Save for Web & Devices...
4- Clique na guia 4-Up da janela de dilogo Save for Web & Devices.

5- Usando o menu pop-up Zoom Level no canto inferior esquerdo, mude a
porcentagem de ampliao para 200% ou um valor que permita visualizar
mais detalhes da imagem.
6- Posicione o mouse sobre a imagem ativa, o ponteiro do mouse muda para
uma mo podendo assim arrastar a imagem at o texto 'Tropical Rainforest'.
7- No menu pop-up Preset, escolha JPEG Low.
Otimizando uma imagem GIF

Abaixo segue um roteiro para que voc possa entender o recurso de
otimizao utilizado pelo Adobe Photoshop:

1 - Menu > File > Open e abra o arquivo 14start2.psd, localizado na pasta
Otimizando imagens para web.
Essa imagem foi criada no Adobe Illustrator, observe as muitas reas de cor
slida ou chapada.
3- Menu > File > Save for Web & Devices...
4 - Clique na guia 2-Up da janela de dilogo Save for Web & Devices.
5 No menu pop-up Preset > escolha GIF 128 No Dither.
6 - Escolha Percentual no menu pop-up Color Reduction Algorithm.
Antes de continuar, gostaria de explicar as diferenas utilizadas no menu pop-

up Color Reduction Algorithm:
Percentual - normalmente produz imagens com maior integridade de
cor.
Selective - semelhante ao Percentual, mas prioriza amplas reas de
cor e a preservao das cores apropriadas para a Web.
Adaptive - usa como amostra as cores do espectro RGB que
predomina na imagem.
Restrictive - consiste nas 216 cores que so compartilhadas pelas

paletas de cores dos sistemas operacionais Windows e Mac Os.
Usar uma tabela de cor de 16 ou 24 bits (milhares ou milhes de
cores) se as configuraes do vdeo do sistema estiverem definidas
para um desses modos.
Gostaria de ficar apenas com estas opes, muito embora tenham outras,
mais esta servem para o objetivo que queremos.
Saiba mais
Para aprender mais assista ao vdeo 07 Reduzindo a paleta de cor de uma
imagem GIF, publicado no ambiente.
Fim do boxe
Criando um template com o Adobe Photoshop

A partir deste ponto vamos criar um template de um website, pois j
adquirimos conhecimento suficiente para isto at o momento somando o que
aprendemos com a Unidade 1.
Fique de olho
Antes de prosseguir com os seus estudos, baixe no ambiente o arquivo do
Adobe Photoshop: 960_grid_16_col.psd, utilizaremos este arquivo como um
gabarito para criao do template. Baixe tambm o conjunto de imagens:
novo_studio.rar
Fim do boxe
Saiba mais

Para aprender mais sobre sistema de grade (grid system), visite o site 960
Grid System em: http://960.gs/
Leia no meu blog: Grid System Generator. Segue abaixo a url:
Fim do boxe
Abaixo voc pode ver o resultado final do template que vamos criar no Adobe
Photoshop, na Unidade 6 vamos transformar este template em um documento
HTML.
Fo
nte: imagem produzida pelo autor.
Para facilitar o aprendizado e ficar mais interessante a construo do

template, resolvi criar um vdeo dividido em 3 (trs) partes:
Vdeo 08 - Criando um template parte 1

Saiba mais
Para aprender mais sobre criao de templates como o Adobe Photoshop,
visite os seguintes sites: Line25 (categoria Tutorials) http://line25.com/ e o
conhecidssimo PSD Tuts+ (Tutorials > Interface) - http://psd.tutsplus.com/
Fim do boxe
RESUMO
Aprendemos muitas coisas importantes que vo nos ajudar nesta caminhada

como profissional de Web Designer, tais como:
Aprendemos a diferena entre Compactar e Otimizar;
Aprendemos a importncia de da otimizao das imagens para web;
Entendemos como funciona os dois tipos de otimizao de imagem o
Lossy e Nonlossy;
Utilizamos o Adobe Photoshop para otimizar imagens no formato JPG
e GIF;
E criamos um template profissional e moderno com o Adobe
Photoshop.
Mais isso s o comeo, pois na sequncia iremos aprender a utilizar o
melhor programa de animaes grficas interativas para web o Adobe Flash.

3. Aprendendo a utilizar o Adobe Flash CS5 para criao
de animaes para web.
Chegamos semana 3 e vamos aprender a utilizar o melhor programa de

animaes grficas interativas para web o Adobe Flash. Voc provavelmente
deve ter ouvido alguns comentrios contrario a utilizao do Adobe Flash,
mas a culpa dos profissionais que no sabem utiliz-lo de forma correta.
Por isso vou comear o nosso estudo do Adobe Flash com nfase na parte
bsica para quem no sabe absolutamente nada.
No passe adiante sem antes ler e entender o que segue abaixo!
Tempo, Interatividade e movimento

Quando estou ministrando as aulas do Adobe Flash de forma presencial,
gosto de fazer esta pergunta para que os alunos saibam da importncia de
saber como, quando e onde aplicar tempo, interatividade e movimento.
Eu comeo a pedir para os alunos um exemplo no dia-a-dia onde podemos
ver claramente o uso destes elementos (tempo, interatividade e movime),
como neste momento no estou de forma presencial voc, vou direto ao
exemplo para representar bem a utilizao destes trs elementos.
Quando voc est andando de carro ou nibus, e o semforo fica

amarelo indicando que se deve reduzir a velocidade para parar, pelo
menos assim na teoria, na pratica alguns no respeitam isso. O

motorista fica aguardando o semforo ficar verde para prosseguir a
viagem.
Reflita agora mesmo no exemplo acima onde voc acha que o tempo,
interatividade e movimento aconteceram, neste caso no passe
adiante na leitura!
Espero que tenha refletido onde empregado tempo, interatividade e

movimento!
Interatividade: o semforo interagiu com motorista.
Tempo: o intervalo de tempo do semforo fechado.
Movimento: prosseguimos a viagem.
Voc deve estar se perguntando o que tudo isso tem haver com Adobe
Flash? Como eu sempre digo e enfatizo, saber usar o Adobe Flash e
entender como ele funciona saber usar corretamente: tempo,
interatividade e movimento.
Independente dos recursos que o Adobe Flash tem e que vamos
aprender coloque isso bem claro em sua mente tempo, interatividade e
movimento a chave para aprender a utilizar o Adobe Flash.
Saber o que o Flash pode fazer?

O Adobe Flash um software que contm ferramentas usadas para
criar animaes, grficos vetoriais, aplicaes e websites.

O formato de arquivo de autoria do Adobe Flash o FLA, ao finalizar
um projeto voc gera outro formato de arquivo o SWF que um
arquivo otimizado, isso mesmo, o Adobe Flash permite otimizar as
imagens como aprendemos na Unidade 2.
Saiba mais
Para aprender mais visite o site da Adobe Flash Professional para design
da Web, na url: http://www.adobe.com/br/products/flash/design/
Para aprender mais visite o site da Adobe Recursos do Flash Professional,
na url: http://www.adobe.com/br/products/flash/features/
Fim do boxe
Requisitos de sistema para Windows

Processador Intel Pentium 4 ou AMD Athlon 64
Microsoft Windows XP com Service Pack 3; Windows Vista Home
Premium, Business, Ultimate ou Enterprise com Service Pack 1 ou Windows 7
1 GB de RAM
3,5 GB de espao livre em disco para a instalao; ser necessrio espao
adicional livre durante a instalao (no possvel instalar em dispositivos de
armazenamento removveis com base em memria flash)
Resoluo de vdeo 1.024 x 768 (recomenda-se 1.280 x 800) com placa de
vdeo de 16 bits
Unidade de DVD-ROM
Software QuickTime 7.6.2 necessrio para recursos multimdia

necessria conexo de banda larga com a Internet para servios on-
line.
Fonte: http://www.adobe.com/br/products/flash/systemreqs/
Fique de olho
Se voc no possui uma verso do Adobe Flash CS5, possvel
baixar uma verso Trial para testar por trinta (30) dias, e assim poder
realizar as atividades das aulas. Na url abaixo, mediante
preenchimento de um cadastro simples, para nossa disciplina voc
deve marcar a opo do pacote Creative Suite Web Premium.
https://www.adobe.com/cfusion/mmform/index.cfm?name=product_noti
fy&loc=pt_br
Fim do boxe
rea de trabalho do Adobe Flash

Toda vez que voc inicializar o Adobe Flash, ser apresentado tela de boas
vindas (welcome screen), vamos na maioria dos casos criar arquivos
utilizando a opo Create New > ActionScript 2.0 e em outros casos utilizarei
opo Create New > ActionScript 3.0.
A escolha inicial pelo ActionScript 2 devido vocs ainda no terem
aprendido lgica de programa e POO (programao Orientada a Objeto), o
nosso foco como disse no inicio aprender o bsico, mais com esse bsico
voc vai perceber que poder fazer coisas incrveis.

Fonte: captura de tela do Adobe Flash CS5 feita pelo autor.
rea de trabalho padro do Adobe Flash:

Por padro eu irei utilizar o workspace DESIGNER ao invs do ESSENTIALS
que ser apresentado ao utilizar o Adobe Flash pela primeira vez. J que a
interface do Adobe Flash semelhante ao Adobe Photoshop.

1. Barra de Menus Todas as opes de menu.
2. Workspace A rea de trabalho(workspace) totalmente configurvel e j
vem com algumas predefinies, possibilita ainda que o usurio crie o seu
prprio workspace.
3. Timeline neste espao onde iremos controlar o movimento

determinando o tempo.
4. Tools esta a nossa disponibilidade todas as ferramentas necessrias
para trabalhar as imagens.
5. Stage Esta pgina branca ao centro onde iremos desenhar, inserir
imagens e etc.
6. Properties Este painel muito importante, pois traz as propriedades do
stage se nenhum objeto estiver selecionado. Quando selecionamos uma
ferramenta o painel muda para permitir configurar as propriedades da
ferramenta selecionada.
7. Barra de Titulo Traz informaes importantes como: o nome do arquivo.
8. Rguas As rguas tm a funo de auxiliar na produo dos trabalhos
com as linhas guias.
9. Library Este painel armazena de forma organizada todo e qualquer
arquivo que voc importar.
10. Align Este painel nos auxiliar no alinhamento dos objetos entre si e os
objetos com o stage.
11. Color Este painel ser nosso grande companheiro na escolha das cores,
e ainda possibilita a criao decores personalizas tanto slida quanto
gradiente.

Fonte: captura de tela do Adobe Flash CS5 feita pelo autor.
Saiba mais
Para aprender mais assista ao vdeo 11 rea de trabalho do Adobe Flash,
publicado no ambiente.
Fim do boxe
Aprendendo e entendendo a desenha com o Adobe Flash

Vamos aprender a utilizar as Ferramentas de desenho para criar grficos.
Selecione a ferramenta Oval Tool (O) que esta no mesmo grupo da
ferramenta Rectangle Tool (R).
No painel Properties, escolha > vermelho para stroke (contorno) e laranja
para fill (preencimento), altere o valor do stroke para 3, assim teremos um
contorno mais espesso. Faa tudo isso antes de desenha.

Aps ter selecionado as cores de Traado e Preenchimento, clique no Stage
e arraste para desenhar.
Fique de olho
Para desenhar crculos perfeitos observe a figura 1, enquanto que a figura 2
mostra o exatamente o contrrio.
Este recurso s estar disponvel se no painel Tool a opo Snap to Objects
esteja acionada.
Fim do boxe
Vamos entender como o Adobe Flash organiza um desenho, neste caso
como mostra a figura 3, o traado e o preenchimento so elementos
diferentes. Para chegar neste ponto, clique com a ferramenta Selection Tool
(V) no preenchimento (apenas no preenchimento) e arraste para baixo. Para
voltar ao estado original, pressione o conjunto de teclas: CTRL + Z, para
desfazer esta operao.

Saiba mais
Leia no meu blog: Flash Bsico Como desenhar para Criar Grfico. Segue
Pratique a utilizao das ferramentas de desenho com o Object Drawing
atravs do tutorial 10 Criando Grficos com Object Drawing, publicado no
ambiente.
Leia no meu blog: Flash Bsico Trabalhando com Layers. Segue abaixo a
Fim do boxe
Aprendendo e entendendo como fazer uma animao.

O que uma animao? Uma reproduo continua de frames/quadro que do a
sensao de movimento para quem ver. Com o Adobe Flash possvel criar
animaes:
Frame to frame (quadro a quadro)
Tweening (interpolao)
Motion tween (guia de movimento)
Motion Presets
Animao Frame to Frame

Frame to Frame ou quadro a quadro, uma tcnica igual ao que
aplicado aos desenhos animados feitos de forma tradicionalmente sem
e com o uso do computador, onde cada movimento existe um frame
(quadro) que representa o estado do movimento atual.

Para comear, desenhe um circulo sem o stroke, no aplicar a cor
branca no contorno, realmente desenhar sem. Desenhe o circulo no
canto superior esquerdo do stage. A ideia principal aqui inserir na
timeline um frame de cada vez para fazer com que esta bolinha
atravesse do o stage at chegar ao outro lado.
Clique no desenho da bolinha com a ferramenta Selection Tool (V), no

Menu > Insert > Timeline > Keyframe (quadro chave) que uma cpia
do anterior, esta cpia voc move um pouco para sua direita. Proceda
assim at a bolinha chegar ao outro lado do stage.
Quando completar todo o processo de criar keyframe e mover a

bolinha, voc deve ter algo parecido com a imagem acima. Um frame
para cada posio da bolinha no stage. Para visualizar a animao, d
[Enter] para visualizar a bolinha andar de um canto para o outro do
stage.
Para testar a nossa animao proceda assim: Menu > Control > Test
Movie > In Flash Professional. Essa rea de teste deixa a nossa
animao em loop.
Animao com Tweening

Animao usando tween uma forma muito prtica, voc indica o keyframe
de incio e o keyframe final da animao e o Adobe Flash preenche os frames
entre o ponto inicial e o final. O que o Adobe Flash faz uma interpolao,
bem verdade que nem sempre o resultado final o desejado, pois fica a
cargo do programa criar os frames complementares da animao.
Existem duas formas de criar animaes com tween:

Shape tween Utilizado sempre para desenhos, mais precisamente
formas.
Motion tween Utilizado para: fotos, textos e smbolos.
Classic tween Esta a forma clssica para as verses antigas e
para quando estiver utilizando um arquivo com ActionScript 2.0.
Shape Tween
Neste exemplo desenhe uma bolinha sem o stroke no canto superior
esquerdo. Clique no frame 15 da timeline insira um keyframe e araste a

bolinha para o canto superior direito, com isso informamos o keyframe de
incio e o final da nossa animao.
Clique nos Frames (quadros) que esto entre os keyfremes inicial e final.
Proceda assim: Menu > Insert > Shape Tween. Pronto simples assim
criando uma animao.

Fique de olho
Diferena entre Frames e Keyframes
Frames so quadros parados e sem alteraes.
Keyframes so quadros parados, porm com alguma alterao no
posicionamento, tamanho, cor e etc.
Fim do boxe
Motion Tween
Para criar uma animao com Motion Tween, antes necessrio saber o que
um Symbol (smbolo) e os trs behaviors (comportamentos) que um symbol
pode assumir, so eles: Graphic, Button e Movie Clip.
Pense no symbol como uma embalagem em que colocamos alguma coisa

dentro dela, independente do behavior. Por exemplo, se eu pegar uma
garrafa de gua mineral e pintar a garrafa de azul, com isso possvel mudar
o contedo da garrafa tambm? A gua vai ficar azul? Claro que no!

Quando voc importa uma imagem para dentro do Adobe Flash, no
podemos aplicar uma animao com esta imagem que no seja a Frame to
Frame, no podemos aplicar Tween Shape, pois no se trata de uma forma, o
que fazer?
Neste caso usar o Symbol com behavior (Graphic, Button e Movie Clip), no
podemos manipular a imagem, podemos manipular a embalagem e neste
caso posso aplicar uma animao Motion Tween.
Saiba mais
Pratique a criao de animao Motion Tween com o tutorial 12 Criando
animao Motion Tween com Symbol, publicado no ambiente.
Fim do boxe
Animaes com Motion Guide.

O Motion Guide um recurso interessante para se usar em animaes. Trata-
se de um guia de movimento, onde voc indica a trajetria que um
determinado smbolo ira percorrer durante a animao. Este recurso
bastante antigo no Adobe Flash, tanto que chamado de Classic Motion
Guide, e no aparece junto com a timeline como era nas verses anteriores.
Porque isso? O prprio Motion Tween j vem com uma guia de movimento,
voc j aprendeu isso no tutorial 12 Criando animao Motion Tween com
Symbol. Outro recurso foi o Motion Presets que traz 30 animaes prontas
para serem aplicadas a qualquer Symbol, porm com arquivos Actionscript
3.0.

Saiba mais
Leia no meu blog: Flash CS4 Onde foi parar a Motion Guide?. Segue abaixo
a url: http://carlosjose.net/?p=452
Fim do boxe
Mask Layer.
Uma mscara permite ocultar e revelar partes de alguma coisa, semelhante
ao que estudamos na unidade 1 - 1.9.1 - Mask Layer (Mscaras de camada).
Usar uma mscara no Adobe Flash, pode ser um recurso muito eficaz, pois
permitem a criao de efeitos surpreendentes e complexos. As mscaras
podem permanecer estticas ou voc pode anim-las para que se movam
pelo stage.
Saiba mais
Para aprender mais assista ao vdeo 11 Criando Animaes com Mask
Layer, publicado no ambiente.
Leia no meu blog: Tutorial Flash: Fogos. Segue abaixo a url:
Fim do boxe
Voc j percebeu o quanto o Adobe Flash poderoso e cheio de recursos

fantsticos para criar animaes. Segue alguns vdeos, tutoriais e links
interessantes para fortalecer o seu aprendizado. Um lembrete: conhecimento
muito nunca demais!

Saiba mais
Para aprender mais assista ao vdeo 12 Criando Animaes com o Adobe
Flash, publicado no ambiente.
Pratique a criao de animao com o tutorial 13 Criando animao com
Bones, publicado no ambiente.
Leia no meu blog: Flash CS4 Motion Presets. Segue abaixo a url:
Fim do boxe
RESUMO
Aprendemos muitas coisas importantes que vo nos ajudar nesta
caminhada como profissional de Web Designer, tais como:
Aprendemos at agora quando como e onde aplicar tempo e
movimento;
Aprendemos o que podemos fazer com o Adobe Flash;
Entendemos como funciona a interface do programa;
Aprendemos a criar as diversas formas de animao que o
Adobe Flash nos proporciona;
E vimos utilidade da Motion Guide e Mask Layer para criao
de efeitos e animaes mais complexas.
Mais isso s o comeo, pois na sequncia iremos aprender a utilizar
o Adobe Flash CS5 para criao de interatividade via Actionscript para
web.

REFERNCIAS BIBLIOGRFICAS
FAULKNER, Andrew. Official Adobe Electronic Publishing Guide.

Editora Adobe Press. USA, 1 edio janeiro 1999.
ROBBINS, Jennifer Niederst. Aprendendo Web Design guia para
iniciantes, 3 Edio
[1] WELCH, T. A. (June 1984). "A technique for high-performance
data compression." Computer. Vol. 17, pp. 8-19
Silva, CARLOS. A importncia da estruturao semntica para o
cdigo HTML
Estudo comparativo entre HTML 4 e HTML 5
Editora Abril. Curso INFO Photoshop CS5.
Minorello, DANILO. Rehder, WELLINGTON. Photoshop CS3: edio
profissional de imagens e grficos. Rio de Janeiro, Editora Viena
2008.
http://www.carlosjose.net Vivendo o design como designer
PEREIRA, Domnico Turim. REHDER, Wellington. Adobe
Flash CS3: Desenvolvendo Websites Interativos. Rio de
Janeiro, Editora Viena 2008.
Editora Abril. Curso INFO Flash CS4.
http://www.carlosjose.net Vivendo o design como designer
http://www.webtutoriais.com/categorias.php?categoria=flash
http://www.mxstudio.com.br/categoria/desenvolvimento/flash/
http://www.flashwebtraining.com/tutoriais/index.php

INformatica WEB PDF

Hochgeladen von

Dokumentinformationen

Originaltitel

Copyright

Verfügbare Formate

Dieses Dokument teilen

Dokument teilen oder einbetten

Freigabeoptionen

Stufen Sie dieses Dokument als nützlich ein?

Sind diese Inhalte unangemessen?

Copyright:

Verfügbare Formate

INformatica WEB PDF

Hochgeladen von

Copyright:

Verfügbare Formate

INFORMTICA

Informtica | Redes de Computadores | Volume 01 1

Vice-Governador | Joo Soares Lyra Neto

Secretrio de Educao | Nilton Mota

Secretrio Executivo de Educao Profissional | Paulo Dutra

Gerente Geral da Educao Profissional | Luciane Pula

Gestor de Educao a Distncia | Marcos Paulo de Assis Castro

Coordenador do Curso | Almir Pires

Professor Conteudista | Carlos Jos

Equipe Central de Educao a Distncia

Imagem da capa: http://www.imagemativa.com.br/

Informtica | Web Design e Formatao de Imagem | Volume 01 3

PROGRAMA DA DISCIPLINA .................................................................... 5

4 Informtica | Web Design e Formatao de Imagem | Volume 01

Disciplina: Web Design e Formatao de Imagem

Informtica | Web Design e Formatao de Imagem | Volume 01 5

6 Informtica | Web Design e Formatao de Imagem | Volume 01

Ol pessoal, sou Carlos Jos, professor que tive a imensa satisfao e o

Informtica | Web Design e Formatao de Imagem | Volume 01 7

Antes de ministrar qualquer assunto, gostaria de lhe situar sobre o ambiente

Por volta da dcada 50, o presidente norte americano Dwight Eisenhower

No auge da guerra fria em uma disputa chegar em segundo lugar onde s

8 Informtica | Web Design e Formatao de Imagem | Volume 01

Isso mesmo, os princpios definidos pelo cientista John Licklider nos

Informtica | Web Design e Formatao de Imagem | Volume 01 9

Desde sua criao no to humilde como programa de edio de imagens, o

Quando a Internet comeou a despontar com fora no Brasil em meados do

O Adobe Photoshop CS5 vem em duas verses:

10 Informtica | Web Design e Formatao de Imagem | Volume 01

Requisitos de sistema para Windows

Informtica | Web Design e Formatao de Imagem | Volume 01 11

rea de trabalho do Adobe Photoshop

12 Informtica | Web Design e Formatao de Imagem | Volume 01

Informtica | Web Design e Formatao de Imagem | Volume 01 13

Fonte: captura de tela do Adobe Photoshop CS5 feita pelo autor.

14 Informtica | Web Design e Formatao de Imagem | Volume 01

Informtica | Web Design e Formatao de Imagem | Volume 01 15

Imagens Rasterizadas versus Imagens Vetoriais

16 Informtica | Web Design e Formatao de Imagem | Volume 01

Fonte: imagem produzida pelo autor.

A primeira bicicleta uma imagem rasterizada e a segunda bicicleta uma

Informtica | Web Design e Formatao de Imagem | Volume 01 17

18 Informtica | Web Design e Formatao de Imagem | Volume 01

Informtica | Web Design e Formatao de Imagem | Volume 01 19

20 Informtica | Web Design e Formatao de Imagem | Volume 01

Criando uma nova imagem

Fonte: imagem produzida pelo autor.

Informtica | Web Design e Formatao de Imagem | Volume 01 21

22 Informtica | Web Design e Formatao de Imagem | Volume 01

Fonte: imagem produzida pelo autor.

Na barra de titulo da nossa imagem, temos informaes muito importantes

Informtica | Web Design e Formatao de Imagem | Volume 01 23

24 Informtica | Web Design e Formatao de Imagem | Volume 01

Informtica | Web Design e Formatao de Imagem | Volume 01 25

Fonte: imagem produzida pelo autor.

26 Informtica | Web Design e Formatao de Imagem | Volume 01

Informtica | Web Design e Formatao de Imagem | Volume 01 27

28 Informtica | Web Design e Formatao de Imagem | Volume 01

Fonte: imagem produzida pelo autor.

Informtica | Web Design e Formatao de Imagem | Volume 01 29

Ferramentas de Seleo e corte.

Fonte: imagem produzida pelo autor.

30 Informtica | Web Design e Formatao de Imagem | Volume 01