21 janeiro 2013

Como fazer banner transparente para blog em editor on line




Banner para blog transparente sem baixar programa, tudo on line ♥
Já fiz outro tutorial de "Como fazer banner transparente em PHOTOSCAPE" Clique AQUI se interessar fazer banner em photoscapeMuitas pessoas querem fazer um banner legal mas, não tem photoshop ou photofiltre ou qualquer outro editor de imagem profissional.
O site pixlr.com/editor é um editor tipo photoshop gratuito e on line, o que não pesa nadinha em nossos PCs e super prático nas nossas edições caseiras!
Vamos então aprender passo-a-passo a fazer um banner para blog transparente em outro  tutorial eu ensino a fazer banner comum em jpeg


1º Entre no site pixlr.com/editor
Vai abrir bem no meio da tela essa imagem.
Clique em "CRIAR UMA NOVA IMAGEM"
2º Vai aparecer essa janelinha. Escolha nas "PREDEFINIÇÕES" o valor de 1024 x 768 isso se você quiser uma banner grande. Marque "TRANSPARENTE"  e dê "OK"
Vai abrir na página do site essa imagem xadrezinha


3º Agora vá na página de pesquisa do "GOOGLE" não feche o site do pixrl e pesquise uma foto de seu ídolo em "png", ou seja, uma foto com fundo transparente. Faça como a imagem abaixo. E nas ferramentas de pesquisa escolha o tamanho da imagem "GRANDE" para garantir uma boa qualidade da foto
Escolha duas fotos e abra cada um numa guia/aba diferente.






Clique com o botão direito do seu mouse na 1ª  imagem que você escolheu em "ABRIR IMAGEM EM OUTRA ABA/GUIA". Aberta a foto na outra guia/aba,  com  o botão direito do seu mouse na imagem faça asssim:



 4º Você copiou o endereço URL da imagem? Pois, vamos voltar para o site pixlr.
Nessa barra do site procure a opção "CAMADA"  e clique nela


Vai aparecer vários comandos para camada. Clique em "ABRIR URL DE IMAGEM COMO CAMADA"

 Abrirá a seguinte janelinha e então dê CTRL + V (Cole) o endereço da foto que você abriu na pesquisa "Google".
E dê OK
5º Carregando a imagem pode ser que ela fique muito grande para o banner
Não tem problema! Vá novamente na barra do site.


Clique em editar que vai aparecer vários comandos como na imagem abaixo. Escolha o comando
"TRANSFORMAÇÃO LIVRE"




O comando TRANFORMAÇÃO LIVRE serve para redimensionar a imagem. A imagem vai aparecer circundada por essas arestas azuis, conforme indicadas aqui abaixo. Clique em alguma aresta azul  e arraste até o tamanho que desejar pra foto caber no banner transparente. Se ficar achatada ajuste arrastando outras arestas azuis.


6º Vá novamente na página do "GOOGLE" e pesquise dessa vez "FRAME PNG" (moldura em png)
Na "FERRAMENTA DE PESQUISA"  no tamanho da imagem escolha "MÉDIO"
Escolha um frame que combine com o banner ou aquele que você mais gostou.
Clique no frame, "ABRIR EM OUTRA ABA/GUIA".
Quando abrir a imagem da moldura/frame escolhido, com o botão direito do mouse "COPIAR O ENDEREÇO DA IMAGEM"



Escolhi essa bonitinha:
http://2.bp.blogspot.com/-cj8tFhH8T5Y/UGW7Gbx9bQI/AAAAAAAALjI/aTElrjyz4jo/s1600/Moldura+Designer+photoshopscreen.png
7º Copiou o endereço da moldurinha? Volte pro site pixlr.
Outra vez clique em CAMADA
"ABRIR URL DE IMAGEM COMO CAMADA"
E cole o endereço da imagem conforme a sequencia das imagens abaixo.


Mova com o mouse a moldurinha até ficar justaposta com a foto do seu ídolo.
ATENÇÃO :  Caso você queira mover as fotos de lugar ou redimensionar usando as arestas primeiro você deve escolher cada foto nessa janelinha das Camadaa,esse quadrado á direita da página do site, a 2ª de cima para baixo.
Então, se quero mexer/mover a foto da "CAMADA 3" devo clicar em "CAMADA 3". Se quero mexer a CAMADA 2, primeiramente devo clicar na "CAMADA 2" para poder mexer/mover a foto dentro do banner



8º Procure outra foto do seu ídolo e repita os procedimentos dos passos nº 3, 4 e 5
Ajuste o tamanho da foto colocando-a no banner. Repita o passo nº 5 e clique nas arestas azuis até ajustar o tamanho que você pretende. Mova a foto pra onde quiser. Nesse caso eu movi para à direita do banner.



 9º Vamos colocar o nome do Blog no banner.
Na barra de ferramentas que fica à esquerda da página do site procure o ícone que tem a 
letra  A

Achou o ícone da letra  "A"? 
Clique em cima da letra "A" e depois clique na parte de cima do seu banner que vai aparecer uma janelinha no meio . Como mostra a imagem acima.
Escreva na caixa do texto o nome do seu blog
Escolha o tamanho
Escolha a Fonte clicando na setinha pra baixo
A cor
Mova o nome do blog, faça modificações de tamanho e tudo mais.
Com o nome na posição correta
dê OK

10º Se está tudo direitinho e bonitinho vá para a barra do site e clique em "ARQUIVO"  comando  "SALVAR"
 Aparecerá essa janelinha.


 Dê nome a seu banner e ATENÇÃO: No formato da imagem,  escolha para salvar na opção PNG (Transparente, Qualidade total)Se não o banner não ficar transparente
Agora dê OK.
Abrirá a janela de SALVAR COMO em seu computador.
Escolha e salve o seu banner  na sua pasta preferida e clique em SALVAR
Espero que eu tenha ajudado a quem pediu esse tutorial.
E por favor: Se reproduzir mesmo que seja com suas palavras modificadas ou se baseou no meu tuto,  deem créditos a @IsabellaTwifan, OK?
Beijos e Abraços
E continuem ajudando o blog. Escolha na enquete na lateral do blog qual o próximo tutorial.
Esse post te ajudou?Aperte no botão   abaixo e recomende esse post como conteúdo de valor para que outras pessoas também possam usufruir do seu conteúdo.


Outros Tutoriais que você pode se interessar:
Como fazer imagem com fundo transparente PNG. em editor ON LINE sem baixar nenhum programa
Como fazer banner transparente para blog no Photoscape





10 comentários:

  1. Respostas
    1. Giovanna,
      Escolhi essa daqui, desse link http://2.bp.blogspot.com/-cj8tFhH8T5Y/UGW7Gbx9bQI/AAAAAAAALjI/aTElrjyz4jo/s1600/Moldura+Designer+photoshopscreen.png

      Excluir
  2. Na hora que clica em camada para colocar a moldura apareçe deseja aplicar as alterações sim nao cancelar oque eu clico ??

    ResponderExcluir
    Respostas
    1. Olá Gabrielly!
      Toda as vezes que escolher uma camada e fazer a edição dela "Editar" - "Transformação Livre" para diminuir/aumentar e logo em seguida escolher outra camada o editor vai fazer essa pergunta mesmo "deseja aplicar as alterações sim nao cancelar"
      Caso vc tenha terminado de mexer o tamanho e posição clica em "SIM"
      Não se preocupe.
      Mesmo que vc escolha já a moldura e outra camada que vc já clicou em "SIM" não tenha ficado na posição certo ou tamanho certo basta você ir de novo na janelinha à direita de "CAMADAS" clica em cima da imagem que vc quer ajeitar , vá em "EDITAR" "TRANSFORMAÇÃO LIVRE" e coloque, dimunua, aumente em fim faça as modificações.
      Tomara que tenha te explicado bem
      Mas, não se acanhe pode perguntar qualquer coisa, dúvida por aqui nos comentários ou se quiser entra lá no topo do blog na aba de "CONTATOS" e escreve a duvida que te respondo por email.
      Abraços

      Excluir
  3. ADOREIII!!!!! O resultado disso tá no meu blog!!!
    http://ninicabr.blogspot.com

    bjo ;)

    ResponderExcluir
    Respostas
    1. Parabéns!
      Já dei uma visitinha básica lá no seu cantinho!
      Abraços

      Excluir
  4. O meu fica preto , o fundo não fica transparente , o que faço ?

    ResponderExcluir
  5. Mônica, como não sei o que de fato aconteceu só tenho as seguintes suposições:
    1ª - Vc salvou seu banner em JPEG. O certo é salvar em formato PNG Qualidade Toral
    2ª - Vc hospedou em algum site que não lê arquivos em PNG. Hospede suas imagens em site confiáveis como Tinypic, Photobucket ou ImageShack
    3ª - Ao fazer alguma alteração em seu editor vc não salvou em PNG (Por exemplo: o Paint não reconhece PNG)
    4ª -Às vezes o Blogger dá "Bug" e o Picassa(o que hospeda as imagens do Blogger) também dá "bug" e às vezes não reconhece imagens com PNG ficando o fundo preto. Porém a equipe do Blogger está resolvendo isso
    5ª - Se vc mandou a imagem de seu banner por Facebook ele não reconhece PNG

    Bom, foram algumas suposições. Espero que resolva com as sugestões que apresentei
    Abraços

    ResponderExcluir
  6. Ameiiiii super hiper mega ajudou!!! obrigada sua linda!!!!! :*

    ResponderExcluir