ÍNDICE. MÓDULO 3 Trabalhando com bitmap Export area bitmap (imagens)... 47

Transcrição

1 ÍNDICE MÓDULO 1 Introdução... 2 Apresentação... 3 Novo documento... 5 Réguas, guias e grades... 8 Texto Formas vetoriais pré-definidas Preenchimento (sólido e gradiente) Salvando arquivo Conhecendo um pouco mais: JPG, GIF e PNG Align (alinhamento) Exercício - Botão água Exercício - Flor (parte I) Salvando arquivo MÓDULO 2 Ordem de empilhamento Combine paths (combinar traçados) Layers (camadas) Filters (filtros) Exercício - Flor (parte II) Styles (estilos) Fade image (transparência gradual com imagem) Pen tool (caneta) Exercício - Fio elétrico I MÓDULO 3 Trabalhando com bitmap Export area bitmap (imagens) MÓDULO 4 Gif animado Exercício - Fio elétrico II Exercício extra - Ferramenta respingo de tinta MÓDULO 5 Criando um site Menu pop-up

2 MÓDULO 1 Introdução O Fireworks CS3 é capaz de acelerar o design da web e o desenvolvimento, a ferramenta ideal para criar e otimizar imagens para a web, modelos de sites e aplicativos da web rapidamente. O Fireworks CS3 oferece flexibilidade para editar vetores e imagens de mapa de bits, uma biblioteca geral de recursos pré-desenvolvidos e integração que economiza tempo com o Adobe Photoshop CS3, Illustrator CS3, Dreamweaver CS3 e o Flash CS3. Requisitos do sistema: Sistema Windows Processador Intel Pentium 4, Intel Centrino, Intel Xeon, ou Intel Core Duo (ou compatível) Microsoft Windows XP com Service Pack 2 ou Windows Vista Home Premium, Business, Ultimate, ou Enterprise (certificado para edições de 32 bits) 512MB de RAM (1GB recomendado) 1GB de espaço disponível em disco (é necessário um espaço livre adicional durante a instalação) Resolução de monitor de 1.024x768 com placa de vídeo de 16 bits Unidade de DVD-ROM Software QuickTime 7 necessário para os recursos multimídia Conexão por Internet ou telefone necessário para a ativação do produto Conexão por Internet de banda larga necessária para o Adobe Stock Photos** e outros serviços 2

3 APRESENTAÇÃO Menu: A barra de menu terá todas as ações do Fireworks. Estudaremos as principais. Start Page: Será mostrado na tela Start Page, importantes recursos como: Open a Recent Item: Esta lista que se encontra na parte esquerda da Start Page, mostra arquivos manipulados anteriormente, você poderá clicar em um dos nomes para volta a manipular o arquivo. Create New: Criar um novo documento. Extend: Instalar plug-ins (Recurso adicional para o software). No rodapé desta janela, encontra-se a opção Don t Show Again. Esta opção tira o Start Page da tela inicial do Fireworks, mas você poderá voltar com a tela a qualquer momento, basta você clicar em: Menu EDIT >>> PREFERENCES >>> SHOW START PAGE. 3

4 Observe as figuras: Barras Panel: Temos vários tipos de Panels no Fireworks, como: Align, style, layers e etc. Tools: Ferramentas para trabalhamos como arquivos do Fireworks. Esta barra é dividida 6 partes: Select, Bitmap, Vector,Web, Colors e View. Properties: Serão mostrados recursos nesta parte, quando for pedido um novo documento ou quando alguma ferramenta for selecionada. 4

5 Novo Documento Criaremos agora nosso primeiro documento, que poderá ser criado pela opção CREATE NEW da Start Page ou pelo MENU FILE >>> NEW. Quando clicar em uma das opções, deverá aparecer a seguinte janela: Width (Largura): Largura em PIXELS da nossa área de trabalho (CANVAS). Height (Altura): Altura em PIXELS da nossa área de trabalho (CANVAS). Resolution (Resolução): Resolução do arquivo. A resolução média para a visualização de imagens no monitor vai de 72 ppi (mínimo) a 100 ppi (máximo). Quase todos os computadores utilizam resoluções de tela de ppi (pixels per inch). Canvas Color (Cor da área de trabalho): Temos a opção WHITE (Branco), TRANSPARENT (Transparente) e CUSTOM (Personalizada) que terá uma caixinha para configuração da cor do CANVAS. 5

6 As cores para softwares WEB são definidas em valores hexadecimais. Cores hexadecimais são acompanhadas por um símbolo (#) e mais 6 dígitos. Estes dígitos são: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E e F. Misturando estes números com letras e vice-versa, podemos ter combinações variadas de cores. Definido todos os valores, é só clicar no botão OK. 6

7 A seguir um novo documento criado no Fireworks CS3: Tamanho do documento criado: 468x90 pixels com 72de resolução Cor: #cc0000. Na barra de propriedades estão todas as propriedades relacionadas ao CANVAS. 1º Cor do Canvas A cor do Canvas poderá ser alterado clicando sobre a setinha preta da paleta e escolhendo a cor. 2º Tamanho do Canvas Tamanho poderá ser alterado, clique sobre o botão CANVAS SIZE, e defina o tamanho do Canvas. 3º Tamanho da imagem Esta opção só valerá se o Canvas tiver alguma imagem. Com a imagem selecionada, você poderá aumentar ou diminuir a foto clicando no IMAGE SIZE. 4º Cortar Canvas O Canvas será ajustado de acordo com os objetos desenhados. 7

8 Régua, guias e Grades *Veja vídeo aula no CD-ROM de conteúdo interativo Régua: MENU VIEW >>> RULERS. Réguas servem para alinhar, organizar e distribuir, objetos na tela. Mas temos algo mais para organizar objetos no Fireworks, GUIAS. MENU GUIAS: Show Guides: Visualizar guias. Lock Guides: Bloquear guias. Snap to Guides: Alinhar os objetos pela(s) linhas(s) guia(s). Edit Guides: Editar guias, como, cor da(s) linha(s) guia(s), limpar guias. 8

9 Grades: MENU VIEW >>> GRID Alinhar, organizar e distribuir são recursos da GRID, porém, não podemos alterar as distâncias das linhas e colunas manualmente. MENU GRID: Show Guides: Visualizar grade. Snap to grid: Alinhar pela grade. Edit Guides: Editar grade, como, cor da(s) linha(s) e coluna(s), distância da(s) linha(s) e coluna(s)... 9

10 TEXTO *Veja vídeo aula no CD-ROM de conteúdo interativo Ao selecionar a ferramenta texto, a barra de propriedades ficará da seguinte maneira: Da esquerda para direita: 1º linha: Fonte (Arial, Times New Roman, etc), tamanho da fonte, cor da fonte, estilos (Negrito, Itálico e Sublinhado), opacidade e modo de mesclagem. Observe o exemplo: Fonte Utilizada: Myriad Pro/ Tamanho: 65/ Cor: Branco/ Estilo: Negrito/ Opacidade: 80/ Modo de mesclagem: Normal. Obs: O texto de exemplo é do tipo artístico. Para criar este tipo de texto, basta clicar sobre o canvas e digitar o texto normalmente. 10

11 2º linha: Espaçamento dos caracteres, espaçamento entre as linhas (utilizando com mais freqüência com o texto parágrafo). O espaçamento entre as linhas pode ser medido em porcentagem ou pixels. Orientação do texto (Vertical ou horizontal), alinhamento (Direita, central, esquerdo e Justificado) e Filtros. Os filtros serão listados na caixa branca. Observe o exemplo: Fonte Utilizada: Myriad Pro/ Tamanho: 30/ Cor: Preto/ Estilo: Negrito/ Opacidade: 100/ Modo de mesclagem: Normal/ Espaçamento entre as linhas: 150%/ Alinhamento: Centralizado. Obs: O texto de exemplo é do tipo parágrafo. Para criar este tipo de texto, clique, segure e arraste sobre o canvas a caixa azul, solte, digite seu texto normalmente. 3º e 4º Linhas: As linhas restantes são opções avançadas. Entraremos em detalhes sobre 3 opções. A primeira opção da esquerda para direita é a cor de contorno do texto: Observe o exemplo: 11

12 A próxima opção é a suavização do texto. Observe dois tipos: 1º: NO ANTI-ALIAS 2º: SMOOTH ANTI-ALIAS: A última opção AUTO KERN é o espaçamento automático dos caracteres. 12

13 Formas vetoriais pré-definidas Clique e segure, aparecerão mais formas pré-definidas no Fireworks CS3. Obs: Os pontos amarelos no objeto, são para arredondar os cantos. O ponto na extremidade do objeto, serve para aumentar ou diminuir de tamanho. Outros objetos como: Estrela, polígono, também tem pontos amarelos, mas cada um e configurado de maneira diferente. Nos programas de Web (Fireworks, Flash e Dreamweaver), aparecerão setinhas nas opções das ferramentas. Estas setinhas indicam mais ferramentas. 13

14 Preenchimento (Sólido e gradiente) Preenchimento Sólido O tipo de preenchimento sólido é o básico. Todo software para pintura e desenho tem o preenchimento sólido. Para mudar, colocar efeitos, basta selecionar o objeto e fazer as modificações pela barra de propriedades. Observe o exemplo: 14

15 Preenchimento Gradiente *Veja vídeo aula no CD-ROM de conteúdo interativo O preenchimento gradiente é uma mescla de duas ou mais cores, que se misturam a partir de um caminho, seja ele, linear, radial e outros como veremos agora: Observe o exemplo: 15

16 Salvando arquivo *Veja vídeo aula no CD-ROM de conteúdo interativo Salvando este arquivo como PNG, estaremos salvando o arquivo original do Fireworks CS3. Caso precise mudar a cor, tamanho e outras coisas, só poderão com o arquivo PNG. Finalizado o arquivo, podemos salvar o arquivo em outras extensões. Menu FILE >>> EXPORT PREVIEW (Visualizar Exportação). 16

17 Conhecendo um pouco mais: JPEG, GIF e PNG Formato JPEG O formato JPEG (Joint Pictures Expert Group) é um tipo de arquivo para armazenamento de imagens que pode trabalhar com esquema de cores em 24 bits. Isso significa que este formato aceita 16,8 milhões de cores. O JPEG é um dos formatos de imagens mais populares e isso se deve à capacidade de formar imagens fiéis à original. Além disso, os arquivos em JPEG costumam não serem grandes. O JPEG utiliza um algoritmo de compactação que se baseia na capacidade do olho humano. No entanto, mesmo sabendo-se que arquivos em JPEG podem trabalhar com até 16,8 milhões de cores, o olho humano não é capaz de enxergar todas elas de uma vez. Assim, é possível tirar uma série de informações que representam cores em imagens e manter apenas aquelas visíveis ao olho humano. Em outras palavras, o formato JPEG tira da imagem aquilo que os humanos não conseguem ver. Esse processo é conhecido como compressão. Isso faz com que imagens bastante realistas sejam criadas, ao mesmo tempo em que esses arquivos não ficam pesados. Algo interessante no JPEG, é que os arquivos podem ter diferentes níveis de compressão. Quanto mais existir compressão, ou seja, retirada de informação, menor será o tamanho do arquivo, porém pior será sua qualidade. Assim, se você for disponibilizar imagens na internet, é interessante mantê-lo em um tamanho pequeno. No entanto, se a imagem for utilizada em um documento, muitas vezes é melhor mantêla com o máximo de qualidade possível, para que a impressão seja satisfatória. Uma desvantagem do JPEG é que a imagem normalmente perde qualidade a cada vez que o arquivo é salvo. Os arquivos em JPEG têm a extensão.jpg. Por exemplo, cursos.jpg. Formato GIF O formato GIF (Graphics Interchange Format) é um tipo de arquivo para imagens que trabalha com uma paleta de 256 cores e foi criado pela empresa CompuServe, em Isso faz com que o GIF não seja recomendável para figuras que precisam de aproximação da realidade, a não ser que a imagem em questão seja em preto e branco (escala de cinza). Devido a essa característica, o uso do formato GIF é voltado para ícones ou imagens que não precisam de muitas cores (ilustrações, por exemplo). Apesar deste formato parecer limitado devido ao número baixo de cores com que trabalha, o GIF é muito utilizado por alguns recursos que oferece. Um deles é a capacidade de utilizar fundo transparente. Com isso, é possível, por exemplo, que um site publique uma imagem em GIF e esta terá como fundo a cor da página. Além disso, o GIF permite que uma seqüência de imagens sejam salvas em um único arquivo, onde cada imagem surge no lugar da anterior após um tempo pré-determinado. Isso dá a sensação de animação. O GIF utiliza um formato de compressão que não altera a qualidade da imagem a cada salvamento, como ocorre com o JPEG. Considerando esta forma de compressão juntamente com a capacidade de trabalhar apenas com 256 cores, o GIF consegue criar imagens com tamanho bastante reduzido. Isso foi essencial para o início da internet, onde a velocidade era bem mais baixa que a dos modems de 56 K. A extensão dos arquivos no formato GIF é.gif. Por exemplo, cursos.gif. 17

18 Formato PNG O formato GIF utiliza uma forma de compressão conhecida como LZW (Lempel-Ziv-Welch), que consiste em um algoritmo para o tratamento de imagens criado pela empresa Sperry Corporation, que tempos depois foi comprada pela empresa Unisys. Esta, em 1994, anunciou que cobraria royalties (uma espécie de taxa para poder utilizar a tecnologia) dos desenvolvedores de softwares para trabalhos gráficos que suportam o formato GIF. Devido a isso, em 1996 foi lançado um formato criado para concorrer com o GIF e que era melhor que esse: o PNG (Portable Network Graphics). O PNG é interessante porque consegue trabalhar com esquema de 24 bits de cores, ou seja, 16,8 milhões de cores. No entanto, em comparação com o JPEG, a compressão obtida é mais eficiente e não proporciona perda de qualidade a cada salvamento, o que permite maior fidelidade à imagem original. Além disso, as imagens em PNG não requerem muito espaço, podendo-se ter figuras de alta definição e tamanho em bytes pequeno. Ainda assim, o JPEG costuma ter imagens de tamanho ainda menor em alguns casos. O PNG também possui o recurso de transparência, o que o faz uma excelente alternativa ao GIF neste caso, pois é possível ter imagens com fundo transparente, mas com o objeto utilizando um número muito maior de cores. As imagens no formato PNG possuem extensão.png. Por exemplo: cursos.png. Finalizando São poucos os que não se importariam em utilizar a internet sem imagens. Graças aos formatos JPEG, GIF e PNG, foi possível utilizar figuras em várias aplicações. Até mesmo o layout das páginas de internet utiliza estas imagens. É importante frisar que existem vários outros tipos de formatos para imagens. Cada um possui características e finalidades diferentes. Mas não há dúvidas de que se você for utilizar alguma imagem na internet, os formatos explicados neste artigo são os ideais, pois além de suas particularidades, são compatíveis com uma infinidade de programas, independente de sistema operacional. 18

19 Align (alinhamento) *Veja vídeo aula no CD-ROM de conteúdo interativo. Salvando este arquivo como PNG, estaremos salvando o arquivo ORIGINAL do Fireworks CS3. Caso precise mudar a cor, tamanho e outras coisas, só poderão com o arquivo PNG. FINALIZADO o arquivo, podemos salvar o arquivo em outras extensões. 19

20 Exercício Botão água 1º Crie um novo documento 153x50 Pixels: 2º Após feito isso crie um retângulo com a ferramenta RECTANGLE TOOL 100x37 Pixels, com o preenchimento linear, de forma que fique parecido com isto: As cores utilizadas foram as seguintes: 20

21 3º Após isso aplique um Effects >>> Shadow and Glow >>> Glow: Deixando as propriedades da seguinte forma: 4º Agora, crie um novo retângulo com a RECTANGLE TOOL, cobrindo metade do retângulo, na cor #FFFFFF (sem aspas) da seguinte maneira: 5º Logo após, modifique sua transparência para 40 ( ALPHA ): 6º Vamos agora arredondar nosso botão, modifique o RECTANGLE ROUNDNESS para 40: Botão água FINALIZADO! 21

22 EXERCÍCIO Flor (parte i) 1º Crie um novo documento de 300px height por 300px width e fundo branco. 2º No painel de ferramentas vetor selecione a opção Star e clique no palco. Automaticamente surgirá uma estrela com o tamanho definido em 190px height por 181px width. Esta estrela contém pontos de controle (amarelo) em posições específicas, trata-se de um auto-shape (forma automática) do Fireworks. Veja em detalhe: 22

23 3º Crie um mais uma ponta nesta estrela, de cinco vamos para seis. Para dar a forma desejada, é preciso arrastar o ponto de controle arredondamento exterior. A forma vai diminuir e ficar mais ou menos com este aspecto: 4º Aumente a forma com a ferramenta Scale tool (atalho: Q). 23

24 5º Selecione a forma e no painel de propriedades clique em preenchimento, escolhendo a opção gradient > radial. Resultado: 6º Duplique a forma (ctrl + c e ctrl + v ou ctrl + shift + d) e em seguida diminua com Scale tool (atalho: Q) para posicioná-la ao centro: Em detalhe a cópia posicionada ao centro: Salve o arquivo como flor.png. 24

25 Salvando arquivo Arquivos feitos no Fireworks, terão extensão *.PNG. Menu File >>> Save (Salvar) ou Save As (Salvar como), caso esteja utilizando o arquivo já salvo. 25

26 MÓDULO 2 Ordem de empilhamento *Veja vídeo aula no CD-ROM de conteúdo interativo. Objetos criados em programas 2D como o Fireworks CS3 são empilhados (ORDEM) em ordem de criação. Se criar uma bola no canvas, ela terá ordem de empilhamento 1 (Primeiro Nível). Quando criar outro objeto, este terá ordem 2 (segundo Nível). Esta ordem de empilhamento poderá ser alterada de 3 maneiras que veremos a seguir: 26

27 1º Botão direito no objeto, opção ARRANGE (Organizar). Bring to Front: Objeto selecionado será colocado acima de todos. Bring Forward: Objeto selecionado será colocado acima de outro objeto com um nível maior. Exemplo: Bola Nível 2 Quadrado Nível Mudança: Bola Nível 3 Quadrado Nível 2. Send Backward: Objeto selecionado será colocado abaixo de outro objeto com um nível menor. Exemplo: Bola Nível 3 Quadrado Nível Mudança: Bola Nível 2 Quadrado Nível 3. Send to Back: Objeto selecionado será colocado abaixo de todos. 27

28 2º Menu MODIFY >>> ARRANGE (Organizar). 3º Utilizaremos o painel Layers. Até o momento não utilizamos nenhum painel. Todos os painéis se encontram no MENU WINDOW. O Fireworks não tem uma organização tão boa como o PHOTOSHOP CS3, então teremos que organizar nossos painéis conforme a necessidade. Observe na janela do Fireworks CS3 a seguinte setinha: 28

29 Clique com o botão direito do mouse, escolha a opção CLOSE PANEL GROUP. 29

30 Feche todos os painéis. Clique no MENU WINDOW >>> LAYERS. r 30

31 Combine Paths (Combinar Traçados) Com as formas pré-definidas que estudamos no 1º capítulo, dará para fazer muitos objetos, mas, conseguindo combinar objetos como retângulo com cantos arredondados e a estrela, teremos uma gama ainda maior de objetos. Além de unir objetos, podemos, cortar, criar objetos a partir da interseção e etc. JOIN (Combinar) INTERSECT (Interseção) CROP (Corte) UNION (União) PUNCH (Perfurador) 31

32 Layers (Camadas) Utilizamos camadas para organizar os objetos no canvas, tratar imagens. Ajuda também a criar GIFS ANI- MADOS com o fundo estático (PARADO). Utilizaremos camadas para criar ilusões, com os modos de mesclagem. O modo de mesclagem só funciona se tivermos duas camadas ou mais. Observe o painel LAYERS e a opção modo de mesclagem. Habilitando o modo de mesclagem com duas imagens: Imagem 1 Imagem 2 32

33 Utilizando o modo de mesclagem: Basta seleciona a imagem que estive por cima da imagem de nível 1. Modo de mesclagem DIFFERENCE. 33

34 Filters (Filtros) Os filtros são efeitos como sombra, brilho (imagem), efeitos de borda e etc. Para habilitar e criar efeitos com filtros, basta desenhar um objeto (Elipse, retângulo), importar uma imagem ou um texto. Novidade do Fireworks CS3 para os filtros é a opção PHOTOSHOP LIVE EFFECTS. Você poderá adicionar vários efeitos ao mesmo tempo. 34

35 Exercício FLOR (PARTE II) 7º Com a cópia selecionada vamos usar quatro filtros em seqüência. Shadow and Glow > Inner glow Noise > add noise: Blur > zoom blur: E Sharpen > Sharpen more: 35

36 Olhe como já vai tomando forma: 8º Duplique a forma do centro e diminua um pouco: Em seguida posicione também ao centro: 9º Através do ponto de controle de adição de lados, vamos criar até o número 18: 36

37 10º Selecione está última forma duplicada e altere para preto a seguinte cor de seu preenchimento radial: Basta selecionar todos os objetos, agrupá-los (Ctrl + G) e em seguida adicionar sombra em Filters > Shadow and Glow > Drop shadow: 37

38 STYLES (Estilos) Acesse o painel styles. Menu WINDOW >>> STYLES. 38

39 Clicando sobre o estilo preferido, o objeto pegará todas as características. Estilo nada mais é que combinações de vários filtros. 39

40 Fade Image (Transparência gradual com imagem) Este efeito é ótimo para criações de layouts. A imagem selecionada terá uma transparência gradual, a partir de um ponto definido por você. Observe o exemplo de topo do layout. Selecione a imagem, clique no MENU COMMANDS >>> CREATIVE >>> FADE IMAGE. 40

41 Pen Tool (Caneta) *Veja vídeo aula no CD-ROM de conteúdo interativo. Utilizaremos à ferramenta caneta para desenhar objetos, criar novas formas e selecionar com perfeição alguma área da foto. Na barra de ferramenta, na área VECTOR >>> PEN TOOL. A barra de propriedade tem as mesmas opções das formas pré-definidas do Fireworks. Exercício Vetorizando a BORBOLETA do MSN 41

42 EXERCÍCIO Fio elétrico I Tecle Ctrl + N ou selecione Arquivo >>> Novo para abrir a caixa de diálogo Novo documento, conforme mostrado na figura abaixo. Ajuste as dimensões de Canvas para: Largura: 500 pixels - Altura: 150 pixels Cor da Tela: #FFFFFF. Tecle OK. Vamos desenhar um trecho do fio em forma de S invertido e deitado. A ferramenta caneta (pen tool) é a apropriada para a tarefa. Escolha uma cor de traço escura e selecione a ferramenta caneta. Acompanhe a numeração dos itens a seguir com os números na figura. 1º Clique e solte; 2º Clique, mantenha pressionado, arraste na direção da seta e solte; 3º Clique, mantenha pressionado, arraste na direção da seta e solte; Concluído este passo você terá que largar a ferramenta caneta. Clique na ferramenta de seleção seta e selecione o S que você acabou de construir. 4º Clique e arraste as alças do S fazendo os ajustes de curvatura necessários. 42

43 A espessura e a cor do fio Estamos com a forma do fio já definida e desenhada com a ferramenta caneta. Vamos a seguir escolher a cor e também uma espessura para o fio. Selecione o fio e defina uma cor, uma espessura e um estilo para o traçado. Observe na figura abaixo estes elementos ajustados para: cor: preta (#000000); espessura: 10px; estilo: 1Pixel Soft (Pencil) Edge e Texture: 0 e Grain 0 (valores default). Escolha uma cor em tom escuro, pois adiante precisaremos da mesma cor em tom claro. Nota: Tendo entendido a técnica de construção do fio, você deverá alterar os valores, pesquisar e adaptar para obter outros efeitos no fio. Efeito cilíndrico no fio 1º Selecione o fio e clone; Para clonar use Ctrl + Shift + D ou Clique com o botão direito em cima do fio => Edit=>Clone Olhe no painel Layers e você verá que surgiu a duplicação (clonagem) do fio. 2º Temos agora duas instâncias iguais do fio, uma sobre a outra. Certifique-se de selecionar a instância do fio que está acima (oriente-se pelo painel Layers ) Defina uma espessura de 4px e uma cor em tom mais claro daquela escolhida para o fio (neste tutorial usei a cor cinza #999999); Veja o resultado na figura abaixo. 43

44 Retoque no efeito Vamos aplicar um retoque nesta instância que acabamos de construir (a cinza claro). Selecione a instância e aplique Efeito => Blur => Gaussian Blur => Radius=1.6 Transformando em Bitmap Para as etapas seguintes precisaremos transformar nosso desenho vetorial em bitmap. Selecione as duas instâncias do fio e tecle Ctrl +Shift + Alt +Z ou clique com o botão direito sobre as instâncias selecionadas e Flatten Selection ou menu Modify => Flatten Selection. Agora observe no painel Layers que os ícones de dois Path transformaram-se em um ícone de Bitmap Aparando as extremidades Vamos aparar as extremidades do fio que estão abauladas. Observe na figura um zoom mostrando a extremidade do fio. A esquerda como o ANTES e a direita o DEPOIS. Dê um zoom em uma extremidade; selecione o fio e com a ferramenta Polygon Lasso desenhe o polígono mostrado a esquerda na figura, fazendo um lado perpendicular ao fio. Fechado o polígono tecle Delete e depois Esc e você terá a extremidade aparada como mostrado a direita na figura. Repita para a outra extremidade do fio. 44

45 O fio de cobre 1º Desenhe um retângulo de 6 x 20 px; 2º Aplique um preenchimento gradiente linear com as cores e faixas mostradas; as cores da esquerda para direita são: # #CC #FFCC33 - #FFCC33 - #CC #CC # # Ajuste o preenchimento até obter um aspecto semelhante ao mostrado na figura abaixo. Agora observe a sequência das letras A-B-C-D da figura. A) Selecione o retângulo e menu Modify => Transform => Skew rode até ficar paralelo ao fio; B) O retângulo na posição paralelo ao fio, após ter sido rotacionado como acima; C) Arraste o retângulo para a posição indicada e ele ficará sobre o fio (na frente); D) Vá ao painel Layers e arraste o ícone do retângulo para baixo do ícone do fio (Bitmap), posicionando-o atrás. Faça uma cópia do retângulo e coloque-o na outra extremidade do fio. Uma sombra final Vamos finalmente acrescentar uma sombra para dar mais realismo a nossa obra. Selecione tudo e Effects => Shadow and Glow => Drop Shadow ajuste os parâmetros da sombra e pronto! Está terminado o fio elétrico. 45

46 MÓDULO 3 Trabalhando com BITMAP Além de utilizar filtros em bitmaps, podemos manipular nossas imagens. Podemos clonar partes da imagem, ajusta cor, excluir partes indesejáveis e muito mais. 1º Ferramenta seleção marquee e oval marquee. 2º Ferramenta seleção lasso e polygon. 3º Ferramenta seleção magic wand. 4º Ferramenta brush. 5º Ferramenta pencil. 6º Ferramenta eraser. 7º Ferramenta blur, sharpen, dodge, burn e smudge. 8º Ferramenta rubber stamp, replace color e red eye. 46

47 Export area BITMAP (Imagens) A ferramenta export área, exportará uma área definida como JPEG ou GIF. Utilizamos está opção quando queremos miniaturas das imagens. Por exemplo, acesse a página: São mais de 50 miniaturas, e exportá-las, não é uma tarefa muito fácil. Utilizaremos export area, para agilizar o processo. Área criada aperte ENTER. Image preview (prévia da imagem). 47

48 Mask (Máscara) *Veja vídeo aula no CD-ROM de conteúdo interativo. Abra a imagem no Fireworks. Abra o painel LAYERS: Crie vários objetos por cima da foto: 48

49 Selecione todos os objetos, recorte (CTRL+X). Selecione a imagem pelo painel LAYERS. Vá ao MENU EDIT >>> PASTE AS MASK. 49

50 MÓDULO 4 Gif animado *Veja vídeo aula no CD-ROM de conteúdo interativo. Imagens com qualidade inferior animada em vários quadros. Acompanhe a figura: 50

51 Colocando essa seqüência de imagens passando com tempo determinado, criaremos uma animação. O GIF ANIMADO foi muito utilizado em sites, mas sua segurança tirou a sua produção em escala. Para animações em seqüência vamos utilizar o FLASH CS3. Para criar uma seqüência de imagens utilizamos o painel FRAMES. MENU WINDOW >>> FRAMES. 51

52 Exercício Fio elétrico II Construa os dois fios elétricos conforme foi feito no exercício do capítulo anterior. Você deverá estar com os dois fios construídos no palco do seu FW conforme mostrado na figura: Os seis primeiros frames da animação Acompanhe abaixo os seis primeiros frames da animação, construindo-os conforme explicado a seguir: 1º Quando você terminar de construir os dois fios elétricos conforme mostrado na figura do item anterior tecle Shift + F2 para abrir o painel frames. Observe que no painel consta somente o Frame 1. 2º Clique no canto superior direito do painel frames para abrir o menu do painel e escolha Duplicar frame >>> 1 Frame >>> Depois do frame atual para criar novo frame igual ao Frame 1. Observe que no painel agora constam dois frames. 3º Com o Frame 2 selecionado desenhe no palco com a ferramenta pen um traçado unindo as duas extremidades do fio elétrico. Assim: Dê um zoom nas extremidades dos fios e selecione a ferramenta pen. Clique e solte junto a extremidade do fio de cima. Vá clicando e soltando em direção ao fio de baixo até completar o traçado. No final você deverá ter no Frame 2 um traçado como mostrado no quadro 5 abaixo. Use a cor #CCFFCC. 4º Selecione o Frame 2 clique no canto superior direito do painel frames para abrir o menu do painel e escolha Duplicar frame ==> 4 Frames ==> Depois do frame atual. Com esta ação você criará 4 (quatro) Frames após o Frame 2 e terá agora um total de 6 (seis) Frames: Frame 1: Os dois fios Frames 2,3,4,5,6: iguais ao quadro 5 da figura abaixo. 52

53 5º Vamos agora colocar nossos Frames conforme mostrado nos quadros da figura abaixo. A) Selecione o Frame 2 e no palco selecione o traçado que você construiu com a ferramenta pen unindo as pontas dos fios. Com a ferramenta faca corte um pedaço de baixo do traçado, obtendo o que mostra o quadro 2 da figura abaixo. Repita este procedimento de corte com a ferramenta faca para os Frames 3 e 4, fazendo os cortes mais abaixo. Ver quadros 3 e 4 na figura a seguir. Deixe o Frame 5 como esta. 6º Selecione o Frame 6 e desenhe um círculo pequeno sobre o traçado. Use a cor de preenchimento #CCFFCC e sem traço em volta. Selecione o círculo que você acabou de desenhar e aplique Efeito ==> Glow ==> 5-90% Você deverá obter o efeito como mostrado no quadro 6 da figura a seguir. Os Frames 7 e 8 Crie os Frames 7 e 8 duplicando o frame 6. 1º Selecione a bolinha do Frame 7 e altere o Efeito Glow para: 6-100% º Selecione a bolinha do Frame 8 e altere o Efeito Glow para: 5-100% Crie outra bolinha no traçado e aplique o Efeito Glow com: 5-100%

54 Veja na figura abaixo os Frames 7 e 8 A técnica dos Frames Crie o Frame 9 igual ao Frame1 e deixe-o assim; Agora vá criando os seguintes e alterando os parâmetros do Efeito Glow em cada um deles para ir obtendo os efeitos de centelhamento. Para finalizar atribua os tempos de duração de cada Frame. Os parâmetros de tempo usados neste tutorial Abaixo forneço os parâmetros de tempo de duração dos frames que usei para obter os efeitos mostrados neste tutorial. Altere a vontade para obter efeitos diferentes. Duração dos Frames: Frame 1-100; Frame 2 até Frame 6-9; Frame 7-2; Frame 8-12; Frames 9 e 10-8; Frame 11-2; Frame 12-15; Frame

55 Exercício Extra Ferramenta Respingo de tinta Objetivo Criar uma imagem semelhante, ou melhor, que esta: Para começar identifique a ferramenta Reshape Area: Crie um círculo de qualquer cor e tamanho, mas que contraste com a tonalidade do palco. Em cima deste círculo nós vamos trabalhar com a ferramenta Reshape fazendo suaves movimentos para cima e para baixo até que fique com este aspecto: Distorcendo em parte as extremidades do círculo com a ferramenta configurada em 3px de espessura (Size) e 100 (Strength). 55

56 Completando toda a circunferência e alternando os valores da Reshape é obtenha este resultado: Duplique este respingo e em seguida diminuí-lo para distorcer: Dduplique e distorça pelo menos 6 vezes e posicione cada respingo com coerência: 56

57 MÓDULO 5 Criando um site Acesse o trabalho: Neste módulo, utilizaremos ferramentas para criação do site ROTA TURISMO. Hot Spot (Ponto Ativo) A ferramenta HOT SPOT, é muita utilizada quando queremos ter um ponto em uma imagem com um link. Por exemplo: Estudo do corpo humano. Imagine que cada nome quando for clicado nos levará a uma pagina informativa sobre aquele assunto. 57

58 Slice (Fatia) A ferramenta slice, é utilizada para cortar o layout, diminui o tamanho da imagem (carregando os pedaços), criar área de link, efeitos rollover em imagens e menu pop-up. 58

59 Layout Fatiando: Neste layout acima, será fatiado áreas importantes como: MENU, FALE CONOSCO, HOME/ NOVIDADES, NOTÍCIAS, DESTAQUE e PERGUNTA. 59

60 As áreas que não contém a área verde foram fatiadas. Não precisamos fatiar todas as partes do layout. Vá ao MENU FILE >>> EXPORT. Observe a lista de arquivos dentro da pasta imagens: 60

61 Add Swap Image Behavior (Imagem rollover) Acesse: Passe o mouse sobre os textos do lado esquedo: Os textos têm ligações com imagens. A área do lado direito está como molde para as outras imagens. Acompanhe o passo-a-passo desse efeito. 1º Crie um novo documento 800x600 pixels com 72 dpi s de resolução. 2º Insira duas imagens e coloque no tamanho de 204x153 pixels. 61

62 3º Crie um retângulo de 520x450 pixels. Ele servirá como molde para as imagens maiores. Clique com o botão direito do mouse sobre o retângulo, e escolha INSERT RECTANGULAR SLICE. Criamos uma fatia no retângulo. Faça o mesmo com as duas imagens. 4º Com a primeira imagem selecionada, aparecerá um mira. Está mira terá que apontar para o retângulo. Clique segure e arraste para o retângulo. 62

63 5º Clique no botão More options. As imagens serão carregadas no retângulo. Observe nesta janela do lado direito, que o retângulo está selecionado. Marque a opção IMAGE FILE e clique sobre a pastinha do lado direito ( ). 63

64 6º Localize a mesma imagem, que criou este efeito. Clique no botão ABRIR, logo após no botão OK. Feito para primeira foto, faça o mesmo para a segunda (4º passo). 7º Para visualizar o que foi feito, aperte F12 do teclado. O navegador padrão do seu computador será aberto, com isso você poderá visualizar o efeito rollover das imagens. 64

65 Menu pop-up *Veja vídeo aula no CD-ROM de conteúdo interativo. Obs.: Arquivo utilizado para criação do menu pop-up no CD-ROM. Acesse: 1º Crie uma fatia sobre o botão arquivos: Clique sobre a mira da fatia, e selecione a opção ADD POP-UP MENU. 65

66 2º Digite os nomes como mostrado na próxima figura: 3º Clique na guia APPEARANCE (Aparência). Coloque os valores como mostrado na figura: Obs.: UP STATE (Estado original, como é o botão). OVER STATE (Estado mouse por cima do menu) 66

67 4º Clique na guia ADVANCED (Avançado). Coloque os valores como mostrado na figura: 5º Clique na guia POSITION (Posição). Deixe os valores mostrados. 6º Posicione o menu pop-up como a figura. Obs.: Clique sobre a linha a azul do menu e arraste para o lugar indicado. Obs.: Aperte o botão F12 para visualizar o menu. 67