CRIAÇÃO DE TOPO PARA O SITE – PARTE III

 

Como está a galera mais antenada da web? Desejo que todos estejam muito bem.

 

O objetivo deste tutorial é finalizarmos a criação do nosso topo para o site.

 

Iremos aprender a utilizar outras ferramentas, que por sinal são bastante interessantes e úteis. Então vamos lá !!!

 

1- Abra o arquivo que criamos (lembrem-se de que arquivos criados no Macromedia Fireworks possuem extensão .png).

 

 

2- Teremos nosso topo com os efeitos aprendidos e utilizados:

 

 

3- Neste momento iremos importar nossa logomarca. Para isso acione o comando Arquivo, Importar ou acione o atalho Ctrl+R.

 

 

4- Surgirá a caixa de diálogo padrão do comando. Selecione o diretório onde está localizada sua logomarca e selecione-a:

 

 

5- Após ter selecionado a logomarca, clique em Abrir. Teremos o cursor no seguinte formato:

 

 

6- Nesta etapa iremos definir a área onde a logomarca será inserida, como se estivéssemos criando um retângulo. Veja:

 

 

Dica: Caso sua logomarca esteja localizada em uma área muito grande e você deseja diminuí-la de tamanho, basta acionar o atalho Ctrl+T e a redimensionar. Veja a aparência do objeto após ter acionado o atalho citado:

 

 

7- Uma vez tendo definido o tamanho e a localização exata de nossa logomarca, iremos aprender a trabalhar agora com alguns efeitos em textos. Selecione a ferramenta texto e dê um clique em seu topo para iniciar a digitação. Escreva algo no corpo do topo que está sendo criado. Confira qual a ferramenta que estamos fazendo referência:

 

 

8- Após termos digitado nosso texto, precisamos manipulá-lo de acordo com nossas necessidades. Concordam?! Estando com o texto selecionado, observe a barra de propriedade (que foi tão comentada sua importância no primeiro artigo desta seção). Nesta barra temos todas as opções para trabalhar com nossos textos:

 

 

9- Podemos realizar as seguintes tarefas: modificar a fonte, o tamanho, o alinhamento do texto, o estilo do texto (negrito, itálico, sublinhado), a opacidade, a cor do texto, a cor do contorno, o espaçamento entre os caracteres, o posicionamento do texto na tela (eixos x e y), vários efeitos e demais propriedades.

 

10- Depois de digitado o texto, defina as propriedades básicas citadas acima. A parte de efeitos ensinarei em seguida. Lembrem-se sempre de que para manipular qualquer objeto temos que estar com o mesmo selecionado. Vejam meu exemplo. Utilizei a fonte Shabby com o tamanho 37 e a cor amarelo.

 

 

Dica: Caso não esteja conseguindo visualizar o texto com detalhes, podemos aumentar o tamanho da tela, dando um zoom. Acione o seguinte comando Ctrl + para aumentar a imagem. Cada Crtl + que der, o objeto irá ficar maior, melhorando assim a visualização. Para diminuir o tamanho do objeto, acione o comando Ctrl - .

 

11- Iremos agora aprender a utilizar a guia efeitos localizada à direita da tela. Confira sua localização na tela:

 

 

12- Iremos agora trabalhar com o efeito Sombra no texto que acabamos de digitar e configurar. Com o texto selecionado dê um clique no sinal de +da guia efeitos e escolha a opção Sombra e brilho, Aplicar sombra.

 

 

13- Após o clique, o efeito será aplicado ao texto, porém de forma padronizada. Devido a este fato, automaticamente, abrirá uma caixa na guia efeitos para configurarmos a sombra aplicada da maneira desejada. Veja:

 

 

14- Nesta caixa podemos definir a distância que a sombra será aplicada, a opacidade, a suavidade, o ângulo e a cor. É importante frisar que para conhecer realmente cada uma das opções, se faz necessário estar praticando, usando-as.

 

15- Veja como ficou o topo após a importação e configuração da logomarca e criação e configuração do texto:

 

 

16- Podemos melhorar ainda mais este visual! Vamos agora incrementar nossa logomarca para aprender a utilizar um novo efeito. Selecione a logomarca, clique no sinal de +da guia efeitos. Escolha a opção Sombra e brilho, Brilho.

 

 

17- Vocês já saberão configurar este efeito pelo fato das opções serem as mesmas do efeito Aplicar sombra, visto acima. Veja como a logomarca se destacou no topo:

 

 

Muito bem galera, por hoje finalizamos por aqui. Uma grande dica que dou a todos vocês é que pratiquem as técnicas vistas até o momento e busquem conhecer as ferramentas que não mencionei. Quando se aprende a trabalhar com uma determinada ferramenta, aprender a utilizar as outras se torna conseqüência.

 

Um cordial abraço a todos e até a próxima!

 

Fábio Almeida

e-mail: webdesigner.pro@pop.com.br