Capacitao Layout Web

Diego Martins Conselheiro Estratgico

Base Trs Consultoria em Informtica

Sobre grficos vetoriais e de bitmap

Sobre grficos vetoriais

Os grficos vetoriais processam imagens usando linhas e curvas, chamadas vetores,
que incluem informaes sobre cor e posio. Por exemplo, vrios pontos, que descrevem o contorno de uma folha, podem definir a imagem dessa folha. A cor do contorno (o trao) e a cor da rea delimitada pelo contorno (o preenchimento) determinam a cor da folha . Quando edita um grfico vetorial, o usurio modifica as propriedades das linhas e das curvas que descrevem sua forma. Os grficos vetoriais independem da resoluo, ou seja, possvel mover, redimensionar, mudar a forma ou alterar a cor de um grfico vetorial, bem como exibi-lo em dispositivos de sada de diferentes resolues, sem alterar a qualidade da aparncia.

Sobre grficos de bitmap

Os grficos de bitmap so compostos por pontos, denominados pixels, organizados em uma grade. A tela do computador uma grande grade de pixels. Em uma verso em bitmap da folha, o local e o valor da cor de cada pixel na grade determinam a imagem. atribuda uma cor a cada ponto. Quando exibidos na resoluo correta, os pontos ajustam-se como ladrilhos em um mosaico para formar a imagem. Quando edita um grfico de bitmap, o usurio modifica pixels, em vez de linhas e curvas. Esses grficos de bitmap independem da resoluo, ou seja, os dados que descrevem a imagem so fixados a uma grade de um tamanho especfico. A ampliao de um grfico de bitmap redistribui os pixels na grade, dando s bordas da imagem uma aparncia desigual. A exibio de um grfico de bitmap em um dispositivo de sada com uma resoluo menor que a da prpria imagem tambm pode prejudicar a qualidade da imagem.

Criao 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 opes. Algumas opes continuam a ser exibidas durante o trabalho com a ferramenta. No caso de outras ferramentas, como as ferramentas de forma bsica, Pen (Caneta) e Line (Linha), o Property inspector exibe as propriedades do objeto selecionado. Para mais informaes sobre o Property inspector, consultar Uso do Property inspector na pgina 36.

Alterao de tamanho, cor e resoluo de uma tela

O Fireworks facilita a alterao do tamanho, da cor e da resoluo 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 seleo), clicar na ferramenta Pointer (Ponteiro) para exibir as propriedades do documento no Property inspector (Inspetor de propriedades) e, em seguida, clicar no boto Canvas Size. 2. Digitar as novas dimenses nas caixas de texto Width (Largura) e Height (Altura). 3. Clicar em um boto Anchor (ncora) para especificar os lados da tela que o Fireworks aumentar ou diminuir e clicar em OK.

Uso de rguas, guias e a grade

possvel usar rguas e guias para dispor objetos com a maior preciso possvel e para ajudar a desenhar. O usurio 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(Rgua)

Seleo de um objeto

Criando elementos de composio 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)

Retngulos 105 Width(largura) 63 Heigth(altura)

Espaamento 3px horizontal 3px vertical

Criando Efeito de Sombra

Criando Efeito de Sombra com fundo escuro

Criando Background
Retngulos 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 so os principais objetivos do seu site? (Informar? Vender? Dar suporte?)

- Quais so os principais objetivos do seu site? (Informar? Vender? Dar suporte?)

- Qual a capacidade dos usurios? (browser, velocidade de acesso) - O site atrair diferentes pessoas? Quais? Quais so as suas reas de interesse? - Qual o principal slogan do site? (a mensagem que melhor descreve seu contedo) - necessrio obter dados dos clientes? O qu preciso saber? Porqu? - Que reas do site precisam de atualizao? Quem se beneficia com esta atualizao? - Que informao do site mudar? Com que freqncia e com que abrangncia? - Descreva o produto como se fosse uma pessoa. (srio? estranho? jovem? confivel?) - Quando o site precisa estar pronto? - Quem aprovar o trabalho? - Quem hospedar e dar manuteno ao site? - Qual o oramento para o site?

Armas secretas de quem constri sites

Saber dizer no. Se um cliente no se encaixa nos seus critrios, analise se vale a pena aceitar o trabalho. Tentar orientar o cliente da melhor opo a ser feita. Como grandes projetos so geralmente melhores que pequenos projetos, melhor deixar de lado alguns projetos pequenos para concentrar-se em um projeto maior. Comunicao. A maior causa para que os projetos acabem mal est na falta de comunicao ou na m comunicao. A natureza mutante da Internet e a rapidez na liberao de novas verses de browsers podem confundir ou frustar qualquer um. s vezes, basta um mal entendido em torno de um simples termo tcnico. Clientes e projetistas devem conversar pelo menos duas vezes por semana. Viso do negcio. Muitos projetistas de sites no sabem quais os objetivos de negcio 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 grficos criando uma hierarquia: ttulos, subttulos, grfico grande, grfico mdio, grfico pequeno, amostras, etc. Use o menor nmero de classes possvel. - Use uma palette otimizada para as imagens em cada classe. Use sempre a mesma palette para uma determinada classe. - Use o mximo de recursos que sua ferramenta oferece e atualize a verso desta ferramenta com freqncia. - Faa cpias de segurana do seu layout

PSICODINMICA DAS CORES EM COMUNICAO

SENSAES VISUAIS ACROMTICAS E CROMTICAS As sensaes visuais que tm apenas a dimenso da luminosidade so chamadas de acromticas. 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 acromtica. J as sensaes visuais compostas por todas as cores do espectro solar, so denominadas cromticas. Podemos dizer que as cores quentes derivam do vermelho-alaranjado e as cores frias do azul-esverdeado.

Sensaes acromticas
Branco Associao material: neve, casamento, lrio, batismo. Associao afetiva: limpeza, paz, pureza, alma, divindade, ordem, infncia. Branco vem do germnico blank (brilhante). o smbolo da luz, e no 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 Associao material: enterro, sujeira, coisas escondidas. Associao afetiva: tristeza, desgraa, melancolia, angustia, dor, intriga, renncia. Vem do latim niger (negro, escuro, preto). angustiante e expressivo Cinza Associao material: neblina, mquinas. Associao afetiva: sabedoria, passado. Cinza do latim cinicia (cinza) ou do germnico gris (gris, cinza); Intermediria entre luz e sombra, o cinza no tem interferncia nas cores em geral.

Sensaes cromticas
Segue abaixo algumas sensaes cromticas: Vermelho Associao material: guerra, sangue, sol, mulher, feridas, perigo, fogo, rubi. Associao afetiva: fora, energia, paixo, vulgaridade, coragem, furor, violncia, calor, ao, agressividade. Laranja (faz correspondncia ao vermelho moderado) Associao material: pr do sol, festa, laranja, luz, outono, aurora, raios solares. Associao afetiva: tentao, prazer, alegria, energia, senso de humor, advertncia. Laranja tem origem do persa narang, por meio do rabe naranja. Simboliza o flamejar do fogo. Amarelo Associao material: palha, luz, vero, calor de luz solar, flores grandes. Associao afetiva: alerta, cime, orgulho, egosmo, euforia, originalidade, iluminao, idealismo. Vem do latim amaryllis. o smbolo da luz que irradia em todas as direes. Verde Associao material: frescor, primavera, bosques, guas claras, folhagem, mar, umidade. Associao afetiva: bem-estar, sade, paz, juventude, crena, coragem, firmeza, serenidade, natureza. o smbolo da harmonia da faixa que existe entre o cu e o Sol. De paz repousante e reservada, favorece o desencadeamento de paixes. Azul Associao material: frio, mar, cu, gelo, guas tranqilas, feminilidade. Associao afetiva: verdade, afeto, paz, advertncia, serenidade, espao, infinito, fidelidade, sentimento profundo. Tem origem no rabe e no persa lzrd, por lazaward (azul). Proporciona a sensao do movimento para o infinito. Cu sem nuvens. Fonte: FARINA, Modesto, Psicodinmica das cores em comunicao. 5 ed. So Paulo: Edgard Blusher, 2000

www.mariaclaudiacortes.com/colores/colors.swf

Vetorizao

Continuao...

Topos

Rodap

Teste seu conhecimento

Crie um novo layout para o site da Base Trs.

Referncias: 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/