Conteúdo 1. OBJETIVO DO FIREWORKS... 2 1.1 - Diferença entre imagem Vetorial e Bitmap... 2 1.2 - Formato de Arquivos... 3 2. AMBIENTE DO FIREWORKS... 3 2.1 - INICIANDO UM PROJETO... 4 3. DESENHANDO NO FIREWORKS... 5 3.1 - FERRAMENTAS DE SELEÇÃO... 5 3.2 FERRAMENTAS DE DESENHOS VETORIAIS... 5 3.3 PAINEL DE PROPRIEDADES... 5 3.4 CORES E PRENCHIMENTOS... 6 3.4 TRABALHANDO COM TEXTOS... 8 4 TRATAMENTO DE IMAGENS BITMAP... 10 4.1 FERRAMENTAS BITMAP... 10 5. OTIMIZAÇÃO... 14 5. EXPORTANDO O ARQUIVO... 15 6. CAMADAS / LAYERS E ANIMAÇÕES... 16 7. ANIMAÇÕES... 17 8. RECURSOS PARA WEB... 19 8.1 HOTSPOT... 19 8.2 BOTÕES... 20 9. CRIANDO UM SITE... 21 1
1. OBJETIVO DO FIREWORKS Fireworks é um software para criação de imagens que serão utilizadas na construção de sites para Internet. Com este programa, é possível construir, desde um simples botão, até imagens mais complexas. Utilizando o Fireworks, você pode dividir imagens da Web para mesclar tipos de compactação e formatos de arquivos para transferências muito rápidas. Também é possível incorporar efeitos de rollover 1 em imagens divididas, dividir blocos de textos como gifs, colocar fotos como jpgs totalmente coloridos, gerar automaticamente uma tabela HTML para reorganizar suas imagens divididas. 1.1 - Diferença entre imagem Vetorial e Bitmap Normalmente há 2 tipos de imagens no computador: objetos vetoriais criados em aplicativos com o FreeHand da Macromedia ou Corel Draw e imagens bitmap criadas com aplicativos como Photoshop. Objetos vetoriais são compostos por caminhos e, objetos bitmap são compostos por pixels individuais. Como foi dito antes, o Fireworks combina a aparência maleável do objeto bitmap com a flexibilidade, controle e capacidade de edição de caminhos em um único ambiente. Anotações: 1 Rollover: Troca de imagem quando passa o mouse sobre ela. 2
1.2 - Formato de Arquivos Os formatos de arquivos mais utilizados para Internet são o JPG e o GIF, pois são os formatos que mais compactam o arquivo, os deixando assim menores e mais rápidos para serem visualizados. GIF: O formato gif é usado para imagens de cores sólidas, podendo conter áreas transparentes ou arquivo de animação. Contem 256 cores. JPG: Geralmente usado para imagens com grande quantidade de cores. Trabalha com compactação de cores. Contem 16 milhões de cores. Quando salvamos um arquivo no Fireworks ele gera um arquivo no formato PNG, que também pode ser usado nos sites, mas não é aconselhável. Porém, como já sabemos, o Fireworks é um programa para gerar arquivos de imagens para Internet, mas para que o Software gere os arquivos JPG e GIF devemos exportá-los. Vamos aprender a exportar os arquivos mais adiante. 2. AMBIENTE DO FIREWORKS Ao iniciar o Fireworks aparecerão as barras de menu, caixas de ferramentas e vários painéis. Porém ele não inicia com um documento. 3
2.1 - INICIANDO UM PROJETO Ao contrário de alguns softwares, o Fireworks não gera um arquivo novo imediatamente, ele pede para configurar o novo arquivo conforme a sua necessidade. Anotações: 4
3. DESENHANDO NO FIREWORKS 3.1 - FERRAMENTAS DE SELEÇÃO Com as ferramentas de seleção é possível selecionar objetos vetoriais com a ferramenta Pointer, selecionar os pontos de um objeto vetorial com a ferramenta Subselection, além de dimensionar os objetos ferramenta Scale e cortar parte do documento dimensionando o tamanho da área de trabalho (canvas) com a ferramenta Crop. 3.2 FERRAMENTAS DE DESENHOS VETORIAIS As ferramentas de desenhos vetoriais auxilia no desenvolvimento de desenhos com: Segmentos de reta (linha); Objetos pré-determinados como retângulos, elipses, estrelas, setas, entre outros; Texto (texto); Criação de retas e manipulação de pontos (caneta); Cortar linhas do objeto, transformando-o em 2 (faca); Manipular os pontos em curvas. 3.3 PAINEL DE PROPRIEDADES Para cada uma das ferramentas, tanto as vetoriais quanto as de bitmap, existem configurações especificas, como cor de preenchimento, cor de linha, tipo da fonte, entre outros. Todas essas configurações estão no painel de propriedades, geralmente posicionado na parte inferior da janela. 5
DICAS Para desenhar quadrados, círculos ou polígonos proporcionais é preciso manter a tecla Shift pressionada. Para desenhar quadrados ou retângulos com cantos arredondados, pressione a tecla seta para cima e acentuar o arredondamento e seta para baixo para diminuir o arredondamento. Mantendo a tecla Shift pressionada enquanto arrasta o mouse com a ferramenta de desenho, você estará desenhando objetos mantendo o centro como referência. Segmento reto Utilizando a Ferramenta Caneta - Selecione a ferramenta caneta; - Clique e solte o botão do mouse, marcando o ponto inicial; - Posicione o cursor em um novo local e clique; - Para finalizar dê duplo clique. Segmento em curva - Selecione a ferramenta caneta; - Clique e arraste o botão do mouse, criando um ponto com hastes de controle 2. - Posicione o cursor em um novo ponto, clique e arraste. Uma curva será desenhada entre os pontos; - Para finalizar, dê duplo clique sobre o último ponto. 3.4 CORES E PRENCHIMENTOS Existem 3 maneiras de escolhermos as cores de preenchimento e cores de borda, ou seja, da linha de contorno. 1. Amostragem de cores da Barra de Ferramentas A barra de ferramentas oferece as opções de cores para alterar a cor de preenchimento ou a cor da linha, onde: O balde altera a cor do preenchimento do objeto vetorial selecionado; O lápis altera a cor da linha do objeto vetorial selecionado; O conta-gotas permite a escolha de uma cor que não esteja na paleta de cores; 2 Hastes de contole: Permite o controle das curvas do objeto. 6
2. Amostragem de cores pelo Painel de Propriedades No Painel de Propriedades, além de controlar as cores como na barra de ferramentas, também podemos aplicar preenchimentos e texturas nos objetos vetoriais selecionados e configurar o contorno do objeto. Através desse painel, podemos aplicar preenchimentos com cor sólida, cor padrão e gradiente, também podemos aplicar uma textura sobre o preenchimento. Exemplos: Preenchimento cor sólida Preenchimento Gradiente tipo Radial Preenchimento Gradiente tipo Radial com textura Onix 3. Amostragem de cores pelo Misturador de Cores O misturador de cores se localiza do Aldo direito da janela, nos painéis laterias. Observe que nas 3 opções de configuração das cores, as ferramentas são as mesmas - balde e lápis. Anotações: 7
3.4 TRABALHANDO COM TEXTOS O Fireworks fornece muitos recursos para formatar textos. Para isso selecionamos a ferramenta Texto clicamos na área do documento e digitamos o texto necessário. No Painel de Propriedades é possível formatar a fonte, tamanho, alinhamento, espaçamento, acabamento, etc. Texto ao caminho - Desenhe uma linha com a ferramenta Lápis ou Caneta; - Digite um texto com a ferramenta Texto; - Selecione os dois objetos (texto e linha); - Aplique o comando Texto / Anexar ao Traçado. Convertendo texto em traçado Quando o texto é convertido para traçado, ele não poderá mais ser alterado ou editados como texto, porém, quando ele é alterado é possível trabalhar com as letras separadamente. Para isso, com o texto selecionado, escolha a opção Converter para Traçados no menu Texto ou Ctrl + Shift + P. Lembrando que deve-se desagrupar 3 para podermos tratar cada letra separadamente. 3 Para desagupar, clique CTRL + SHIFT + G 8
PRÁTICA: Reproduza as imagens abaixo Exemplo_01 Exemplo_02 Exemplo_03 Exemplo_04 DICAS Para copiar objetos vetoriais, selecione-o com a ferramenta Pointer, segure e arraste o objeto segurando a tecla ALT. Teste os filtros que estão no Painel de Propriedades, como sombra, efeito de bordas, brilho, etc. Recorte a área de trabalho (tela) na mesma medida do trabalho. Para isso vá em Modificar Canvas Trim Canvas. 9
4 TRATAMENTO DE IMAGENS BITMAP 4.1 FERRAMENTAS BITMAP O Fireworks permite a edição de imagens bitmap e, as ferramentas para essa edição são: Ferramenta Marquee: Com essa ferramenta, é possível criar seleções de maneira retangulares e elípticas. Para acessar as opções de seleção, clique na setinha no canto inferior direito. Ferramenta de Laço: A ferramenta laço permite fazer seleção a mão livre. Existem duas variações: Laço: faz seleção a mão livre, ou seja, por onde passa o mouse, como o botão pressionado, é criado um contorno de seleção, ao soltar o botão mouse a seleção se fechará automaticamente. Polígono: faz seleção através de segmento de retas, a cada clique o mouse é um novo segmento. Para finalizar o último ponto tem que se unir ao primeiro ponto, ou com duplo clique ele se fecha automaticamente. 10
Ferramenta Varinha Mágica : A ferramenta de seleção Varinha Mágica, permite selecionar cores vizinhas de mesmo tom. É possível controlar o nível de tolerabilidade no Painel de Propriedades no campo Tolerância. Quanto maior o número, maior será os tons de cores selecionados. OBSERVAÇÕES Geralmente, as áreas selecionadas são para: - serem deletadas: por exemplo, quando queremos tirar um fundo de uma foto; - colorir apenas aquela área selecionada, sem comprometer o restante da imagem; - rotacionar ou dimencionar. Para retirar a seleção, tecle: Ctrl + D Em todos os tipos de seleção, o painel de Propriedades oferece: Ferramenta Carimbo Essa ferramenta é utilizada para copiar uma determinada região da figura, é excelente para retocar figuras. Para utilizar essa ferramenta, é necessário: - selecioná-la clicando sobre a ferramenta; - informar a área a ser copiada com a tecla Alt pressionada, clicar sobre a região que deseja copiar, aparecerá um círculo azul sobre a área; - clicar onde deseja copiar a imagem. 11
Anotações: 12
PRÁTICA: 1. Reproduza a imagem abaixo. (As imagens estão anexadas no site junto a apostila). 2. Retire o fundo da imagem do Simpsons 3. Utilizando as imagens anexas crie outras montagens. 13
5. OTIMIZAÇÃO Para trabalhar com imagens para Web, é preciso ter uma preocupação com o tamanho da imagem, para que ela seja carregada rapidamente no site e com uma qualidade boa. Para que isso aconteça, você terá que reduzir o número de cores e selecionar o formato que tenha o melhor método de compactação. Esse processo se chama otimização. Em outras palavras, encontrar a mistura certa de cores e compactação sem comprometer a imagem. Comparando os parâmetros de otimização O ideal é comparar a mesma imagem em diferentes parâmetros de otimização. Para isso o Fireworks oferece um recurso de comparação de imagens com a original até 4 janelas. 14
Curiosidades Opções da Paleta de Cores Adaptiva É uma paleta de cores personalizada, derivada das cores do documento atual. Produz imagem com boa qualidade e com tamanho pequeno. Web Snap Adaptiva São cores entre a paleta 216 da Web e a paleta Adaptive. Cores dentro de uma certa tolerância são alinhadas a cores Web Safe mais próximas. Web 216 Conhecida também como Web Safe ou Browser Safe, é uma paleta com 216 cores comuns entre os computadores Macintosh e Windows. Gera um melhor resultado em plataforma e navegadores diferentes. Exata Contém cores exatas usadas na imagem. Quando a imagem possui mais de 256 cores a paleta é trocada automaticamente para Adaptiva. Tons de Cinza ou Grayscale Paleta de cores com tons de cinza. Inverte a imagem para tons de cinza. Preto e Branco Possui 2 cores: branco e preto Uniforme Paleta matemática baseada em valores de pixel RGB. Personalizada Paleta que foi modificada. 5. EXPORTANDO O ARQUIVO Depois que foi escolhido o melhor formato para a imagem, podemos exportá-la. Para isso, clique em Arquivo / Exportar. Escolha o diretório, digite o nome do arquivo e clique em Salvar. 15
6. CAMADAS / LAYERS E ANIMAÇÕES Imagine papéis transparentes e, em cada um deles, desenhos diferentes. Colocando esses papeis um sobre o outro, forma um novo desenho com a junção dos desenhos originais. A camada pode ter imagens vetoriais, bitmap e/ou a combinação dos dois, e cada camada pode ser trabalhada separadamente. Todo documento novo já inicia com 2 camadas: Camada1 e Camada da Web. Onde na Camada1 ficam, inicialmente, os objetos e, na Camada da Web ficam os objetos para Internet. Existem alguns recursos para auxiliar a criação e organização das camadas: Transparência da camada É possível aplicar um valor em porcentagem para transparência em todos os objetos contidos na camada. Pastas Pode-se criar pastas para organizar as camadas. Efeitos na camada Além da transparência, existem ainda alguns efeitos que podemos adicionar em casa camada separadamente. 16
Adicionando Camada Existem duas opções para adicionar Camadas, através do ícone localizado na parte inferior do painel ou através da setinha do painel na opção Nova camada... Movendo Camada Para alterar a ordem da camada, basta clicar e arrastar movendo para cima ou para baixo. Deletando Camada Existem 3 maneiras para deletar camadas, uma é através da setinha do painel Excluir camada, outra é clicando e arrastando a camada até a latinha de lixo na parte inferior do painel e a última é selecionando a camada e clicando sobre a latinha de lixo. 7. ANIMAÇÕES Uma animação é uma série de imagens estáticas, que aparecem sucessivamente de forma rápida, dando assim a ilusão de uma imagem em movimento. Um site fica mais interessante com gráficos animados, porém existem limitações para trabalhar com gif animado. Eles estão limitados a 256 cores e são mudos. Criando animações simples - Abra um arquivo novo com o tamanho 300 x 200 pixels; - Crie um circulo. Com a tecla Alt pressionada, arraste o circulo fazendo várias cópias. - Selecione todos os objetos rapidamente, utilize Editar / Selecionar Tudo - Abra o painel Molduras: Janela / Molduras ou Shift + F2. 17
- Use o ícone do Painel Moldura. Com essa ação todos os círculos ficarão em molduras separadas. Tempo da animação Para controlar o tempo de animação é preciso controlar o tempo de exibição de cada frame/moldura. O valor é especificado em centésimo por segundo, por exemplo, se configurar 100, 1 frame vai ser exibido por 1 segundo, uma configuração de 50 exibe meio segundo. Para definir o tempo, deve-se dar duplo clique no campo Retardo de Moldura. Para alterar todas de uma única vez, selecione uma a uma segurando a tecla Shift. Looping Looping é o número de vezes que a animação se repete depois de rodar uma vez. Pode-se definir uma quantidade de repetição fixa ou deixar rodando sem parar. Para configurar isso, clique no ícone Ciclo de Animação Gif, que fica no painel de moldura. 18
8. RECURSOS PARA WEB 8.1 HOTSPOT Uma imagem pode ter áreas de integração com o usuário, essas áreas são chamadas de Hotspot. Quando o mouse passe sobre essa área o cursor se transforma em uma mãozinha e ao clicar pode levar a outra página. Ferramenta Hotspot Existem 3 formas para mapear uma imagem: Retângulo, círculo e polígono. Para usar as ferramentas Retângulo e Círculo basta clicar e marcar a área desejável sobre a imagem. A ferramenta Polígono você deve ir clicando e marcando os pontos, o Fireworks vai formando a área. Repare que essas áreas vão sendo armazenado na Camada para Web no painel de Camadas. 19
8.2 BOTÕES Os botões podem ter até 4 estados: Up / Acima: É o estado acima do botão, é o padrão do objeto. Over / Sobre: É o estado quando o mouse passa em cima do objeto. Down / Abaixo: É quando o botão é pressionado Over while down / Durante o estado abaixo: Quando o mouse passa sobre o botão que já está no estado down. A maioria dos botões da Internet tem apenas 2 estados: Up e Over. Para criar botões pode-se partir de uma imagem, ou através do editos de botões ou botões já prontos. Criando Botões: - Crie um novo arquivo com tamanho 200 x 200; - Clique no menu Inserir / Novo símbolo. Aparecerá a caixa de propriedades de símbolo. - Escolha a opção Botão e, dê um nome para o botão. - Na área de trabalho do editor, crie 2 retângulos e coloque um sobre o outro com preenchimento gradiente/linear nos dois, porém em sentidos diferente, conforme a figura a seguir. 20
- Clique na aba Sobre, para editar o botão nesse estado; - Clique no botão, Copiar gráfico Acima, para fazer uma cópia dos objetos contidos na aba Acima; - Alterar o brilho dos dois objetos, pode-se também, alterar a cor do gradiente. - Feche o editor e, clique na aba Visualizar, para ver o funcionamento do botão. 9. CRIANDO UM SITE O primeiro passo para criar um site, é pensar no design ou layout do site. O Layout deve acompanhar algumas dicas importantes: O assunto o site deve ser levado em consideração; As cores devem ser estudadas e aplicadas com bom senso; O conteúdo do site também é de extrema importância, ele deve ser coeso, deve conter as informações relevantes ao público e deve estar sempre atualizado. A página inicial deve chamar a atenção e estimular a vontade do usuário a navegar no site. Outra preocupação é o tamanho do site que pode ser 800X600 ou 1024X768, essa escolha vai da necessidade e do público que irá acessar o site. Porém o layout não deve ser feito na medida exata, é necessário calcular a diferença das barras do navegador. 21