Ir para conteúdo
Faça parte da equipe! (2024) ×
Conheça nossa Beta Zone! Novas áreas a caminho! ×
  • Quem está por aqui   0 membros estão online

    • Nenhum usuário registrado visualizando esta página.

Criando Banner para parceria do seu site


ricardolg36
 Compartilhar

Posts Recomendados

Este turotial foi criado para quando algem quiser criar um site e precisa de um banner para fazer parcerias no seu site

 

Criamos uma nova imagem, no menu principal “File->New” ou (Ctrl+N), irá abrir uma nova janela “New Document”, nela configuramos as propriedades para width:120, height:60, transparent e clicamos em “Ok”.

fw_banner1.jpg

* 2 - Rectângulo para a base do banner.(imagem 2)

 

2.1 - Seleccionamos a ferramenta rectângulo “Rectangle Tool” e configuramos o preenchimento:branco, borda:preta largura:1 e “Stroke Category->Basic->Hard Line” e agora desenhamos nosso rectângulo na área de trabalho.

 

2.2 - Ajuste o tamanho do rectângulo para W:120 e H:60

 

2.3 - Para alinhar o rectângulo perfeitamente com a área de trabalho, precisamos usar a ferramenta selecção “Pointer Tool” e seleccionamos todo o nosso rectângulo previamente feito.

 

2.4 - Depois de seleccionado vamos ao alinhamento no menu principal “Window->Align” abrirá uma nova janela, nela clicamos nas seguintes opções “To Canvas” e “Align: Align Horizontal Center, Align Vertical Center”.

fw_banner2.jpg

* 3 - Texto que aparece no banner.(imagem 3)

 

3.1 - Seleccione a ferramenta “Text Tool” e configure: tipo de letras, tamanho e cores de forma que tenha destaque no banner, essa será a nossa matriz. Para alinhar dinâmicamente pode se usar o passo 2.4 ou manualmente, fica ao teu critério.

fw_banner3.jpg

Feito isso, já temos nosso banner estaticamente pronto, se você quiser fazer uma banner simples, pode pular directamente para o passo 5. Para o nosso banner animado falta pouco. Agora iremos dar alguma vida ao nosso banner.

 

* 4 - Trabalhando com Frames. (imagem 4)

 

4.1 - Iremos trabalhar neste ponto com 2 painéis importantes “Layers” e “Frames and History”.

 

4.2 - Em “Frames and History” clique em “Options->Duplicate Frame” e configure a janela que se abrirá para “number: 3″, mantenha a configuração restante e clique em ok, isso cria mais 3 frames após o principal.

 

4.3 - Clique no frame 1 e a seguir voltamos a nossa área de trabalho, você pode seleccionar o texto ou o fundo e alterar cores, também pode alterar a posição do seu texto, repita o processo aos restante frames( só clicar no Painel “Frames and History” e seleccionar o frame seguinte e voltar a alterar a área de trabalho). No Banner que eu fiz para este tutorial eu alterei a posição do meu texto “Inxinet” de forma a descer do frame 1 ao frame 4.

 

Faça as alterações de forma a dar algum consenso ao seu banner. Agora você me pergunta e o Painel Layers? – Quando você alterou cada frame, acabou por alterar a Layer, nas layers podemos aplicar alguns efeitos extras, como alpha, máscara… isso fica para outros tutoriais.

 

4.4 – Agora vamos ver o tempo de exposição de cada frame. Dê um duplo clique em cima do número “7”, no meu caso “30” e altere o tempo na sequência do frame1 ao frame 3 para 30 e no frame 4 coloque 200 (vai fazer exibir mais tempo no último frame), depois que você ganhar alguma experiência você pode controlar as propriedades por tentativa e erro. Lembrando que isso também influência no tamanho final do arquivo, que convém não exceder a 20kb.

fw_banner4.jpg

* 5 - Exportando nosso trabalho para o formato gif. (imagem 5)

 

5.1 - No menu principal “File->Image Preview” (Ctrl+Shift+X).

 

5.2 - Na Janela que se abre a seguir configure a aba “Options” para “Format: Animated Gif, Palette:WebSnap Adaptive, Maximum number of colors:32”, a seguir clique em “Export” altere o nome se quiser, depois “Export novamente” e pronto, você já tem o seu banner em formato GIF. Agora você já sabe como criar o seu banner.

fw_banner5.jpg

 

Espero que sirva

 

Criamos uma nova imagem, no menu principal “File->New” ou (Ctrl+N), irá abrir uma nova janela “New Document”, nela configuramos as propriedades para width:120, height:60, transparent e clicamos em “Ok”.

fw_banner1.jpg

* 2 - Rectângulo para a base do banner.(imagem 2)

 

2.1 - Seleccionamos a ferramenta rectângulo “Rectangle Tool” e configuramos o preenchimento:branco, borda:preta largura:1 e “Stroke Category->Basic->Hard Line” e agora desenhamos nosso rectângulo na área de trabalho.

 

2.2 - Ajuste o tamanho do rectângulo para W:120 e H:60

 

2.3 - Para alinhar o rectângulo perfeitamente com a área de trabalho, precisamos usar a ferramenta selecção “Pointer Tool” e seleccionamos todo o nosso rectângulo previamente feito.

 

2.4 - Depois de seleccionado vamos ao alinhamento no menu principal “Window->Align” abrirá uma nova janela, nela clicamos nas seguintes opções “To Canvas” e “Align: Align Horizontal Center, Align Vertical Center”.

fw_banner2.jpg

* 3 - Texto que aparece no banner.(imagem 3)

 

3.1 - Seleccione a ferramenta “Text Tool” e configure: tipo de letras, tamanho e cores de forma que tenha destaque no banner, essa será a nossa matriz. Para alinhar dinâmicamente pode se usar o passo 2.4 ou manualmente, fica ao teu critério.

fw_banner3.jpg

Feito isso, já temos nosso banner estaticamente pronto, se você quiser fazer uma banner simples, pode pular directamente para o passo 5. Para o nosso banner animado falta pouco. Agora iremos dar alguma vida ao nosso banner.

 

* 4 - Trabalhando com Frames. (imagem 4)

 

4.1 - Iremos trabalhar neste ponto com 2 painéis importantes “Layers” e “Frames and History”.

 

4.2 - Em “Frames and History” clique em “Options->Duplicate Frame” e configure a janela que se abrirá para “number: 3″, mantenha a configuração restante e clique em ok, isso cria mais 3 frames após o principal.

 

4.3 - Clique no frame 1 e a seguir voltamos a nossa área de trabalho, você pode seleccionar o texto ou o fundo e alterar cores, também pode alterar a posição do seu texto, repita o processo aos restante frames( só clicar no Painel “Frames and History” e seleccionar o frame seguinte e voltar a alterar a área de trabalho). No Banner que eu fiz para este tutorial eu alterei a posição do meu texto “Inxinet” de forma a descer do frame 1 ao frame 4.

 

Faça as alterações de forma a dar algum consenso ao seu banner. Agora você me pergunta e o Painel Layers? – Quando você alterou cada frame, acabou por alterar a Layer, nas layers podemos aplicar alguns efeitos extras, como alpha, máscara… isso fica para outros tutoriais.

 

4.4 – Agora vamos ver o tempo de exposição de cada frame. Dê um duplo clique em cima do número “7”, no meu caso “30” e altere o tempo na sequência do frame1 ao frame 3 para 30 e no frame 4 coloque 200 (vai fazer exibir mais tempo no último frame), depois que você ganhar alguma experiência você pode controlar as propriedades por tentativa e erro. Lembrando que isso também influência no tamanho final do arquivo, que convém não exceder a 20kb.

fw_banner4.jpg

* 5 - Exportando nosso trabalho para o formato gif. (imagem 5)

 

5.1 - No menu principal “File->Image Preview” (Ctrl+Shift+X).

 

5.2 - Na Janela que se abre a seguir configure a aba “Options” para “Format: Animated Gif, Palette:WebSnap Adaptive, Maximum number of colors:32”, a seguir clique em “Export” altere o nome se quiser, depois “Export novamente” e pronto, você já tem o seu banner em formato GIF. Agora você já sabe como criar o seu banner.

fw_banner5.jpg

 

Espero que sirva

 

Download do fireworks 8,usado no tutorial

Link para o comentário
Compartilhar em outros sites

  • 1 mês depois...
  • 2 semanas atrás...

Sempre poste a fonte de onde foi tirada , você so pode copiar os trabalhos dos outros so se for colocado a referencia.

Você pode ser banido por isso ou até ir para a cadeia se os caras denunciar. é so postar que é seu se for.

falow.

Link para o comentário
Compartilhar em outros sites

Este tópico está impedido de receber novos posts.
 Compartilhar

×
×
  • Criar Novo...

Informação Importante

Nós fazemos uso de cookies no seu dispositivo para ajudar a tornar este site melhor. Você pode ajustar suas configurações de cookies , caso contrário, vamos supor que você está bem para continuar.