sexta-feira, 25 de maio de 2012

Website: Layout & Design

Ao criar o projeto de layout website, você terá de planejar o layout de vários elementos do seu site. Normalmente, estes são:
  •      Cabeçalho - normalmente irá conter o logotipo do cabeçalho, gráfico / design
  •      logotipo
  •      Área do menu principal - links do menu principal
  •      Sidebar - links do submenu e conteúdo da barra lateral outras
  •      Área de conteúdo - o conteúdo da página real
  •      Rodapé - Informações sobre direitos autorais e os links
 Vamos iniciar o Design da Logo do nosso Website.

Logo Design 

Vamos começar por criar um logotipo. Vamos aprender como usar as ferramentas de vetor, bem como a ferramenta de texto durante este processo. Também vamos aprender como usar a ferramenta de seleção de cores.

Clicando na seta abaixo da ferramenta retângulo você vai encontrar muitas formas pre-definidas que você pode usar.


Você pode experimentar com as várias formas e criar um logotipo.

No entanto, para o propósito deste tutorial, vamos usar a ferramenta Pen para criar uma forma como dado abaixo. Basta clicar em diferentes pontos e, finalmente, clique duas vezes para juntar as duas pontas.
 Certifique-se que a forma ainda selecionada, selecione a cor de preenchimento (cor dentro da forma) e cor do traço (cor de contorno) de sua escolha, clicando na caixa de seleção de cores e selecionando a cor desejada na paleta de cores que aparece (ver abaixo).

Temos agora uma forma colorida que se parece com isso:

  Agora vamos usar a ferramenta Texto para criar o texto logo.

     Clique na ferramenta Texto
     Clique ao lado a forma do logotipo onde você deseja que o texto
     Comece a digitar o seu nome, logotipo

Você vai obter algo como isto:

 Agora usando o Inspetor de Propriedades, ajuste a fonte do texto, tamanho, cor de preenchimento, cor de traço etc

Você vai obter algo como isto:
 
Para os fins deste tutorial, vamos considerar que o nosso logótipo foi criado, no entanto, pode continuar a experimentar as ferramentas de vetor e para criar um logotipo que você é feliz com ele.
 

 Você pode experimentar com a ferramenta (traçado vetorial) path vector bem como para obter curvas suaves. Se você tem uma assinatura, você pode usar a ferramenta de texto para digitar também. Você talvez algumas idéias a partir desses modelos de design de logotipo.

Usando a ferramenta de ponteiro, selecione todas as formas e texto juntos, desenhando um contorno em volta deles e agrupá-los [No menu principal, selecione (Modificar> Grupo) Modify> Group].

 Agora você pode mover o logotipo com facilidade sem se preocupar com as diferentes partes ficando separados.

Projeto Expediente

Agora que temos nosso logo pronto, é hora de criar o design de mastro para a área de cabeçalho do nosso layout.
Vamos escolher a ferramenta Retângulo e crie um retângulo grande em toda a largura do documento, para o alto.

O retângulo irá esconder o logotipo.

Isto é assim porque é criado em nova camada no topo da camada de logotipo. Você será capaz de ver isso no painel Layers.

  
 Se você é incapaz de ver o painel Layers no lado direito da tela, você pode precisar selecionar Layers> Janela para o visualizar.

  Quanto maior a camada, vem mais para a frente. A parte inferior da camada, que vai ainda mais para trás.

Para obter o logotipo na frente nós só precisa arrastar a camada retângulo cabeçalho e solte-o abaixo da camada de logotipo para que ele se parece com isso:
 

 O logotipo será visível agora se mudar a cor mastro de uma cor contrastante.

 Podemos usar um preenchimento de gradiente também:
Selecione o retângulo
No Inspetor de Propriedades, clique no menu suspenso ao lado da cor de preenchimento.

 Agora selecione 'Gradiente', depois 'Linear'

O retângulo será preenchido com um gradiente entre a cor de preenchimento e Stoke.
 

 Para alterar as cores do gradiente, clique no pequeno triângulo abaixo da cor de preenchimento no Inspetor de Propriedades.

 Clique no marcador de início (ver abaixo) e selecione a cor na paleta de cores que se abre.

 Da mesma forma você pode mudar a cor final também.
Você vai obter algo como isto:

Menu

Agora é o momento para criar o menu no Fireworks.

Primeiro vamos criar a área de menu principal, usando a ferramenta de forma de retângulo. Vamos fazer um retângulo preto. No caso, está sendo preenchido com um gradiente, você pode precisar selecionar "sólido" em vez de 'linear' no menu suspenso ao lado da cor de preenchimento, no painel Propriedades.

O layout será parecido com este:

Usando a ferramenta de texto com uma cor amarela criar os itens de menu:

     INICIO
     SOBRE
     SERVIÇOS
     CONTATO

Ele será parecido com este:

Da mesma forma criar a área de rodapé com as informações de copyright e rodapé do menu.
Você pode facilmente adicionar caracteres especiais como o símbolo de direitos autorais a partir do painel de caracteres especiais (ao lado do painel de propriedades).
 

Inserindo Imagens 

Agora vamos inserir uma imagem no layout. Você pode encontrar abaixo uma lista com sites com galerias de imagens, uma boa opção de baixo custo e imagens livres

 Para inserir uma imagem no Fireworks, siga estes passos:

     Clique em  'Arquivo' no menu principal
     Selecione 'Importar'
     Selecione o arquivo de imagem
     O cursor mudará
     Clique onde você deseja que o canto superior esquerdo da imagem para aparecer, em seguida, arraste e clique onde você deseja que o canto inferior direito para aparecer.
     A imagem será redimensionada e aparecer na área especificada.

Redimensionar uma imagem no Fireworks

Você pode tornar a imagem ainda menor usando a ferramenta de escala.
     Selecione a imagem
     Clique sobre a ferramenta de escala. Alças aparecerá nos cantos e nos lados da imagem.
     Arraste uma alça de canto da imagem (pressionando a tecla Shift para redimensionar proporcionalmente).

  Na próxima postagem continuaremos elaborando com mais detalhes nosso website, fiquem ligados.

 

segunda-feira, 30 de abril de 2012

CENA BOA NOITE.


  1. Criar as nuvens noturnas
    Primeiro, use a ferramenta Pen para desenhar o contorno de uma nuvem. As curvas não precisam ser perfeitamente lisa, contanto que você pode fechar o caminho do vetor. É melhor usar o branco para a cor do traço.
  2. outline
  3. Agora remova o contorno, e adicione um gradiente. Para as cores do gradiente, eu usei # # 7B86AC e 9AC5D8. Em seguida, alterar a textura de areia, e aumentar a percentagem para 19 .
  4. gradient fill
  5. Em seguida, adicionar um efeito para o objeto nuvem. Escolha Filters> Alien Skin Splat LE> Edges. Escolha Pixels com o modo Edge, definir as características de tamanho para 33, a Margem de 5,31, ea largura de Borda para 40,20. Deixe as outras opções em suas configurações padrão.
  6. Adicionar um outro efeito para o mesmo objeto, escolhendo Blur> Gaussian Blur e inserindo um valor de 6.
    Em seguida, você duplicará o objeto nuvem: Selecione o objeto, e, em seguida, copiar e colá-lo. Remover os filtros aplicados, e depois aplicar o filtro Eyecandy 4000 LE, e escolha Marble. Faça as seguintes alterações:
    • Vein Size to 73.28
    • Vein Coverage to 47
    • Vein Thickness to 67
    • Vein Roughness to 52
    • Background color branco, e vein color preto
    • Altere o modo da camada do objeto duplicado para Fuzzy Light, use Feather para a borda, e aplique os valores de 40-50.
    duplicate cloud
  7. Agora você vai adicionar mais nuvens, e fazer com que cada uma diferente. Isto é onde fica realmente divertido, duplicar as nuvens, pelo menos, cinco vezes. Para personalizar as nuvens, siga estes passos:
    • Selecione o objeto agrupado, escolha a ferramenta Subselection mover um objeto nuvem duplicado.
    move cloud
  8. Alterar a forma do objecto nuvem original e alterar os pontos do caminho vector usando a ferramenta de Subseleção.
  9. subselection tool
  10. Selecione um objeto de nuvem duplicado. Experimente com diferentes valores, tanto para a Vein Size e Vein Coverage.Você também pode querer ajustar alguns deles usando o efeito Hue/ Saturation, distorcer ou rodar algumas das nuvens.
  11. Para um efeito adicionado, agora você vai adicionar um fundo para as nuvens. Criar uma forma simples (você também pode usar o retângulo ou a forma de círculo), utilizando a ferramenta caneta, em seguida, alterar a borda de Pena, com um valor de 41. Alterar a cor de preenchimento da forma de um gradiente radial, e usar # #355C9F 5BACEE e para as cores. 
    add background
  12. Alterar o nível de opacidade do objeto a 72, e bloquear o objeto selecionado.
  13. change opacity
  14. Alterar o nível de opacidade do fundo 100-72, e tentar escalar o objeto até que ele cubra a maior parte das nuvens. Para o objeto aqui, a largura é 715 e a altura é de 411.
  15. scale object
    Criar as estrelas
    • Para criar as estrelas, comece por desenhar um círculo com uma largura e uma altura de pelo menos 46. Alterar a borda para Feather, e feather 37. Use as cores # FFFFFF e # 355C9F para o gradiente radial. Mude a opacidade de uma das cores (no meu exemplo, cor # 355C9F) 100-19.
    • stars
    • Agora selecione o objeto de estrela e altere sua altura e largura de 7. Agora você pode começar a duplicar as estrelas, selecionando, em seguida, copiar e colar. Você também pode querer alterar a altura e a largura das outras estrelas (basta lembrar que ambos os valores devem ser iguais e devem ter entre 2 e 7). Se você quiser fazer uma estrela brilhante, basta selecionar o objeto estrela, duplicá-lo uma ou duas vezes eo grupo duplicatas.
    • duplicate stars
    • Depois de ter feito todas as suas estrelas, organizá-los na cena.
      • Criando a lua cheia
      • Nesta última seção, comece usando a ferramenta elipse para criar um círculo com uma altura e largura de 173. Escolha Efeitos> Sombra e Brilho> Glow. Atribuir # A6C8D8 como a cor do brilho, e, em seguida, defina a opacidade para 65 e a Suavidade para 21.
      • Altere a cor da lua de branco para um gradiente linear. Para as cores, escolha C1E4E5 # e # FFFFFF. Mova o gradiente linear em torno de lidar com apenas o suficiente para acrescentar alguns tons de azul.
      • change color
      • Em seguida, para criar as crateras da lua, use a ferramenta caneta para desenhar uma forma. Alterar o modo de camada de Normal para Negação.
      •  
        Alterar o tipo de preenchimento da forma de (Pattern) Padrão (Oil Shape) Forma de óleo 1. Alterar o Edge para Feather e defina a pena para 23. Para a textura, escolha (Sandpaper) Lixa e configurá-lo para 42%. Selecione Transparente.


      • Agora temos uma cena boa noite.