Fireworks

Lgica de Programao em Javascript
Fireworks CS4: Design para Web
Todos os direitos reservados para Alfamdia Prow. AVISO DE RESPONSABILIDADE As informaes contidas neste material de treinamento so distribudas NO ESTADO EM QUE SE ENCONTRAM, sem qualquer garantia, expressa ou implcita. Embora todas as precaues tenham sido tomadas na preparao deste material, a Alfamdia Prow. no tem qualquer responsabilidade sobre qualquer pessoa ou entidade com respeito responsabilidade, perda ou danos causados, ou alegadamente causados, direta ou indiretamente, pelas instrues contidas neste material ou pelo software de computador e produtos de hardware aqui descritos.
01/ 2010 - Verso 1.0
Alfamdia Prow (51) 2111-1666 www.alfamidia.com.br
2010 Alfamidia Prow.
A Alfamdia d Boas Vindas aos seus clientes e deseja um excelente treinamento.
Benefcios ao aluno - Suporte ps-treinamento via e-mail (3 consultas por 90 dias aps o trmino do curso) para tirar dvidas do contedo ministrado em aula, atravs do e-mail matricula@alfamidia.com.br ; - Acesso a extranet www.alunoalfamidia.com.br para verificao de agenda e pontos do PROGRAMA FIDELIDADE; - Convnio com o estacionamento do prdio (desconto); - Avaliaes de acompanhamento e final de curso (em cada mdulo) durante todo o treinamento, garantindo a qualidade do curso. Observaes Importantes - obrigatrio que sejam salvos todos os trabalhos efetuados durante a aula, no servidor indicado pelo instrutor. - No permitido entrar em sala de aula com alimentos ou bebidas de qualquer espcie ou fumar nas dependncias da Alfamdia; - No permitida a instalao de outros Hardwares ou Softwares que no sejam os utilizados em treinamento; - O preenchimento da avaliao final de curso/mdulo condio obrigatria para que o aluno possa acionar a garantia do curso, conforme previsto na ficha de matrcula; - Somente ser fornecido certificado ao aluno com assiduidade igual ou superior a 75% do treinamento; - Qualquer necessidade de alterao na agenda ou cursos contratados inicialmente, consulte os Termos de Contratao na Ficha de Matrcula; - Contatos com a Alfamdia podem ser feitos atravs dos e-mails: matricula@alfamidia.com.br dvidas aps contratao info@alfamidia.com.br novas contrataes
UNIDADE 1 1.1 1.2 UNIDADE 2 2.1 2.2 2.3 2.4 UNIDADE 3 3.1 3.2 3.3 3.4 3.5 3.6 3.7 3.8 3.9 UNIDADE 4 4.1 4.2 4.3 4.3.1 4.3.2 4.4 UNIDADE 5 5.1 5.2 5.3 5.4 5.5 5.6 UNIDADE 6 6.1 6.2 6.3 UNIDADE 7 7.1 7.2 7.3
ORGANIZAO DO CURSO ......................................................................................................................................... 6 SOBRE O CURSO ........................................................................................................................................... 6 ESTRUTURA DO CURSO ................................................................................................................................ 6 CONHECENDO O FIREWORKS CS4 ........................................................................................................................... 8 A INTERFACE DO FIREWORKS CS4 ............................................................................................................... 8 FORMATOS DE IMAGENS ............................................................................................................................ 19 OPERAES BSICAS................................................................................................................................. 21 EDITANDO DOCUMENTOS .......................................................................................................................... 24 TRABALHANDO COM VETORES ..............................................................................................................................28 FERRAMENTAS VETORIAIS ......................................................................................................................... 28 REDIMENSIONAMENTO E TRANSFORMAO DE OBJETOS ........................................................................... 35 USANDO LAYERS ....................................................................................................................................... 37 CONTORNO E PREENCHIMENTO .................................................................................................................. 39 LIVE FILTERS E ESTILOS ............................................................................................................................. 45 COMBINANDO PATHS ................................................................................................................................. 47 MSCARAS ................................................................................................................................................ 51 TRABALHANDO COM TRANSPARNCIA E MESCLAGEM ............................................................................... 52 LABORATRIO ........................................................................................................................................... 53 TRABALHANDO COM IMAGENS BITMAP ...............................................................................................................63 IMPORTANDO IMAGENS BITMAP ................................................................................................................. 63 SELEO DE OBJETOS BITMAP .................................................................................................................. 63 MODIFICANDO BITMAPS ............................................................................................................................ 69 Ferramentas Bitmap............................................................................................................................. 70 Transformaes no Bitmap .................................................................................................................. 76 LABORATRIO ........................................................................................................................................... 77 ELEMENTOS DE NAVEGAO NO FIREWORKS CS4 .........................................................................................82 SMBOLOS .................................................................................................................................................. 83 BEHAVIORS ................................................................................................................................................ 84 ROLLOVERS ............................................................................................................................................... 86 STATES ...................................................................................................................................................... 86 MENU POP-UP ............................................................................................................................................ 86 LABORATRIO ........................................................................................................................................... 88 CRIANDO HOTSPOTS E SLICES ...............................................................................................................................92 HOTSPOT ................................................................................................................................................... 92 SLICES ....................................................................................................................................................... 96 LABORATRIO ........................................................................................................................................... 99 CRIANDO UM PROTTIPO NAVEGVEL NO FIREWORKS CS4 ...................................................................... 103 PROCESSO DE CRIAO DE PROTTIPOS ................................................................................................... 103 EXPORTAO DE PDF INTERATIVO ......................................................................................................... 104 LABORATRIO ......................................................................................................................................... 105
Unidade 1 Organizao do Curso

Sobre o Curso Estrutura do Curso
Unidade 1 Organizao do Curso

1.1 Sobre o Curso
O curso de Fireworks CS4: Design para a Web foi desenvolvido para apresentar ao aluno as principais ferramentas para desenvolvimento de layouts e retoques de imagens. O Fireworks a ferramenta mais utilizada no mercado para criao de pginas, pois oferece a flexibilidade de trabalhos vetoriais e grficos bitmaps simultaneamente. O Photoshop rechinhecidamente a ferramenta mais utilizada para tratamentos de imagem profissionais. Durante este mdulo, o aluno entrar em contato em contato com o que cada software oferece de melhor para o trabalho do webdesigner.
1.2 Estrutura do Curso

O curso estruturado de forma a apresentar, incialmente, ao aluno os conceitos que cercam o trabalho com cada ferramenta e comando. Ao final desta apresentao, o instrutor e a turma realizam os laboratrios que convergem para a criao de um layout completo e navegvel.
Fireworks CS4: Design para web
Unidade 2 Conhecendo o Fireworks CS4

A interface do Fireworks CS4 Formatos de Imagens Operaes Bsicas Editando Documentos
Unidade 2 Conhecendo o Fireworks CS4

2.1 A interface do Fireworks CS4
O Fireworks CS4 o software da Adobe utilizado no desenvolvimento de layouts para web. Possui uma vasta gama de ferramentas e painis que facilitam a construo de sites, prottipos e exportao de arquivos. Sua interface constitui-se do painel Tools, os painis Property, Symbol e Auto shape, menus e demais painis distribudos na tela. Devido complexidade dos elementos de interface no Fireworks e vasta gama de projetos que podem ser desenvolvidos com o software, sua interface pode ser configurada de acordo com as necessidades do usurio. Esta lio visa apresentar ao aluno os principais componentes desta ferramenta.
Tela inicial do Fireworks CS4 e principais painis em destaque
Workspace Apesar das grandes mudanas com relao s verses anteriores, a apresentao visual dos elementos da tela est padronizada entre os demais programas do sute CS4. O estilo de rea de trabalho pode ser configurado da maneira mais conveniente ao usurio. O Fireworks dispe das seguintes opes: Expanded Mode Iconic Mode Iconic Mode With Panel Names Para ter acesso a estas configuraes, acesse o menu posicionado na parte superior direita da tela do Fireworks e selecione uma das trs opes.
Configurao do Workspace
Tools A barra de ferramentas est organizada de acordo com as seguintes funes: seleo, bitmap, vetores, web, cores e visualizao. Estes grupos de funes podem ser compreendidos como categorias de ferramentas de trabalho. Por padro, a caixa de ferramentas fica visvel acoplada no canto esquerdo, mas pode ser reposicionada, no decorrer do trabalho, para qualquer parte da tela. A imagem a seguir ilustra as opes disponveis no painel Tools e as respectivas teclas de atalho.
Tools do Fireworks CS4
Existe mais de uma ferramenta alm daquela que aparece visvel na barra Tools. Isto determinado por meio de um tringulo pequeno, posicionado no canto do cone. Ao clicar durante alguns segundos sobre a ferramenta, as demais opes do grupo tornam-se visveis.
Opes da ferramenta Crop
Categorias da barra Tools As tabelas a seguir esto organizadas conforme a categoria da ferramenta e apresentam uma breve descrio das suas funcionalidades. Durante o desenvolvimento dos exerccios, o aluno poder compreender profundamente suas aplicaes.
10
Select O grupo de ferramentas Select capaz de selecionar, movimentar, modificar e deletar objetos vetoriais e bitmaps. Ferramenta Pointer Select Behind Subselection Scale Skew Distort 9-slice scaling Crop Export area Atalho V, 0 V, 0 A, 1 Q Q Q Q C C Funo Seleciona e move objetos Seleciona o objeto posicionado abaixo da seleo atual Seleciona e move individualmente objetos agrupados e pontos vetoriais Redimensiona e rotaciona objetos Distorce e aplica perspectiva a objetos Distorce e rotaciona objetos Redimensiona e distorce objetos sem distorc-los Suprime uma rea do documento Exporta reas selecionadas do documento
Bitmap A categoria Bitmap oferece ferramentas para a manipulao de grficos bitmaps. Permite alteraes de cores, retoques, pintura e desenho. Ferramenta Marquee Oval Marquee Lasso Polygon Lasso Magic Wand Brush Pencil Atalho M M L L W B B Funo Seleciona uma rea retangular do bitmap Seleciona uma rea oval do bitmap Seleciona e move individualmente objetos agrupados e pontos vetoriais Seleciona uma rea poligonal do bitmap Seleciona cores semelhantes presentes no bitmap Desenha contornos mo livre Desenha contornos com espessura de 1 pixel mo livre
11
Eraser Blur Blur Shapen Dodge Burn Smudge Rubber Stamp Replace Color Red Eye Removal Vectors
E C R R R R R S S S
Apaga pixels do bitmap Exporta reas selecionadas do documento Desfoca uma rea da imagem Define uma rea da imagem Ilumina partes da imagem Escurece partes da imagem Aplica cor enquanto arrasta a imagem Clona uma parte da imagem Armazena qualquer cor do documento no painel de cores Remove olhos vermelhos em bitmaps
Este grupo de ferramentas voltado para a criao e a edio de objetos vetoriais. possvel desenhar formas bsicas, como retngulos e crculos, rapidamente. E tambm oferece a possibilidade de desenhar formas complexas por meio da manipulao de cada ponto que constitui o vetor. Ferramenta Line Pen Vector Path Redraw Path Rectangle Ellipse Polygon Text Freeform Reshape Area Path Scrubber Addictive Atalho N P P P U U U T O O O Funo Desenha uma linha reta Desenha objetos complexos por meio do delineamento de pontos Desenha um objeto vetorial e aplica contorno Redesenha e amplia um vetor j desenhado Desenha um retangulo Desenha uma elipse Desenha um polgono ou uma estrela Insere e edita textos Altera a forma de uma imagem Altera a forma de uma imagem Altera o aspecto dos contornos da imagem variando a presso e a velocidade do trao
12
Path Scrubber Subtractive Knife
O Y
Altera o aspecto dos contornos da imagem variando a presso e a velocidade do trao Corta e separa um objeto vetorial
Web O grupo de ferramentas web permite ao usurio preparar o layout para web. possvel inserir interatividade com a criao dos hotspots, que inserem links, por exemplo. Ferramenta Rectangle Hotspot Circle Hotspot Polygon Hotspot Slice Polygon Slice Hide Slices and Hotspot Show Slices and Hotspot Atalho J J J K K 2 2 Funo Desenha um hotspot retangular sobre a imagem Desenha um hotspot circular sobre a imagem Desenha um hotspot poligonal sobre a imagem Divide a imagem em fatias retangulares Divide a imagem em fatias poligonais Oculta slices e hotspots criados nos documentos Exibe slices documentos e hotspots criados nos
Colors Esta categoria possui ferramentas para insero e controle das cores presentes em contornos e objetos aplicados imagem. Por meio da categoria colors tambm possvel a configurao e aplicao de gradientes. Ferramenta Eyedropper Paint Bucket Gradient Atalho I G G Funo Captura e armazena informaes de cor presentes no documento Aplica cor de preenchimento aos objetos Aplica gradiente ao documento
13
Cor de Contorno Cor de preenchimento Set Default Stroke/Fill Colors No Stroke or Fill D
Exibe a cor configurada para contorno Exibe a cor preenchimento. configurada para
Restaura as cores padro para contorno e preenchimento, normalmente, branco e preto Remove as cores de contorno ou preenchimento na caixa de cores e dos objetos selecionados
Swap Stroke/Fill Colors
Inverte as cores de preenchimento e contorno configuradas
View Na categoria so disponibilizadas as ferramentas para o usurio escolher entre os possveis modos de tela, ampliao e reduo do zoom entre outros controles de visualizao do trabalho e configurao do workspace. Ferramenta Standard Screen Mode Full Screen with Menu Mode Full Screen Mode Atalho F F Funo Exibio padro da janela na qual o documento est inserido Exibio maximizada da janela na qual o documento est inserido, com fundo cinza e sem a barra iniciar do Windows Exibio maximizada da janela na qual o documento est inserido, com fundo preto e foco no layout Movimenta o canvas do trabalho livremente Altera a ampliao do documento
Hand Zoom
H Z
Panis O Firewoks CS4 trabalha com uma srie de painis com funcionalidades especificas. Os painis do Fireworks CS4 permitem a modificao e formatao de objetos vetoriais e bitmaps do layout. Os painis podem ser utilizados para trabalhos com cores, smbolos, imagem etc. Esta seo da apostila visa apresentar brevemente quais so os painis
14
existentes, quais as suas principais funcionalidades e como se relacionam com os demais elementos da interface. O Fireworks CS4 vem com alguns painis j abertos. Para ter acesso queles que no esto visveis, abra o menu Window, posicionado na barra superior do programa. Na imagem a seguir, em destaque, os painis disponveis no Fireworks CS4. A maioria dos painis possui indicao do atalho.
Menu Window com os painis do Fireworks CS4
Os painis esto acoplados na margem esquerda da interface do software e aparecem em grupos. possvel reposicion-los clicando na barra cinza ao topo do painel, arrastando e soltando em qualquer parte da tela. Alguns painis possuem mais opes de configurao alm daquelas visveis. Para ter acesso a elas, basta clicar no boto situado no canto superior direito do painel, referenciado no decorrer da apostila como boto oculto.
15
Painis do Fireworks CS4 e boto com opes ocultas
Optimize (F6) O painel Optimize controla as opes de exportao de slices e imagens do documento. Oferece configuraes de tamanho, extenso e peso do arquivo. Layers (F2) Por meio do painel layers, o usurio possui controle sobre a estrutura e as camadas do documento. Por este painel, a manipulao das imagens, slices e hotspots so controladas no decorrer do trabalho. Commom Library (F7) O Fireworks trabalha com bibliotecas prontas de estilos, imagens, botes de navegao entre outros elementos. Todos estes objetos podem ser acessados por meio do painel Commom Library e inseridos no documento. Pages (F5) Cada pgina do projeto que est sendo trabalhado no Fireworks fica organizada dentro do painel Pages. Este painel exibe todas as pginas do documento e contm opes de navegao para visualizao das pginas. States (Shift + F2) O painel States exibe os estados (ou frames) presentes no arquivo ou nos smbolos e possibilita opo de criar animaes.
16
History (Shift + F10) O painel History pode ser utilizado para visualizar, modificar e repetir as aes tomadas na criao do documento. Sua principal funo guardar as aes mais recentes tomadas pelo usurio. Autoshapes e AutoShape Properties O painel Autoshapes exibe formas prontas e complexas com aplicao de sombras e relevos em setas, cubos etc. possvel obter mais Autoshapes acessando o menu do boto oculto no canto superior direita do painel e clicando na opo Get More Auto Shapes. O painel AutoShape Propoerties funciona em conjunto com os objetos criados a partir do painel AutoShapes e permite a insero de parmetros aos Shapes. Styles (Ctrl + F11) Por meio do painel Styles o usurio pode modificar, criar e salvar efeitos de preenchimento, contorno e texto atribudos a objetos vetoriais. Document Library (F11) O painel Document Library armazena imagens, smbolos, botes e animaes. Os objetos inseridos neste painel funcionam como uma matriz para a criao de outros elementos. Ao modificar uma imagem inserida no Document Library, todas as imagens criadas a partir dela sero atualizadas. URL (Alt + Shift + F10) A criao de bibliotecas de endereos URL, que ficam armazenados neste painel, facilita a reutilizao destes elementos. Color Mixer (Shift + F9), Swatches (Ctrl + F9) e Color Palette Ambos os painis controlam as cores de contorno e preenchimento do documento trabalhado. Por meio da ferramenta Color Mixer o modo de cores que ser trabalhado no documento pode ser configurado. O Fireworks dispe das seguintes opes: RGB, Hexadecimal, CMY, HSB e Grayscale. Alm de permitir a mistura de cores que sero aplicadas ao layout. O painel Swatches funciona como uma biblioteca capaz de armazenar uma srie de cores relacionadas ao layout. J o painel Collor Palette permite a criao e alternao entre paletas de cores, bem como a exportao de conjuntos de cores e explorao de cores j combinadas.
17
Behaviors (Shift + F3) Os Behaviors so os comandos do Fireworks que permitem a insero de interatividade ao layout. Este painel permite a insero e a configurao de objetos interativos como botes, URLS, hotspots etc. Info (Alt + Shift + F12) O painel Info fornece informaes precisas sobre os objetos inseridos no layout, como tamanho e posicionamento no documento, sua relao com o cursor do usurio e a cor do objeto. Find (Ctrl + F) Por meio do painel Find possvel localizar e substituir informaes referentes cores, fontes, textos e URLs. Align O painel Align permite alinhar, organizar e distribuir os objetos do documento conforme os parmetros estabelecidos neste painel. Image Editing Trata-se de uma compilao de ferramentas relacionadas ao tratamento e edio de imagens bitmap. Paths Este painel fornece uma compilao de ferramentas relacionadas ao trabalho com objetos vetoriais que podem ser acessadas rapidamente por quem costuma trabalhar com vetores. Entre outros atributos deste painel, est a seleo de alas de transformao em regies especficas de objetos, mesclagem de objetos e edio de pontos. Special Characters O painel Special Characters oferece acesso rpido a caracteres especiais que podem ser teis durante o trabalho de execuo de layouts, como: Symbol Properties Por meio do painel Symbol Properties, o usurio pode controlar a customizao dos smbolos grficos inseridos no documento.
18
2.2 Formatos de imagens

Entre as vrias funes que o Fireworks possui, grande parte delas destina-se ao trabalho eficiente com imagens bitmap e vetoriais. Em funo disso, compreender os diferentes formatos de imagens digitais que este software d suporte pode otimizar o trabalho do webdesigner. Esta lio destina-se a apresentar ao aluno os principais formatos de arquivos e extenses disponveis e indicar quais so mais adequados para cada situao. Grficos vetoriais Grficos vetoriais possibilitam ao usurio o mximo controle e flexibilidade para criao de imagens para web. Ao trabalhar com vetores, o Fireworks controla linhas, curvas e outras formas, configuradas por meio de equaes matemticas que descrevem o desenho ao computador. O Fireworks oferece uma srie de ferramentas especificas para a criao de vetores, como a Line e a Pen. E outras ferramentas para edio, como Reshape e Freeform. So caractersticas dos objetos vetoriais: Geram arquivos leves Podem ser redimensionados em qualquer proporo sem perder qualidade Possuem boa integrao com o Adobe Flash e Illustrator So facilmente manipulados A imagem a seguir exemplifica como as formas vetoriais funcionam. Este objeto formado por diversos pontos posicionados estratgicamente ao longo da imagem para que sejam formadas as linhas elpticas. Cada ponto possui recursos para que a linha seja modelada
Ponto vetorial E recursos para articulao
Forma vetorial no Fireworks CS4
19
Grficos bitmap Grficos bitmap so imagens compostas por pixels. Neste tipo de imagem, cada pixel usado descreve uma informao de cor que, combinadas, formam o arquivo final. Os formatos mais comuns de bitmap so BMP, PSD, TIFF, PNG, JPG e GIF. Em geral, imagens bitmap resultam de mquinas fotogrficas, scanners e criaes em softwares especficos como o Adobe Photoshop. So caractersticas dos objetos bitmap: Arquivos pesados Sofrem distoro ao serem redimensionados conforme a resoluo da imagem Possuem boa integrao com o Photoshop Na imagem a seguir um arquivo bitmap visto de duas formas diferentes. esquerda ele est tamanho natural. Porm, no destaque direita, a foto est ampliada para que os pixels que a formam fiquem aparentes. Com base nesta observao, possvel afirmar que uma imagem bitmap formada por pixels e que os pixels so pequenos pontos que possuem as informaes de cor da imagem
direita, foto ampliada para visualizao dos pixels que formam o bitmap
Formato GIF GIF a abreviao de Graphical Interchange Format. Trata-se de um dos formatos mais populares da web devido ao peso final reduzido dos arquivos. Alm disso, o GIF oferece a possibilidade de transparncia na imagem. Isso permite imagem interagir com o fundo. Por outro lado, possui uma grande restrio com relao a cores. O GIF s suporta 256 cores. Quanto menos cores a imagem possuir, mais leve ficar o arquivo. o melhor formato para imagens com cores chapadas, como logotipos.
20
Formato JPG JPG a abreviao de Joint Photographic Experts Group. D suporte a um nmero infinitamente maior de cores que o GIF: so mais de um milho de cores. a melhor opo para se trabalhar com fotos ou quando se precisa manter a qualidade de uma imagem com muitas cores em um arquivo leve. Porm, no realiza transparncia. O JPG tem como caracterstica eliminar todas as cores que o olho humano ignora e todas aquelas que apresentam alta redundncia dentro da imagem. Essas cores so transformadas em uma cor s, eliminando assim o peso desnecesrio. Este processo chama-se compresso. Uma vez que um arquivo comprimido no possvel desfazer este processo. Formato PNG PNG a abreviao de Portable Network Graphic. Apesar de ser o formato de imagem mais verstil, ainda no suportado por browsers mais antigos. O PNG rene as melhores caractersticas do GIF e do JPG. Ou seja, suporte a uma extensa gama de cores e aplicao de transparncia. O que resulta em um arquivo leve e com muita qualidade na imagem.
2.3 Operaes Bsicas

Esta lio tem por objetivo dar suporte ao aluno no que diz respeito s operaes bsicas no trabalho com o Fireworks: abrir um arquivo existente, criar um arquivo novo e contextualizar o aluno no ambiente de trabalho do Fireworks CS4. Abrir um arquivo existente Para abrir um arquivo existente, acesse o menu File e clique em Open. Para realizar esta operao, o atalho Ctrl + O tambm pode ser utilizado. O Fireworks exibir uma janela de dilogo para que voc localize o arquivo no seu computador. Outra forma de abrir um arquivo j existente clicar na opo Open Recent, tambm no menu File.
21
Abrindo um arquivo existente
Criar um arquivo novo Para abrir um novo documento, acesse o menu File e clique em New, ou utilize o atalho Ctrl + N. Ao fazer isso, o Fireworks exibe uma janela de configurao deste novo arquivo.
Janela de configurao de um novo documento
O Fireworks pede ao usurio que configure o formato deste novo arquivo. A rea que este arquivo ocupar chamada pelo Fireworks de Canvas. Determine a largura (Width) e a altura (Height) do seu arquivo. Alm disso, possvel determinar qual a melhor unidade de medida a ser utilizada. Isso vai depender de cada webdesigner. O Fireworks oferece Pixels, Polegadas e Centmetros. Neste exemplo, o arquivo est configurado com 211 pixels de largura por 26 pixels de altura.
22
Em conjunto com a formatao do tamanho, o usurio deve especificar a resoluo do documento. Em geral, a resoluo mais adequada para web varia entre 72Pixels/Inch e 96Pixels/Inch. O Fireworks ainda oferece a opo de escolha da cor do Canvas. Pode ser Branco, Transparente ou outra cor determinada pelo usurio. Ampliar e reduzir a visualizao do documento Para ampliar ou reduzir a visualizao de um arquivo na tela, o Fireworks dispe de ferramentas e opes especficas para zoom. A Ferramenta Zoom, presente na caixa de ferramentas no grupo View uma delas. O Zoom que o Fireworks abrange vai de 6% a 6400%, sendo que o valor de 100% representa o tamanho real da imagem. O valor de zoom aplicado ao documento pode ser observado por meio da aba posicionada no canto superior esquerdo da tela, o mesmo que exibe o nome do arquivo. Ou, pela barra posicionada abaixo do documento. Ao clicar sobre este nmero, uma lista de padres de visualizao exibida.
Controle de zoom no documento
Alm desta opo, o zoom pode ser regulado por meio da ferramenta Zoom da caixa de ferramentas. Ao clicar sobre a imagem, o documento ampliado. Para reduzir o zoom, pressione Alt enquanto clica com a ferramenta sobre o documento. Ou, utilize o os atalhos Ctrl (reduzir) e Ctrl + (ampliar). O menu Edit tambm oferece opes de configurao de zoom: Zoom In, Zoom Out, Magnification, Fit Selection e Fit All.
23
Utilizao do menu View para controlar a visualizao
Atalhos para controlar o zoom no Fireworks - Duplo clique sobre a ferramenta zoom estabelece o zoom 100%, bem como o atalho Ctrl + 1. - Ctrl + 0 ajusta a visualizao do documento ao tamanho da tela.
2.4 Editando Documentos

Aps criar um novo arquivo, ou enquanto estiver trabalhando em um documento aberto, algumas configuraes se fazem necessrias. O Fireworks oferece ao usurio ferramentas como rguas, grids e outras marcaes que prestaro auxlio ao webdesigner. Alm disso, quando o documento estiver em branco, pode ser necessrio importar grficos bitmap ou vetoriais para dar continuidade ao trabalho. Em outros casos, o usurio pode optar por criar seu contedo diretamente no Fireworks. Esta lio tem por objetivo ensinar ao aluno os principais conceitos que o Fireworks trabalha com relao a bitmaps. Rguas, guias e grids Rguas, guias e grids so elementos da interface com o objetivo de posicionar e alinhar objetos com preciso no documento.
24
Ferramentas auxiliares para posicionar e alinhar objetos no documento
Rguas As rguas esto distribudas nas bordas da tela no sentido horizontal e vertical. Para acess-las, clique em View > Rulers. Guias As guias so linhas de referncia e funcionam em conjunto com as rguas. Elas servem de auxlio para alinhar os objetos no documento. Para utilizar as guias, clique sobre as rguas e arraste o cursor at o documento. Durante o projeto, possvel ocultar as guias para melhor visualizao do layout. Para isso, clique em View > Guides > Hide Guides. Grids Os grids so linhas verticais e horizontais distribudas no palco e tambm servem de auxlio para o posicionamento de objetos no documento. Podemos configurar os grids para trocar de cor, serem exibidos ou ocultados, aderirem a objetos e serem redistribudos. Dica para trabalhar com as guias do Fireworks - Quando for necessrio medir a distncia entre duas guias, posicione o cursor entre elas e precione a tecla Shift do teclado. O Fireworks calcula a medida conforme a imagem a seguir:
25
Verificao da distncia entre duas guias
26
Unidade 3 Trabalhando com Vetores

Ferramentas vetoriais Redimensionamento e transformao de objetos Usando layers Contorno e preenchimento Live Filters e estilos Combinando paths Mscaras Trabalhando com transparncia e mesclagem Laboratrio
27
Unidade 3 Trabalhando com Vetores

3.1 Ferramentas vetoriais
Esta lio destina-se a apresentar as ferramentas que o Fireworks CS4 oferece para trabalhos com elementos vetoriais. Um vetor um grfico cuja forma definida por uma srie de pontos conectados entre si por segmentos de curva ou por linhas retas. O trabalho com vetores possibilita a criao de formas mo livre ou formas geomtricas, como linhas, retngulos, crculos e polgonos. As principais ferramentas disponveis no Fireworks CS4 para criao de vetores so: Line Shapes Pen Text Freeform Knife
Estas e outras ferramentas esto disponveis no grupo de ferramentas chamado Vector. Assim como as ferramentas do grupo Bitmap, elas so configuradas por meio do painel Properties. A maioria de seus atributos ser apresentada nesta unidade.
Grupo de ferramentas para criao vetorial
Ferramenta Line A ferramenta Line permite desenhar rapidamente uma linha reta. Esta linha pode ser horizontal, vertical ou em ngulos variados. Para desenhar uma linha que varia de 0, 45 ou 90, pressione Shift do teclado enquanto arrasta o mouse na direo que a linha deve seguir. Por meio do painel Properties possvel configurar a estrutura da linha, a espessura, opacidade e bordas. Porm, no existem opes de preenchimento.
28
Diferentes estilos de linhas configuradas no Fireworks CS4
Dica para trabalhar com a ferramenta Line - Para adicionar setas a uma linha, selecione o objeto, abra o painel Commands, Criative, Add Arrowheads. Isso permite configurar em qual ponta a seta deve ser aplicada, bem como formataes de contorno e preenchimento.
Comando para insero de setas e sua configurao pela janela Add Arrowheads
Ferramentas Rectangle e Ellipse As ferramentas Rectangle e Ellipse desenham formas retangulares e elpticas respectivamente. Seu funcionamento simples, selecione-as na caixa de ferramentas, configure-as no painel Properties, clique e arraste o cursor sobre o documento.
29
Dicas para trabalhar com as ferramentas Rectangle e Ellipse - Pressione Shift para desenhar quadrados e crculos perfeitos. - Pressionar Alt e Shift simultaneamente cria quadrados e crculos que crescem a partir do centro . Ferramenta Pen A ferramenta Pen ideal para desenhar formas livres, pois permite controle completo sobre os pontos que so criados. A Pen permite criar trs tipos de pontos: Angulares: so pontos que unem dois paths retos. Curvos: so pontos que unem dois paths em linha curva. Unificadores: so pontos que unem uma curva a uma linha reta ou duas curvas para formar um objeto.
Ponto angular, curvo e unificador, respectivamente
Ao comear um desenho com a ferramenta Pen, o cursor exibe um pequeno x prximo a ele, indicando que a linha est no incio. Clique sobre o documento para comear o path, mova o cursor sobre diferentes locais e clique para criar um ponto angular. Continue adicionando pontos at a forma ser fechada. Para indicar que o desenho est no final, o cursor exibe um crculo ao ser aproximado no ponto inicial. Ferramenta Text Com a ferramenta Text possvel inserir, formatar e editar textos em grficos. O Fireworks exibe blocos de textos em retngulos com uma demarcao ao seu redor, esses blocos de texto so criados por padro quando voc clica na rea de trabalho com a ferramenta Texto e comea a digitar.
30
Bloco de texto no Fireworks CS4
Dicas para trabalhar com a ferramenta Text - Para inserir um bloco de texto com tamanho ajustvel, d um clique sobre o documento com a ferramenta Text. Um bloco pequeno surgir na tela e aumentar de tamanho conforme o contedo for inserido. - Para inserir um bloco de texto com largura fixa, selecione a ferramenta Text, clique e arraste o cursor sobre o documento. Solte o cursor quando o bloco estiver com a largura desejada. Atravs do painel Properties possvel formatar a fonte.
Painel Properties com a ferramenta Text ativa
A tabela a seguir indica as possveis configuraes do painel properties para a ferramenta Text. Opo Object Name W H X H Font Family Font Style Valores Descrio Insere nome para o bloco de texto Largura do bloco de texto Altura do bloco de texto Posicionamento do bloco de texto no eixo X Posicionamento do bloco de texto no eixo Y Famlia de fontes do texto Determina a estrutura da fonte. Os valores variam conforme a famlia de fonte escolhida.
31
Size Color Kerning
Tamanho da fonte Determina cor da fonte Aumenta ou diminui o espaamento entre determinadas partes das letras. O valor auto Auto Kern Aplica o espaamento original da fonte Especifica a distncia entre as linhas de um pargrafo, ou seja, entrelinhas. Determina qual unidade de medida ser usada para calcular o leading % px Leading calculado em porcentagem Leading calculado em pixels Texto em bold Texto em itlico Texto sublinhado Configura o sentido do texto Horizontal left toright Texto na horizontal, amplamente utilizado
Leading Leading units
Faux bold Faux italic Underline Set text orientation
Vertical right toleft Texto com palavras na vertical e refletido Left Alignment Center Alignment Right Alignment Justified Alignment Paragraph indent Space preceding paragraph Horizontal scale After space paragraph Stroke Anti-aliasing level Bloco de texto alinhado a esquerda Bloco de texto alinhado a ao centro Bloco de texto alinhado a direita Bloco de texto justificado Indentao em todo o bloco de texto. o espao que antecede a entrada da primeira linha do bloco de texto. Aumenta a largura da fonte Especifica um espao para a ltima linha do pargrafo Aplica contorno ao texto Configura como as bordas do texto sero exibidas para garantir a melhor visualizao.
32
No anti-alias Crisp anti-alias Strong anti-alias Smooth anti-alias Custom anti-alias Opacity Blend mode Add live filters Aplica transparncia ao texto Modos de mesclagem do texto com os objetos do fundo Aplica filtros ao texto. Por exemplo, sombras, relevo, desfoque etc.
Aplicar texto a uma forma vetorial possvel fazer com que um bloco de texto siga o contorno de uma forma vetorial. Ao realizar esta operao, ambos continuam editveis. O path perde as configuraes de contorno, preenchimento, filtros e demais atributos. Ao separar o texto do contorno, o vetor volta a assumir a formatao. H duas formas de aplicar o texto uma forma: inseri-lo em uma forma ou fazer com que ele siga um contorno. Para fazer com que o texto entre na forma, selecione o texto e a forma, abra o menu Text e selecione Attach in Path. Para fazer com que o texto siga o contorno, tambm selecione o texto e o contorno, abra o painel Text e selecione Atach to path.
Texto em contorno e texto dentro de uma forma, respectivamente
33
Ferramentas do grupo Free-form Em conjunto com as demais ferramentas de criao vetoriais, as ferramentas do grupo Free-form possibilitam a transformao de vetores em qualquer forma desejada. Compem o grupo Free-form: Freeform Reshape rea A ferramenta Freeform trabalha de modo muito intuitivo. Aps configur-la por meio do painel Properties, basta clicar e arrastar o cursor sobre uma forma vetorial. As mudanas no formato so realizadas por meio de pontos que a Freeform adiciona ao objeto.
Em destaque, segmento do path que est sendo modificado
A ferramenta Reshape area limita-se a modelar as partes do path selecionado que esto dentro da abrangncia do cursor. A Reshape area tem seu cursor no formato de dois crculos. O crculo interno o limite de mxima aplicao do efeito. A rea entre os dois crculos modela o path com menos fora em comparao com o crculo interno.
Cursor da ferramenta Reshape area
34
3.2 Redimensionamento e transformao de objetos

O Fireworks dispe de ferramentas para transformao de um objeto ou grupos de objetos, tais como dimensionamento, inclinao e distoro. Estas ferramentas so: Scale, Skew, Distort e 9-slice scaling, todas no grupo Select no painel de ferramentas.
Ferramentas para transformao de objetos
Ao selecionar qualquer objeto com as ferramentas de transformao, o Fireworks exibe alas de transformao ao redor do objeto selecionado.
Objeto vetorial selecionado com a ferramenta Scale
Rotacionar objetos As ferramentas Scale, Skew e Distort podem ser utilizadas para rotacionar um objeto. Para isso, basta manter o objeto selecionado, aproximar uma destas trs ferramentas s alas de transformao, clicar e arrastar no sentido desejado. O cursor apresenta-se como na imagem abaixo, sugerindo movimento de rotao.
Rotao de um objeto
Dica para rotacionar objetos - Manter a tecla Shift pressionada rotaciona o objeto a cada 15
35
Modificar o eixo de rotao Por padro, o eixo de rotao fica no centro do objeto. As mesmas ferramentas utilizadas para rotacionar podem fazer esta tarefa. Para isso, no lugar de aproximar o cursor das bordas do objeto, necessrio clicar sobre o crculo ao centro e mov-lo para o eixo de rotao desejado. Na imagem a seguir, o crculo com bordas brancas, representando o eixo de rotao, foi movido para o canto inferior da imagem.
Eixo de rotao alterado
Redimensionar objetos A ferramenta Scale pode ser utilizada para aumentar ou diminuir um objeto. Ao aproximar-se das alas de transformao, o cursor deve ser clicado e arrastado no sentido desejado.
Cursor para redimensionamento de objetos
Inclinar objetos Um objeto pode ser inclinado ao longo do eixo horizontal ou vertical. Para este tipo de transformao, a ferramenta Skew a melhor alternativa. Para distorcer o objeto necessrio clicar sobre os pontos das alas de transformao e arrastar o cursor.
Inclinao de objetos com a ferramenta Skew
Distoro de objetos Por meio da ferramenta Distort possvel aplicar efeito de perspectiva a objetos. O objeto deve estar selecionado e a ferramenta Distort ativa. Ao clicar sobre um dos cantos da ala e mover o cursor, o objeto vai tomando a forma desejada.
36
Objeto sendo distorcido com a ferramenta Distort
3.3 Usando layers

O Fireworks permite ao seu usurio inserir diversos grficos bitmap e vetoriais em um mesmo documento, o que aumenta a complexidade de manipulao dos documentos. O painel Layers serve para facilitar este processo. Esta lio tem o objetivo de explicar o funcionamento deste painel. Um documento pode ser formado por diferentes layers e cada layer pode conter muitos objetos. Layers podem ser traduzidas como camadas. Elas so, literalmente, camadas que organizam os objetos empilhando-os uns sobre os outros.
Empilhamento das layers
Na imagem a seguir, o painel Layers est indicando a Layer 1 como ativa, ou seja, a que est sendo trabalhada.
37
Painel Layers: A. Visualizao da layer / B. Camada bloqueada / C. Camada ativa / D. Nova layer / E. Nova sub layer / F. Mscara / G. Nova imagem bitmap / H. Apagar layer
Adicionando e removendo layers Para adicionar uma layer existem quatro opes: 1) Clicar no cone New/Duplicate Layer. o item D descrito na imagem anterior. 2) Utilizar o atalho Shift + L 3) Abrir o menu Edit >Insert > Layer. 4) Clicar nas opes do painel Layers, situado no canto superior direito, e selecionar a opo New Layer, conforme a imagem a seguir.
Criao de nova layer atravs das opes do painel
Reordenando layers A ordem que elas aparecem neste painel a forma como elas sero vistas no documento. possvel reordenar os objetos clicando e arrastando a layer na posio desejada atravs
38
do painel Layers. Ou, acesse o menu Modify, Arrange e escolha entre as opes Bring to Front, Bring Foward, Send Backward ou Send Back. Mesclando objetos em camadas diferentes O Fireworks oferece a opo de mesclar camadas. importante observar que objetos na mesma layer no podem ser mesclados. Ao mesclar camadas, todos os objetos, sejam eles vetores ou bitmaps, sero transformados em um grfico bitmap. Portanto, quando vetores so mesclados, no podem ser editados futuramente. Para mesclar camadas, selecione as camadas desejadas e pressione Ctrl + E. Ou clique com o boto direito sobre os objetos selecionados e selecione a opo Merge Down. Distribuindo objetos em camadas Quando existem muitos objetos em uma camada, possvel separ-los fazendo sua distribuio entre diferentes layers. Para isso, selecione os objetos que deseja separar, abra o menu Commands, Document e selecione a opo Distribute to layers.
Comando para distribuio de objetos em camadas
3.4 Contorno e preenchimento

O Fireworks possui diversas ferramentas para edio e configurao de contorno e preenchimentos. Esta lio visa apresentar opes de criao interessantes de contorno e outros efeitos de preenchimento.
39
Aplicando estilos a um contorno No Fireworks, um contorno a linha ao lado de fora de um objeto. Por isso, ao fazer alteraes no contorno, o preenchimento no alterado. possvel configurar a cor, textura, forma e espessura do contorno. Alm de aplicar efeitos que simulam traado de caligrafia, lpis, leo, entre outros. O painel Properties possui uma configurao de estilos de contorno. Os estilos esto divididos em categorias: Basic, Air Brush, Caligraphy, Charcoal, Crayon, Dashed, Felt Tip, Oil, Pencil, Watercolor, Random e Unnatural. Dentro de cada categoria existem vrias opes de estilos. Para aplicar um estilo, selecione o objeto que possui o contorno a ser modificado, abra o menu de categorias de estilos e selecione uma das opes.
Categorias de estilo de contorno, em destaque, opes de formatao
Stroke Options Os contornos podem ser alterados por meio da opo Stroke Options no painel Properties. A imagem a seguir demonstra o menu pop-up para configurao do contorno. Por meio deste menu, possvel configurar o estilo j aplicado ao contorno.
40
Menu pop-up Stroke Options
Ao clicar no boto Advanced, uma caixa de dilogo se abrir com configuraes avanadas do contorno. Por aqui possvel configurar a intensidade de tinta e da textura, o espaamento do efeito, a variao do fluxo e visualizar o efeito sendo criado em tempo real.
Caixa de dilogo para configurao avanada do contorno no Fireworks CS4
41
Criando e aplicando preenchimentos O Fireworks trata o preenchimento como uma rea dentro de um vetor aberto ou fechado. O preenchimento pode ser aplicado dentro de retngulos, polgonos, elipses e outras formas, at mesmo em imagens bitmap. Pode se apresentar como uma cor slida, um gradiente entre duas ou mais cores ou, ainda, no existir. Ao desenhar um objeto no documento, o ltimo contorno e o preenchimento utilizado aplicado ao novo objeto. A configurao do preenchimento pode ser feita de vrias maneiras: atravs do painel Fill Color situado na caixa de ferramentas, pelos painis Color Mixer, Swatches e, desde a verso CS4, por meio do painel Kuler. Para aplicar cor por meio da caixa de ferramentas, selecione o objeto e siga um destes passos: Clique sobre a caixa de cor e, com o cursor, selecione uma cor, conforme a imagem a seguir.
Formatao de cores pela caixa de ferramentas
1) Na mesma caixa de cor, especifique o cdigo hexadecimal correspondente a cor desejada.
Valor hexadecimal para preto
2)
Utilize o conta-gotas que aparece no lugar do cursor e selecione qualquer cor visvel na tela. No exemplo a seguir, o conta-gotas est recolhendo uma amostra de cor na barra de rolagem.
42
Recolhendo uma amostra de cor referente barra de rolagem
Trabalhando com categorias de preenchimento Para ter acesso a diversas opes de preenchimento, acesse o menu do painel Properties. Por meio deste menu possvel aplicar preenchimentos slidos, cores apropriadas para a web, gradientes, texturas e configurao avanada de preenchimento.
Categorias de preenchimento
Painis Swatches e Color Mixer Este painel configura padres de cores para serem aplicadas nas imagens trabalhadas no Fireworks. Tambm possvel a criao de paletas de cores prprias. O Swatches funciona em conjunto com o Color Mixer.
43
Painel Swatches e Color Mixer
Ao criar grficos, geralmente as cores so escolhidas de uma paleta de cores. Escolher cores do painel Swatches, evita que as cores vistas na pgina sofram alguma distoro conforme as diferentes plataformas computacionais. Por meio as configuraes do painel Swatches possvel adicionar, apagar, recolocar e combinar cores e grupos de cores.
Opes de configurao do painel Swatches
O painel Color Mixer usado para criar cores que sero utilizadas no documento. Existem cinco modelos de cores: RGB, Hexadecimal, CMY, HSB e Grayscale.
44
Painel Color Mixer e opes de configurao
Compreenda os sistemas de cores disponveis no painel Color Mixer: Opo RGB Hexadecimal CMY HSB Grascale Descrio Combina valores de vermelho (Red), verde (Green) e azul (Blue) para fazer a cor Combina valores de core RGB nos quais cada cor representada por um cdigo hexadecimal Combina valores de Ciano (Cian), Magenta (Magenta) e Amarelo (Yello) Combina valores de matiz (Hue), saturao (Saturation) e brilho (Brightness) Configura uma porcentagem de abrangncia de preto que varia de 0 (branco) a 100 (preto)
3.5 Live Filters e estilos

O Fireworks permite melhorar facilmente o aspecto dos grficos por meio de efeitos e estilos. Esta lio destina-se a explicar o funcionamento destes elementos. Live Filters Live Filters so caractersticas tais como brilhos, sombras e chanfrados que podem ser adicionados a bitmaps, vetores e textos. Ao criar um boto com efeitos de volume, este efeito ser aplicado automaticamente ao objeto. Sempre que for feita uma modificao, as alteraes sero aplicadas imediatamente. Um objeto pode receber mltiplos efeitos. Os Live Filters podem ser adicionados por meio do painel Properties:
45
Em destaque, aplicao de Live Filters
Selecione o objeto que recebr o efeito e clique sobre o sinal de mais no painel Properties. O Firewoks exibe as categorias disponveis no menu Live Filters: Adjust Color, Bevel and Emboss, Blur, Noise, Other, Shadow and Glow, Sharpen e Photoshop Live Filters. Ao passar o cursor sobre cada categoria, o Fireworks exibe opes especficas, de acordo com o efeito. Clique sobre o efeito desejado. Este processo pode ser repetido quantas vezes forem necessrias para a aplicao de outros filtros. Adicionando e removendo os Live Filters Quando um objeto recebe um Live Filter, possvel edit-lo por meio do painel Properties. Selecione o objeto que ser editado. Todos os efeitos esto listados em um box prximo ao boto para aplicao de novos filtros. Clique duas vezes sobre o filtro para que o Fireworks abra a janela para edio do Live Filter. Para retirar o filtro aplicado a um objeto, mantenha o objeto selecionado. Ainda no painel Properties, clique sobre o efeito que ser apagado e, em seguida, sobre o cone de menos (-).
Painel Properties para edio de Live Filters
Live Filters personalizados possvel criar e salvar um efeito personalizado para que o mesmo seja reaplicado. Este processo realizado em conjunto com as opes de estilos, localizadas no painel Properties, acima das configuraes de Live Filters. Para criar um estilo personalizado, selecione o objeto que possui as aplicaes de filtros que devem ser salvas. Em seguida, clique na opo New Style.
46
Painel Properties para configurao de um novo estilo
Digite o nome do estilo e selecione Effect, enquanto as demais opes ficam desmarcadas.
Janela para salvar estilo
Para aplicar este estilo para outros elementos, selecione os objetos e clique no cone de estilos personalizados.
3.6 Combinando paths

As ferramentas apresentadas nos captulos anteriores so utilizadas para criar formas vetoriais bsicas, tais como retngulos, quadrados, crculos e polgonos. Alm destas opes, possvel utilizar comandos para combinao destas formas para obter formas complexas. Estes comandos esto disponveis no menu Modify e sero descritas a seguir.
47
Comando para combinao de paths
Join O comando Join pode ser utilizado quando for necessrio criar um path contnuo a partir de dois objetos vetoriais abertos ou um objeto composto. Na imagem abaixo existem dois objetos abertos e separados. Seus dois pontos finais esto selecionados. Ao lado, o resultado final do comando Join os transformou em um path unificado.
Paths abertos, antes e depois do commando Join
A unio de objetos vetoriais fechados e sobrepostos cria buracos nas partes que os paths encontram-se.
48
Paths fechados e sobrespotos, antes e depois do comando Join
Split O comando Split separa os paths que formam um objeto vetorial. No exemplo a seguir uma fonte foi transformada em vetor e desagrupada. Observe que ela composta por dois paths. Um deles a silhueta da letra A e outro o espao vazado, em branco. Ambos foram selecionados e o comando Split aplicado. Desta forma, possvel trabalhar individualmente nestes paths.
Paths com o comando Slit aplicado
Union O commando Union capaz de combiner dois ou mais objetos sobrepondo-os uns aos outros.
Paths antes e depois da aplicao do commando Union
49
Intersect O comando Intersect cria um objeto a partir de uma rea na qual dois ou mais objetos se sobrepem. A imagem a seguir demonstra dois retngulos inteiros e sobrepostos. O retngulo ao lado resultado da rea na qual ambos se sobrepunham.
Paths antes e depois da aplicao do comando Intersect
Punch O comando Puch utiliza um objeto para cortar ou perfurar aquele path que estiver abaixo. Na imagem a seguir, o crculo est sobreposto ao retngulo. Ao comando Punch, o path superior que realiza o corte.
Paths antes e depois da aplicao do comando Punch
Crop O commando Crop utiliza o objeto que estiver acima dos demais para excluir as reas que estiverem fora do seu alcance. Ou seja, o objeto superior daqueles selecionados apara aqueles fora do seu preenchimento. Na imagem a seguir, o crculo o objeto acima. Ele est sem preenchimento para que seja possvel enchergar os quadrados situados abaixo dele. Aps o comando, todos os quadrados que estavam foram da sua rea de abrangncia foram cortados.
50
Paths antes e depois da aplicao do comando Crop
3.7 Mscaras
Mscara um mtodo que utiliza um objeto que atua como filtro na visibilidade de outro objeto. Uma mscara pode exibir ou esconder um contedo. Vetores e bitmaps podem ser utilizados como mscaras. A imagem a seguir ilustra o que a mscara permite fazer. No mesmo documento existe uma imagem bitmap retangular e um path com o formato elptico. Ao utilizar a mscara, possvel preservar a imagem inteira, porm, apenas o que est em primeiro plano pemanece visvel.
Imagem bitmap e vetores para aplicao de mscara
Existem trs formas de aplicar mscara no Fireworks: 1) Paste as Mask Selecione o objeto que deve ser mascarado e recorte-o. Para isso, acesse o menu Edit e selecione a opo Cut. Neste caso, o bitmap com o fundo amarelo. Em seguida selecione o objeto que servir como mscara, abra o menu Edit e selecione a opo Paste as Mask.
51
2) Paste Inside Selecione o objeto que deve ser mascarado e recorte-o. Para isso, acesse o menu Edit e selecione a opo Cut. Tambm neste exemplo, o bitmap com o fundo amarelo. Em seguida selecione o objeto que servir como mscara, abra o menu Edit e selecione a opo Paste Inside. 3) cone Add Mask no painel Layers Com o painel Layers aberto, selecione a camada que possui a imagem. Em seguida, clique no cone Add Mask. Ao fazer isso, um retngulo surgir vinculado ao cone da imagem. Ao clicar sobre este novo retngulo na camada e desenhar a mscara, o bitmap ser mascarado automaticamente. Utilizando estes trs mtodos, o resultado final ser este:
Bitmap mascarado
3.8 Trabalhando com transparncia e mesclagem

O Fireworks permite que a criao de efeitos criativos por meio da utilizao de transparncia e modos de mesclagem entre camadas. A transparncia retira a opacidade e permite olhar o objeto que est abaixo. Os modos de mesclagem so aplicados em todo o objeto que estiver selecionado e fazem alteraes em brilho, saturao e constraste. A configurao destes efeitos pode se dar por meio do painel Properties ou Layers.
Opes de transparncia e mesclagem no painel Properties
52
Para aplicar transparncia e mesclagem a uma imagem, selecione a camada e selecione uma das opes disponveis no painel Properties. So alguns dos modos de mesclagem disponveis: Multiply, Lighten, Overlay, Diference, Hue, etc. A imagem a seguir demonstra a imagem original e, posteriormente, com efeito de camada. O painel Layers ilustra que sobre a foto h uma camada com um retngulo vermelho e recebendo o efeito Overlay com 100% de opacidade.
Imagem original e recebendo efeito de mesclagem
3.9 Laboratrio
Exerccio 1: Criando um logotipo.
Voc foi contratado para criar a marca e o layout da loja virtual de artigos esportivos AlfaSports. A marca um elemento visual de grande importncia, pois representa o cliente na web. Ela carrega um conceito e caractersticas pertinentes a sua rea de atuao. Por causar maior impacto sobre quem a enxerga, a marca costuma ser formada por um logotipo com o nome da empresa e por um smbolo que refora uma idia. Em funo disso, voc deve criar uma marca composta por smbolo e logotipo para a AlfaSports. A marca deve representar o dinamismo presente na prtica de exerccios fsicos e a modernidade dos equipamentos vendidos na loja. Alm de proporcionar fcil leitura e transmitir seriedade AlfaSports. O conceito que deve ser frisado o Alfa, presente no nome da empresa. O Alfa a primeira letra do alfabeto grego .
53
Durante este exerccio sero revistos os seguintes tpicos estudados nesta unidade: Ferramentas vetoriais Live Filters Textos Preenchimento As principais tarefas deste exerccio so: Compor o smbolo Finalizar o logotipo criando o lettering Ao finalizar o exerccio voc ter este resultado:
Resultado final do exerccio 1
Tarefa 1 Compor o Smbolo

1- Crie um novo arquivo acessando no menu principal a opo File > New ou (Ctrl + N). Configure a dimenso de largura (Width) para 600 e a de altura (Height) para 500 pixels 2- No menu principal selecione a opo View > Tooltips ou (Ctrl + [). Isto far com que voc visualize o posicionamento e as medidas dos objetos enquanto os desenha 3- Selecione a ferramenta Elipse Tool (U) e desenhe no centro do documento um crculo perfeito com as medidas de largura (Width) e altura (Height) de 110 pixels 4- Configure a cor de preenchimento do circulo para #FF5015 5- Abra o painel Info atravs do menu principal na opo Window > Info ou (Alt+ Shift + F12) 6- Selecione a ferramenta Skew (Q) no painel de ferramentas 7- Selecione o crculo com esta ferramenta, depois arraste a ala de transformao superior central para a direita observando o painel Info at que o valor de distoro X chegue ao valor 10 8- Selecione a ferramenta Pointer Tool (V, 0) novamente 9- Com o crculo selecionado, no painel de propriedades clique no boto adicionar filtro (+) > Shadow and Glow > Drop Shadow. Marque na opo Distance o valor de 7, na opo Opacity o valor de 30% e na opo Softness o valor de 7 10- Atravs do menu principal na opo File > Import ou (Ctrl + R), selecione o arquivo smbolo_alfa.ai que se encontra na pasta tarefa desta unidade e aplique o no documento
54
11- Troque a cor do smbolo para branco 12- Centralize o arquivo importado sobre o crculo com recursos do painel Align
Tarefa 2 Criando o Lettering

1- Selecione a ferramenta Text Tool (T) 2- Clique na rea de trabalho e digite em letras maisculas a palavra ALFA 3- No painel de propriedades altere a fonte para Eras Bold ITC, cor #666666, tamanho 50, Italic, e no Anti-aliasing level marque a opo Smooth-Anti-Alias. Tambm marque a opo Auto Kern 4- Posicione este texto do lado esquerdo do smbolo e utilize os recursos do painel Align para centralizar verticalmente os objetos 5- Clique novamente com a ferramenta de texto em outro local da rea de trabalho e digite tambm em letras maisculas a palavra SPORTS 6- No painel de propriedades altere tambm a fonte para Eras Bold ITC, cor #999999, tamanho 50, Italic, no Anti-aliasing level marque a opo Smooth-Anti-Alias e selecione a opo Auto Kern 7- Posicione este texto do lado direito do smbolo e utilize os recursos do painel Align para centralizar verticalmente os objetos 8- Converta os textos em vetores selecionando no menu principal a opo Text > Convert to Paths ou (Ctrl + Shift + P) 9- Selecione todos os elementos e agrupe-os atravs do menu principal na opo Modify > Group ou (Ctrl + G) 10- Salve o arquivo na pasta tarefa desta unidade com o nome de logo_alfasports.png
Exerccio 2: Iniciando a montagem do layout

Com o logotipo em mos, podemos dar incio montagem do layout. o momento de definirmos questes como tamanho do site, disposio dos menus de navegao principal e sua relao com o logotipo. Durante este exerccio sero revistos os seguintes tpicos estudados nesta unidade: Configurao de documentos Emprego de guias Importao de arquivos Shapes Combinao de Paths
55
As principais tarefas deste exerccio so: Estruturar o arquivo Iniciar a montagem do layout Ao finalizar o exerccio voc ter este resultado:
Resultado do exerccio 2
Tarefa 1 Estruturar o arquivo

1- Crie um novo arquivo configurando a largura (Width) para 1280 pixels e altura (Height) para 1400 pixels 2- No menu principal selecione a opo File > Import ou (Ctrl + R), selecione o arquivo navegador.png que se encontra na pasta tarefa desta unidade e aplique-o no documento na posio x = 0 e y = 0 3- Renomeie esta camada para Navegador e bloqueie sua edio clicando no cone do cadeado no painel de layers 4- Crie um novo layer, posicione-o abaixo do layer Navegador e o renomeie para Contedo. Este ser o seu layer de trabalho
56
5- Torne as rguas visveis selecionando no menu principal a opo View > Rulers ou (Ctrl + Alt + R) 6- Arraste da rgua superior uma guia horizontal e a coloque na posio 464 pixels 7- Arraste tambm da rgua lateral uma guia vertical colocando-a na posio 772 pixels. Estas guias delimitam a rea de trabalho para uma resoluo mnima de 800 x 600 pixels
Tarefa 2 Iniciando a montagem do layout

1- Importe o arquivo do logotipo Alfa Sports para este documento. 2- Redimensione o logotipo para que fique com a largura de 160 pixels e a altura de 38 pixels 3- Posicione-o nas coordenadas x = 23 e y = 155 4- Selecione a ferramenta Rouded Rectangle no painel Tools, crie um retngulo com 40 pixels de largura, 40 pixels de altura, cor #151515. Este retngulo ser a base do menu horizontal 5- No painel de propriedades selecione a aba Auto Shape Properties e altere as opes de bordas arredondadas. Desbloqueie as bordas clicando no cone do cadeado e configure para que somente a borda do canto superior esquerdo fique com o valor = 6, as demais devem ficar com o valor = 0 6- Posicione-o nas coordenadas x = 192 e y = 155 7- Desagrupe o retngulo selecionando no menu principal a opo Modify > Ungroup ou (Ctrl + Shift + G) 8- Duplique este objeto selecionando no menu principal a opo Edit > Clone ou (Ctrl + Shift + D) 9- Use as setas do teclado para mover o retngulo duplicado 1 pixel para baixo e 1 pixel para a direita posicionando-o nas coordenadas x = 193 e y = 156 10- Selecione o painel Path, caso este no esteja aberto acesse no menu principal a opo Window > Others > Path 11- No painel Path em Select Point, clique no boto Select Bottom Points 12- Com os pontos da parte de baixo do objeto selecionados utilize a seta para cima do teclado para diminuir a altura do retngulo em 2 pixels, ficando este com 38 pixels de altura 13- Agora selecione o painel Styles, caso no esteja aberto acesse no menu principal a opo Window > Styles ou (Ctrl + F11) 14- Clique no cone do canto superior direito deste painel e no menu selecione a opo import Style Library. Na janela abra o arquivo menu.stl que se encontra na pasta tarefa desta unidade 15- O estilo pr definido foi carregado, agora selecione o estilo chamado menu para o retngulo criado, isto dar o aspecto de brilho e volume para a barra do menu horizontal 16- Feito isso, faa agora uma cpia destes dois retngulos que voc criou selecionando-os e arrastando-os com a tecla Alt do teclado pressionada para uma rea livre da tela 17- inverta a posio deles acessando no menu principal a opo Modify > Transform > Flip Horizontal
57
18 - Agora posicione estes dois objetos do lado esquerdo do logotipo na coordenada y = 155. Faa com que a extremidade direita fique a 10 pixels da borda esquerda da pgina 19- Selecione agora o primeiro retngulo que voc criou, dos dois retngulos direita do logotipo ele o mais abaixo 20- No painel Path em Select Point, clique no boto Select Right Points 21- Com os pontos da direita do objeto selecionados utilize a seta para a direita do teclado para aumentar a largura do retngulo at que este fique por baixo da barra de rolagem do layer Navegador 22- Faa o mesmo com o retngulo acima deste 23- Agora voc ir criar os botes deste menu. Selecione a ferramenta de texto, configure a fonte para Tahoma, cor #FFFFFF, tamanho 11, Bold, e no Anti-aliasing level marque a opo No Anti-Alias 24- Digite sobre o canto esquerdo do menu a palavra Quem Somos e utilize o painel de propriedades para posicionar o texto nas coordenadas x = 211 e y = 167 25- Utilizando a ferramenta Line Tool (N) desenhe uma linha vertical preta com grossura de 1 pixel sobre o menu, configurando-a com 20% de opacidade, 37 pixels de altura e posicionando-a 20 pixels direita do texto 26- Copie a linha anterior clicando sobre ela e arrastando-a 1 pixel para a direita pressionando a tecla Alt do teclado, aps isso altere a cor da nova linha para branco. Isso dar um leve aspecto de profundidade na barra do menu 27- Selecione as duas linhas criadas e agrupe-as atravs do menu principal na opo Modify > Group ou (Ctrl + G). Estas linhas serviro de separao entre um boto e outro do menu 28- Crie mais os seguintes botes: Como Comprar, Dvidas e Poltica. Mantenha sempre 20 pixels de espaamento entre os textos e as linhas de separao 29- Depois de montados os itens do menu crie um retngulo com altura (Height) de 150 pixels e largura (Width) de 100 pixels, utilize o painel de propriedades para posicionar este objeto nas coordenadas x = 772 e y = 195 30- Agora importe para seu painel de styles o arquivo barra.stl que se encontra na pasta tarefa desta unidade 31- Aplique o estilo ao retngulo 32- Desagrupe este objeto 33- No painel Path em Select Point, clique no boto Select Right Points 34- Com os pontos da direita do objeto selecionados utilize a seta para a direita do teclado para aumentar a largura do retngulo at que este fique por baixo da barra de rolagem do layer Navegador 35- Crie outro retngulo com as dimenses de largura de 10 pixels por 150 pixels de altura 36- Aplique a este retngulo o mesmo estilo que foi aplicado ao anterior e posicione-o nas coordenadas x = 2 e y = 195 37- Salve o arquivo na pasta tarefa desta unidade com o nome de montando_layout_01.png
58
Exerccio 3: Montando rea de Busca e o Menu de Produtos

A AlfaSports uma loja que comercializa produtos para a prtica dos mais diversos esportes, o que torna o seu pblico bastante amplo. Para direcionar o cliente aos produtos que lhe interessam, interessante dividir os materiais por categorias de esportes. Isto torna a navegao rpida e objetiva. Para reforar esta idia, um campo de busca pode ser til por auxiliar o cliente a localizar o produto desejado. As tarefas principais deste exerccio so as seguintes: Montar rea de busca por marcas e categorias Montar Menu de Produtos Ao finalizar o exerccio voc ter este resultado:
59
Tarefa 1 Montar rea de Busca 1- Abra o arquivo montando_layout_01.png que voc salvou na pasta tarefa 2- Arraste da rgua lateral duas guias verticais colocando-as, uma na posio 22 pixels e a outra na posio 182 pixels, elas iro ajudar a delimitar a rea onde voc vai montar a rea de busca e depois tambm o menu de produtos 3- Utilizando a ferramenta Line Tool (N) e se necessrio o painel de Propriedades crie uma linha horizontal com 1 pixel de grossura com a cor #E0E1DD. Esta linha deve ter a largura delimitada pelas linhas guias que voc acabou de criar e ser posicionada na coordenada y = 206 4- Selecione agora a ferramenta de texto, configure a fonte para Tahoma, cor #666666, tamanho 11, e no Anti-aliasing level marque a opo No Anti-Alias. 5- Logo abaixo da linha que voc criou digite o texto Busca de Produtos e utilize o painel de propriedades para posicion-lo nas coordenadas x = 31 e y = 213 6- Clique sobre a linha que voc criou acima do texto e arraste para baixo pressionando a tecla Alt. Posicione uma cpia desta linha abaixo do texto na coordenada y = 230 7- Abaixo desta linha desenhe um retngulo com as dimenses de 137 pixels de largura e 18 pixels de altura. Utilize o painel de propriedades para configurar uma borda de 1 pixel e com a cor #7F9DB9. Este ser um dos campos de texto da busca. Posicione-o nas coordenadas x = 45 e y = 240 8- Selecione outra vez a ferramenta de texto, configure a fonte para Tahoma, cor #999999, tamanho 10, e no Anti-aliasing level marque a opo No Anti-Alias. 9- Digite sobre o retngulo que voc desenhou o texto Digite o que voc procura 10- Copie o retngulo que representa o campo de texto e posicione-o abaixo, na coordenada y = 268. este outro vai representar um campo de seleo 11- Importe o arquivo img_select.gif que est na pasta tarefa desta unidade e posicione-o no canto deste retngulo. Esta imagem simula a flechinha que abre o campo de seleo 12- Agora sobre este retngulo digite o texto Todas as Marcas, configurando-o para a fonte Tahoma, tamanho 11, cor #333333 e no Anti-aliasing level marque a opo No Anti-Alias. 13- Selecione os trs ltimos elementos que voc criou (que representam o campo de seleo) e arraste-os para baixo criando uma cpia na coordenada y = 296 14- Altere o texto dessa cpia para Todas as categorias 15- Crie um retngulo abaixo dos campos de seleo a largura de 30 pixels e altura de 17 pixels, posicione ele nas coordenadas x = 45 e y = 319. Este ser o boto de envio 16- Utilizando o painel Styles ou atravs do painel de propriedades adicione a este retngulo o estilo menu 17- Sobre este retngulo digite a palavra ok, configurando o texto para a fonte Tahoma, tamanho 10, cor branca, e no Anti-aliasing level marque a opo No Anti-Alias. 18- Centralize o texto com o retngulo 19- Clique sobre uma das linhas que voc criou acima e arraste para baixo do boto criando uma cpia. Posicione esta linha na coordenada y = 346
60
20- Importe o arquivo lupa.png que est na pasta tarefa desta unidade e posicione-o nas coordenadas x = 22 e y = 240.
Tarefa 2 Montar Menu de Produtos

1- Abaixo da rea de busca que voc criou desenhe um retngulo com as medidas de 160 pixels de largura e 20 pixels de altura e cor #666666 2- Posicione este retngulo nas coordenadas x = 22 e y = 355 3- Sobre este retngulo digite a palavra CATEGORIAS, em maisculas, configurando o texto para a fonte Tahoma, tamanho 11, cor branca, e no Anti-aliasing level marque a opo No AntiAlias. 4- Posicione o texto nas coordenadas x = 27 e y = 358 5- Abaixo do retngulo que voc desenhou crie outro retngulo bem pequeno com as medidas de largura e altura de 5 pixels e com a cor #FF5015, posicione-o nas coordenadas x = 22 e y = 384 6- Ao lado deste retngulo digite o texto Academia, configurando o texto para a fonte Tahoma, tamanho 11, cor #666666, e no Anti-aliasing level marque a opo No Anti-Alias. 7- Posicione este texto nas coordenadas x = 35 e y = 379 8- Arraste para baixo do texto uma cpia das linhas horizontais que voc criou na rea de busca. Posicione esta linha na coordenada y = 397 9- Agora selecione os ltimos 3 elementos que voc criou: o retngulo pequeno, o texto e a linha horizontal. 10- Arraste-os para baixo mantendo a coordenada x e at chegar posio y = 400 11- feito isso acesse o menu principal na opo Edit > Repeat Duplicate ou (Ctrl +Y) 12- Repita o passo 11 (anterior a este) dezoito vezes e depois substitua cada texto pelos seguintes itens do menu de produtos: Acessrios, Agasalhos, Badminton, Baseball, Basquete, Beach Soccer, Bons, Ciclismo, Futebol, Futevolei, Handebol, Mochilas Bolsas, Natao, Plo Aqutico, Relgios, Skate, Tnis e Vlei. 13- Salve o arquivo na pasta tarefa desta unidade com o nome de montando_layout_02.png
61
Unidade 4 Trabalhando com imagens bitmap

Importando imagens bitmap Seleo de objetos bitmap Modificando bitmaps Transformaes no bitmap Laboratrio
62
Unidade 4 Trabalhando com imagens bitmap

4.1 Importando imagens bitmap
Aps criar um novo documento, possvel importar arquivos vetoriais e bitmaps. O Fireworks d suporte aos formatos PSD, TIFF, JPG, GIF, BMP e PICT. Mais detalhes sobre vetores sero comentados na unidade a seguir. Para importar um arquivo bitmap, crie um documento novo. Acesse o menu File, Import, ou utilize o atalho Ctrl + R. O Fireworks abrir uma janela para que o arquivo a ser importado seja localizado. Ao selecionar o arquivo e clicar em Abrir o Fireworks no importar a imagem imediatamente. O cursor assume uma forma diferente, indicando em qual local do documento o arquivo ser inserido.
Cursor para importao de bitmaps
4.2 Seleo de Objetos Bitmap

O Fireworks rene um grupo de ferramentas para seleo de reas de arquivos bitmap. Para trabalhos com seleo, as principais ferramentas so Marquee, Lasso e Magic Wand. Estas ferramentas podem ser utilizadas para selecionar partes especficas de uma imagem para modific-la posteriormente.
63
Ferramentas para seleo de objetos presentes no grupo Bitmap
Ferramenta Marquee A ferramenta Marquee pode fazer selees em formatos retangulares ou ovais. Ambas as opes esto dentro do mesmo grupo. Para fazer uma seleo com ambos os formatos, selecione a ferramenta Marquee. Sobre uma rea da imagem, clique e arraste o cursor definindo a regio selecionada. Uma linha pontilhada indica a rea que foi selecionada.
Seleo com a ferramenta Marquee
Dicas para trabalhar com a ferramenta Marquee: - Ao segurar Alt no teclado, a seleo ocorrer do centro para as extremidades - Ao segurar Shift no teclado, a seleo ser um quadrado ou elipse O painel Properties pode ser utilizado para configurar as opes das ferramentas. Este painel adaptado conforme a ferramenta que estiver selecionada. Para a ferramenta Marquee, o Fireworks oferece as seguintes configuraes:
64
Painel Properties com a ferramenta Marquee ativa
Opo W H X Y Style
Valores
Descrio Largura da seleo Altura da seleo Posicionamento da seleo no eixo X Posicionamento da seleo no eixo Y Controle sobre o tamanho e propores da rea selecionada
Normal Fixed Ratio Fixed Size Edge Hard Anti-alias Feather Live marquee
Cria uma seleo sem restrio de proporo prestabelecida. Determina uma proporo exata para imagem estabelecida pelo usurio. Por exemplo: 1/2 Determina a proporo em pixels estabelecida pelo usurio. Permite alterar as extremidades da seleo Cria selees com bordas rgidas Suaviza as bordas para melhor integrao com o fundo Desfoca as bordas da seleo Habilita ajustes dinmicos seleo
Ferramenta Lasso A ferramenta Lasso seleciona reas com formas livres em uma imagem bitmap. Para utiliz-la, clique e arraste o cursor sobre a rea da imagem que deseja selecionar. Ao fazer isso, uma linha demonstra o formato que a seleo ir adquirir.
65
Seleo com a ferramenta Lasso
Dicas para trabalhar com a ferramenta Lasso: - Ao soltar o cursor enquanto desenha, o Fireworks fecha a seleo Ferramenta Polygon Lasso A ferramenta Polygon Lasso cria selees com bordas pontiagudas e tambm feita mo livre. Porm, ela funciona de maneira diferente da ferramenta Lasso. A Polygon Lasso cria sua seleo a partir de vrios cliques do usurio sobre a imagem bitmap. Para fazer sua seleo a partir desta ferramenta, d um clique sobre a imagem estabelecendo um ponto de partida da seleo. Ao mover o cursor para os lados, uma linha ser exibida, indicando o formato da seleo. D outro clique para formar uma linha da sua seleo. Cada clique representa um ponto do polgono, delimitando a rea da seleo do bitmap.
Seleo com a ferramenta Polygon Marquee
66
Dicas para trabalhar com a ferramenta Polygon Lasso - Duplo clique com o mouse encerrar a seleo - Para interromper a seleo, que em Esc do teclado O painel Properties controla as mesmas configuraes sobre bordas (Edge), tamanho (W e H), posicionamento (X e Y) da seleo e Live marquee.
Painel Properties com a ferramenta Polygon Lasso ativa Ferramenta Magic Wand A ferramenta Magic Wand seleciona uma area de pixels prximos com cores semelhantes. O nvel de similaridade depender no valor de tolerncia aplicado seleo. Um valor baixo para a tolerncia faz com que a Magic Wand selecione um nmero menor de cores. Quanto maior este valor, mais cores so selecionadas. Estes valores variam de 0 255. Ao manter a ferramenta Magic Wand ativa, o painel Properties possui a mesma opo de configurao de bordas (Edges) que as ferramentas anteriores, bem como a opo Live marquee.
Painel Properties com a ferramenta Magic Wand ativa
Desfazendo selees Existem duas opes para desfazer uma seleo: - clicar fora da rea do documento
67
- utilizar o atalho Ctrl + D Adicionando e apagando reas selecionadas Utilize as teclas Shift e Alt sempre que for necessrio adicionar ou apagar preas de uma seleo. Ao clicar em Shift durante uma seleo, um sinal de mais aparece ao lado do cursor, indicando que adicionar pixels seleo. Para apagar pixels de uma seleo, pressione Alt. Observe que um sinal de menos acompanha o cursor. Mover uma seleo Depois de criada, uma seleo pode ser movida. Para isso, clique com a ferramenta de seleo sobre a rea selecionada e mova o cursor sobre a tela. Observe que apenas a seleo acompanha o movimento. Desta forma, possvel reposicionar a seleo sem modificar o bitmap. Cortando e copiando uma seleo Para fazer um corte, pressione Ctrl sobre a seleo. Observe que uma tesoura acompanha o cursor. Clique sobre a rea selecionada e mova o cursor sobre o documento.
Recorte de seleo
Para copiar uma regio que est selecionada para outras partes do documento, matenha a ferramenta de seleo ativa enquanto pressiona Ctrl e Alt. O cursor fica setas duplicadas. Ao clicar sobre a seleo, mover e soltar o cursor, a regio ser duplicada.
68
Seleo duplicada ao longo do documento
Crop Crop um recurso do Fireworks que permite remover as partes da imagem que estiverem dentro da seleo, aparando o bitmap. Existem trs formas de aparar uma imagem: - Para aparar um documento inteiro, utilize a ferramenta Crop, presente no grupo Select - Para aparar um bitmap selecionado, abra o menu Edit e selecione Crop Selected Bitmap. - Para aparar uma seleo feia com as ferramentas Marquee ou Lasso, abra o menu Edit e selecione a opo Crop Document.
4.3 Modificando Bitmaps

O Fireworks disponibiliza uma srie de ferramentas para modificao e retoques de imagens bitmap. Para modificaes de bitmap, existem as ferramentas Brush, Pencil, Eraser, Rubber Stamp, Sharpen, entre outras. A utilizao conjunta destes recursos possibilita no s a interveno criativa sobre imagens prontas como a criao de formas e, at mesmo, tratamentos bsicos de imagens. Alm de apresentar as princiapais ferramentas para edio de bitmaps, este captulo tem por objetivo deixar o aluno familiarizado com comandos para transformao de tamanho, rotao e resoluo de bitmaps.
69
4.3.1 Ferramentas Bitmap
Ferramentas para modificao de bitmaps no Fireworks CS4
Ferramenta Brush A ferramenta Brus permite a pintura direta dos pixels que compem a imagem. Para utiliz-la basta selecion-la, fazer sua configurao, clicar e mover o cursor sobre o documento. A cor determinada pela configurao do painel Properties:
Painel Properties com a ferramenta Brush ativa
A tabela a seguir demonstra as opes de formatao da ferramenta Brush por meio do painel Properties. Opo Stroke Stroke Category Preserve Transparency Edge Texture Blend mode Descrio Cor do contorno Controla o tipo de contorno (Mais informaes esto disponveis nos mdulos seguintes) Limita o desenho em rea que no esto vazias Controle sobre a aplicao de difuso nas bordas Adiciona textura ao contorno Controla a mesclagem do contorno com as demais camadas
70
Ferramenta Pencil Seu funcionamento semelhante ao da ferramenta Brush, porm, limita-se a pintar sempre com 1 pixel de largura. A imagem a seguir, demonstra as opes de configurao da ferramenta Pencil por meio do painel Properties.
Painel Properties com a ferramenta Pencil ativa
A tabela a seguir demonstra as opes de formatao da ferramenta Pencil por meio do painel Properties. Opo Stroke Anti-aliased Auto erase Preserve transparency Blend mode Ferramenta Eraser A ferramenta Eraser apaga os pixels que constituem a imagem bitmap. Suas configuraes so referentes ao tamanho, bordas, formato e transparncia. Descrio Cor do contorno Suaviza as bordas Usa a cor de preenchimento quando clicada sobre a cor de contorno Limita o desenho em rea que no esto vazias Controla a mesclagem do contorno com as demais camadas
Painel Properties com a ferramenta Eraser ativa
Ferramentas Blur e Sharpen As ferramentas Blur e Sharpen trabalham com a qualidade do foco da imagem. A Blur desfoca a rea da imagem tratada, suavizando detalhes. A ferramenta Sharpen aumenta a
71
definio das reas da imagem por meio de um foco aguado. No painel Properties, a opo Intensity configura a concentrao do foco e desfoque.
Painel Properties com as ferramentas Blur e Sharpen ativa
Ferramentas Dodge e Burn As ferramentas Dodge e Burn funcionam permitem aumentar a tonalidade de uma imagem. Elas so utilizadas para clarear ou escurecer partes de uma imagem, respectivamente. Alm das configuraes de tamanho, bordas e formato, as ferramentas Dodge e Burn oferecem controle sobre os tons que sero alterados (Range) e intensidade de sua aplicao (Exposure).
Painel Properties com as ferramentas Dodge e Burn ativa
A tabela a seguir demonstra as opes de formatao das ferramentas Dodge e Burn por meio do painel Properties. Opo Range Shadows Midtones Highlights Exposure Valores Descrio Configura a abrangncia dos pixels que sero alterados Modifica as partes escuras da imagem Modifica os meio-tons da imagem Modifica as reas claras da imagem Configura a abrangncia da exposio, que varia de 1 a 100.
72
Ferramenta Smudge A ferramenta Smudge permite a fuso de cores, como em um reflexo da imagem. Tambm possvel aplicar uma cor de preenchimento enquanto a ferramenta arrastada sobre a imagem. Assim como as demais ferramentas para alterao de bitmap, a Smudge tambm pode ter seu tamanho, bordas, formato, bem como presso e opes de controle das cores.
Painel Properties com a ferramenta Smudge ativa
A tabela a seguir demonstra as opes de formatao da ferramenta Smudge por meio do painel Properties. Opo Pressure Smudge color Descrio Configura a intensidade do contorno Aplica o efeito utilizando uma cor especfica no comeo de cada contorno. Se esta opo estiver desabilitada, a ferramenta utiliza a cor j configurada. Aplica o efeito utilizando as informaes de cor de todos os objetos das layers. Se esta opo estiver desabilitada, a aplicao limita-se a utilizar as cores do objeto ativo.
Use entire document
Ferramenta Rubber Stamp A ferramenta Rubber Stamp amplamente utilizada na edio de grficos bitmap. A Rubber Stamp copia os pixels de uma rea para outra parte da imagem. Em outras palavras, um processo de clonagem de pixels. de grande utilidade quando um retoque ou uma replicao em parte da imagem se faz necessrio. Para trabalhar com esta ferramenta, clique sobre uma rea de imagem que servir de referncia. Uma cruz fica visvel na tela para marcar este ponto. O cursor fica com formato circular, que pode ser configurado pelo painel Properties. Ao clicar em outra rea da imagem, o ponto de referncia ser aplicado.
73
Ponto de referncia e cursor ao trabalhar com a ferramenta Rubber Stamp
A imagem a seguir apresenta as opes de configurao da ferramenta. Ela possui formatao de tamanho, bordas e aplicao da clonagem.
Painel Properties com a ferramenta Rubber Stamp ativa
A tabela a seguir demonstra as opes de formatao da ferramenta Rubber Stamp por meio do painel Properties. Opo Source Aligned Descrio Permite clonar de pontos relativos em uma imagem. Selecione esta opo para que o ponto de referencia mova-se vertical e horizontalmente, acompanhando o cursor. Aplica o efeito utilizando as informaes de cor de todos os objetos das layers. Se esta opo estiver desabilitada, a aplicao limita-se a utilizar as cores do objeto ativo. Controla a mesclagem do contorno com as demais camadas. Por exemplo, se a opacidade estiver configurada em 0, a ferramenta clona uma imagem completamente transparente. Controla a mesclagem do contorno com as demais camadas
Use entire document Opacity
Blend
74
Ferramenta Replace Color A ferramenta Replace Color tem por funo recolocar uma cor no lugar de outra. Para isso, necessrio configur-la, atravs do painel Properties, quais cores sero substitudas.
Painel Properties com a ferramenta Replace Color ativa
A tabela a seguir demonstra as opes de formatao da ferramenta Replace Color por meio do painel Properties. Opo Size From Swatch Highlights To Shape Tolerance Strenght Colorize Valores Descrio Configura o tamanho do brush Configura de onde ser retirada a referncia Indica que ser usada uma cor do pop de cores Indica que ser usada uma regio de imagem Indica a cor deve receber a mudana. Configura o formato do brush, pode ser redondo ou quadrado. Determina a abrangncia de cores repostas. Varia de 0 a 255. Determina com qual intensidade a cor ser reposta Recoloca a cor configurada no From com a cor configurada em To. Desabilite a opo Colorize para pintar apenas com a opo marcada em To, deixando a opo From intacta.
Ferramenta Red Eye Removal Esta ferramenta especfica para remoo de reas vermelhas da imagem e recolocao de tons de cinza ou preto. Aps fazer as configuraes no painel Properties, basta clicar e arrastar a ferramenta sobre as reas vermelhas da imagem.
75
Painel Properties com a ferramenta Red Eye Removal ativa
A tabela a seguir demonstra as opes de formatao da ferramenta Red Eye Removal por meio do painel Properties. Opo Tolerance Descrio Determina a abragncia de tons que sero repostos. Varia de 0 a 100, sendo que 0 repe apenas o vermelho e 100 todos os tons que contm vermelho. Determina o quanto ser escura esta substituio
Strength
4.3.2 Transformaes no Bitmap

O Fireworks permite que sejam realizadas transformaes no tamanho e orientao dos grficos bitmaps. Para isso, acesse o menu Modify e abra a opo Canvas. Canvas pode ser traduzido como tela e, no Fireworks, rea na qual o layout trabalhado. Por meio deste menu possvel configurar o tamanho, a cor de fundo, o ajuste tela entre outras opes.
Menu Modify para alterao no bitmap
76
A tabela a seguir descreve as opes de alterao que Canvas pode receber. Opo Image Size Canvas Size Canvas Color Trim Canvas Fit Canvas Rotate Canvas 180 Rotate 90 CW Rotate 90 CCW Descrio Configura o tamanho do canvas e altera o contedo se for necessrio Configura o tamanho do canvas sem alterar o contedo Altera a cor do canvas Ajusta o tamanho do canvas ao contedo, excluindo o que est fora do canvas Ajusta o tamanho do canvas ao tamanho do documento Rotaciona o canas em 180 Rotaciona o canvas em sentido horrio Rotaciona o canvas em sentido anti-horrio
4.4 Laboratrio
Exerccio 1: Edio e tratamento das imagens de produtos do Website
Dando continuidade ao projeto foi definido que os produtos da loja sero apresentados em imagens de trs formatos diferentes. O cliente enviou as fotos que ele tirou dos produtos e voc deve tratar cada uma delas e prepar-las nos trs formatos pr-definidos a fim de public-las no website. Voc ir utilizar as ferramentas discutidas neste mdulo para melhorar a qualidade das imagens e redimension-las. Durante este exerccio sero revistos os seguintes tpicos estudados nesta unidade: Seleo de bitmap Live Filters Importao de arquivos As principais tarefas deste exerccio so: Recortar os produtos Tratar as imagens aplicando filtros Aplicar cada produto em arquivos conforme as medidas pr-definidas em fundo branco: - pequena (45 x 45 pixels) - mdia (98 x 98 pixels)
77
- grande (198 x 198 pixels)
Tarefa 1 Recortar o produto

1- Abra um dos arquivos da pasta imagens_cliente que se encontra dentro da pasta tarefas acessando no menu principal a opo File > Open ou (Ctrl + O) 2- Utilize as ferramentas de seleo para recortar o produto 3- Delete o fundo da imagem deixando somente o produto recortado
Tarefa 2 Tratar a imagem aplicando correes de cor e Filtros

1- No menu principal acesse a opo Filters > Adjust Color e utilize os filtros que voc achar necessrios para corrigir as cores do produto 2- Utilize tambm outros filtros do menu Filters caso voc ache necessrio
Tarefa 3 Aplicar o produto nos tamanhos pr-definidos

1- Crie um novo arquivo acessando o menu File > New (Ctrl + N). Configure as dimenses de largura (Width) e altura (Height) para 198 pixels 2- Copie o produto que voc recortou e tratou e cole-o dentro deste arquivo 3- Redimensione o produto para que ele se ajuste ao tamanho do arquivo 4- Abra a janela Image Preview acessando no menu principal a opo File > Image Preview ou (Ctrl + Shift + X) 5- Na aba Options selecione a opo JPEG e configure as opes de qualidade comparando a exibio da imagem com o peso do arquivo (em Kb) que aparece na parte acima do preview da imagem 6- Ajustado o formato e a qualidade da imagem clique em Export... 7- Salve a imagem na pasta tarefa desta unidade dentro de uma nova pasta chamada imagens_tratadas com o nome do produto em questo mais os caracteres _g, simbolizando que esta a imagem grande 8- Crie outro arquivo e configure as dimenses de largura (Width) e altura (Height) para 98 pixels e repita os passos de 2 a 6 9- Salve esta imagem na pasta tarefa desta unidade dentro da pasta imagens_tratadas com o nome do produto em questo mais os caracteres _m, simbolizando que esta a imagem mdia 10- Crie mais um arquivo e configure as dimenses de largura (Width) e altura (Height) para 45 pixels e repita os passos de 2 a 6 11- Salve a imagem na pasta tarefa desta unidade dentro da pasta imagens_tratadas com o nome do produto em questo mais os caracteres _p, simbolizando que esta a imagem pequena Repita as tarefas 1, 2 e 3 para cada uma das imagens de produto
78
Exerccio 2: Criando o rodap

Agora voc ir criar o rodap do projeto em que est trabalhando. Est uma rea do site que ser visvel em todas as pginas do projeto. Durante este exerccio sero revistos os seguintes tpicos estudados nesta unidade: Ferramentas vetoriais Importao de arquivos Textos Preenchimento A tarefa deste exerccio : Montar rea de rodap
Ao finalizar o exerccio voc ter este resultado:
79
Tarefa 1 Montar rea de rodap

1- Abra o arquivo montando_layout_01.png que voc salvou na pasta tarefa da unidade 3 2- Desenhe um retngulo com as dimenses de altura e largura de 150 pixels 3- No painel de propriedades clique no rea Fill Category ao lado da cor de preenchimento e selecione a opo Gradient > Linear 4- Configure as cores do preenchimento gradiente para: inicial #E2E3DF e final #F5F5F5 6- Posicione o retngulo nas coordenadas x = 2 e y = 1195 7- Desagrupe o retngulo acessando no menu principal a opo Modify > Ungroup ou (Ctrl + Shift + G) 8- Selecione o painel Path, caso este no esteja aberto acesse no menu principal a opo Window > Others > Path 9- No painel Path em Select Point, clique no boto Select Right Points 10- Com os pontos da direita do objeto selecionados utilize a seta para a direita do teclado para aumentar a largura do retngulo at que este fique por baixo da barra de rolagem do layer Navegador 11- Selecione a ferramenta de texto no painel Tools e configure as opes de texto no painel de propriedades para a fonte Arial Narrow, tamanho 10, cor #333333, e no Anti-aliasing level marque a opo Crisp Anti-Alias 12- clique na parte esquerda da tela sobre o retngulo criado anteriormente e digite em letras maisculas o texto EM AT 12X SEM JUROS 13- Posicione o texto nas coordenadas x = 60 e y = 1203 14- Importe o arquivo logos_cartoes.png que se encontra na pasta tarefa desta undidade 15- Posicione-o nas coordenadas x = 62 e y = 1228 16- Agora faa um cpia do texto que voc digitou anteriormente clicando sobre ele e arrastando-o para a direita pressionando tambm as teclas Alt e Shift at a coordenada x = 399 17- Clique duas vezes sobre o campo de texto copiado e digite em maisculas o texto TRABALHAMOS COM 18- Importe o arquivo logos_bancos.png que se encontra na pasta tarefa desta unidade 19- posicione-o nas coordenadas x = 400 e y = 1231 20- faa novamente uma cpia do texto que voc digitou e posicione-a nas coordenadas x = 574 e y = 1203 21- Clique duas vezes sobre o campo de texto copiado e digite em maisculas o texto CENTRAL DE ATENDIMENTO 22- Agora importe o arquivo icones_rodape.png que se encontra tambm na pasta tarefa desta unidade e posicione-o nas coordenadas x = 576 e y = 1224 23 - Seleciona a ferramenta de texto no painel Tools e configure no painel de propriedades a fonte como Tahoma, tamanho 11, cor #666666, texto centralizado, e no Anti-aliasing level marque a opo No Anti-Alias
80
24- Clique sobre a rea de rodap abaixo das marcas e cones e digite o texto: Copyright 2000 - 2008 www.alfasports.com.br, TODOS OS DIREITOS RESERVADOS. As fotos aqui veiculadas, logotipo e marca so de propriedade do site www.alfasports.com.br. vetada a sua reproduo, total ou parcial, sem a expressa autorizao da administradora do site 25 Redimensione o tamanho do campo de texto clicando nas alas de transformao e fazendo com que o texto fique em duas linhas com a quebra de nova linha a partir das palavras propriedade do site www.alfasports.com.br... 26- centralize o texto com os elementos acima 27- Salve o arquivo na pasta tarefa desta unidade com o nome de montando_layout_03.png
81
Unidade 5 Elementos de navegao no Fireworks CS4

Smbolos Behaviors Rollovers Menu pop-up
82
Unidade 5 Elementos de navegao no Fireworks CS4

O Fireworks oferece opo de criao de botes, rollovers e menus pop-ups para proporcionar navegao entre as pginas que compe o site. Esta unidade apresenta os principais recursos e mtodos empregados para a construo desta navegao.
5.1 Smbolos
O Fireworks CS4 trabalha com trs tipos de smbolos: grfico, animao e boto. Qualquer objeto do Fireworks p ser transformado em smbolo, um bloco de texto, um path ou um grupo. A vantagem de utilizar os smbolos do Fireworks que eles ficam armazenados no painel Commom Library. Basta clicar e arrastar um smbolo da biblioteca para aplic-lo ao documento. Cada objeto no documento chamado de instncia do objeto original. Ao realizar qualquer alterao no smbolo conservado no painel Commom Library modifica automaticamente suas instncias. A menos que seja quebrado o link entre ambos. Criando um smbolo Para criar um smbolo a partir de um objeto selecionado, deve-se abrir o menu Modify, selecionar a opo Symbol e clicar em Convert to Symbol. Ou, selecionar os objetos que devem ser transformados em smbolo e pressione F8 no teclado. Ao fazer isso, o Fireworks para uma janela para configurao deste smbolo. O smbolo deve ser nomeado e o seu tipo deve ser configurado. No exemplo a seguir ser criado um boto. Selecione a opo Enable 9-slice scaling guides para fazer com que o smbolo possa ser ampliado e reduzido sem sofrer deformaes. A opo Save to Commom Library seleciona faz com que o smbolo seja armazenado na pasta de smbolos do Fireworks e, futuramente, compartilhado entre diversos documentos.
Janela para criao de um novo smbolo
83
Os smbolos presonalizados ficam armazenados no painel Commom Libraries e no painel Document Library. O painel Commom Library uma pasta geral de smbolos. Neste caso, o smbolo fica salvo na pasta de arquivos do Fireworks: C:\Arquivos de Programas\Adobe\Fireworks CS4\Commom Libraries\Custom Symbols. A imagem a seguir ilustra o painel Commom Library e onde os smbolos personalizados esto disponveis. J o painel Document Library armazena os arquivos diretamente neste painel e o smbolo fica restrito a este arquivo.
Painis Commom Library e Document Library
5.2 Behaviors
Os smbolos podem exibir uma variedade de comportamentos. Estes comportamentos so controlados pelo painel Behavior. Um exemplo de mudana de comportamento fazer um boto mudar de aparncia quando o cursor se mover sobre ele. Behaviors, que pode ser traduzido como comportamentos, consistem em duas partes: um evento e uma ao. O evento a atividade do usurio. Por exemplo, o usurio pode mover o cursor sobre um boto. A ao o resultado que o evento sinaliza. Por exemplo, o boto troca de cor.
84
Painel Behaviors Os comportamentos so controlados por meio do painel Behaviors. Este painel utilizado para crier, editar e apagar os comportamentos ligados ao smbolo. Os comportamentos podem ser aplicados a objetos de Web de forma simples: com o objeto selecionado, o comportamento adicionado ao clicar no boto Add Behavior no menu pop-up. A imagem a seguir demonstra o painel Behavior com destaque para o boto de insero de comportamentos.
Painel Behaviors com detaque para a insero de comportamentos
A tabela a seguir demonstra as funes de cada Behavior. Opo Simple Rollover Descrio Adiciona um estado ao mouse e uma ao para a slice ou o objeto web selecionado usando o Frame 1 como o estado Up e o Frame 2 como o estado Over. Recoloca a imagem abaixo da fatia especificada com o contedo de outro frame ou uma imagem externa na mesma fatia. Restaura o estado default do frame. Configura a fatia para que ela seja uma parte da barra de navegao do Fireworks. Cada fatia precisa ter um comportamento. A barra de navegao inclui o estado Down e Over While Down para todas as fatias e botes. Especifica o estado Over para a fatia atualmente selecionada quando ela parte de um menu de navegao e, opcionalmente, especifica o estado Over While Down. Especifica o estado Down para a fatia atualmente selecionada quando uma parte de uma barra de navegao. Restaura todas as outras fatias da barra de navegao para o seu estado Up bem como qualquer outro comportamento de troca
Swap Image Swap Image Restore Set Nav Bar Image
Nav Bar Over
Nav Bar Down Nav Bar Restore
85
de imagem desginado para outro boto ou fatia. Set Pop-Up Menu Set Text of Status Bar Aplica um menu pop-up a uma slice ou a hotspot. Define um texto para ser exibido na barra de status do browser.
5.3 Rollovers
Rollover so utilizados em conjunto com os behaviors. Um grfico coloca em funcionamento a exibio de outro grfico quando o cursor passar sobre ele. Para que o rollover funcione so necessrias duas imagens: a imagem que exibida inicialmente e outra imagem que aberta posteriormente.
5.4 States
Todos os comportamentos do painel Behaviors exigem a utilizao de estados diversificados. Isto configurado por meio do painel States. Cada estado pode conter objetos tais como hotspots ou smbolos, dependendo da layer na qual esto locadas e a presena de slices, podem ser compartilhadas entre frames, usadas como frames nicos em uma animao ou como gatilho ou alvo para um comportamento Swap Image.
5.5 Menu pop-up

Os menus pop-up so menus de navegao que exibem sub-menus quando o usurio passa o cursor sobre o objeto. So caractersticas dos menus pop-up: Cada item do menu surge em uma clula HTML ou em formato de imagem. Os itens de menu recebem links de URL para navegao
necessrio adicionar um menu na guia de contedo para criar uma opo uqe possa ser exibida inicialmente pelo navegador. Dica para trabalhar com o menu pop-up - Pressione F12 para visualizar o menu no browser O Fireworks oferece um painel para edio do menu pop-up. Para exibi-lo, um boto deve ser selecionado em conjunto com a opo Set Pop-Up Menu do painel Behaviors.
86
Painel Behaviors e slice selecionada
Ao clicar sobre a opo da imagem anterior, o Fireworks abre a janela de edio do menu pop-up. Esta janela possui quatro abas com as seguintes configuraes: Content, Appearance, Advanced e Position.
Janela para edio do menu pop-up
Aba Content Appearance Swap Image Restore
Descrio Configura nome, estrutura, URL e target dos itens de menu. Configura o aspecto dos itens de menu nos estados Up e Over. Restaura o estado default do frame.
87
Set Nav Bar Image
Configura a fatia para que ela seja uma parte da barra de navegao do Fireworks. Cada fatia precisa ter um comportamento. A barra de navegao inclui o estado Down e Over While Down para todas as fatias e botes.
5.6 Laboratrio
Exerccio 1: Transformando os itens do menu horizontal em botes Dando continuidade ao projeto da AlfaSports agora voc ira criar os smbolos para cada item do menu horizontal. Isto ir ajudar a montar um prottipo do projeto, ideal para uma apresentao ao cliente.
Durante este exerccio sero revistos os seguintes tpicos estudados nesta unidade: Smbolos Rollovers States As principais tarefas deste exerccio so: Transformar os itens do menu horizontal em smbolos do tipo boto Criar diferentes estados para cada boto
88
Tarefa 1 Transformar os itens do menu em botes

1- Abra o arquivo montando_layout_03.png que voc salvou na pasta tarefa da unidade 4 2- selecione o texto do primeiro item do menu horizontal do site (Quem Somos) 3- No menu principal selecione a opo Modify > Symbol > Convert to Symbol ou (F8) 4- Na janela Convert to Symbol defina o nome do smbolo que voc est criando no campo Name, marque o tipo de smbolo que ele vai ser (neste caso um boto) selecionando a opo Button e clique em OK 5- Note que aparece sobre o texto um retngulo esverdeado, este o retngulo correspondente Slice (Fatia) do smbolo, estudaremos Slices mais a frente, na prxima undidade desta apostila. Para no visualizar a Slice selecione o painel Layers e desabilite a visualizao do layer chamado Web Layer 6- Voc criou o primeiro smbolo do tipo boto, agora repita os passos 3 e 4 para cada item do menu horizontal
89
Tarefa 2 Criar diferentes estados para cada boto

1- Agora voc ir editar os estados de cada boto, para isso clique duas vezes sobre o primeiro boto criado 2- Selecione o painel STATES, caso ele no esteja visvel ento acesse o menu principal clicando em Window > States ou (Shift + F2) 3- No painel STATES note que voc est no estado 01 State 1 (Up), este o estado de exibio padro do boto, ou seja, sem ter o mouse por cima e sem ter sido clicado 4- Ainda no painel STATES clique em 02 State 2, note que neste estado no h nada na rea de trabalho. Repare tambm que no painel de propriedades o nome deste estado Over, ou seja, este o estado para quando o mouse estiver sobre o boto 5- Clique no painel de propriedades na opo Copy Up Graphic, isto far com que o contedo existente no estado Up seja copiado para este estado 6- Altere a cor do texto copiado neste estado para a cor #FF9900 7- No painel STATES clique em 03 State 3, Este o estado Down, ou seja, o estado para quando o boto for clicado 8- Clique no painel de propriedades na opo Copy Over Graphic para copiar o contedo existente no estado Over 9- Agora altere a cor do texto copiado neste estado para a cor #FFCC00 10- Crie estes estados para cada um dos itens do menu horizontal. 12- Quando um smbolo do tipo boto criado ele vem automaticamente com o um Behavior de Simple Rollover aplicado. Voc pode verificar isso abrindo o painel Behaviors. Caso este painel no esteja aberto acesse o menu principal na opo Window > Behaviors ou (Shift + F3) 13- Para visualizar o efeito de Rollover nos botes que voc criou clique no boto Preview, no canto superior esquerdo da rea de trabalho do Fireworks CS4 14- Salve o arquivo na pasta tarefa desta unidade com o nome de montando_layout_04.png
90
Unidade 6 Criando hotspots e slices

Hotspots Slices
91
Unidade 6 Criando hotspots e slices

O Fireworks dispe de diversas ferramentas para a insero de interatividade no layout. Vetores e bitmaps podem ser utilizados para gerar hotspots e slices. Hotspots e slices so elementos da web e costumam estar ligados a aes disponveis por meio de cdigos HTML. Porm, estes elementos interativos no exigem conhecimentos de programao. Grande parte destes elementos interativos utiliza um recurso conhecido como image map. Um image map uma rea do layout definida pela tag <area shape> capaz de fazer links para outras pginas ou realizar alguma ao quando ocorre algum evento do mouse por meio do emprego de funes JavaScript que controlam o comportamento do browser. Esta rea definida pela tag <area shape> recebe links por meio de um objeto do Fireworks chamado hotsopt.
6.1 Hotspot
O Fireworks oferece um grupo de ferramentas para a criao de hotspots. No grupo de ferramentas Web possvel criar hotspots de diferentes formatos: retangulares, elpticos ou poligonais.
Ferramentas para criao de hotspots
Para desenhar os hotspots na forma desejada siga um destes dois passos: 1) Para desenhar um hotspot com formato irregular, selecione a ferramenta Polygon Hotspot. Clique em pontos diversos sobre a rea da imagem at que o hotspot assuma a forma desejada. 2) Para desenhar um hotspot retangular ou elptico, selecione a ferramenta Circle ou a Rectangle Hotspot na caixa de ferramentas. Clique e arraste o cursor para criar o hotspot do tamanho desejado. Dicas para trabalhar com os hotspots: - Para alterar o tamanho e posio destes elementos, utilize as ferramentas Pointer e Scale.
92
Web Layer O painel de Layers dispe de uma camada especial para os elementos interativos, tais como hotspots e slices, que sero apresentadas futuramente. A Web Layer a camada superior dentro deste painel. Ela comporta-se como outras camadas, podendo ser nomeada, duplicada e excluda.
Web Layer com um elemento interativo
Configurando o hotspot O hotspot considerado um elemento interativo por oferecer a possibilidade de insero de links, entre outras funcionalidades. Para isso, selecione o hotspot e utilize o painel Properties. O link e forma como deve ser aberto podem ser configurados por aqui.
Painel Properties com hotspot selecionado
Opo Object Name W H X Y Shape
Valores
Descrio Insere nome para o hotspot Largura do hotspot Altura do hotspot Posicionamento do hotspotno eixo X Posicionamento do hotspot no eixo Y Indica o formato do hotspot
Rectangle Circle Polygon Color
Hotspot retangular Hotspot circular Hotspot com forma poligonal Cor predominante no hotpot
93
Link Alt
Aplica o espaamento original da fonte uma abreviao para Alternative text. Trata-se de um texto que ser exibido caso a imagem no seja carregada. Determina como o link deve ser aberto, com relao a janelas do browser e frames. None _blank _self _parent _top Aplica a configurao padro para abertura de link, ou seja, na prpria janela Abre o link em uma nova janela Abre o texto na mesma janela Abre o link no frame ao lado Abre o link no frame acima
Target
Painel URL O link pode se inserido no hotspot por meio do painel URL.
Painel URL
Este painel funciona como um gerenciador de todos os links utilizados no documento. Cada vez que um link inserido por meio do painel Properties, o mesmo link armazenado no painel URL. Quando for necessrio utilizar os mesmos endereos muitas vezes, crie uma biblioteca de URL por meio deste painel. As bibliotecas podem ser compartilhadas entre diversos documentos no Fireworks CS4. Para criar uma biblioteca de URL, abra o painel URL, acesse o boto oculto e selecione a opo New URL Library...
94
Criao de uma biblioteca de links
Na janela New URL Library, digite o nome da biblioteca e clique on OK. A sua biblioteca aparece listada no painel. Para adicionar uma URL, clique no boto oculto e selecione Add URL. O endereo ficar armazena na sua biblioteca. Repita este processo a cada novo endereo a ser inserido. Para aplicar esta URL nos Hotspots, basta clicar sobre o objeto e selecionar a URL desejada. A tabela a seguir explica cada opo do boto oculto presente no painel URL. Opo Descrio
Add Used URLs to Adiciona todas as URLs para a biblioteca Library Clear Unused URLs Add URL... Edit URL... Delete URL New URL Library... Import URLs... Export URLs... Apaga todas as URL no utilizadas Adiciona uma URL a biblioteca e ao objeto que estiver selecionado Edita a URL no documento Apaga a URL selecionada Cria uma nova biblioteca de URL Importa URLs deritamente de arquivos HTML Exporta a URL como um arquivo HTML
95
6.2 Slices
Slices so elementos com comportamentos semelhantes aos Hotspots e tambm so caracterizados por propercionar interatividade aos objetos da web. Ambos permitem que o usurio determine uma regio interativa na imagem apta a receber links e aes via Javascript. Entretanto, cada tipo de ferramenta comprata-se de forma diferente. Slices so o resultado do corte realizado ao longo da imagem em pequenas partes. Cada uma destas partes convertida, futuramente, em um arquivo separado dos demais. Na exportao destas fatias, o Fireworks cria arquivos HTML e CSS que contm o cdigo para reunir novamente as imagens como uma estrutura no browser. Algumas vantagens de fatiar a imagem: Cada fatia pode ser otimizada com o formato de arquivo e a compresso mais apropriada. Por exemplo, uma parte da imagem pode ser exportada como um JPG com alta qualidade enquanto que outra parte pode ser exportada como um GIF. Slices podem receber diferentes aes, dependendo do evento do mouse. Slices frequentemente alteradas podem ser atualizadas sem a necessidade de retrabalhar todo o layout. Criando Slices possvel criar slices retangulares ou com formatos mais irregulares. Para isso, clique sobre a opo disponvel na caixa de ferramentas, conforme a imagem a seguir:
Ferramentas para criao de slices no Fireworks
Para criar as slices retangulares, selecione a ferramenta Slice na caixa de ferramentas, clique e arraste o cursor para desmarcar a rea de abrangncia do slice. Para inserir links s fatias, proceda como no processo de insero de links em hotspot. Para criar slices com outros formatos, utilize a ferramenta Polygon Slice. Cada clique com a ferramenta gera um ponto que formar a fatia. A imagem a seguir mostra o logotipo fatiado com a ferramenta Slices em formato retangular e o tnis recortado com a ferramenta Polygon Slice.
96
Logotipo e tnis fatiados empregando-se diferentes mtodos
Criando um slice com texto O Fireworks permite criar uma slice especfica para receber textos em HTML. Este processo diferencia-se dos apresentados anteriormente, pois separa o texto das imagens. O que permite gerar uma pgina HTML com texto possvel de ser selecionado. A imagem a seguir trs um exemplo de layout pronto para receber uma slice HTML.
Layout com slices para insero de HTML
97
Selecione a ferramenta Slice da caixa de ferramentas e desenhe a slice do tamanho destinado ao texto, na imagem anterior. Mantenha a Slice selecionada e configure-a por meio do painel Properties. No menu Slice Type, selecione a opo HTML. Ao optar por esta configurao o Fireworks abre uma janela para insero do texto.
Painel Properties com uma slice selecionada
Para visualizar o resultado desta configurao, necessrio gerar uma pgina HTML. Acesse o menu File > Export. Nomeie o arquivo e configure para gerar HTML and Images.
Janela para exportao de do layout em uma pgina HTML
98
Observe que ao abrir o arquivo HTML no browser, o texto pode ser selecionado.
Texto gerado a partir de um slice do Fireworks
6.3 Laboratrio
Exerccio 1: Criando Slices Dando continuidade ao projeto da AlfaSports agora voc ira editar as Slices dos smbolos para cada item do menu horizontal. As Slices definem as imagens a serem exportadas para serem usadas na criao do HTML no Dreamweaver. Quando exportamos um arquivo que possui botes o Fireworks CS4 exporta automaticamente cada um dos estados do boto para que possamos utiliz-los na montagem do HTML.
Durante este exerccio sero revistos os seguintes tpicos estudados nesta unidade: Slices As principais tarefas deste exerccio so: Editar as Slices
99
Tarefa 1 Editando as Slices dos botes

1- Abra o arquivo montando_layout_04.png que voc salvou na pasta tarefa da unidade 7 2- Selecione o painel Layers, caso este painel no esteja aberto acesse no menu principal a opo Window > Layers ou (F2) 3- No painel Layers certifique-se de que a visualizao do layer chamado Web Layer est ativada 4- Torne visveis as Slice Guides, para isso acesse no menu principal a opo View > Slice Guides ou (Ctrl + Alt + Shift + ;). Atravs das Slice Guides voc ir determinar a rea de abrangncia de cada Slice 5- Clique nas Slice Guides ou nas bordas da slice do boto e arraste-as at que a slice cubra o boto at o total de suas extremidades como no exemplo abaixo:
100
6- Ajuste as Slices de cada um dos botes do menu horizontal, isto ir definir a imagem que ser exportada para cada boto 7-Agora voc ir exportar as slices de cada boto. No menu principal clique em File > Export ou (Ctrl + Shift + R) 8- Na janela de Export, dentro da pasta tarefa desta lio crie uma pasta chamada imgs_menu 9- No campo Export selecione a opo Images Only 10- No campo Slices selecione Export Slices 11- Abaixo do campo Slices, marque somente a opo current Page only e clique em Salvar 12- Acesse a pasta imgs_menu atravs do Windows explorer e veja que as imagens dos botes em cada estado foram criadas 13- Salve o arquivo na pasta tarefa desta unidade com o nome de montando_layout_05.png
101
Unidade 7 Criando um prottipo navegvel

Processo de Criao de Prottipos Exportao de PDF Interativo
102
Unidade 7 Criando um prottipo navegvel no Fireworks CS4

O Adobe Fireworks oferece um ambiente ideal para o desenvolvimento de prottipos, convertendo perfeitamente maquetes de design em sites e aplicativos reais.
7.1 Processo de criao de prottipos

Ao combinar o painel Pages com outros eficientes recursos do Fireworks, voc pode criar rapidamente prottipos interativos de websites ou de softwares. Esta uma excelente forma para uma apresentao de um projeto ao seu cliente. Alm disso, voc poder exportar este prottipo em diferentes formatos para visualizao como, por exemplo, para o Adobe Flash, o Adobe Flex, o Adobe AIR ou o Adobe Dreamweaver. No painel Pages, voc pode criar o nmero desejado de pginas ou telas para o design inicial. medida que o design evoluir, possvel adicionar ou subtrair pginas conforme necessrio. Um nico arquivo PNG do Fireworks pode conter vrias pginas, fornecendo uma maneira perfeita de desenvolver prottipos da Web e de interfaces de aplicativo. Cada pgina pode conter configuraes exclusivas para o tamanho e a cor do Canvas, a resoluo da imagem e as guias. Essas opes so definidas para cada pgina ou globalmente em todas as pginas de um documento. Alm da camada web Layer (Painel Layers), cada pgina tambm contm um conjunto exclusivo de camadas. Entretanto, para elementos comuns, voc pode usar uma Master Page ou compartilhar camadas entre pginas.
Painel Pages e suas opes no boto oculto
So as opes do painel Pages ao clicar sobre o boto oculto, conforme a imagem anterior:
103
Opo New Page Duplicate Page Delete Page Rename Page Link to Master Set As Master Page Reset Master Page
Descrio Insere uma nova pgina ao documento. Adiciona uma nova pgina ao documento ao duplicar uma pgina j existente e todo o seu contedo. Apaga uma pgina selecionada. Renomeia as pginas do documento. Vincula a pgina selecionada Master Page. Transforma a pgina selecionada em Master Page, ou seja, uma pgina que serve de modelo para a criao das demais. Transforma a Master Page em uma pgina convencional.
Thumbnail Options Configurao de visualizao das miniaturas no painel Pages. Criando uma Master Page Para fazer com que um conjunto de elementos aparea em todas as suas pginas, use uma Master Page. Quando voc converte uma pgina comum em Master Page, ela passa para o topo da lista no painel Pginas. Quando uma Master Page criada, uma Camada de pgina-mestre adicionada parte inferior da hierarquia de camadas para cada pgina. O recurso Master Page faz com que os elementos comuns a vrias pginas fiquem reunidos somente na Master Page, porm eles so visualizados em todas as pginas do documento. Uma vez que seja preciso atualizar ou modificar algum elemento da Master Page basta acess-la, fazer a alterao e este elemento ser automaticamente atualizado para todas as outras pginas.
Painel Pages com a Master Page ao topo
7.2 Exportao de PDF interativo

O Fireworks oferece vrios formatos de sada para o seu prottipo e todos eles preservam links de hipertexto para navegao em pginas. Quando necessitamos imprimir um design do Fireworks ou distribu-lo para uma reviso podemos export-lo
104
para o formato Adobe PDF. Os revisores podero adicionar comentrios e responder aos comentrios uns dos outros no Adobe Reader ou no Acrobat. Os arquivos PDF exportados mantm todos os links de hipertexto e pginas, permitindo que os revisores naveguem como fariam na Web. Entretanto, ao contrrio de prottipos HTML, o Adobe PDF possui configuraes de segurana que impedem que os revisores editem ou copiem os seus designs. Para exportar no formato PDF voc deve acessar no menu principal a opo Arquivo > Exportar. No menu pop-up Exportar, escolha Adobe PDF. Escolha as pginas a serem exportadas e selecione Exibir PDF aps exportao para abrir o PDF automaticamente no Adobe Reader ou Acrobat. Para personalizar o PDF, voc pode clicar em Opes e ajustar configuraes como: compatibilidade, compactao, qualidade, converter em escalas de cinza, ativar seleo de texto, sangria, usar senha pra abrir o documento e usar senha para restringir tarefas. Clique em OK para fechar a caixa de dilogo Opes. Especifique um nome de arquivo e um local e clique em Salvar. Nota: Se as pginas no documento do Fireworks tiverem telas de desenho transparentes, os objetos com transparncias aplicadas perdero suas caractersticas transparentes quando voc os exportar para PDF. Para evitar isso, defina a tela de desenho como um plano de fundo no transparente antes de exportar para PDF.
7.3 Laboratrio
Exerccio 1: Definindo a Master Page, Montando a rea de Newsletter e de Publicidade Continuando o projeto da AlfaSports, visto que a estrutura bsica do projeto j foi definida, agora voc ira configur-la como a Master Page. O recurso Master Page define os elementos bsicos da estrutura do website que se repetem nas demais pginas do projeto. Aps definida a Master Page voc ir montar as reas de Cadastro para Newsletter e de Publicidade.
Durante este exerccio sero revistos os seguintes tpicos estudados nesta e em outras unidades: Master Page Vetores Importao de arquivos As principais tarefas deste exerccio so: Configurar a Master Page
105
Montar a rea de Cadastro para Newsletter e de Publicidade
Tarefa 1 Configurar a Master Page

1- Abra o arquivo montando_layout_05.png que voc salvou na pasta tarefa da unidade 8 2- Toda estrutura que voc montou at o momento, incluindo cabealho, menus e rodap dever ser configurada como Master Page. Para isso selecione o painel Pages, caso ele no esteja visvel acesse no menu principal a opo Window > Pages ou (F5) 3- No painel Pages clique com o boto direito do mouse sobre a 01 Page 1 e selecione a opo Set as Master Page 4-A partir de agora este contedo s poder ser editado quando a Master Page estiver selecionada no painel Pages. A Master Page aparecer em todas as pginas e qualquer alterao feita nela automaticamente aplicada nas demais pginas
106
Tarefa 2 Montar a rea de Cadastro para Newsletter e de Publicidade

1- Ainda no mesmo arquivo, no painel Pages clique em New/Duplicate Page para criar uma nova pgina. Nesta pgina voc ir montar o layout do miolo da pgina principal 2- Abaixo do menu horizontal desenhe um retngulo com 580 pixels de largura e 150 pixels de altura 3- Posicione-o nas coordenadas x = 192 e y = 195 4- Aplique a este retngulo o estilo barra que se encontra no painel styles 5- Agora voc ir desenhar a rea de cadastro para newsletter que aparecer na pgina principal comeando pelo fundo. Selecione a ferramenta Rouded Rectangle no painel Tools, crie um retngulo com 160 pixels de largura, 150 pixels de altura, cor branca. 6- No painel de propriedades selecione a aba Auto Shape Properties e altere as opes de bordas arredondadas. Desbloqueie as bordas clicando no cone do cadeado e configure para que somente as bordas superiores fiquem com o valor = 6, as demais devem ficar com o valor = 0 7- Posicione-o nas coordenadas x = 607 e y = 205 8- Desagrupe o retngulo selecionando no menu principal a opo Modify > Ungroup ou (Ctrl + Shift + G) 9- Agora desenhe outro retngulo abaixo deste tambm com a ferramenta Chafer Rectangle. Faa-o com 172 pixels de largura e 40 pixels de altura 10- No painel de propriedades novamente selecione a aba Auto Shape Properties e altere as opes de bordas arredondadas. Desbloqueie as bordas clicando no cone do cadeado e configure para que somente as bordas superiores fiquem com o valor = 6, as demais devem ficar com o valor = 0 10- Posicione-o nas coordenadas x = 601 e y = 339 11- Desagrupe-o selecionando no menu principal a opo Modify > Ungroup ou (Ctrl + Shift + G) 12- Selecione os dois retngulos que voc criou e solde-os acessando no menu principal a opo Modify > Combine Paths > Union ou (Ctrl + Alt + U) 13- Certifique-se de que no painel de propriedades a opo de preenchimento Edge esteja marcada como Anti-Alias 14- Selecione agora a ferramenta de texto, configure a fonte para Tahoma, Bold, cor #666666, tamanho 11, e no Anti-aliasing level marque a opo No Anti-Alias. 15- Sobre o objeto que voc desenhou como fundo da rea de Newsletter, na parte superior, utilize o painel Special Characters para selecionar o caractere (duas flechas para a direita) e coloque na cor #FF6600. Caso o painel no esteja aberto acesse no menu principal a opo Window > Others > Special Characters 16- Logo aps no mesmo campo de texto digite o texto Newsletter. Utilize o painel de propriedades para posicion-lo nas coordenadas x = 614 e y = 213 17- Utilizando a ferramenta Line Tool (N) e se necessrio o painel de Propriedades crie uma linha horizontal com 1 pixel de grossura com a cor #E0E1DD. Esta linha deve ter a largura de 139 pixels e ser posicionada na coordenada y = 230
107
18- Selecione novamente a ferramenta de texto e configure a fonte para Tahoma, cor #666666, tamanho 11, e no Anti-aliasing level marque a opo No Anti-Alias. 19- Logo abaixo da linha que voc criou digite o texto Cadastre-se e recebe as novidades da AlfaSports:. Utilize o painel de propriedades para posicion-lo nas coordenadas x = 615 e y = 237 20- Abaixo do texto desenhe um retngulo com 140 pixels de largura e 18 pixels de altura. Configure ele com preenchimento branco e bordas de 1 pixel com a cor #7F9DB9 21- Posicione este retngulo nas coordenadas x = 617 e y = 273 22- Selecione a ferramenta de texto, configure a fonte para Tahoma, cor #999999, tamanho 10, e no Anti-aliasing level marque a opo No Anti-Alias. 23- Clique sobre o retngulo e digite o texto Nome. O texto e o retngulo desenhado representam o campo de texto onde o usurio digite o nome para o cadastro 24- Selecione o texto e o retngulo do campo de texto e copie-os arrastando-os para baixo pressionando a tecla Alt 25- Posicione-os nas coordenadas x = 617 e y = 301 26- Clique duas vezes sobre o texto e altere-o para e-mail 27- Crie um retngulo abaixo dos campos de texto com a largura de 65 pixels e altura de 17 pixels, posicione ele nas coordenadas x = 617 e y = 323. Este ser o boto para cadastrar o nome e e-mail 28- Utilizando o painel Styles ou atravs do painel de propriedades adicione a este retngulo o estilo menu 29- Sobre este retngulo digite a palavra Cadastrar, configurando o texto para a fonte Tahoma, Bold, tamanho 10, cor branca, e no Anti-aliasing level marque a opo No Anti-Alias. 30- Centralize o texto com o retngulo do boto 31- Selecione o texto ttulo da rea da newsletter e a linha abaixo dele. Faa uma cpia destes dois objetos arrastando-os para baixo e pressionando a tecla Alt 32- Posicione-os nas coordenadas x = 614 e y = 358 33- Substitua o texto por pelo texto Publicidade 34- Agora importe a imagem img_banner.jpg que se encontra na pasta tarefa da unidade 6 35- posicione este banner nas coordenadas x = 617 e y = 385 36- Salve o arquivo na pasta tarefa desta unidade com o nome de montando_layout_06.png
Exerccio 2: Montando o miolo da pgina principal Iniciada a estrutura do contedo do miolo da pgina principal com as reas de Newsletter e Publicidade, agora voc ir desenvolver o restante do contedo desta pgina. Voc ir montar a forma como os produtos que voc preparou na unidade 4 sero exibidos.
108
Durante este exerccio sero revistos os seguintes tpicos estudados nesta e em outras unidades: Master Page Vetores Importao de arquivos
As principais tarefas deste exerccio so: Montar o miolo da pgina principal
109
Tarefa 1 Montar o miolo da pgina principal

1- Abra o arquivo montando_layout_06.png que voc salvou na pasta tarefa desta unidade 2- Selecione a ferramenta Line Tool (N) e se necessrio o painel de Propriedades. Crie uma linha horizontal com 1 pixel de grossura com a cor #666666. Esta linha deve ter a largura de 414 pixels e ser posicionada nas coordenadas x = 193 e y = 375 3- Selecione a ferramenta Rouded Rectangle no painel Tools, crie um retngulo com 148 pixels de largura, 20 pixels de altura, cor #666666. 4- No painel de propriedades selecione a aba Auto Shape Properties e altere as opes de bordas arredondadas. Desbloqueie as bordas clicando no cone do cadeado e configure para que somente as bordas superiores fiquem com o valor = 6, as demais devem ficar com o valor = 0 5- Posicione-o nas coordenadas x = 192 e y = 355 6- Desagrupe este objeto atravs do menu principal acessando Modify > Ungroup ou (Ctrl + Shift + G) 7- Selecione agora a ferramenta de texto, configure a fonte para Tahoma, cor branca, tamanho 11, Bold, e no Anti-aliasing level marque a opo No Anti-Alias. 8- digite sobre o retngulo criado o texto Produtos em Destaque 9- Posicione-o nas coordenadas x = 200 e y = 358 10- Selecione o retngulo criado e o texto que voc digitou. Arraste-os para a direita pressionando a tecla Alt para copi-los 11- Posicione-os nas coordenadas x = 343 e y = 355 12- Substitua o texto existente pelo texto Lanamentos e altere sua cor para #666666 13- Agora altere a cor do retngulo que est atrs do texto para #EAEAEA 14- Selecione o painel Path, caso este no esteja aberto acesse no menu principal a opo Window > Others > Path 20- No painel Path em Select Point, clique no boto Select Right Points 21- Com os pontos da direita do objeto selecionados utilize a seta para a esquerda do teclado para diminuir a largura do retngulo at que este fique com a largura de 95 pixels 22- Selecione o texto Lanamentos e o retngulo que est por trs deste texto. Arraste-os para a direita pressionando a tecla Alt para copi-los 23- Posicione-os nas coordenadas x = 440 e y = 355 24- Substitua o texto existente pelo texto Mais Vendidos 25- No painel Path em Select Point, clique no boto Select Right Points 21- Com os pontos da direita do objeto selecionados utilize a seta para a direita do teclado para aumentar a largura do retngulo at que este fique com a largura de 99 pixels 22- Desenhe agora um retngulo abaixo das abas que voc acabou de criar. Ele deve ter as dimenses de largura e altura de 100 pixels, cor branca, borda de 1 pixel com a cor #C2C4BD 23- Posicione-o nas coordenadas x = 192 e y = 385. Este o retngulo de tamanho mdio das imagens que voc tratou na unidade 4
110
24- agora importe uma das imagens de tamanho mdio tratadas que voc salvou na pasta imagens_tratadas dentro da pasta tarefa da unidade 4 25- posicione-a exatamente sobre o retngulo que voc criou 26- Selecione a ferramenta de texto, configure a fonte para Tahoma, cor #666666, tamanho 11, no Anti-aliasing level marque a opo No Anti-Alias e no campo Leading (espaamento entre linhas) coloque o valor 130 27- Abaixo da imagem do produto digite os dados do produto, neste exemplo use o seguinte texto: Relgio Plus TIMER WR 50M/52131 28- Posicione o texto nas coordenadas x = 190 e y = 490. Movimentando as alas de transformao, faa com que o campo de texto fique no mximo com a largura da imagem acima, quebrando-o em 2 linhas 29- Selecione o texto e faca uma cpia, arrastando-o para baixo pressionando a tecla Alt. Posicione-o nas coordenadas x = 190 e y = 521. 30- Altere a cor do texto para #FF5015 31- Substitua o texto pelo preo: R$149,90 32- Selecione o retngulo da rea da imagem, a foto e os textos abaixo dela. Faa uma cpia arrastando-os para a direita e pressionando a tecla Alt 33- Posicione-os nas coordenadas x = 295 e y = 385 34- Acesse o menu principal na opo Edit > Repeat Duplicate ou (Ctrl + Y) duas vezes para repetir a ltima ao fazendo com que novas cpias apaream na mesma relao de distncia da primeira cpia com a imagem original. Isto formar a primeira linha de produtos 35- Agora selecione toda a primeira linha de produtos que voc montou (Incluindo imagens retngulos e textos). Faa uma cpia arrastando-os para baixo e pressionando as tecla Alt e shift at que cheguem na posio y = 544 36- utilize o atalho Ctrl + Y para repetir a cpia mais 2 vezes uma abaixo da outra 37- Agora importe cada uma das imagens mdias salvas na pasta imagens_tratadas dentro da pasta tarefa da unidade 4 e substitua pelas cpias que vc fez 38- Salve o arquivo na pasta tarefa desta unidade com o nome de montando_layout_07.png
111

Fireworks

Enviado por

Dados do documento

Direitos autorais

Formatos disponíveis

Compartilhar este documento

Compartilhar ou incorporar documento

Opções de compartilhamento

Você considera este documento útil?

Este conteúdo é inapropriado?

Direitos autorais:

Formatos disponíveis

Fireworks

Enviado por

Direitos autorais:

Formatos disponíveis

Lgica de Programao em Javascript

Fireworks CS4: Design para Web

Fireworks CS4: Design para Web

01/ 2010 - Verso 1.0

Alfamdia Prow (51) 2111-1666 www.alfamidia.com.br

2010 Alfamidia Prow.

Fireworks CS4: Design para Web

A Alfamdia d Boas Vindas aos seus clientes e deseja um excelente treinamento.

2010 Alfamidia Prow.

Fireworks CS4: Design para Web

Fireworks CS4: Design para Web

2010 Alfamidia Prow.

Fireworks CS4: Design para Web

Unidade 1 Organizao do Curso

2010 Alfamidia Prow.

Fireworks CS4: Design para Web

Unidade 1 Organizao do Curso

1.2 Estrutura do Curso

2010 Alfamidia Prow.

Fireworks CS4: Design para web

Unidade 2 Conhecendo o Fireworks CS4

2010 Alfamidia Prow.

Fireworks CS4: Design para web

Unidade 2 Conhecendo o Fireworks CS4

Tela inicial do Fireworks CS4 e principais painis em destaque

2010 Alfamidia Prow.

Fireworks CS4: Design para web

2010 Alfamidia Prow.

Fireworks CS4: Design para web

Tools do Fireworks CS4

Opes da ferramenta Crop

2010 Alfamidia Prow.

Fireworks CS4: Design para web

2010 Alfamidia Prow.

Fireworks CS4: Design para web

2010 Alfamidia Prow.

Fireworks CS4: Design para web

Path Scrubber Subtractive Knife

2010 Alfamidia Prow.

Fireworks CS4: Design para web

Swap Stroke/Fill Colors

Inverte as cores de preenchimento e contorno configuradas

2010 Alfamidia Prow.

Fireworks CS4: Design para web

Menu Window com os painis do Fireworks CS4

2010 Alfamidia Prow.

Fireworks CS4: Design para web

Painis do Fireworks CS4 e boto com opes ocultas

2010 Alfamidia Prow.

Fireworks CS4: Design para web

2010 Alfamidia Prow.

Fireworks CS4: Design para web

2010 Alfamidia Prow.

Fireworks CS4: Design para web

2.2 Formatos de imagens

Forma vetorial no Fireworks CS4

2010 Alfamidia Prow.

Fireworks CS4: Design para web

2010 Alfamidia Prow.

Fireworks CS4: Design para web

2.3 Operaes Bsicas

2010 Alfamidia Prow.

Fireworks CS4: Design para web

Abrindo um arquivo existente