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

 

E aí galera, tudo bem com vocês?

 

Neste artigo iremos dar continuidade a primeira parte onde tratamos do assunto “Criação de topo para o site”.

 

Iremos aprender a incrementar tal topo inserindo efeitos diversos. Vamos lá?! Mãos a obra.

 

1- Abra o arquivo com extensão .png criado no artigo passado.

 

 

2- Teremos o nosso topo criado no artigo anterior. Veja:

 

 

3- Agora vamos ao que interessa, os novos efeitos. De princípio criaremos o efeito TV, que consiste em um efeito onde o resultado mostra o topo todo “riscado”. Teremos um efeito final muito agradável e bastante utilizado pela web.

 

4- Crie um retângulo do tamanho de seu topo. Para saber qual o tamanho exato de seu topo, basta selecionar as imagens que utilizou na criação. Confira na imagem abaixo:

 

 

5- Configurações para o retângulo criado:

Cor: azul

Contorno: sem contorno

 

Obs: Para deixar o retângulo sem contorno, com o retângulo selecionado, clique no lápis e selecione de acordo com a imagem abaixo:

 

 

6- Agora iremos definir o efeito em si. Para tal, devemos (estando com o retângulo selecionado) selecionar a textura “Linha Horizontal 3”. Podemos manter a porcentagem padrão (50%).

 

7- O próximo passo é definir a opacidade do retângulo criado, para que o mesmo obtenha um grau de transparência capaz de se visualizar o topo que está localizado atrás do retângulo. A propriedade a ser modificada, opacidade, se encontra à direita da barra de propriedade. Temos como padrão o valor de 100%. Devemos mudar para 20%. Veja como deve ficar sua barra de propriedades após as alterações:

 

 

8- Definimos a opacidade em 20% para que o azul ficasse bem clarinho, criando o efeito de transparência.

 

9- No momento temos vários objetos em nosso documento. Para facilitar o manuseio após todas as configurações necessárias, é ideal que se agrupe o arquivo, ou seja, teremos os vários objetos agrupados em apenas um. Para agrupar o documento, selecione todos os objetos com a ferramenta Seta Preta. Logo após acesse o menu Modificar, Agrupar ou acione o atalho Ctrl+G. Veja:

 

 

10- Teremos nosso arquivo com todos os objetos agrupados. Veja o efeito final:

 

 

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

 

 

11- Podemos explorar ainda mais a barra de propriedades e buscar novas texturas, mudar a cor do retângulo e por aí vai. Para explorar estas outras opções devemos desagrupar nosso arquivo. Para tal acesse o menu Modificar, Desagrupar ou acionar o atalho Ctrl+Shift+G.

 

 

12- Confira os exemplos que criei e que você poderá utilizar em seu site. O importante é usar a criatividade!!!

 

 

 

 

Muito bem galera, espero que todos tenham adquirido novos conhecimentos para que utilizem na prática os conceitos e efeitos vistos neste artigo.

 

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

 

Fábio Almeida

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