curso de criação de layouts com fireworks
Post on 28-Jun-2015
810 Views
Preview:
DESCRIPTION
TRANSCRIPT
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/
top related