Paleta de cores

Paleta de cores para Designers

Site com Fireworks - Parte 9

Com todas as páginas prontas em Fireworks, vamos agora exportar para o formato HTML.

Obs.: Abra todas as páginas no Fireworks, você deverá fazer isso em todas as páginas, uma de cada vez.

01. Menu Arquivo / Exportar...
02. Selecione a pasta projeto

1 - Nome do arquivo.
2 - Padrão de exportação
3 - Formato de exportação
4 - Fatias (melhora a montagem da página)
5 - Marque a opção para poder escolher onde salvar as imagens.
6 - Selecione a pasta imagem dentro da pasta projeto.

03. Salve e feche a página no FireWorks.

04. Repita estre procedimento para cada página.

Site com Fireworks - Parte 8

Vamos continuar fazendo as páginas de outros produtos agora.
Abra o arquivo autofalante.png.

01. Na janela Molduras, selecione a moldura de 01 pressione Shift e clique na moldura 06, todas as molduras ficarão selecionadas menos a moldura VAZIA. Clique na lixeirinha para apagar essas molduras.

02. Escreva o nome dos produtos que irão aparecer nessa página. Exemplos:
Twitter 01
Twitter 02
Twitter 03
Twitter 04
Twitter 05
Twitter 06

Selecione todos os textos, vá no menu Modificar / Alinhar / Esquerda.
Menu Modificar / Alinhar / Distribuir Alturas.

02. Vamos transformar os texto em botão, para isso selecione cada texto e pressione F8 um de cada vez...
Twitter 01 - bt_t01 - botão
Twitter 02 - bt_t02 - botão
Twitter 03 - bt_t03 - botão
Twitter 04 - bt_t04 - botão
Twitter 05 - bt_t05 - botão
Twitter 06 - bt_t06 - botão

03. Agora com a ferramenta Fatia,

Crie um retângulo de W=540, H=400, X=250 e Y=330.

04. Agora na janela Molduras copie mais 6 molduras. Clicando na primeira e arrastando para cima da folhinha branca. Depois renomeie cada moldura como na imagem abaixo.

05. Agora volte para a moldura VAZIA, clique no primeiro botão, depois clique na marcação branca e depois clique em "Adicionar comportamento Troca imagem..."

06. Na caixa que se abre selecione o quadro destacado com o número 1 e depois na opção da Moldura marque a moldura de nome 01 que equivalerá a de número 2, e OK.

07. Selecione o seu segundo botão depois clique na marcação branca e depois clique em "Adicionar comportamento Troca imagem..." Siga o passo anterior de primeiro selecionar o quadro marcado como 1º e na moldura marque agora a moldura de nome 02 que equivalerá a de número 3.

08. Repita para os outros botões trocando sempre a moldura correspondente.

09. Agora vamos aprimorar as molduras, selecione a moldura de nome 01 pressione Ctrl+R para inserir uma imagem, selecione a imagem correspondente ao seu menu e posicione dentro da área verde.

10. Depois clique na moldura de nome 02, pressione Ctrl+R e insira outra imagem.

11. Repita para cada moldura uma imagem.

12. Salve com o nome de twitter.png

Site com Fireworks - Parte 7

Vamos continuar fazendo as páginas de outros produtos agora.
Abra o arquivo autofalante.png.

01. Na janela Molduras, selecione a moldura de 01 pressione Shift e clique na moldura 06, todas as molduras ficarão selecionadas menos a moldura VAZIA. Clique na lixeirinha para apagar essas molduras.

02. Escreva o nome dos produtos que irão aparecer nessa página. Exemplos:
Módulo 01
Módulo 02
Módulo 03
Módulo 04
Módulo 05
Módulo 06

Selecione todos os textos, vá no menu Modificar / Alinhar / Esquerda.
Menu Modificar / Alinhar / Distribuir Alturas.

02. Vamos transformar os texto em botão, para isso selecione cada texto e pressione F8 um de cada vez...
Módulo 01 - bt_m01 - botão
Módulo 02 - bt_m02 - botão
Módulo 03 - bt_m03 - botão
Módulo 04 - bt_m04 - botão
Módulo 05 - bt_m05 - botão
Módulo 06 - bt_m06 - botão

03. Agora com a ferramenta Fatia,

Crie um retângulo de W=540, H=400, X=250 e Y=330.

04. Agora na janela Molduras copie mais 6 molduras. Clicando na primeira e arrastando para cima da folhinha branca. Depois renomeie cada moldura como na imagem abaixo.

05. Agora volte para a moldura VAZIA, clique no primeiro botão, depois clique na marcação branca e depois clique em "Adicionar comportamento Troca imagem..."

06. Na caixa que se abre selecione o quadro destacado com o número 1 e depois na opção da Moldura marque a moldura de nome 01 que equivalerá a de número 2, e OK.

07. Selecione o seu segundo botão depois clique na marcação branca e depois clique em "Adicionar comportamento Troca imagem..." Siga o passo anterior de primeiro selecionar o quadro marcado como 1º e na moldura marque agora a moldura de nome 02 que equivalerá a de número 3.

08. Repita para os outros botões trocando sempre a moldura correspondente.

09. Agora vamos aprimorar as molduras, selecione a moldura de nome 01 pressione Ctrl+R para inserir uma imagem, selecione a imagem correspondente ao seu menu e posicione dentro da área verde.

10. Depois clique na moldura de nome 02, pressione Ctrl+R e insira outra imagem.

11. Repita para cada moldura uma imagem.

12. Salve com o nome de modulo.png

Site com Fireworks - Parte 6

Vamos continuar fazendo as páginas de outros produtos agora.
Abra o arquivo autofalante.png.

01. Na janela Molduras, selecione a moldura de 01 pressione Shift e clique na moldura 06, todas as molduras ficarão selecionadas menos a moldura VAZIA. Clique na lixeirinha para apagar essas molduras.

02. Escreva o nome dos produtos que irão aparecer nessa página. Exemplos:
Auto Rádio 01
Auto Rádio 02
Auto Rádio 03
Auto Rádio 04
Auto Rádio 05
Auto Rádio 06

Selecione todos os textos, vá no menu Modificar / Alinhar / Esquerda.
Menu Modificar / Alinhar / Distribuir Alturas.

02. Vamos transformar os texto em botão, para isso selecione cada texto e pressione F8 um de cada vez...
Auto Rádio 01 - bt_ar01 - botão
Auto Rádio 02 - bt_ar02 - botão
Auto Rádio 03 - bt_ar03 - botão
Auto Rádio 04 - bt_ar04 - botão
Auto Rádio 05 - bt_ar05 - botão
Auto Rádio 06 - bt_ar06 - botão

03. Agora com a ferramenta Fatia,

Crie um retângulo de W=540, H=400, X=250 e Y=330.

04. Agora na janela Molduras copie mais 6 molduras. Clicando na primeira e arrastando para cima da folhinha branca. Depois renomeie cada moldura como na imagem abaixo.

05. Agora volte para a moldura VAZIA, clique no primeiro botão, depois clique na marcação branca e depois clique em "Adicionar comportamento Troca imagem..."

06. Na caixa que se abre selecione o quadro destacado com o número 1 e depois na opção da Moldura marque a moldura de nome 01 que equivalerá a de número 2, e OK.

07. Selecione o seu segundo botão depois clique na marcação branca e depois clique em "Adicionar comportamento Troca imagem..." Siga o passo anterior de primeiro selecionar o quadro marcado como 1º e na moldura marque agora a moldura de nome 02 que equivalerá a de número 3.

08. Repita para os outros botões trocando sempre a moldura correspondente.

09. Agora vamos aprimorar as molduras, selecione a moldura de nome 01 pressione Ctrl+R para inserir uma imagem, selecione a imagem correspondente ao seu menu e posicione dentro da área verde.

10. Depois clique na moldura de nome 02, pressione Ctrl+R e insira outra imagem.

11. Repita para cada moldura uma imagem.

12. Salve com o nome de autoradio.png

Site com Fireworks - Parte 5

Vamos fazer uma página de produtos.
Abra o arquivo produtos.png.

01. Escreva o nome dos produtos que irão aparecer nessa página. Exemplos:
Auto Falante 01
Auto Falante 02
Auto Falante 03
Auto Falante 04
Auto Falante 05
Auto Falante 06

Selecione todos os textos, vá no menu Modificar / Alinhar / Esquerda.
Menu Modificar / Alinhar / Distribuir Alturas.

02. Vamos transformar os texto em botão, para isso selecione cada texto e pressione F8 um de cada vez...
Auto falante 01 - bt_af01 - botão
Auto falante 02 - bt_af02 - botão
Auto falante 03 - bt_af03 - botão
Auto falante 04 - bt_af04 - botão
Auto falante 05 - bt_af05 - botão
Auto falante 06 - bt_af06 - botão

03. Agora com a ferramenta Fatia,

Crie um retângulo de W=540, H=400, X=250 e Y=330.

04. Agora na janela Molduras copie mais 6 molduras. Clicando na primeira e arrastando para cima da folhinha branca. Depois renomeie cada moldura como na imagem abaixo.

05. Agora volte para a moldura VAZIA, clique no primeiro botão, depois clique na marcação branca e depois clique em "Adicionar comportamento Troca imagem..."

06. Na caixa que se abre selecione o quadro destacado com o número 1 e depois na opção da Moldura marque a moldura de nome 01 que equivalerá a de número 2, e OK.

07. Selecione o seu segundo botão depois clique na marcação branca e depois clique em "Adicionar comportamento Troca imagem..." Siga o passo anterior de primeiro selecionar o quadro marcado como 1º e na moldura marque agora a moldura de nome 02 que equivalerá a de número 3.

08. Repita para os outros botões trocando sempre a moldura correspondente.

09. Agora vamos aprimorar as molduras, selecione a moldura de nome 01 pressione Ctrl+R para inserir uma imagem selecione a imagem correspondente ao seu menu e posicione dentro da área verde.

10. Depois clique na moldura de nome 02, pressione Ctrl+R e insira outra imagem.

11. Repita para cada moldura uma imagem.

12. Salve com o nome de autofalante.png

Site com Fireworks - Parte 4

Vamos para mais uma parte do nosso projeto.
Então exclua os ícones e seus respectivos textos. Deixando a tela assim:

01. Digite o texto Quem somos? e configure da seguinte forma:
Fonte Verdana, Tamanho 40, cor Azul #0000FF, X=36 e Y=250.
 Depois digite o seguinte texto:

A ACMSound é uma empresa especializada em acessórios automotivos, fundada em 02 de maio de 1973, a empresa tem como principal objetivo a satisfação total de seus clientes, contamos com profissionais altamente qualificados e dispostos a atender seus clientes com qualidade, dispomos de produtos inovadores no mercado, com a garantia que só a ACMSound oferece.

Em nossa loja você encontra uma sala climatizada com área WI-FI, televisão e aquele delicioso cafezinho para você esperar o serviço em um ambiente confortável e agradável, e é claro, a maior qualidade pelo melhor preço!

Pela internet ou na loja física a ACMSound oferece o melhor em acessórios automotivos. Aproveite nossas ofertas!

Formate da seguinte forma:

Fonte Verdana, Tamanho 20, cor #0000FF, Recuo de parágrafo 25, espaço para parágrafo anterior 12 e espaço depois de 12, X=46 e Y=338.

02. Salve com o nome de quemsomos.

Site com Fireworks - Parte 3

01. Agora vamos para mais uma etapa, abra o arquivo INDEX.PNG, exclua os elementos que não iremos utilizando deixando a tela assim:

02. Salve como o nome de CONTATO. (em minúsculo).

03. Pressione Ctrl+R e importe todos os ícones:
Telefone - W=70, H=70, X=86 e Y=236;
(51) 3469-1818 - fonte verdana, tamanho 20, cor #0000FF, X=164 e Y=276
Facebook - W=70, H=70, X=85 e Y=377;
www.facebook.com.br/acmsound - fonte verdana, tamanho 20, cor #0000FF, X=164 e Y=419
Twitter - W=70, H=70, X=85 e Y=519;
@acmsound - fonte verdana, tamanho 20, cor #0000FF, X=164 e Y=559
Email - W=70, H=70, X=85 e Y=661;
vendas@acmsound.com.br - fonte verdana, tamanho 20, cor #0000FF, X=164 e Y=699

04. Salve a imagem.

Site com Fireworks - Parte 2

Antes de darmos sequência ao nosso projeto, vamos adicionar os links para cada botão.
01. Selecione o botão [INICIO] e em Link digite: index.htm.

02. Para [PRODUTOS] digite: produtos.htm.
03. Para [PROMOÇÃO] digite: promocao.htm. (sem acentuação)
04. Para [QUEM SOMOS] digite: quemsomos.htm. (sem espaços)
05. Para [CONTATO] digite: contato.htm.

06. Salve.

07. Agora poderemos dar sequência... Apague os objetos que não serão usados nesse nova etapa ficando como na imagem abaixo.

Salve como o nome de produtos.

08. Crie um retângulo com as seguintes propriedades:
W: 650, H:40, X:0 e Y:230 na cor #0000FF

09. Adicione os seguintes texto:
[Alto Falante]  Fonte Verdana, tamanho 20 na cor #00FFFF, X=14 eY=237
[Auto Rádio]   Fonte Verdana, tamanho 20 na cor #00FFFF, X=179 eY=237
[Módulo]   Fonte Verdana, tamanho 20 na cor #00FFFF, X=362 eY=237
[Twitter]   Fonte Verdana, tamanho 20 na cor #00FFFF, X=524 eY=237

10. Selecione a palavra Alto Falante, aperte F8 e configure o botão para:

11. Ajuste os menu...
Desse

Para

12. Selecione uma das linhas do menu superior copie e cole.

Posicione: W=1, H=30, X=160 e Y=239
Outra em: W=1, H=30, X=320 e Y=239
Outra em: W=1, H=30, X=480 e Y=239
Outra em: W=1, H=30, X=640 e Y=239

13. Selecione a barra azul e coloque um efeito de sombra.

14. Adicionando os links aos botões:
[Alto Falante] e adicione o link: altofalante.htm. (sem espaço)
[Alto Rádio] e adicione o link: altoradio.htm. (sem espaço)
[Módulo] e adicione o link: modulo.htm. (sem acento)
[Twitter] e adicione o link: twitter.htm.

15. Salve o trabalho.

Site com Fireworks - Parte 1

01. Crie um palco com 1024 x 768, resolução de 72 Pixels/Polegadas. Cor da tela Branca.

02. Faça um retângulo de 1024 x 150, posicione em X=0 e Y=0.

03. Mude o tipo de preenchimento para Linear e configura as cores da seguinte forma:

04. Altere o sentido do preenchimento Linear para:

05. Vá em Efeitos / Sombra e Brilho / Aplicar Sombra;

06. Faça outro retângulo com as medidas 1024 x 40 e posição X=0 e Y=165. E cor #0000FF.

07. Aplique o mesmo efeito de sombra.

08. Vamos fazer mais um retângulo com as medidas 1024 x 30 na posição X=0 e Y=738.

09. Com a ferramenta linha desenhe uma linha com as seguintes informações:
W=1, H=30, X=160 e Y=175, Cor: #00FFFF, e Tamanho da Ponta=2

10. Com a linha já desenha e selecionada pressione Ctrl+C + Ctrl+V, posicione na posição:
X=320 e Y=175. Mais uma linha na posição X=480 e Y=175, outro na posição X=640 e Y=175 e por último outra na posição X=800 e Y=175.

11. Vamos agora montar o menu. Escreva a palavra INICIO, em letras maiúsculas, formate para fonte Verdana, tamanho 20, Cor #33CCFF, na posição X=41, Y=172 e marque a opção "Sem Suavização de Serrilhado"

12. Escreva PRODUTOS, fonte Verdana, tamanho 20, Cor #33CCFF, na posição X=179, Y=172 e marque a opção "Sem Suavização de Serrilhado".

13. Escreva PROMOÇÃO fonte Verdana, tamanho 20, Cor #33CCFF, na posição X=337, Y=172 e marque a opção "Sem Suavização de Serrilhado".

14. Escreva QUEM SOMOS fonte Verdana, tamanho 20, Cor #33CCFF  na posição X=485, Y=172 e marque a opção "Sem Suavização de Serrilhado".

15. Escreva CONTATO fonte Verdana, tamanho 20, Cor #33CCFF  na posição X=667, Y=172 e marque a opção "Sem Suavização de Serrilhado".

16. Vamos adicionar um texto agora, então digite "Todos os Direitos Reservados a ACMSound (R)", fonte Verdana tamanho 12, também sem suavização de serrilhado. Posição X=380 e Y=744.

17. Digite o seguinte texto:
* Som
* Alarme
* Elétrica
* Película
Fonte: arial black, tamanho 25, cor branca, Posição X=842 e Y=15.

18. Digite ACM Sound, na fonte Arial Black, tamanho 60 na cor #0000FF, com efeito de brilho, Largura 10, Opacidade 80%, Suavidade 10 e Deslocamento 0. Posição X=179 e Y=46

19. Crie um retângulo de 720 x 434 na posição X=51 e Y= 263 na cor preta. Copie e cole esse retângulo e altere a posição X=44, Y=254 e a cor para #00FFFF.

20. Faça outro retângulo com as seguintes propriedades:
W=560, H=50, X=114 e Y=279 na cor vermelha, duplique o retângulo pinte de preto e altere para X=111 e Y=276.

21. Vamos digitar o seguinte texto: PROMOÇÃO DA SEMANA, fonte verdana, tamanho 38, na cor amarela, estilo negrito, na posição X=130 e Y=280.

22. Selecione o texto mais o retângulo preto e mais o vermelho, agrupe. Agora com a ferramenta dimensionar rotacione um pouco o grupo.

Altere a posição para: X=116 e Y=221.

23. Insira o seguinte texto:

Alto Falante Pionner  == Fonte [Arial Black], tamanho [30], cor [0000FF]
Sub Woofer              == Fonte [Verdana], tamanho 25, cor [0000FF]
1400 Watts RMS     == Font [Verdana], tamanh[20], cor [0000FF]
Competição              == Font [Verdana], tamanh[20], cor preta
TSW 309                 == Font [Verdana], tamanh[20], cor preta
12 pol                      == Font [Verdana], tamanh[20], cor preta

24. Crie um retângulo W=313, H=74, X=362 e Y=585 na cor vermelha.
25. Digite texto na cor amarela, R$ 199,99 onde o "R$199" será do tamanho 60 e ",99" será do tamanho 30 e o deslocamento da linha de Base 20. Posição X=366 e Y=587.

26. Pressione Ctrl+R e insira a imagem de um alto falante com as seguintes características:
W=270, H=270, X=74 e Y=390.

27. Vamos agora inserir um logo. Pressione Ctrl+R selecione o logo e insira com as seguintes propriedades:
W=109, H=109, X=28 e Y=18.

28. Agora vamos configurar os botões. Clique no menu INICIO aperte a tecla F8.

Repita para os outros itens de menu.

Seu menu ficou assim:

29. Altere a largura e altura das fatias pelas linhas vermelhas.

30. Crie um retângulo com cantos arredondados de 180 x 440 na posição X=820 e Y=251, de cor branca e contorno Azul (#0000FF). Tamanho da ponta 2.

31. Vamos inserir os logos dos cartões, MASTERCARD, VISA, HIPERCARD, DINERS CLUB E REDE SHOP.
Hipercard => W=144, H=63, X=837 e Y=262
Visa         => W=144, H=92, X=837 e Y=327
Diners Club=> W=144, H=82, X=837 e Y=421
MasterCard=> W=144, H=87, X=837 e Y=505
Rede Shop => W=97, H=97, X=860 e Y=590

32. Salve como "index".