SlideShare uma empresa Scribd logo
1 de 22
Baixar para ler offline
Como criar e publicar banners nos blogs das escolas
participantes do projeto AFT

Você sabe o que é um banner?
O banner é um recurso digital muito usado na internet como forma de publicidade. Serve para
chamar a atenção do leitor para algo, por meio de uma imagem ou de imagem e texto. O banner
também pode ser usado como link para levar o usuário a um conteúdo mais completo sobre o
que ele informa em sua chamada publicitária.


Veja o exemplo abaixo com banners compostos por imagens e por imagem e texto.




Lembre-se de que saber criar e utilizar esses pequenos recursos de comunicação visual será
bastante útil para as suas atividades cotidianas, para incrementar o blog da escola e, também,
para as atividades propostas nos módulos coloridos do projeto AFT.
                                                                                             1
Não tenha receio de arriscar e tentar, pois é exercitando que se aprende!


Como criar um banner
Para criar um banner é necessário que você utilize um programa de edição de imagem. Verifique
se possui algum programa instalado em seu computador pessoal, no notebook do professor ou nos
Classmates dos alunos, como:

   • Gimp (recomendado e utilizado nas oficinas presenciais de formação AFT Brasil – 2012);
   • Greenfish;
   • PaintStar;
   • Paint Brush (do Windows);
   • ou outro editor qualquer.

Neste tutorial, usaremos o programa Paint Brush, que nos atenderá adequadamente na criação de
um banner simples com fundo plano, alguns desenhos e texto. Caso você tenha participado das
Oficinas Presenciais, aproveite o que aprendeu com a profa. Jacqueline Barbosa e utilize recursos
mais sofisticados para a criação de seus banners.




                                                                                                2
1o passo: abra o programa Paint Brush, conforme as indicações na imagem.




                                                                           3
2o passo: o programa abrirá a área de edição onde você trabalhará.




                                                                     4
3o passo: Verifique as dimensões da imagem, conforme as orientações dos boxes.




                                                                                 5
Observe o efeito de um banner com essas dimensões na tela do blog.




Se desejar alterar o tamanho do banner, redimensione suas medidas nas caixas de medidas
“Horizontal” e “Vertical” do box “Redimensionar”.




                                                                                      6
4o passo: utilize as ferramentas disponíveis para preencher o fundo da imagem.




                                                                                 7
5o passo: para inserir um texto na imagem que você está criando, observe a sequência descrita
na imagem.




                                                                                            8
Neste momento, uma caixa de texto se abrirá como no exemplo.




                                                               9
10
6o passo:   se desejar, você pode inserir imagens em seu banner, seguindo as instruções da
imagem.




Embora os recursos do Paint Brush sejam relativamente simples, você pode usar sua criatividade
para produzir imagens interessantes. Não tenha medo de arriscar!




                                                                                            11
7o passo: agora que o seu banner está pronto, salve a imagem atribuindo-lhe um nome.




Pronto! Agora, é só publicar o banner que você criou. Veja a seguir como fazer isso!




                                                                                       12
Como publicar o banner
1o passo: acesse a área de edição de seu blog.




                                                 13
2o passo: ao abrir a página escolhida para a postagem, clique no botão sinalizado na imagem
seguinte:




                                                                                         14
15
3o passo: quando a caixa descrita na imagem se abrir, observe que, na barra superior, você deve
indicar onde se encontra a imagem que deseja publicar; no caso, o banner que você criou. Indique
o caminho:
             • “Do computador” – são imagens armazenadas em seu computador.
             • “De um URL” – são imagens externas que você queira buscar na internet.
             • “Arquivos de Mídia” – imagens que já estejam em páginas do próprio blog.




                                                                                              16
17
4o passo:    quando você estiver postando uma imagem para ilustrar o seu blog, convém
preencher os campos de informações sobre ela, como título, legenda, descrição, data, etc. No caso
de um banner, essas informações são dispensáveis.




                                                                                               18
19
5o passo: ao clicar em “Preview Changes”, você terá a oportunidades de avaliar a postagem de
sua imagem.




Observe a tela como um todo levando em consideração a sua estética:

    As cores escolhidas permitem uma boa leitura da mensagem?

    O tamanho da fonte está adequado?

    A mensagem está clara e cumpre a função que você esperava?

    A tela de um modo geral é agradável aos olhos do leitor?

Observados esses aspectos e após algum ajuste necessário, retorne à tela de edição do blog para
concluir a postagem:

                                                                                             20
Muito bem! Agora que você já sabe criar um banner de chamada e postá-lo no blog, siga em
frente utilizando esse aprendizado básico para explorar melhor esse recurso de comunicação.
Você pode usar outros programas de edição de imagem com recursos mais sofisticados ou buscar
imagens públicas na internet para criar seus banners.




                                                                                          21
Conheça outros tipos de banners.




Outras dicas
Se você já possui uma certa habilidade com editores de imagem, trabalha com o Gimp e deseja
criar banners mais sofisticados, conheça outros tutoriais:


Criando banners estáticos e animados:
<http://www.montarumblog.com/como-fazer-banner-para-blog-animado-estatico/>




                                                                                         22

Mais conteúdo relacionado

Semelhante a Como criar e publicar banners nos blogs

Semelhante a Como criar e publicar banners nos blogs (20)

3 como publicar_imagens_no_blog_aft
3 como publicar_imagens_no_blog_aft3 como publicar_imagens_no_blog_aft
3 como publicar_imagens_no_blog_aft
 
2 como publicar_textos_no_blog_aft
2 como publicar_textos_no_blog_aft2 como publicar_textos_no_blog_aft
2 como publicar_textos_no_blog_aft
 
Como postar no Blogger?
Como postar no Blogger?Como postar no Blogger?
Como postar no Blogger?
 
Aula 2 modulo 4
Aula 2   modulo 4Aula 2   modulo 4
Aula 2 modulo 4
 
Blog
BlogBlog
Blog
 
Blog
BlogBlog
Blog
 
Blog
BlogBlog
Blog
 
Aprendaafazerumpsteroubanner 110621143444-phpapp02
Aprendaafazerumpsteroubanner 110621143444-phpapp02Aprendaafazerumpsteroubanner 110621143444-phpapp02
Aprendaafazerumpsteroubanner 110621143444-phpapp02
 
Aula 11 criar banner e botões para web
Aula 11 criar banner e botões para webAula 11 criar banner e botões para web
Aula 11 criar banner e botões para web
 
Apostila ps
Apostila psApostila ps
Apostila ps
 
Aula 13
Aula 13Aula 13
Aula 13
 
Como usar o Canva
Como usar o CanvaComo usar o Canva
Como usar o Canva
 
Recursos Moodle Pagina Web
Recursos Moodle Pagina WebRecursos Moodle Pagina Web
Recursos Moodle Pagina Web
 
Tutorial blogger elyene_fabricia
Tutorial blogger elyene_fabriciaTutorial blogger elyene_fabricia
Tutorial blogger elyene_fabricia
 
Atividades unidade4
Atividades unidade4Atividades unidade4
Atividades unidade4
 
Tutorial do blog
Tutorial do blogTutorial do blog
Tutorial do blog
 
Dicas Photoscape
Dicas Photoscape Dicas Photoscape
Dicas Photoscape
 
Board slides
Board slidesBoard slides
Board slides
 
Tutorial Slides
Tutorial  SlidesTutorial  Slides
Tutorial Slides
 
Manual Detalhado de Instrução ao Basecamp
Manual Detalhado de Instrução ao BasecampManual Detalhado de Instrução ao Basecamp
Manual Detalhado de Instrução ao Basecamp
 

Mais de blogbrasil

Boletim aft 10_revisado
Boletim aft 10_revisadoBoletim aft 10_revisado
Boletim aft 10_revisadoblogbrasil
 
Aft tutorial 1 teste de nivelamento_final_03 10
Aft tutorial 1 teste de nivelamento_final_03 10Aft tutorial 1 teste de nivelamento_final_03 10
Aft tutorial 1 teste de nivelamento_final_03 10blogbrasil
 
Tutorial 1 teste de nivelamento
Tutorial 1 teste de nivelamentoTutorial 1 teste de nivelamento
Tutorial 1 teste de nivelamentoblogbrasil
 
Boletim aft 09
Boletim aft 09Boletim aft 09
Boletim aft 09blogbrasil
 
Boletim aft 08_revisado
Boletim aft 08_revisadoBoletim aft 08_revisado
Boletim aft 08_revisadoblogbrasil
 
Boletim aft 07
Boletim aft 07Boletim aft 07
Boletim aft 07blogbrasil
 
Boletim aft 06_
Boletim aft 06_Boletim aft 06_
Boletim aft 06_blogbrasil
 
Boletim aft 05
Boletim aft 05Boletim aft 05
Boletim aft 05blogbrasil
 
Boletim aft 03_revisado
Boletim aft 03_revisadoBoletim aft 03_revisado
Boletim aft 03_revisadoblogbrasil
 
Aft boletim informativo 01
Aft boletim informativo 01Aft boletim informativo 01
Aft boletim informativo 01blogbrasil
 
Boletim aft 02_para blog
Boletim aft 02_para blogBoletim aft 02_para blog
Boletim aft 02_para blogblogbrasil
 
Boletim aft 02_para blog
Boletim aft 02_para blogBoletim aft 02_para blog
Boletim aft 02_para blogblogbrasil
 
Noticias boaspraticas recursos
Noticias boaspraticas recursosNoticias boaspraticas recursos
Noticias boaspraticas recursosblogbrasil
 
Tutorial audacity
Tutorial audacityTutorial audacity
Tutorial audacityblogbrasil
 
Boletim 19 certificados
Boletim 19 certificadosBoletim 19 certificados
Boletim 19 certificadosblogbrasil
 
Aft boletim informativo_18
Aft boletim informativo_18Aft boletim informativo_18
Aft boletim informativo_18blogbrasil
 
Aft boletim informativo_17_vermelho
Aft boletim informativo_17_vermelhoAft boletim informativo_17_vermelho
Aft boletim informativo_17_vermelhoblogbrasil
 
Aft boletim informativo_17_verde
Aft boletim informativo_17_verdeAft boletim informativo_17_verde
Aft boletim informativo_17_verdeblogbrasil
 
Aft boletim informativo_17_azul
Aft boletim informativo_17_azulAft boletim informativo_17_azul
Aft boletim informativo_17_azulblogbrasil
 
Aft boletim informativo_avaliação
Aft boletim informativo_avaliaçãoAft boletim informativo_avaliação
Aft boletim informativo_avaliaçãoblogbrasil
 

Mais de blogbrasil (20)

Boletim aft 10_revisado
Boletim aft 10_revisadoBoletim aft 10_revisado
Boletim aft 10_revisado
 
Aft tutorial 1 teste de nivelamento_final_03 10
Aft tutorial 1 teste de nivelamento_final_03 10Aft tutorial 1 teste de nivelamento_final_03 10
Aft tutorial 1 teste de nivelamento_final_03 10
 
Tutorial 1 teste de nivelamento
Tutorial 1 teste de nivelamentoTutorial 1 teste de nivelamento
Tutorial 1 teste de nivelamento
 
Boletim aft 09
Boletim aft 09Boletim aft 09
Boletim aft 09
 
Boletim aft 08_revisado
Boletim aft 08_revisadoBoletim aft 08_revisado
Boletim aft 08_revisado
 
Boletim aft 07
Boletim aft 07Boletim aft 07
Boletim aft 07
 
Boletim aft 06_
Boletim aft 06_Boletim aft 06_
Boletim aft 06_
 
Boletim aft 05
Boletim aft 05Boletim aft 05
Boletim aft 05
 
Boletim aft 03_revisado
Boletim aft 03_revisadoBoletim aft 03_revisado
Boletim aft 03_revisado
 
Aft boletim informativo 01
Aft boletim informativo 01Aft boletim informativo 01
Aft boletim informativo 01
 
Boletim aft 02_para blog
Boletim aft 02_para blogBoletim aft 02_para blog
Boletim aft 02_para blog
 
Boletim aft 02_para blog
Boletim aft 02_para blogBoletim aft 02_para blog
Boletim aft 02_para blog
 
Noticias boaspraticas recursos
Noticias boaspraticas recursosNoticias boaspraticas recursos
Noticias boaspraticas recursos
 
Tutorial audacity
Tutorial audacityTutorial audacity
Tutorial audacity
 
Boletim 19 certificados
Boletim 19 certificadosBoletim 19 certificados
Boletim 19 certificados
 
Aft boletim informativo_18
Aft boletim informativo_18Aft boletim informativo_18
Aft boletim informativo_18
 
Aft boletim informativo_17_vermelho
Aft boletim informativo_17_vermelhoAft boletim informativo_17_vermelho
Aft boletim informativo_17_vermelho
 
Aft boletim informativo_17_verde
Aft boletim informativo_17_verdeAft boletim informativo_17_verde
Aft boletim informativo_17_verde
 
Aft boletim informativo_17_azul
Aft boletim informativo_17_azulAft boletim informativo_17_azul
Aft boletim informativo_17_azul
 
Aft boletim informativo_avaliação
Aft boletim informativo_avaliaçãoAft boletim informativo_avaliação
Aft boletim informativo_avaliação
 

Como criar e publicar banners nos blogs

  • 1. Como criar e publicar banners nos blogs das escolas participantes do projeto AFT Você sabe o que é um banner? O banner é um recurso digital muito usado na internet como forma de publicidade. Serve para chamar a atenção do leitor para algo, por meio de uma imagem ou de imagem e texto. O banner também pode ser usado como link para levar o usuário a um conteúdo mais completo sobre o que ele informa em sua chamada publicitária. Veja o exemplo abaixo com banners compostos por imagens e por imagem e texto. Lembre-se de que saber criar e utilizar esses pequenos recursos de comunicação visual será bastante útil para as suas atividades cotidianas, para incrementar o blog da escola e, também, para as atividades propostas nos módulos coloridos do projeto AFT. 1
  • 2. Não tenha receio de arriscar e tentar, pois é exercitando que se aprende! Como criar um banner Para criar um banner é necessário que você utilize um programa de edição de imagem. Verifique se possui algum programa instalado em seu computador pessoal, no notebook do professor ou nos Classmates dos alunos, como: • Gimp (recomendado e utilizado nas oficinas presenciais de formação AFT Brasil – 2012); • Greenfish; • PaintStar; • Paint Brush (do Windows); • ou outro editor qualquer. Neste tutorial, usaremos o programa Paint Brush, que nos atenderá adequadamente na criação de um banner simples com fundo plano, alguns desenhos e texto. Caso você tenha participado das Oficinas Presenciais, aproveite o que aprendeu com a profa. Jacqueline Barbosa e utilize recursos mais sofisticados para a criação de seus banners. 2
  • 3. 1o passo: abra o programa Paint Brush, conforme as indicações na imagem. 3
  • 4. 2o passo: o programa abrirá a área de edição onde você trabalhará. 4
  • 5. 3o passo: Verifique as dimensões da imagem, conforme as orientações dos boxes. 5
  • 6. Observe o efeito de um banner com essas dimensões na tela do blog. Se desejar alterar o tamanho do banner, redimensione suas medidas nas caixas de medidas “Horizontal” e “Vertical” do box “Redimensionar”. 6
  • 7. 4o passo: utilize as ferramentas disponíveis para preencher o fundo da imagem. 7
  • 8. 5o passo: para inserir um texto na imagem que você está criando, observe a sequência descrita na imagem. 8
  • 9. Neste momento, uma caixa de texto se abrirá como no exemplo. 9
  • 10. 10
  • 11. 6o passo: se desejar, você pode inserir imagens em seu banner, seguindo as instruções da imagem. Embora os recursos do Paint Brush sejam relativamente simples, você pode usar sua criatividade para produzir imagens interessantes. Não tenha medo de arriscar! 11
  • 12. 7o passo: agora que o seu banner está pronto, salve a imagem atribuindo-lhe um nome. Pronto! Agora, é só publicar o banner que você criou. Veja a seguir como fazer isso! 12
  • 13. Como publicar o banner 1o passo: acesse a área de edição de seu blog. 13
  • 14. 2o passo: ao abrir a página escolhida para a postagem, clique no botão sinalizado na imagem seguinte: 14
  • 15. 15
  • 16. 3o passo: quando a caixa descrita na imagem se abrir, observe que, na barra superior, você deve indicar onde se encontra a imagem que deseja publicar; no caso, o banner que você criou. Indique o caminho: • “Do computador” – são imagens armazenadas em seu computador. • “De um URL” – são imagens externas que você queira buscar na internet. • “Arquivos de Mídia” – imagens que já estejam em páginas do próprio blog. 16
  • 17. 17
  • 18. 4o passo: quando você estiver postando uma imagem para ilustrar o seu blog, convém preencher os campos de informações sobre ela, como título, legenda, descrição, data, etc. No caso de um banner, essas informações são dispensáveis. 18
  • 19. 19
  • 20. 5o passo: ao clicar em “Preview Changes”, você terá a oportunidades de avaliar a postagem de sua imagem. Observe a tela como um todo levando em consideração a sua estética:  As cores escolhidas permitem uma boa leitura da mensagem?  O tamanho da fonte está adequado?  A mensagem está clara e cumpre a função que você esperava?  A tela de um modo geral é agradável aos olhos do leitor? Observados esses aspectos e após algum ajuste necessário, retorne à tela de edição do blog para concluir a postagem: 20
  • 21. Muito bem! Agora que você já sabe criar um banner de chamada e postá-lo no blog, siga em frente utilizando esse aprendizado básico para explorar melhor esse recurso de comunicação. Você pode usar outros programas de edição de imagem com recursos mais sofisticados ou buscar imagens públicas na internet para criar seus banners. 21
  • 22. Conheça outros tipos de banners. Outras dicas Se você já possui uma certa habilidade com editores de imagem, trabalha com o Gimp e deseja criar banners mais sofisticados, conheça outros tutoriais: Criando banners estáticos e animados: <http://www.montarumblog.com/como-fazer-banner-para-blog-animado-estatico/> 22