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
o efeito descarta um dos objetos e unifica todas as 
trajetórias, formando um novo objeto.
Figura 44 - Exemplo do efeito punch
Comunicação Visual Para WEB 
SOCIESC - Sociedade Educacional de Santa Catarina 
68
Síntese da Aula
 Nesta aula, conhecemos a ferramenta Fireworks e suas ferramentas de edição 
e criação básicas.
 Praticamos também a exportação de arquivos para a utilização em páginas.
 Na próxima aula, construiremos um site, do início ao fim.
Exercícios Propostos
1) Encontre imagens de tipos diferentes, como fotos pessoais, desenhos de filmes, 
logomarcas, etc., e exporte-os com as propriedades apresentadas nesta aula.]
2) Reproduza estas imagens no Fireworks:
Comunicação Visual Para WEB 
SOCIESC - Sociedade Educacional de Santa Catarina 
69
Aula 5
Desenvolvendo Uma Solução Real
Objetivos da aula 
 Ao final desta aula, você deverá ser capaz de:
\u2022 Aplicar os estudos das cinco aulas; 
\u2022 Pôr em prática a teoria apresentada;
\u2022 Criar um projeto que integre todas as áreas.
Conteúdos da aula 
 
 Acompanhe os conteúdos desta aula. Se você preferir, as-
sinale-os à medida em que for estudando.
\u2022 Criando elementos;
\u2022 Exportando / Importando imagens;
\u2022 Criando o HTML.
Prezado(a) Aluno(a)!
Após familiarizar-se com o ambiente do Fireworks e 
seus principais recursos, será apresentado, passo-a-
passo, o desenvolvimento de um 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 
70
1 CASO DE USO SALVADOR MÓVEIS
Hotsites, geralmente, são sites pequenos (com poucas páginas), criados 
com propósito específico e provisório. É nesse momento que o Fireworks demonstra 
suas vantagens, como o ganho de tempo e produtividade, pois a própria ferramenta 
permite exportar todo o Layout diretamente para HTML.
1.1 Criando um Novo Documento 
1. Escolha File > New na barra de menus;
2. Na caixa de diálogo, informe o Width 800 e Height 600;
3. Selecione a opção Custom e escolha a cor de fundo Preta para a nova imagem 
(figura 45).
 Figura 45 - Propriedades de um Novo Documento
1.2 Importando imagens
 Neste exemplo foram importadas duas imagens para o ambiente de edição do 
Fireworks. O logo da empresa Selbetti e a imagem de uma cadeira. Esse processo
Comunicação Visual Para WEB 
SOCIESC - Sociedade Educacional de Santa Catarina 
71
pode ser feito seguindo os passos seguintes:
1. Escolha File > Import na barra de menus;
2. Selecione a imagem que deseja importar;
3. Clique e arraste o mouse na Área de Desenho do Fireworks para colar a imagem 
(figura 46).
 Figura 46 - Importando imagens
1.3 Inserindo texto 
 Teremos duas chamadas em texto: uma principal e outra que será a assinatura 
da página.
 Para esse procedimento, utilize a Ferramenta de Text , modificando suas 
propriedades pelo Painel Inspetor de Propriedades.
 Veja o resultado na Figura 47.
Comunicação Visual Para WEB 
SOCIESC - Sociedade Educacional de Santa Catarina 
72
 Figura 47 - Criando chamada em texto e assinatura
1.4 Cortando a imagem
 O processo de desenho do Layout está completo, agora será usada uma fer-
ramenta especial para cortar a imagem. 
 Na Caixa de Ferramenta, selecione o recurso Crop , e defina a área da i-
magem que deve ser cortada. A Figura 48 ilustra os dois momentos, da seleção até a 
imagem já cortada.
 
Figura 48 - Selecionando e cortando a imagem
Comunicação Visual Para WEB 
SOCIESC - Sociedade Educacional de Santa Catarina 
73
1.5 Selecionando área para exportar
 Utilizando a Ferramenta Slicing , delimite todas as áreas do documento que 
deseja exportar. Veja, no exemplo da figura 49, os blocos em tom verde após definidas 
as imagens que serão recortadas pelo Fireworks.
 Figura 49 - Selecionando área com a Ferramenta Slicing
1.6 Exportar para HTML 
 Neste momento, é possível exportar o Layout diretamente para o formato HTML 
(figura 50). É possível observar, em seguida, na Figura 51, as imagens que foram 
criadas automaticamente pelo Fireworks.
1. Escolha File > Export na barra de menus;
2. Informe um nome para o arquivo;
3. Selecione logo abaixo a opção HTML and Images.
4. Clique no botão Export.
Comunicação Visual Para WEB 
SOCIESC - Sociedade Educacional de Santa Catarina 
74
 Figura 50 - Exportando para HTML
 Figura 51 - Imagens criadas pelo Fireworks
Comunicação Visual Para WEB 
SOCIESC - Sociedade Educacional de Santa Catarina 
75
1.7 Editando a página HTML
 Ao exportar, o Fireworks gera uma série de código HTML desnecessário. Para 
tornar a página mais leve, clique com o botão direito sobre a página HTML e selecione 
abrir com Bloco de Notas. Se desejar, utilize seu editor de texto preferido. 
 Inicialmente, iremos retirar todas as imagens na cor preta, pois não são ne-
cessárias em nossa página HTML, uma vez que a tela já possui fundo preto. Traba-
lhando com Wight e Height, das cédulas de nossa tabela, é possível obter o mesmo 
resultado, porém a página irá carregar muito mais rápido.
 Você aprenderá a trabalhar com o código HTML em uma aula específica. Veja 
na figura 52 como terminou a edição do HTML 52 e o resultado final, visualizado no 
navegador, conforme mostra a Figura 53.
 Figura 52 - Editando código HTML
Comunicação Visual Para WEB 
SOCIESC - Sociedade Educacional de Santa Catarina 
76
 Figura 53 - Visualização do Hotsite no navegador
1.8 Considerações Finais 
 Além de reunir diversos recursos em um único aplicativo, o Fireworks interage 
com o usuário através de uma interface intuitiva que diminui o grau de aprendizagem, 
ao mesmo tempo em que é possível desenvolver soluções profissionais em poucas 
horas trabalho.
 O Fireworks suporta a integração de extensions, desenvolvidos para soluções 
específicas. Extensions é um poderoso recurso que adiciona novas funcionalidades 
não existentes nativamente
 Para gerenciar extensions, ative o aplicativo Macromedia Extension Manager 
(Figura 54), que acompanha a instalação padrão da ferramenta. Com essa interfa-
ce, é possível localizar novas extensions na Internet, muitas delas disponíveis gratui-
tamente para download.
Comunicação Visual Para WEB 
SOCIESC - Sociedade Educacional de Santa Catarina 
77
 Figura 54 - Gerenciador de Extension
Síntese da Aula
 Nesta quinta e última aula verificamos como se cria uma estrutura visual no 
Fireworks, passando por várias ferramentas e chegando até a sua exportação para 
sites, com o cuidado de otimizar o tempo de download para o usuário.
Concluímos este módulo, você chegou lá!
Parabéns!
Comunicação Visual Para WEB 
SOCIESC - Sociedade Educacional de Santa Catarina 
78
Exercícios Propostos
1) Agora que você já fez todas as aulas, sugiro que utilize tudo o que aprendeu para o 
seu proveito, em um exercício possível de utilizar em outras aulas: fazer o seu site.
Hoje quem tem um currículo bem feito e com conteúdo de qualidade se destaca no 
mercado. Imagine se você tiver uma página na internet?
A idéia é você criar nesse exercício, uma página com o seu currículo. Elabore a iden-
tidade visual, estruture o que quer apresentar, se quer colocar algo mais do que suas 
aulas, fale do curso de EAD, fale das atividades que realiza, os livros que leu, etc.
Utilize tudo o que você aprendeu até agora. Se o resultado for bom, quer dizer que 
você tem um bom currículo nas mãos e que realmente