Capacitação Layout Web

Diego Martins – Conselheiro EstratégicoBase Três Consultoria em Informática

Sobre gráficos Sobre gráficos vetoriais e de bitmapvetoriais e de bitmap

Sobre gráficos vetoriaisSobre 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 bitmapSobre 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 documentoCriação de um novo documento

Ambiente de trabalho do FireworksAmbiente de trabalho do Fireworks

Uso do painel ToolsUso do painel Tools

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

Select (Selecionar),

Bitmap,

Vector (Vetor),

Web,

Colors (Cores)

View (Exibir).

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.

Property inspector (Inspetor de propriedades) Property inspector (Inspetor de propriedades)

Alteração de tamanho, cor e resolução de uma telaAlteraçã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 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 objetoSeleção de um objeto

Criando elementos de Criando elementos de composição de um layoutcomposição de um layout

Criando Objeto vetorialCriando Objeto vetorial

Vector >>> Pen Tool(P)Vector >>> Pen Tool(P)

Criando Objeto vetorialCriando Objeto vetorial

Property inspector >> Pecil >> 1- Pixel Soft

Criando Objeto vetorialCriando Objeto vetorial

Property inspector >> Cor “#0099FF ” >> Pecil >> 1- Pixel Soft

Vector >> Rounder Rectangle

Property inspector >> Solid >> Gradient >> Elipse

Vector >> Elipse Tool

Select >> Subselection

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

Cores Palette RGBCores Palette RGB

Criando MascaraCriando Mascara

Documento

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

105 – Width(largura)63 – Heigth(altura)

Retângulos

3px – horizontal3px – vertical

Espaçamento

Criando Efeito de Criando Efeito de SombraSombra

Criando Efeito de Criando Efeito de Sombra com fundo escuroSombra com fundo escuro

Criando Background Criando Background

828 – Width(largura)990 – Heigth(altura)

Retângulos

CorEfeito >Linear > Vertical1 - #05385D2- #0963A6

TexturaLine- Daig1 – Opacidy 10%

Criando TopoCriando Topo

777 – Width(largura)288 – Heigth(altura)

Cor de Preenchimento Efeito >Linear > Vertical1 – # E1E1E12 – # FFFFFF(BRANCO)

Cor da Linha #EAEAEA - 3 px

Rounder Rectangle

Criando TopoCriando Topo

Criando Topo – Menu Criando Topo – Menu Rounder Rectangle

Cor - Preto

Opacity – 70%

Layout WebLayout WebPerguntas 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ãodenominadas 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 osorientais 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áticasSegue 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.brhttp://www.templatemonster.comwww.smashingmagazine.com-Tipografia(Fontes)-http://www.netfontes.com.br/-http://superdownloads.uol.com.br/fontes/-www.google.com.br-Logos-http://logopond.com/