Capacitação Layout Web

Diego Martins – Conselheiro Estratégico

Base Três Consultoria em Informática
 Sobre gráficos
vetoriais e de bitmap
Sobre gráficos vetoriais
Os gráficos vetoriais processam imagens usando linhas e curvas, chamadas vetores,
que
incluem informações sobre cor e posição. Por exemplo, vários pontos, que descrevem o
contorno de uma folha, podem definir a imagem dessa folha.
A cor do contorno (o traço) e a cor da área delimitada pelo contorno (o preenchimento)
determinam a cor da folha . Quando edita um gráfico vetorial, o usuário modifica as
propriedades das linhas e das curvas que descrevem sua forma. Os gráficos vetoriais
independem da resolução, ou seja, é possível mover, redimensionar, mudar a forma ou
alterar a cor de um gráfico vetorial, bem como exibi-lo em dispositivos de saída de
diferentes resoluções, sem alterar a qualidade da aparência.
Sobre gráficos de bitmap

Os gráficos de bitmap são compostos por pontos, denominados pixels, organizados em

uma grade. A tela do computador é uma grande grade de pixels. Em uma versão em bitmap
da folha, o local e o valor da cor de cada pixel na grade determinam a imagem. É atribuída
uma cor a cada ponto. Quando exibidos na resolução correta, os pontos ajustam-se como
ladrilhos em um mosaico para formar a imagem. Quando edita um gráfico de bitmap, o
usuário modifica pixels, em vez de linhas e curvas.
Esses gráficos de bitmap independem da resolução, ou seja, os dados que descrevem a
imagem são fixados a uma grade de um tamanho específico. A ampliação de um gráfico de
bitmap redistribui os pixels na grade, dando às bordas da imagem uma aparência desigual.
A exibição de um gráfico de bitmap em um dispositivo de saída com uma resolução menor
que a da própria imagem também pode prejudicar a qualidade da imagem.
Criação de um novo documento
Ambiente de trabalho do Fireworks
Uso do painel Tools

O painel Tools (Ferramentas) é organizado em seis categorias:

Select (Selecionar),

Bitmap,

Vector (Vetor),

Web,

Colors (Cores)

View (Exibir).
 Property inspector (Inspetor de propriedades)

Quando uma ferramenta é selecionada, o Property inspector (Inspetor de

propriedades) exibe suas opções. Algumas opções continuam a ser exibidas durante o
trabalho com a ferramenta. No caso de outras ferramentas, como as ferramentas de
forma básica, Pen (Caneta) e Line (Linha), o Property inspector exibe as propriedades
do objeto selecionado. Para mais informações sobre o Property inspector, consultar
“Uso do Property inspector” na página 36.
Alteração de tamanho, cor e resolução de uma tela

O Fireworks facilita a alteração do tamanho, da cor e da resolução da imagem da

tela.
Para alterar o tamanho da tela:

1. Seguir um destes procedimentos:

■ Selecionar Modify (Modificar) > Canvas (Tela) > Canvas Size (Tamanho da tela).

■ Escolher Select (Selecionar) > Deselect (Cancelar seleção), clicar na ferramenta

Pointer (Ponteiro) para exibir as propriedades do documento no Property
inspector (Inspetor de propriedades) e, em seguida, clicar no botão Canvas Size.

2. Digitar as novas dimensões nas caixas de texto Width (Largura) e Height (Altura).

3. Clicar em um botão Anchor (Âncora) para especificar os lados da tela que o

Fireworks

aumentará ou diminuirá e clicar em OK.

Uso de réguas, guias e a grade

É possível usar réguas e guias para dispor objetos com a maior precisão possível e para
ajudar a desenhar. O usuário pode colocar guias no documento e alinhar objetos a essas guias ou
ativar a grade do Fireworks e alinhar objetos a ela.

■ Selecionar View(Exibir) >>> Grid(Grade) >>> Show Grid(Mostrar Grades)

■ Selecionar View (Exibir) >>> Rules(Régua)
Seleção de um objeto
 Criando elementos de
composição de um layout
Criando Objeto vetorial
Vector >>> Pen Tool(P)
Criando Objeto vetorial

Property inspector >> Pecil >> 1- Pixel Soft

Criando Objeto vetorial
Vector >> Rounder Rectangle

Property inspector >> Cor “#0099FF ” >> Pecil >> 1- Pixel Soft
Property inspector >> Solid >> Gradient >> Elipse
Vector >> Elipse Tool

Select >> Subselection

 Cores Palette RGB

Cor “#0099FF ” Cor “#009900 ” Cor “#FF802B ”

Criando Mascara

Documento
768 – Width(largura)
200 – Heigth(altura)

Retângulos
105 – Width(largura)
63 – Heigth(altura)

Espaçamento
3px – horizontal
3px – vertical
Criando Efeito de Sombra
Criando Efeito de Sombra com fundo escuro
Criando Background
Retângulos
828 – Width(largura)
990 – Heigth(altura)

Cor
Efeito >Linear > Vertical
1 - #05385D
2- #0963A6

Textura
Line- Daig1 – Opacidy 10%
Criando Topo
Rounder Rectangle
777 – Width(largura)
288 – Heigth(altura)

Cor de Preenchimento
Efeito >Linear > Vertical
1 – # E1E1E1
2 – # FFFFFF(BRANCO)

Cor da Linha #EAEAEA - 3 px

Criando Topo
Criando Topo – Menu
Rounder Rectangle

Cor - Preto

Opacity – 70%
 Layout Web
Perguntas a responder antes de iniciar o projeto do site
- Quais são os principais objetivos do seu site? (Informar?
Vender? Dar suporte?)
- Quais são os principais objetivos do seu site? (Informar?
Vender? Dar suporte?)
 - Qual é a capacidade dos usuários? (browser, velocidade de acesso)
- O site atrairá diferentes pessoas? Quais? Quais são as suas áreas de interesse?
- Qual é o principal slogan do site? (a mensagem que melhor descreve seu conteúdo)
- É necessário obter dados dos clientes? O quê é preciso saber? Porquê?
- Que áreas do site precisam de atualização? Quem se beneficia com esta atualização?
- Que informação do site mudará? Com que freqüência e com que abrangência?
- Descreva o produto como se fosse uma pessoa. (sério? estranho? jovem? confiável?)
- Quando o site precisa estar pronto?
- Quem aprovará o trabalho?
- Quem hospedará e dará manutenção ao site?
- Qual o orçamento para o site?
Armas secretas de quem constrói sites

Saber dizer não. Se um cliente não se encaixa nos seus critérios, analise se vale a
pena aceitar o trabalho. Tentar orientar o cliente da melhor opção a ser feita. Como
grandes projetos são geralmente melhores que pequenos projetos, é melhor deixar de
lado alguns projetos pequenos para concentrar-se em um projeto maior.

Comunicação. A maior causa para que os projetos acabem mal está na falta de
comunicação ou na má comunicação. A natureza mutante da Internet e a rapidez na
liberação de novas versões de browsers podem confundir ou frustar qualquer um. Às
vezes, basta um mal entendido em torno de um simples termo técnico. Clientes e
projetistas devem conversar pelo menos duas vezes por semana.

Visão do negócio. Muitos projetistas de sites não sabem quais os objetivos de negócio
dos seus clientes. Pense em formas de usar a web de forma eficaz para a empresa.
Alguns segredos para produzir sites web

- Use uma nomeclatura consistente.

- Padronize os tamanhos dos gráficos criando uma hierarquia: títulos, subtítulos,

gráfico grande, gráfico médio, gráfico pequeno, amostras, etc. Use o menor número de
classes possível.

- Use uma palette otimizada para as imagens em cada classe. Use sempre a mesma
palette para
uma determinada classe.

- Use o máximo de recursos que sua ferramenta oferece e atualize a versão desta
ferramenta com freqüência.

- Faça cópias de segurança do seu layout

PSICODINÂMICA DAS CORES
EM COMUNICAÇÃO
SENSAÇÕES VISUAIS ACROMÁTICAS E CROMÁTICAS

As sensações visuais que têm apenas a dimensão da luminosidade são chamadas

de acromáticas. Incluem-se todas as tonalidades entre o branco e o preto, quer dizer,
o cinza claro, o cinza e o cinza-escuro, formando a chamada escala acromática.
Já as sensações visuais compostas por todas as cores do espectro solar, são
denominadas cromáticas.
Podemos dizer que as cores quentes derivam do vermelho-alaranjado e as cores
frias do azul-esverdeado.
Sensações acromáticas
Branco
• Associação material: neve, casamento, lírio, batismo.
• Associação afetiva: limpeza, paz, pureza, alma, divindade, ordem, infância.
• Branco vem do germânico blank (brilhante). É o símbolo da luz, e não é
considerada cor. No ocidente, o branco traduz a vida e o bem, em contrapartida para os
orientais o branco traduz a morte, o fim ou o nada.

Preto
• Associação material: enterro, sujeira, coisas escondidas.
• Associação afetiva: tristeza, desgraça, melancolia, angustia, dor, intriga, renúncia.
• Vem do latim niger (negro, escuro, preto). É angustiante e expressivo

Cinza
• Associação material: neblina, máquinas.
• Associação afetiva: sabedoria, passado.
• Cinza do latim cinicia (cinza) ou do germânico gris (gris, cinza);

Intermediária entre luz e sombra, o cinza não tem interferência nas cores em geral.
Sensações cromáticas
Segue abaixo algumas sensações cromáticas:

Vermelho
• Associação material: guerra, sangue, sol, mulher, feridas, perigo, fogo, rubi.
• Associação afetiva: força, energia, paixão, vulgaridade, coragem, furor, violência, calor, ação, agressividade.

Laranja (faz correspondência ao vermelho moderado)

• Associação material: pôr do sol, festa, laranja, luz, outono, aurora, raios solares.
• Associação afetiva: tentação, prazer, alegria, energia, senso de humor, advertência.
• Laranja tem origem do persa narang, por meio do árabe naranja. Simboliza o flamejar do fogo.

Amarelo
• Associação material: palha, luz, verão, calor de luz solar, flores grandes.
• Associação afetiva: alerta, ciúme, orgulho, egoísmo, euforia, originalidade, iluminação, idealismo.
• Vem do latim amaryllis. É o símbolo da luz que irradia em todas as direções.

Verde
• Associação material: frescor, primavera, bosques, águas claras, folhagem, mar, umidade.
• Associação afetiva: bem-estar, saúde, paz, juventude, crença, coragem, firmeza, serenidade, natureza.
• É o símbolo da harmonia da faixa que existe entre o céu e o Sol. De paz repousante e reservada, favorece o desencadeamento
de paixões.

Azul
• Associação material: frio, mar, céu, gelo, águas tranqüilas, feminilidade.
• Associação afetiva: verdade, afeto, paz, advertência, serenidade, espaço, infinito, fidelidade, sentimento profundo.
• Tem origem no árabe e no persa lázúrd, por lazaward (azul). Proporciona a sensação do movimento para o infinito. Céu sem
nuvens.
Fonte:
FARINA, Modesto, Psicodinâmica das cores em comunicação. 5° ed. São Paulo: Edgard
Blusher, 2000
www.mariaclaudiacortes.com/colores/colors.swf
Vetorização
Continuação...
Topos
Rodapé
Teste seu conhecimento
 Crie um novo layout para o site
da Base Três.
Referências:
www.google.com.br
http://www.templatemonster.com
www.smashingmagazine.com
-Tipografia(Fontes)
-http://www.netfontes.com.br/
-http://superdownloads.uol.com.br/fontes/
-www.google.com.br
-Logos
-http://logopond.com/