CRIAÇÃO DE TOPO PARA O SITE

 

Olá galera, tudo bem com vocês?

 

Neste artigo iremos falar e aprender sobre um assunto que vários profissionais da área tem dificuldades em desenvolver, trata-se do topo do site, que uma vez desenvolvido utilizando recursos simples e marcantes causará um efeito satisfatório. Outra dificuldade está na impressão passada pela logomarca.

 

Para tentar amenizar tais dificuldades, iremos trabalhar com a criação de um topo inteiro de um site, nos mínimos detalhes.

 

1- Crie um novo arquivo – Arquivo, Novo – ou pelo atalho Ctrl+N:

 

 

2- Defina o tamanho de 779 x 280. Lembre-se de manter a resolução padrão para internet, que é de 72 pixels/polegadas. A cor podemos definir como branco.

 

 

3- Com o novo documento aberto, iremos trabalhar com alguns efeitos neste momento. O primeiro efeito que iremos trabalhar é a fusão de imagens. Ao acompanhar este artigo, escolha 04 (quatro) imagens ao seu gosto, de acordo com o site que pretende fazer. Ative o menu Arquivo, Abrir. Na janela que surgiu, escolha a primeira imagem de seu gosto para iniciarmos nosso efeito.

 

 

 

4- Com a imagem aberta, iremos dar começar a utilizar as ferramentas que citei no artigo passado, agora na prática. A primeira destas ferramentas que utilizaremos agora é a ferramenta Laço, que serve para dar um efeito esfumaçado a imagem ao recorta-la e cola-la em outro arquivo. Juntamente iremos trabalhar com a propriedade Enevoar da barra de propriedades. Para que possamos visualizar as propriedades de cada ferramenta, devemos selecioná-la. Ao realizar tal tarefa, perceba que a barra de ferramentas muda sua aparência. Definiremos a propriedade Enevoar com 22%. Quanto mais porcentagem, mais esfumaçada as bordas das imagens ficará. Confira como deverá ficar as configurações:

 

 

 

5- A próxima etapa nos permite trabalhar a vontade, não tendo que seguir um modelo pré-definido. Façam da maneira que julgam ficar melhor. Para utilizar a ferramenta laço, clique e segure o botão do mouse. Veja o modelo:

 

 

6- Após ter delimitado a área para aplicação do efeito, temos que colocar a imagem aberta ao lado do documento criado nos passos 1 e 2. Para fazer isto, ative o menu Janela, Lado a lado vertical.

 

 

7- Já com os dois documentos lado a lado, clique na ferramenta Seta Preta que se encontra na caixa de Ferramentas, posicionando-a no centro de sua seleção. Notem que o cursor do mouse deixa de ser a seta e passa a um formato de tesoura.

 

 

8- Agora basta clicar e arrastar para o documento aberto ao lado. Analisem o efeito criado. Veja que a imagem fica esfumaçada.

 

9- Tendo arrastado a imagem que acabamos de aplicar o efeito esfumaçado, feche a imagem. Ao surgir a mensagem pedindo para salvar, clique em Não.

 

10- Outra propriedade que iremos modificar e que é bastante interessante é a propriedade Opacidade. Posicione a imagem no lado esquerdo do documento e defina a opacidade em 55%. Veja como deverá ficar:

 

 

11- Agora vocês já estão aptos a desenvolver os mesmos efeitos para as 03 (três) imagens restantes. Sigam os passos de 03 à 10 para aplicar o efeito as demais imagens. Um detalhe que é importante, é definir a opacidade das demais imagens diferenciadas da primeira imagem. Temos que ir escurecendo cada imagem até chegar aos 100% de opacidade. Isso irá dar um efeito bastante agradável ao topo de nosso site.

 

12- O efeito quase que pronto será o seguinte:

 

 

13- Se observarmos detalhadamente iremos constatar que há falhas em branco no documento. Mas para este probleminha, o super Fireworks tem uma simples e eficaz solução.

 

14- A solução é enquadrarmos nosso documento. Para isso, selecionem na caixa de Ferramentas – Cortar.

 

 

15- Após ter selecionado, iremos clicar sobre o documento e arrastar como se fossemos fazer um retângulo. Vejam:

 

 

16- Vale aqui a ressalva de que esta ferramenta permite que você possa redimensionar a área após ter utilizado. Para isso basta clicar nas linhas do retângulo e arrastar como quiser.

 

17- Após ter definido a área teremos que fazer uma mágica para enquadrar nosso documento. Esta mágica chama-se ENTER. Pressionem a tecla enter e vejam o efeito final após o enquadramento:

 

 

É isso aí turma, por hoje finalizaremos por aqui. Espero que estejam gostando dos artigos e que estes possam estar agregando conhecimento a vocês.

 

No próximo artigo iremos dar continuidade a este topo, pois podemos ainda melhora-lo. Aprenderemos a utilizar outros efeitos do Fireworks, também muito interessantes.

 

Não deixem de acompanhar a série Fireworks!!!

 

Dúvidas?! Enviem e-mail para webdesigner.pro@pop.com.br.

 

Um grande abraço a todos.

 

Fábio Almeida