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
exibida a dimensão aplicada em pixels ou 
centímetros por polegada.
 Figura 24 - Controle de Ampliação
3.2 Barra de Ação Principal
 Por padrão, o Fireworks não traz ativa a Barra de Ação Principal, que possibi-
lita o acesso rápido à função para criar novos documentos, salvar e imprimir. Similar 
a diversos outros aplicativos, está disponível o recurso para Desfazer ou Refazer um 
ponto de edição.
 Para ativar a Barra de Ação Principal, selecione na Barra de Menus Windows 
> Toolbars > Main (figura 25).
Figura 25 - Barra de Ação Principal
Comunicação Visual Para WEB 
SOCIESC - Sociedade Educacional de Santa Catarina 
54
4 EXPORTAR PARA OUTROS APLICATIVOS
 O Fireworks permite exportar rapidamente seu trabalho para diversos forma-
tos e aplicativos. Utilizando o botão localizado no topo direito do documento de edi-
ção (Figura 26), é possível exportar para HTML assim como Flash. A opção Visualizar 
nos Browsers dá idéia de como o Layout se comporta em uma página da Web.
 Entre os formatos suportados, estão o Microsoft FrontPage e Adobe GoLive®, 
além de outras ferramentas da família Macromedia e Adobe.
 
 Figura 26 - Opção exportar para outros formatos e softwares.
4.1 Utilizando a Caixa de Ferramentas
 A Caixa de Ferramentas (Figura 27), está separada em seis categorias: 
 » Seleção, 
 » Bitmap, 
 » Vetor, 
 » Web, 
 » Cores,
 » Visualização.
 Para selecionar uma ferramenta ou subferramenta, basta clicar sobre o ícone 
desejado ou pressioná-lo quando estiver dentro de um Grupo de Ferramentas (Figura 
28).
Comunicação Visual Para WEB 
SOCIESC - Sociedade Educacional de Santa Catarina 
55
 Figura 27 - Caixa de Ferramentas
 Figura 28 - Grupo de Ferramentas
4.2 Selecionando e cortando objetos
 Antes de fazer qualquer edição em um objeto, é necessário fazer sua seleção. 
Para isto, existem duas ferramentas específicas que podem ser usadas para sele-
cionar objetos, pontos de um vetor, um bloco de texto ou uma palavra simplesmente. 
 Ferramenta Pointer seleciona e arrasta objetos;
Comunicação Visual Para WEB 
SOCIESC - Sociedade Educacional de Santa Catarina 
56
 Ferramenta Subselection seleciona apenas alguns pontos do objeto;
 Ferramenta Crop seleciona a área da imagem que será cortada.
 Na Figura 29, é possível observar na prática o uso de cada ferramenta citada 
anteriormente. Enquanto a Ferramenta Pointer seleciona o objeto por inteiro, a Fer-
ramenta Subselection permite selecionar pontos específicos do objeto. Dessa forma, 
é possível editar pontos sem alterar o restante da imagem. 
 A Ferramenta Crop, delimita a área onde será efetuado o corte da imagem. 
Feita a seleção, basta dar um Double-Click sobre a área marcada para descartar o 
restante da imagem.
Figura 29 - Uso das Ferramentas Pointer, Subselection e Crop.
4.3 Selecionando Pixels
 Assim como as ferramentas de seleção para objetos, há duas ferramentas 
específicas que auxiliam na seleção de pixels. Para marcar uma área de edição, basta 
selecionar a ferramenta mais adequada.
 Ferramenta Marquee - faz a seleção no formato retangular na imagem;
 Ferramenta Lasso - faz uma seleção livre;
 
 Ferramenta Eraser - remove os pixels da imagem.
Comunicação Visual Para WEB 
SOCIESC - Sociedade Educacional de Santa Catarina 
57
 Conforme a Figura 30, é possível perceber o uso das duas ferramentas de se-
leção de pixels - Marquee e Lasso -, assim como a Ferramenta Erase, após remover 
os pixels da área apontada.
Figura 30 - Uso das Ferramentas Marquee, Lasso e Erase.
4.4 Edição de objetos Vetoriais e Texto
 O Fireworks possui ferramentas para criar e editar vetores. São ferramentas 
extremamente eficientes para gerar desenhos complexos, cujos objetos são editados 
manualmente, nos mínimos detalhes. A ferramenta texto destaca-se por uma vasta 
gama de opções de configuração, accessível no Painel Inspetor de Propriedades, que 
será exibido mais adiante. 
 Veja na Figura 31 o exemplo de uso de ferramentas vetoriais. É possível ob-
servar diversos estilos de linha gerados pela Ferramenta Line. Para explorar todas as 
propriedades dessa, assim como as possibilidades de ajuste de outras ferramentas, 
basta utilizar o Painel Properties.
 Ferramenta Line - desenha linhas retas;
 Ferramenta Pen - desenha através de pontos de ancoragem;
 Ferramenta Rectangle - desenha retângulos, quadrados e arredondados;
 
 Ferramenta Text - cria blocos de texto.
Comunicação Visual Para WEB 
SOCIESC - Sociedade Educacional de Santa Catarina 
58
Figura 31 - Uso das Ferramentas Line, Pen, Retangle e Text.
 No exemplo da Figura 32, podemos verificar o processo de seleção do estilo de 
linha com todas as variedades existentes, dentre as quais foram utilizadas quatro no 
exemplo da Figura anterior.
 Além do estilo de linha, é possível definir outras propriedades como cor da 
borda entre outros efeitos.
 Figura 32 - Propriedades da Ferramenta Line
 A Ferramenta Text possui diversas opções de configuração assim como a 
Ferramenta Line. 
 Para obter efeito similar ao exemplo da Figura 31, basta explorar a seleção de 
fontes através do painel de Ferramentas conforme mostra a Figura 33.
Comunicação Visual Para WEB 
SOCIESC - Sociedade Educacional de Santa Catarina 
59
 
 Figura 33 - Propriedades da Ferramenta Text ao selecionar um estilo de Fonte
5 PREPARAR DOCUMENTO PARA HTML (SLICING)
 Uma das grandes vantagens do Fireworks é a facilidade em exportar o Layout 
para HTML em páginas da Web. No entanto, para que o Fireworks saiba qual fatia 
do Layout deve recortar, ou simplesmente ignorar preenchendo com cores HTML ao 
invés de imagem, é preciso informar adequadamente a seleção do documento.
 Ferramenta Slice - indica as áreas do documento que serão recordadas para 
HTML.
 Na Figura 34 é possível analisar um exemplo de Banner. A primeira imagem 
é a original e logo em seguida são exibidas as quatro áreas selecionadas, utilizando 
a Ferramenta Slice. Dessa forma, ao ativar o recurso exportar, o Fireworks recortará 
apenas as áreas selecionadas descartando o restante da imagem.
Comunicação Visual Para WEB 
SOCIESC - Sociedade Educacional de Santa Catarina 
60
Figura 34 - Exemplo de uso das Ferramentas Slice.
 Para exportar esse tipo de seleção, selecione o menu File > Export e informe 
o formato HTML para gerar uma página da Web como resultado do Layout.
5.1 Aplicando cor e borda a objetos vetoriais
 Objetos vetoriais possuem entre suas propriedades a cor de fundo assim co-
mo cor da borda. Para editar um dessas configurações, basta selecionar o objeto 
desejado e escolher uma cor usando a Paleta de Cor Padrão do Fireworks, similar 
à Figura 35. Também é possível fazer uma sintonia fina da seleção de cor, usando a 
Seleção Avançada conforme ilustra a Figura 36.
 Define uma cor para a borda do objeto selecionado;
 Define a cor de fundo para o objeto selecionado.
Comunicação Visual Para WEB 
SOCIESC - Sociedade Educacional de Santa Catarina 
61
 Figura 35 \u2013 Paleta de Cores
 Figura 36 \u2013 Sintonia fina de cores
5.2 Utilizando o Inspetor de Propriedades
 Todas as ferramentas da Caixa de Ferramentas que acabamos de ver possu-
em configurações que podem ser acessadas e modificadas manualmente, possibili-
tando efetuar a sintonia fina de um Filtro ou Efeito de Sombra, por exemplo. Essas 
configurações são centralizadas em um Painel específico chamado Inspetor de Pro-
priedades.
Comunicação Visual Para