Apostila Comunicação Visual para Web
81 pág.

Apostila Comunicação Visual para Web


DisciplinaWeb para Comunicação2 materiais12 seguidores
Pré-visualização12 páginas
_______________________________________________________________________
3) Lendo as características deste capítulo, você utilizaria arquivos GIF para fotogra-
fias? Por quê?
___________________________________________________________________
___________________________________________________________________
___________________________________________________________________
____________________________________________________________________
Comunicação Visual Para WEB 
SOCIESC - Sociedade Educacional de Santa Catarina 
47
Aula 4
Fireworks
Objetivos da aula 
 Ao final desta aula, você deverá ser capaz de:
\u2022 Familiarizar-se com a ferramenta;
\u2022 Manipular documentos nativos da ferramenta;
\u2022 Exportar arquivos de imagens;
\u2022 Utilizar as ferramentas-padrão.
Conteúdos da aula 
 
 Acompanhe os conteúdos desta aula. Se você preferir, as-
sinale-os à medida em que for estudando.
\u2022 Conhecendo o software;
\u2022 Criando e exportando documentos;
\u2022 Ferramentas de criação e edição.
Prezado(a) Aluno(a)!
Nesta etapa, serão apresentados os principais recur-
sos utilizados para desenhar páginas Web, usando 
como ferramenta o software Fireworks. Embora possua uma in-
finidade de recursos e de funcionalidades, os tópicos abordados 
proporcionarão conhecimento necessário ao desenvolvimento de 
soluções gráficas para Web.
 Familiarizado(a) com o software, será proposto o desen-
volvimento de Layout para um Hotsite, baseado no Caso de Uso 
da empresa Salvador Móveis.
Boa aula!
Comunicação Visual Para WEB 
SOCIESC - Sociedade Educacional de Santa Catarina 
48
1 VISÃO GERAL
 Fireworks é uma eficiente ferramenta de edição de imagens para web. Con-
sagrada mundialmente entre Webdesigners, vem ganhando cada vez mais adeptos 
assim como novos recursos lançados a cada versão. 
 Projetado especificamente para criar e editar figuras da Web, o Fireworks for-
nece recursos que tornam mais fácil inserir gráficos dentro de páginas da Web, de-
pois que elas foram criadas, além de disponibilizar ferramentas sob medida para a-
perfeiçoar e otimizar imagens para o uso na Web.
 O Fireworks é totalmente compatível com imagens vetoriais e bitmap, ou seja, 
é possível criar e manipular imagens em ambos os formatos no mesmo Ambiente de 
Trabalho, possibilitando, inclusive, exportar facilmente as imagens para páginas em 
HTML, assim como códigos JavaScript para os elementos Rollover.
Nota: Foi utilizada a versão 8.0 (inglês) do Fireworks para esta apostila. A 
apresentação a seguir pode exibir um ambiente ligeiramente diferente dependendo 
de qual versão do software você está praticando. No entanto, o conceito deve seguir 
o mesmo contexto.
2 CONHECENDO O BÁSICO
Características da Área de Trabalho do Fireworks e seus principais recursos.
2.1 Criando um Novo Documento
1. Ative o Fireworks;
2. Escolha File > New na barra de menus (figura 19);
3. Na caixa de diálogo, informe o Width e Height. Esses valores correspondem à Lar-
gura e à Altura em pixels, polegadas ou centímetros;
4. Ative a opção White para selecionar a cor Branca de fundo para a nova imagem;
Comunicação Visual Para WEB 
SOCIESC - Sociedade Educacional de Santa Catarina 
49
defina Transparent para deixar o fundo sem nenhuma cor ou selecione Custom para 
escolher uma cor personalizada.
 Figura 19 - Propriedades de um Novo Documento.
2.2 Área de Trabalho do Fireworks
 O Fireworks possui três sessões principais em sua Área de Trabalho, conforme 
mostra a figura 20.
» Caixa de Ferramentas Expansível (Tools): A Caixa de Ferramentas (exibida no 
lado esquerdo da figura) contém diversas ferramentas de desenho, algumas das 
quais estão contidas em Grupo de Ferramentas. Para Exibir um Grupo de Ferra-
mentas, pressione e segure qualquer ferramenta com um triângulo no canto inferior 
direito.
» Layers (Camadas): O Painel Layer, localizado no lado direito da figura, armazena 
todas as camadas que existem em um documento do Fireworks. Dessa forma, os 
elementos gráficos podem ser agrupados ou sobrepostos individualmente conforme 
o desejado.
» Properties (Propriedades): O Painel Properties - também chamado de Inspetor
Comunicação Visual Para WEB 
SOCIESC - Sociedade Educacional de Santa Catarina 
50
de Propriedades -, é utilizado toda vez que é preciso configurar as propriedades de 
um objeto selecionado, assim como a propriedades globais do documento.
 Figura 20 - Área de Trabalho do Fireworks.
2.3 Navegando entre documentos
 O Fireworks permite trabalhar com diversos documentos ao mesmo tempo, 
estejam maximizados ou minimizados dentro da Área de Trabalho. Para gerenciá-los, 
o Fireworks agrupa todos em uma estrutura de abas que contém o nome de cada 
documento em edição.
 Para navegar entre os documentos, basta selecionar uma aba respectiva para 
ativar sua visualização. No exemplo da Figura 21, existem três documentos em edição, 
mas só o primeiro documento está sendo visualizado.
Figura 21 - Abas dos documentos em edição.
Comunicação Visual Para WEB 
SOCIESC - Sociedade Educacional de Santa Catarina 
51
3 EXPORTAÇÃO DE DOCUMENTOS
 O assistente para exportar imagem é um eficiente recurso que possibilita ge-
rar a imagem mais adequada para sua aplicação. É possível definir o formato final 
e acompanhar o tamanho do arquivo, assim como ter uma pré-visualização, no mo-
mento de edição (Figura 22). Para ativar o assistente, selecione File > Export Wi-
zard.
 Os dois formatos mais comuns utilizados em Figuras da Web, são o JPG e o 
GIF. Ambos têm finalidades específicas, como já foi abordado anteriormente. Neste 
exemplo, é possível observar as configurações de uma imagem no formato JPG. Op-
tou-se pela escolha da qualidade da imagem, através da opção Quality. 
 Dica importante: sempre ativar a opção Progressive browser display. Ela faz 
com que a imagem seja carregada dinamicamente pelo browser, do contrário, o na-
vegador só irá exibir a imagem quando estiver totalmente carregada.
 Figura 22 - Assistente para exportar imagens.
Comunicação Visual Para WEB 
SOCIESC - Sociedade Educacional de Santa Catarina 
52
 Para selecionar outros formatos, com a finalidade de exportar, basta informar o 
formato desejado, através da opção Format. A Figura 23 demonstra as configurações 
para uma imagem no formato GIF. A principal característica desse formato é a pos-
sibilidade de definir uma ou mais cores para serem tratadas como transparentes na 
imagem. Perceba no exemplo da figura que o fundo, anteriormente branco, passou 
para transparente.
 Para Selecionar uma área transparente na imagem, basta selecionar a ferra-
menta conta-gota, e clicar sobre a área desejada na imagem. Dessa forma, a imagem 
final em GIF assumirá a cor de fundo na qual ela for sobreposta.
 Quando a imagem tiver que ser transparente, ainda que não for preciso alta 
definição e qualidade, escolha o formato GIF. O JPG permite gerar imagens de alta 
qualidade com um alto nível de compressão, ou seja, o arquivo final terá sempre pou-
cos kilobytes.
 Figura 23 - Exportando imagens com fundo transparente
Comunicação Visual Para WEB 
SOCIESC - Sociedade Educacional de Santa Catarina 
53
3.1 Controle de ampliação
 É possível controlar a ampliação do documento original, usando-se um recur-
so rápido, localizado logo abaixo da imagem em edição, conforme o detalhe da Figu-
ra 24. Basta pressionar sobre o valor de ampliação e selecionar o nível desejado.
 Também é possível consultar nessa área a resolução atual utilizada no docu-
mento. Ao clicar sobre o valor atual, será