Académique Documents
Professionnel Documents
Culture Documents
Edio n1 - 2007
Gesto e Execuo
Contedo e Tecnologia
Apresentao
Este livro didtico contm a disciplina de Comunicao Visual Web, cujo con-
tedo, ora apresentado, coloca voc diante de um novo desafio: obter conhecimentos
para desenvolver comunicao visual para a Internet.
no mercado de trabalho, o visual linha do design grfico que hoje assume o papel
de designer de interao, mas vai alm disso. Um designer de interao planeja como
as informaes sero agrupadas e apresentadas para o internauta. Discute quais as
aes de uma pgina, quais os eventos, o que ser apresentado, entre outras tantas
coisas relacionadas ao internauta.
um aprendizado independente, inerente aos estudos do EAD, e o contedo foi revisado com o intuito de oferecer uma linguagem simples, objetiva e estimulante.
Lembre-se de que a sua passagem por esta disciplina ser tambm acompa-
nhada pelo Sistema de Ensino Tupy Virtual, seja por correio postal, fax, telefone, email ou Ambiente Virtual de Aprendizagem.
de. Toda a equipe ter a maior alegria em atend-lo(a), pois o seu aprendizado nessa
jornada o nosso maior objetivo.
SUMRIO
Carta do Professor
O nico local onde
o sucesso vem antes do trabalho
no dicionrio.
Albert Einstein
atuao no mercado hoje. Voc est entrando em uma profisso do futuro, e pessoas
assim devem estar sempre atentas ao seu redor.
fessor (mesmo que sejam timos e importantes). Tambm possvel aprender pela
observao e anlise. Observe as pessoas acessando a Internet, voc vai aprender
muito: ver onde elas clicam, que caminho percorrem, se demoram em mudar de pgina, etc. Observe outros sites, navegue como observador. Na maior parte das vezes,
voc vai captar coisas interessantes; em outras, coisas que no vai querer repetir de
forma alguma. Afinal desenvolver para a Internet , na verdade, desenvolver para o
internauta, em quem se deve pensar a maior parte do tempo.
Espero que voc se conecte neste mundo de web design e que possa se de-
senvolver.
Cronograma de Estudos
Horas/aula
10
10
15
Contedos
PRIMEIROS PASSOS DE UM
PROJETO DE WEBSITE: briefing; arquitetura da informao;
wireframes; usabilidade; navegabilidade.
PROJETO GRFICO: Identidade Visual; Cores; Tipografia;
Grficos.
FUNDAMENTOS SOBRE IMAGENS: Raster vs Vetorial; Imagens na Web; GIF; JPG; PNG;
Utilizao das imagens; Profundidade de cor; Formato de Arquivos.
FIREWORKS: Conhecendo o
software; Criando e exportando
documentos; Ferramentas de
criao e edio.
DESENVOLVENDO UMA
SOLUO REAL: Criando elementos; Exportando/Importando
imagens; Criando o HTML.
Data/Avaliao
_/_ a _/_
_/_ a _/_
_/_ a _/_
_/_ a _/_
Plano de Estudos
Bases Tecnolgicas
Aula 1
1 BRIEFING
Esta estranha palavra, Briefing, mais utilizada pelos publicitrios, que gostam
Algumas empresas partem para o marketing digital, o que deve ser previsto
Aqui faremos o possvel para que o usurio no se perca, navegando sem ter
Com as respostas do briefing em mo, vamos definir como deve ser o site. Va-
dos assuntos relacionados. Agora vamos ver esses mesmos procedimentos sob uma
nova estrutura, observe a figura 1.
grama, por exemplo, o que ajudar voc a entender melhor o todo do site.
10
pgina contato. Essa uma pgina importante para que o cliente tenha aproximao
com a empresa, por isso, muitas pginas tm links diretos com ela.
Arame essa a definio mais prxima do que significa wireframe. Com esse
Para esse procedimento, podemos utilizar papel e lpis (figura 2). Como nes-
qualquer ferramenta grfica (figura 4). Se voc achar melhor, pode ser o Paint
Brush, o Corel Draw, o Fire Works. Na verdade, voc deve utilizar uma ferramenta em que possa desenhar linhas, textos e posicion-los da forma que quiser.
11
Fonte: www.radiouniao.fm.br
12
13
Preste ateno: isto uma conveno no uma regra, mas para sites cujo
Para mostrar que nem tudo que fora das convenes ruim, seguem ima-
gens de sites fantsticos, cuja estrutura convencional pode ser muito bem explorada
com um projeto grfico diferenciado.
interna, do lado direito, e o menu, do lado esquerdo, fogem ao padro tradicional, mas
no comprometem a navegao e a organizao. A logomarca, assinatura e o contedo do site mantm o padro.
Fonte www.selbetti.com.br
Fonte - www.odinmudic.com
14
15
A Figura 7 demonstra que a navegao horizontal, no topo, permite liberdade ao contedo exposto, com a logomarca centralizada. A navegao interna das pginas segue
pelo lado esquerdo.
Figura 8 - Adobe
Fonte www.adobe.com.br
A Adobe (Figura 8), hoje uma das maiores empresas de software para com-
putao grfica e desenvolvimento web, tem o seu layout como padro estabelecido.
A logo, navegao vertical e a rea de pesquisa seguem o padro. Mostra a barra superior completa, assinatura no rodap, os links principais do site, alm de informaes
sobre a empresa.
16
O Caf Colombo um site mais voltado ao cultural, com artigo e podcasts (Pod-
cast uma publicao de uma entrevista, programa de rdio, leitura, etc. em formato de udio.)
(Figura
Fonte - http://www.apple.com/br/ipodnano/
17
Podemos observar, na figura 10, que a Apple, uma das empresas vanguardistas
18
Dicas
O logotipo da empresa deve, preferencialmente, ser mantido esquerda, pois
deve ser o primeiro elemento que o usurio ver, identificando onde ele est;
A navegao deve estar em locais acessveis.
Repito: No uma regra! Todos esses estudos so as melhores prticas que
conhecemos hoje. O que faremos uma conveno, mas fique vontade para
ser criativo a cada projeto, com os devidos cuidados.
2 USABILIDADE
terminado produto, que pode ser desde um rdio-relgio at uma pgina da Internet.
No conceito Web, define-se por um design que ajuda o internauta a encontrar informaes, servios e produtos de forma intuitiva.
HP (http://h30091.www3.hp.com/pyme/dicas/glosario_2.html)
Para conseguirmos boa usabilidade, temos que ter em mente quem vai utilizar
o sistema, em qual mdia, com qual tecnologia e de que maneira. A usabilidade serve
para todos os produtos que tm interface com o usurio. Chamo de interface o painel
de botes de um liquidificador, por exemplo. A usabilidade est atrelada ergonomia,
outro assunto bem interessante.
que estamos falando, peguem o celular ou circulem os celulares entre vocs e naveguem pela agenda - chamadas recebidas. Verifique as mensagens enviadas. Todos os
acessos so diferentes entre aparelhos e fabricantes. Pensar nesse acesso pensar
em usabilidade, pensar que normalmente utilizamos uma das mos, ou menos, utilizamos um dedo apenas. Essa dificuldade ou facilidade um exemplo de usabilidade.
19
Agora voc tem idia do que usabilidade. Logo entraremos em mais detalhes
para a Internet.
3 NAVEGABILIDADE
Para alguns gurus, citemos dentre eles Jackob Nielsen, se o usurio tiver que
clicar mais do que duas vezes para chegar ao destino a navegabilidade regular, e se
s depois de trs cliques o usurio chegar ao destino, a navegabilidade ruim. Vamos
ser menos rigorosos, mas continuar atentos.
Como frmula geral e bsica para uma boa navegabilidade, o usurio deve
Onde estou?
De onde vim?
20
21
Sntese da Aula
arquitetura da informao, para que voc possa entender melhor os conceitos das
aulas.
22
Exerccios Propostos
1) Vamos partir para estudos prticos e ligados teoria. Escolha duas das figuras
apresentadas (entre a Fig. 6 e a Fig. 10) e faa anlises das dicas de erros e acertos
apresentados por Nielsen.
Aula 2
Prezado(a) aluno(a)!
J temos o esqueleto o wireframe. Temos os rgos
o briefing. Agora precisamos da musculatura e da pele.
Parece papo de cientista maluco, tipo Frankenstein ou Eduardsmos-de-tesoura, mas vamos realmente dar uma cara adequada
ao projeto, vamos dar vida ao que j planejamos.
Boa aula!
23
24
1 IDENTIDADE VISUAL
tidade visual representao constante nos sites , indicativo de que a empresa que
est no site a empresa que est na rua.
identidade que se compe de elementos diferentes, mas com uma gama de possibilidades muito parecidas.
Alguns elementos que formam essa identidade vo ser abordados, ainda que
superficialmente, a seguir:
1.1 Cor
Inconscientemente nos sentimos bem com algumas cores e mal com outras,
depende do usurio, porm, podemos criar algumas regras para que isso no fuja
tanto dos padres.
Verifique nesses dois sites possibilidades de combinao de cores interessantes para se utilizar.
http://wellstyled.com/tools/colorscheme2/
http://kuler.adobe.com/
25
podem ser RGB, CMYK (figura 11) e tabelas especficas como a PANTONE.
As cores que utilizamos para a Internet so RGB cores aditivas. Com a soma
das trs cores (red, green, blue) chega-se ao branco, ao contrrio do CMYK cores
subtrativas (cyan, magenta, yellow) cuja soma nos d o preto (K).
26
a cor branca, ou seja, essas cores so emissoras de luz, pois so utilizadas em monitores, televises, celulares e todos os tipos de monitores de imagem. As subtrativas
so as reflexivas, pois somadas chegam cor preta. So utilizadas em impresses
como livros, revistas, cartazes, etc.
Pense nos sistemas de cores aditivos como as cores que so luz e as sub-
trativas, que no so luz. Se voc estiver em uma sala sem nenhuma luz, nenhuma
mesmo, e estiver vendo uma cor, ela est num sistema aditivo. Caso voc nada veja,
ento subtrativo, pois precisam de luz para poder existir.
Observe:
Definio
RGB = Red, Green & Blue Vermelho, Verde e Azul
CMYK = Cian, Magent, Yellow & Black Ciano, Magenta, Amarelo e Preto
1.2 TIPOGRAFIA
Para a Internet, temos que tomar cuidado, pois fontes diferentes podem no
estar instaladas no computador do usurio, o que implica na utilizao de fontes consideradas padro como a Arial, Verdana, Tahoma e Times New Roman.
As fontes podem ser encontradas em sites, mas a maioria das fontes de qua-
27
finies:
apresentam uma diferena bem acentuada. J os nmeros 6 e 7 so fontes sem serifa, ou ainda, bastes.
28
de grficos deve ser adequado ao contexto. Imagens usadas como detalhes de layout
devem ajudar a ilustrar a interface e envolver as pessoas. cones e smbolos ajudam a
referenciar e a identificar a informao visualizada ou requerida. Por exemplo: cones
de impresso, boto fechar, casinha (ir para a pgina principal), cone de udio e/ou
vdeo, marcadores de listas, etc.
1.3.1 Estrutura Grfica
29
Vamos verificar o site a seguir (figuras 13 e 14) e a anlise que podemos faz-
er:
30
31
32
tes, uma de esportes e outra de notcias gerais, que a estrutura igual, muda a identidade de cada uma.
Sntese da Aula
33
Exerccios Propostos
1) Defina o que identidade visual.
3) O que so Serifas?
4) Com base no item 2.2, encontre um site e faa as anlises e encontre os nmeros
de 0 a 5 (se existirem todos).
Aula 3
34
35
1 INTRODUO
Anos atrs, a Web no passava de texto na cor preta sobre um fundo cinza. As
repetir: Sua pgina levar trs semanas para carregar e voc vai receber um bilhete
para ser entregue aos seus pais convidando-os a uma reunio de pais e mestres, para
falar sobre o seu mau rendimento em aula, pois no assimilou nada do que deveria
aprender sobre os assuntos at aqui ministrados!
O primeiro passo para voc entender como criar e gerenciar grficos para a
to, continue lendo e eu vou ajudar a preparar voc para manejar seus pixels corretamente.
2 RASTER X VETORIAL
nas nossas publicaes revolucionaram a forma da escrita tradicional. Uma publicao, atualmente, cativa o leitor pelo seu charme natural, sua descontrao para a
leitura e a facilidade de assimilao do contedo. As imagens ajudam muito para esta
nova atitude. A qualidade do grfico depende da sua resoluo.
36
Resoluo. A resoluo ou nitidez grfica medida pelo nmero de pontos ou pixels - elementos de figura - que podem ser colocados em uma polegada
quadrada (dots per inch, ou DPI).
dentre duas categorias: mapas de bits ou imagens e grficos de vetor ou line art.
senhos de vetor compreendem linhas calculadas por frmulas matemticas. Os grficos de mapas de bits so geralmente produzidos por programas de pintura e scanners, os grficos de vetores so produzidos por programas de desenho.
Como voc pode conferir na figura 15, as imagens de mapa de bits tm uma
imagem de mapas de bits com 180 dpi, ela nunca poder ser impressa em uma resoluo melhor do que 180 dpi, mesmo que saia em uma impressora a laser de 300
dpi. Os grficos de mapas de bits no se tornam grficos de alta resoluo s porque
se usa uma impressora melhor.
37
3 Formatos da Web
cessrias. Para isso, muito importante saber as diferenas e escolher o melhor formato para cada imagem. Quanto mais compactas, mais eficazes sero as figuras.
Quanto tempo? Para estimar quanto tempo vai levar para algum ver uma ima-
gem usando um modem de 28.8, divida o tamanho da imagem por dois. Assim, um
arquivo com 12K vai normalmente demorar 6 segundos para carregar e aparecer.
38
Arquivos GIF so melhores para imagens com poucas camadas de cores (fi-
Arquivos GIF podem ser entrelaados assim eles parecem fade in (vo a-
parecendo aos poucos), de uma menor para uma maior qualidade enquanto esto
carregando. Isso proporciona aos visitantes algo para ser visto enquanto esperam.
Arquivos GIF podem ser transparentes. Significa que voc pode escolher uma
ou mais cores para no serem mostradas, permitindo que as cores do fundo da sua
pgina apaream atravs delas. Isso evita que os grficos dem a impresso de estar em caixas, causando, visualmente, a impresso de que esto mais integrados com
a pgina.
Podem ser animados, como filmes, s que bem mais simples. As GIFs anima-
gens com muitas cores, como fotografias e arte digitalizada (figura 18). O JPG admite
16 milhes de cores. A compresso varivel e voc pode aplicar maior ou menor
39
qualidade. O tamanho do arquivo pode diminuir bastante nesse sistema, mas voc
deve balancear o tamanho do arquivo com a qualidade da imagem. Os novos softwares grficos (Macromedia Fireworks ou Adobe Photoshop) permitem pr-visualizar
suas imagens JPG, assim voc pode escolher o melhor balano entre tamanho e
qualidade.
seu JPG como um arquivo entrelaado, causando a impresso de que ele vai aparecendo de uma menor para uma maior qualidade, enquanto vai sendo carregado,
mas browsers antigos no suportam este formato.
Arquivos JPG no so bons para imagens com poucas cores, elas sero mai-
PNG o mais novo formato de arquivo grfico para a Web, por isso, s su-
portado pelos navegadores mais novos. Esses arquivos no aparecero em navegadores antigos, por essa razo, ao usar o formato PNG, voc pode fazer com que
visitantes do seu site no consigam ver as suas imagens. Em alguns testes, os navegadores FireFox e o IE7 j aceitam esse formato.
40
Embora esse formato seja til e eficiente, voc deve ter prudncia na sua uti-
lizao.
3.4 Quando usar um deles?
O erro mais comum que as pessoas cometem, quanto s imagens para a Web,
DICAS
Se a imagem tem poucas cores, escolha GIF;
Se a imagem tem muitas cores (como uma foto), escolha JPG;
Se o pblico do seu site utiliza FireFox ou IE 7, use PNG quando necessrio.
as imagens tero boa aparncia e carregaro rpido no computador do visitante. Escolhendo o formato errado, as imagens tero pssima aparncia e levaro uma eternidade para carregar. Se voc no for capaz de lembrar-se dessas regras simples, faa
uma tatuagem com elas em algum lugar do seu corpo que seja bem visvel.
fotografias e simples. Uma imagem simples geralmente composta por texto, grficos e diagramas, tudo com contornos definidos e grandes formas com cores contnuas.
Uma imagem fotogrfica pode ser qualquer coisa, desde uma fotografia de seu
41
claro que a dica anterior de grande valia, porm no se resume a isso, pois, para
cada JPG, existem tipos de compresses utilizadas.
Na imagem C, o nosso amigo Stress Anty est um pouco fosco ou fora de foco,
Continuando o estudo do Sr. Stress Anty veremos trs tipos de resolues que
no so de boa utilizao.
JPG convertida em
GIF256 (E)
Tamanho : 44,1 Kb
42
Para terminar o nosso trabalho com o Sr. Stress Anty, vemos uma GIF com
presso JPG, mas, geralmente, quanto maior o nmero, maior a qualidade da imagem e seu tamanho. Voc deve procurar na documentao de seu software para
saber como ele faz esse tratamento. Para cada trabalho existe uma configurao
adequada, seja para WEB ou para impresso. Se voc precisa de uma imagem com
excelente qualidade, no ir fugir de um arquivo de bom tamanho em Kbytes.
DICA:
Embora voc deva usar GIF ou JPG como grficos para a web, salve o seu arquivo
original em um formato como TIF (Tagged Image File Format) ou o formato nativo de
seu software grfico. Por qu? Porque voc preserva a resoluo e a qualidade da
imagem original, para novamente us-la ou no na web!
43
(a grande maioria) monitores e placas de vdeo que nos permitam trabalhar com uma
resoluo de tela de 1024x768px, mas grande parte dos designers est fazendo seus
layouts fluidos. O que quer dizer isso?
com CSS e outras tecnologias, voc consegue utilizar layouts que podem se adaptar
para telas maiores ou menores. Esse um tpico especfico, que voc deve procurar
quando dominar os itens bsicos.
IMPORTANTE
Para desenvolver um site para a resoluo de 800x600, NUNCA CRIE O LAYOUT
COM 800x600, pois a rea til desta resoluo de 770x440px aproximadamente,
ou seja, voc sempre perder espao para menus do seu navegador e da barra iniciar do Windows, por exemplo.
que montam uma imagem maior. Este sim, dependendo da resoluo, sofre com o dimensionamento.
3.7 Cor em profundidade
44
Em monitores coloridos, cada pixel pode exibir certo nmero de cores, que
ou vdeo h vrios tipos de imagens com a mesma funcionalidade, mas com caractersticas diferentes. Para Exemplificar vamos aos conhecidos arquivos de som:
WAV Arquivo de som extrado de algum dispositivo de entrada (Microfone CD
Teclado Musical ETC) outro arquivo
MP3 Arquivo de som extrado de algum dispositivo de entrada (Microfone CD
Teclado Musical ETC)
45
os arquivos, sabe que o mp3 tem uma compactao melhor e a qualidade superior
que o WAV. Mas isso apenas um exemplo de arquivos quaisquer.
Postscript EPS
CompuServe GIF
BMP
WMF
TIF
46
Sntese da Aula
Exerccios Propostos
1) Descreva a diferena entre imagens Raster e Vetorial, justificando.
____________________________________________________________________
____________________________________________________________________
_____________________________________________________________________________________________
____________________________________________________________________________________________
2) Imagens PNG so utilizadas para fotografia? Justifique.
____________________________________________________________________
____________________________________________________________________
________________________________________________________________________
_______________________________________________________________________
3) Lendo as caractersticas deste captulo, voc utilizaria arquivos GIF para fotografias? Por qu?
___________________________________________________________________
___________________________________________________________________
___________________________________________________________________
____________________________________________________________________
Aula 4
Fireworks
Objetivos da aula
47
48
1 VISO GERAL
sagrada mundialmente entre Webdesigners, vem ganhando cada vez mais adeptos
assim como novos recursos lanados a cada verso.
nece recursos que tornam mais fcil inserir grficos dentro de pginas da Web, depois que elas foram criadas, alm de disponibilizar ferramentas sob medida para aperfeioar e otimizar imagens para o uso na Web.
Nota: Foi utilizada a verso 8.0 (ingls) do Fireworks para esta apostila. A
apresentao a seguir pode exibir um ambiente ligeiramente diferente dependendo
de qual verso do software voc est praticando. No entanto, o conceito deve seguir
o mesmo contexto.
2 CONHECENDO O BSICO
Caractersticas 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 dilogo, informe o Width e Height. Esses valores correspondem Largura e Altura em pixels, polegadas ou centmetros;
4. Ative a opo White para selecionar a cor Branca de fundo para a nova imagem;
49
defina Transparent para deixar o fundo sem nenhuma cor ou selecione Custom para
escolher uma cor personalizada.
50
Para navegar entre os documentos, basta selecionar uma aba respectiva para
ativar sua visualizao. No exemplo da Figura 21, existem trs documentos em edio,
mas s o primeiro documento est sendo visualizado.
51
3 Exportao de documentos
rar a imagem mais adequada para sua aplicao. possvel definir o formato final
e acompanhar o tamanho do arquivo, assim como ter uma pr-visualizao, no momento de edio (Figura 22). Para ativar o assistente, selecione File > Export Wizard.
Dica importante: sempre ativar a opo Progressive browser display. Ela faz
com que a imagem seja carregada dinamicamente pelo browser, do contrrio, o navegador s ir exibir a imagem quando estiver totalmente carregada.
52
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 no for preciso alta
definio e qualidade, escolha o formato GIF. O JPG permite gerar imagens de alta
qualidade com um alto nvel de compresso, ou seja, o arquivo final ter sempre poucos kilobytes.
53
so rpido, localizado logo abaixo da imagem em edio, conforme o detalhe da Figura 24. Basta pressionar sobre o valor de ampliao e selecionar o nvel desejado.
mento. Ao clicar sobre o valor atual, ser exibida a dimenso aplicada em pixels ou
centmetros por polegada.
lita o acesso rpido funo para criar novos documentos, salvar e imprimir. Similar
a diversos outros aplicativos, est disponvel o recurso para Desfazer ou Refazer um
ponto de edio.
54
tos e aplicativos. Utilizando o boto localizado no topo direito do documento de edio (Figura 26), possvel exportar para HTML assim como Flash. A opo Visualizar
nos Browsers d idia de como o Layout se comporta em uma pgina da Web.
Seleo,
Bitmap,
Vetor,
Web,
Cores,
Visualizao.
55
Para isto, existem duas ferramentas especficas que podem ser usadas para selecionar objetos, pontos de um vetor, um bloco de texto ou uma palavra simplesmente.
Ferramenta Pointer seleciona e arrasta objetos;
56
anteriormente. Enquanto a Ferramenta Pointer seleciona o objeto por inteiro, a Ferramenta Subselection permite selecionar pontos especficos do objeto. Dessa forma,
possvel editar pontos sem alterar o restante da imagem.
Feita a seleo, basta dar um Double-Click sobre a rea marcada para descartar o
restante da imagem.
especficas que auxiliam na seleo de pixels. Para marcar uma rea de edio, basta
selecionar a ferramenta mais adequada.
Ferramenta Marquee - faz a seleo no formato retangular na imagem;
Ferramenta Lasso - faz uma seleo livre;
Ferramenta Eraser - remove os pixels da imagem.
57
Conforme a Figura 30, possvel perceber o uso das duas ferramentas de se-
leo de pixels - Marquee e Lasso -, assim como a Ferramenta Erase, aps remover
os pixels da rea apontada.
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 atravs de pontos de ancoragem;
Ferramenta Rectangle - desenha retngulos, quadrados e arredondados;
Ferramenta Text - cria blocos de texto.
58
linha com todas as variedades existentes, dentre as quais foram utilizadas quatro no
exemplo da Figura anterior.
Ferramenta Line.
Para obter efeito similar ao exemplo da Figura 31, basta explorar a seleo de
59
para HTML em pginas da Web. No entanto, para que o Fireworks saiba qual fatia
do Layout deve recortar, ou simplesmente ignorar preenchendo com cores HTML ao
invs de imagem, preciso informar adequadamente a seleo do documento.
Ferramenta Slice - indica as reas do documento que sero recordadas para
HTML.
60
Para exportar esse tipo de seleo, selecione o menu File > Export e informe
o formato HTML para gerar uma pgina 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-
61
em configuraes que podem ser acessadas e modificadas manualmente, possibilitando efetuar a sintonia fina de um Filtro ou Efeito de Sombra, por exemplo. Essas
configuraes so centralizadas em um Painel especfico chamado Inspetor de Propriedades.
SOCIESC - Sociedade Educacional de Santa Catarina
62
do a ferramenta Texto
efeitos e filtros aos objetos suportados. No lado esquerdo superior exibido o formato de edio do objeto.
5.3 Alinhando objetos
tindo alinhar objetos ao longo de uma linha central, horizontal ou vertical, entre outras opes. Para acessar os comandos de alinhamento, selecione a opo mais
adequada em Modify > Align:
Left: Alinha o objeto esquerda;
Center Vertical: Alinha o objeto no centro ao logo de uma linha vertical;
Right: Alinha o objeto esquerda;
Top: Alinha o objeto ao topo;
Center Horizontal: Alinha o objeto no centro ao logo de uma linha horizontal;
Bottom: Alinha o objeto base;
Distribute Widths: Distribui uniformemente a largura dos objetos selecionados;
Distribute Heights: Distribui uniformemente a altura dos objetos selecionados.
5.4 Girar, inverter e transformar objetos
63
Esse recurso deve ser aplicado com cautela a imagens ou objetos que conte-
nham texto, pois, ao inverter uma frase na horizontal, por exemplo, ela se apresentar semelhante ao texto visto por meio de um espelho.
64
transparente, sem nenhuma cor de fundo presente. Em seguida, aps aplicar a Ferramenta Trim Canvas, a rea de imagem foi recorta, diminuindo para a mxima rea da
imagem utilizada. Logo aps, o fundo recebeu uma cor selecionada por meio da ferramenta Canvas Color.
65
Tambm possvel mover os objetos para cima ou para baixo de outro, con-
forme for necessrio, basta selecionar o objeto desejado e aplicar uma das seguintes
opes no menu Modify > Arranje:
Bring to Front: Trazer para frente de todas das camadas;
Bring to Forward: Avanar sobre uma camada;
Send Backward: Recuar sobre uma camada;
Send to back: Enviar para traz de todas as camadas.
eficientes que permitem ocultar algumas camadas ou simplesmente bloquear temporariamente sua edio. Tambm possvel informar um nome para cada camada, de
forma a facilitar a organizao dos objetos.
66
Mascara um recurso verstil para criar efeitos utilizando mais de dois obje-
tos. Com esse recurso, possvel mesclar duas imagens e manter algumas propriedades entre elas. Para aplicar esse efeito, selecione um grupo de objetos, em seguida, selecione Modify > Mask > Group as Mask.
um. possvel conectar os pontos da extremidade de dois objetos abertos para criar
67
um nico trajeto fechado, ou possvel juntar objetos mltiplos para criar um nico
objeto.
Para utilizar esses efeitos, selecione os objetos cuja forma deseja modificar,
selecione Modify > Combine Paths e aplique o efeito desejado: Union, Intersect ou
Punch.
que, ao selecionar os trs crculos, o efeito descarta um dos objetos e unifica todas as
trajetrias, formando um novo objeto.
68
Sntese da Aula
e criao bsicas.
Exerccios 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:
Aula 5
Objetivos da aula
Prezado(a) Aluno(a)!
Aps familiarizar-se com o ambiente do Fireworks e
seus principais recursos, ser apresentado, passo-apasso, o desenvolvimento de um Layout para um Hotsite baseado
no Caso de Uso da empresa Salvador Mveis.
Boa aula!
69
70
71
Teremos duas chamadas em texto: uma principal e outra que ser a assinatura
da pgina.
, modificando suas
72
O processo de desenho do Layout est completo, agora ser usada uma fer-
, e defina a rea da i-
magem que deve ser cortada. A Figura 48 ilustra os dois momentos, da seleo at a
imagem j cortada.
73
deseja exportar. Veja, no exemplo da figura 49, os blocos em tom verde aps definidas
as imagens que sero recortadas pelo Fireworks.
(figura 50). possvel 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 opo HTML and Images.
4. Clique no boto Export.
74
75
tornar a pgina mais leve, clique com o boto direito sobre a pgina HTML e selecione
abrir com Bloco de Notas. Se desejar, utilize seu editor de texto preferido.
cessrias em nossa pgina HTML, uma vez que a tela j possui fundo preto. Trabalhando com Wight e Height, das cdulas de nossa tabela, possvel obter o mesmo
resultado, porm a pgina ir carregar muito mais rpido.
Voc aprender a trabalhar com o cdigo HTML em uma aula especfica. Veja
76
com o usurio atravs de uma interface intuitiva que diminui o grau de aprendizagem,
ao mesmo tempo em que possvel desenvolver solues profissionais em poucas
horas trabalho.
(Figura 54), que acompanha a instalao padro da ferramenta. Com essa interface, possvel localizar novas extensions na Internet, muitas delas disponveis gratuitamente para download.
77
Sntese da Aula
Nesta quinta e ltima aula verificamos como se cria uma estrutura visual no
78
Exerccios Propostos
1) Agora que voc j fez todas as aulas, sugiro que utilize tudo o que aprendeu para o
seu proveito, em um exerccio possvel de utilizar em outras aulas: fazer o seu site.
Hoje quem tem um currculo bem feito e com contedo de qualidade se destaca no
mercado. Imagine se voc tiver uma pgina na internet?
A idia voc criar nesse exerccio, uma pgina com o seu currculo. Elabore a identidade 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 currculo nas mos e que realmente aprendeu.
Guarde esses arquivos, pois em outras disciplinas voc pode utilizar para programar,
linkar e publicar.
Aproveite.
79
REFERNCIAS
KRUG, S. No me faa pensar: Uma abordagem de Bom Senso Usabilidade na
Web. 3. ed. Alta Books, 2006. 144p.
LEMAY, L. Aprenda a Criar pginas Web com HTML e XHTML em 21 dias. Makron
Books 2002. 1110p.
MEMRIA, F. Design para a Internet: projetando a experincia perfeita. Rio de
Janeiro: Elsevier, 2005. 171 p.
NIELSEN, J.; TAHIR, M. Homepage Usabilidade: 50 websites desconstrudos.
EUA: New Riders Pub, 2002. 315 p.
WILLIAMS, R. Design para quem no designer. 2. ed. [S.l.]: CALLIS, 2005.191 p.
80
Sobre o Autor
Professor por acaso, mas com paixo. Ps-graduado em Comunicao Empresarial e
Relaes Pblicas e Graduado em Design Grfico passando pela Escola Tcnica, como aluno do curso de Processamento de Dados. Essas vrias reas permitiramme ser um empreendedor. Trabalhei como designer, no
meu escritrio, paralelamente, lecionei na SOCIESC as
disciplinas de computao grfica, multimdia, desenho
de observao, anlise de sistemas entre outras. Por um tempo, afastei-me do Brasil, buscando horizontes mais distantes, trabalhando na Espanha, em Madrid, como
analista de mercado na Dell Computers e, logo aps, como Web Designer em uma
agncia de internet.
projetos pessoais atuo como freelancer. Meu site tem todos os meus contatos e informao, basta acessar www.giuvicente.com.
81
Crditos
SOCIESC Sociedade Educacional de Santa Catarina
Design Grfico
Thiago Vedoi de Lima
Equipe Didtico-Pedagcia
Giuliano Vicente