27 agosto 2012

Como fazer um Background para twitter no Photoscape

Aprenda fazer BG com molde

Eu sempre ficava tentando fazer BGs para meu twitter que não ficassem repetindo o mesmo padrão. Que estivesse na medida certa pra caber  em todos os navegadores ( Testei os tamanhos dos BGs nos navegadore Mozilla  Firefox e Internet Explore, há pouca diferença ) e que desse certo em quase todas as resoluções de tela. E que eu pudesse colocar a imagem preferida do meu ídolo bem visível  sem ser cortado pela "timeline" do twitter. Ou seja, um layout organizado e bonito.
Finalmente eu consegui fazer!
Lembrando que não sou uma webdesign, apenas uma blogueira curiosa.
Partindo disso, Vou dar umas dicas de  como fazer background para twitter usando o Photoscape, 1 molde para BG do novo twitter e muita criatividade.
Salve essa imagem aqui em baixo. É muito importante.
Ela é o molde de BG para o novo twitter. Uma espécie de  base sob medida pra fazer qualquer background de Twitter.
Ela é verde e feia, mas ela só vai nos auxiliar na montagem. Não vai aparecer no produto final. Clique no botão direito do mouse "ABRIR EM OUTRA GUIA". Quando abrir a imagem na outra guia/aba clique dentro dela novamente no botão direito  do mouse em "SALVAR IMAGEM COMO" e salve-a:


Para isso tenha o Photoscape e imagens em png. que você pode fazer como eu ensinei AQUI ou baixar imagens em png. já prontas no Google. Coloque no google , por exemplo,  PNG de artista fulano-de-tal ou PNG de qualquer-objeto "Pesquisar" e salvar em seu PC.
Pronto!Tendo esses dois materiais baixados em seu PC (O molde verde + PNG que você baixou) vamos lá:

1º Abra seu Photoscape.
Escolha o Editor

 2º - Vá até o topo da tela do seu PC  à direita e clique em "MENU".
 .

Vai aparecer uma janelinha "NOVA FOTO". Escolha a cor para seu BG e dê OK
3º - Agora vá embaixo e procure nessa imagem a ala "INÍCIO" e procure o botão com o nome "REDIMENSIONAR" Clique bem no meio do botão.
 Vai abrir uma janelinha como essa abaixo. Destrave a opção "PRESERVE ASPECTO DE PROPORÇÃO" clicando no quadradinho. Apague os valores e escreva os valores 1344 na largura e 601 na altura como na imagem abaixo.
Essa dimensão 1344 X 601 dá justinha no twitter nos navegadores Mozilla Firefox e Internet Explorer.

4º -  Agora, continue  embaixo ,  nessa janela  dessa vez em "OBJETO" . Clique depois nesse quadrado colorido (que tem o ícone de uma montanha e sol) e clique.
 Vai aparecer uma relação de pastas. Escolha  a 1ª pasta : "FOTO" e procure a imagem base que você salvou (a verde e feia mesmo)


4º - Abrindo o molde verde vai abrir uma janelinha de "FOTO" e nela regule a opacidade pra 100 até ela ficar transparente ao ponto de você exergar o fundo do seu BG. Como na foto embaixo. Verifique se o molde está bem rente ao BG e pocisione bem em cima :
 

5º -  Vá novamente embaixo, em  "OBJETO", "FOTO" e escolha a imagem em PNG. com fundo transparente que você baixou ou você tem em seu computador e clique em "Abrir".



6º - Essa imagem você vai arrastá-la e por em uma das laterais marcadas na imagem verde e feia.
Achou as marquinhas que fiz nas laterais? Esses risquinhos brancos na vertical?
Com a transparência da imagem verde você pode ver marcadas e separadas as laterais onde você vai por as imagens e o texto/nomes. A parte do meio não coloque nada, por que no twitter não dá pra ver mesmo, devido a timeline ser bem no meio:



7º - Colocada a imagem que você escolheu, agora vamos colocar um frame, uma moldura para enfeitar ainda mais. Vá em "OBJETO", depois clique no icon  "Fotografia"(esse do desenho de montanhas com sol) e  escolha a opção "MAIS". Aparecerá uma janela com todas as pastas de programas que possam ter frames e imagens. Escolha a Pasta do "PHOTOSCAPE",  na subpasta "FRAME" Essa subpasta "FRAME" fica na pasta do "PHOTOSCAPE" entre "Ballon" e a subpasta "Icon"(Nesse modelo escolhi a moldura  Tape05.png ) e escolha a moldura e dê OK.











8º - Vá  em objeto e clique no desenho do "QUADRADO" , escolha a cor para combinar com o BG, opção marque "ENCHER"
 Com o mouse em cima do BG que você está montando clique e arrastar criando um quadrado de um tamanho quase igual a moldura e que não ultrapasse os limites das marquinhas brancas da imagem base(a verde e feia ¬¬)

9º - Desenhado o quadrado Vá novamente em "OBJETO" e procure essa seta e clique nela

Depois de clicar nessa seta clique com o botão direito do mouse dentro do quadrado que você criou.
Escolha  a opção "ATRÁS" e pocisione-o atras da moldura criando um fundo.
Nele você pode depois escrever alguma frase ou informação ou Status do twitter - Use a imaginação!

10º - Agora vamos escrever o nome do Twitter ou do seu FC. Continue ainda em "OBJETO" ,  letra "T" e escreva o nome que quiser. Utilize a fonte mais bonita, a cor, o contorno e a sombra pra criar um efeito bem bonito no letreiro. Coloque o nome em "VERTICAL" pra caber na outra lateral e dê OK! Veja a imagem abaixo:
11º Posicione o nome bem dentro da lateral e acrecente coisinhas em PNG . Nesse modelo usei fios de luz se você tiver em seu PC use. Se não, baixe Fios de Luz no blog do Photoscape. (se você quiser, claro)

12º)Estamos terminando! Vamos retirar molde verde, feio e transparente? Clique nele. Mova-a e clique no "X" para retirá-lo(veja na imagem abaixo)  e...
 Escreva o que quiser na moldurinha: seus dados, seu blog, seu contato.
Vá em "OBJETO" Clique nesse retângulo que tem o nome  "FOTO + OBJETOs"

 ... Clique em "SALVAR" Salve seu novo BG.Voilà!!Está Pronto!

Agora é só ir no seu twitter em
"CONFIGURAÇÕES" ►"APARÊNCIA"► "ALTERAR PLANO DE FUNDO"
"ESCOLHER A IMAGEM" - o BG que você fez
Desmarque a opção "REPETIR PLANO DE FUNDO"
e na "POSIÇÃO DE PLANO DE FUNDO" marque a opção "ESQUERDA" 
Clique em SALVAR ALTERAÇÕES
Espero que tenham gostado!
E se quer reproduzir, por favor dê os devidos créditos a Isabella , Recanto da Fada Alice.
Beijos e Abraços
E continuem ajudando o blog. Escolha na enquete na lateral do blog qual o próximo tutorial.


Você também pode se interessar:
 Como fazer icon com animação gif para twitter no Photoscape
 Como fazer banner transparente para blog no Photoscape
 Como fazer letras com texturas diferentes no PhotoScape
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.

38 comentários:

  1. O tamanho ficou ruim, maior que a tela.

    ResponderExcluir
    Respostas
    1. Olá!
      As dimensões são essas mesmas 1344 X 601
      Fico imaginando o porque de ter ficado maior que a tela...
      Tente se possivel, ir novamente em "CONFIGURAÇÕES" lá no proprio twitter, em "APARÊNCIA".
      Desça a página e ao encontrar a Opção "Repetir plano de fundo" desmarque essa opção.
      Desça mais um pouco na opção "Posição do plano de fundo" e marque no lado "Esquerda" e "Salve as alterações"

      Excluir
  2. não consigo colocar como 1344 x 601, fala que o formato está incorreto:\ pode me ajudar?

    ResponderExcluir
    Respostas
    1. Bom, se foi no próprio twitter o único formato que dá problemas é formato da imagem em gif. ou bpm. as dimensões pode ser até 2MB
      1344 X 601 nem chega a 500 Kbytes! Isso depende também se vc salvou nos formatos jpeg. ou png. e não ultrapassou a 1 ou 2MB.
      Também há dias atras tentei por meu novo 'BG no twitter e não estava dando certo mas era devido à falha de servidor. Tentei várias vezes até que deu certo!
      Espero que continue tentando pq às vezes o twitter dá pau mesmo! Esperimente trocar de navegador! Indo pro Intenet Explorer ou outro q vc não usa. As vezes ajuda ser outro navegador.
      Se não for isso é bom você ver o tamanho em Kbytes ou MB(Mega Bytes) que ficou tua imagem. Talvez ela ultrapassou os 2MB ou então vc salvou em formato muito pesado (.png ou .bpm). Salve ele em jpeg. e cuidado pra não ultrapassar 1MB ou 2MB.
      Espero ter ajudado! ^ ^

      Excluir
  3. Onde fica o quadradinho escrito "Foto" para colocar a moldura? Não achei :/

    ResponderExcluir
  4. amei vou postar no meu blog com os creditos

    ResponderExcluir
  5. No meu twitter o bg ficou maior que a tela

    ResponderExcluir
    Respostas
    1. Karen, já testei o tamanho no Internet Explorer, Mozilla e acabei de testa no Google Chrome, a diferença é mínima. As dimensões são essas mesmas 1344 X 601.
      Não entendo pq o BG ficou maior que a tela.

      Excluir
  6. oi Isabella eu to tentando achar molduras para colocar no BG mais meu Photoscape não tem todas essas opções que aparece no seu só tem apenas a opção "FOTO"... e agora????

    ResponderExcluir
    Respostas
    1. olha só, eu acabei de reparar que boa parte dessas opções está na opção "icons" mas mesmo lá não encontrei "frame" e nenhum tipo de moldura :(

      Excluir
    2. Oi Daisy,
      O meu Photoscape é versão v 3.5, mas mesmo no v 3.4 já tinha esses frames, as moldurinhas.(será q temos versões diferentes de Photoscape? - seria isso)
      Repare quando você clica na janela de "OBJETO", "fotografia"(aquele quadradinho de montanhas e sol) e na última opção "MAIS"
      Vai aparecer uma lista de pastas procura a pasta do programa Photoscape tem q ter a pasta de "frames"(pq tem q ter a pasta das molduras nesse programa) se não tiver o nome frame procura em todas as pastas se vai ter molduras.
      Se não houver, baixa do google frames(ou molduras) em png e abra em "OBJETO" "FOTO" essa moldura que baixar dentro do seu BG.
      É o que posso te responder no momento
      Espero, sinceramente ter ajudado.

      Excluir
  7. Adorei...obrigada, ficou um máximo

    ResponderExcluir
  8. Qual fonte vc usou??E como é que o seu fundo ficou um rosa e dps uma cor diferete??

    ResponderExcluir
    Respostas
    1. Usei a fonte "DS DOTS" Mas ela não é nativa do programa Photoscape. Baixei ela nesse site http://pt.fonts2u.com/ e implantei na pasta de fontes. E sobre a diferença dos fundos é que apliquei um filtro "Linear gradiente" com duas cores, só pra dar um charme rs. Como o tutorial era pra fazer um BG simples com molde não expliquei sobre o filtro. Me atentei apenas para ensinar como utilizar o molde e a posição das imagens e textos. Me desculpe.
      Obrigada por ler todinho e comentar
      Abraços :)

      Excluir
  9. Qual e o blog do PhotoScape?

    ResponderExcluir
    Respostas
    1. Você pode baixar o programa Photoscape aqui nesse site:
      http://photoscape.softonic.com.br/

      Ou então, no baixaki onde eu baixei e não tive problema algum:
      http://www.baixaki.com.br/download/photoscape.htm

      Excluir
  10. Isa, como você fez pra palavra ''Stewart'' ficar com aqueles pontinhos fofos brancos ? nao sei fazer o texto ficar legal assim ):

    ResponderExcluir
  11. PaulK,
    Na verdade é uma fonte de letra que tem esses pontinhos.
    O nome da fonte é "DS DOTS" Mas ela não é nativa do programa Photoscape. Baixei ela nesse site http://pt.fonts2u.com/ e depois implantei na pasta de fontes do computador

    ResponderExcluir
  12. Obg pelo tutorial, ele me ajudou muito

    ResponderExcluir
  13. Qual FhotoScape é o seu? -o meu não tem aquele menu na parte de cima a direita! :ss

    ResponderExcluir
    Respostas
    1. O meu Photoscape é versão v 3.5

      Excluir
    2. Qdo. fiz esse tuto meu photoscape era 3.5
      Eu tenho o v 3.6 agora e o menu agora fica em baixo , à direita num botão escrito "Menu"

      Excluir
  14. O meu navegador é o Google Chrome, o tamanho continua sendo 1344 x 601?

    ResponderExcluir
  15. Sim, Stephany!
    Continuará a mesma dimensão.Diferença mínima dos outros navegadore. Já testei.
    Entenda apenas que não aparecerá as imagens e palavras nos espaços que marquei que não colocasse no molde verde, bem como no espaço onde está escrito "Timeline do Twitter"

    ResponderExcluir
  16. eu nao to achando onde ta escrito ''menu'' me ajudaaa

    ResponderExcluir
  17. No molde verde qual é a distancia entre as linhas brancas?

    ResponderExcluir
  18. Taí... nunca parei para medir rsrs sorry
    O que fiz foi pegar um BG de twitter que pesquisei no Google que cabia em todos os navegadores e que tinha as imagens centralizadas nas 2 laterais da time line. Depois foi tentativa e erro...tentativa e + erro rsrs até eu chegar nesse molde. Fazemos assim... uma hora vou medir e depois acrescento nesse post, ok?
    Obg por ler e comentar
    Valeu

    ResponderExcluir
  19. Oi, Janaina!
    Esse tutorial foi feito no Photoscape 3.5
    Na versão mais nova, o photoscape 3.6, o "menu" fica embaixo do lado direito
    Como tenho vários tutoriais feitos em anos anteriores na versão velha do photoscape não tem como eu atualizar todos.
    Qualquer outra dúvida pode perguntar por aqui!

    ResponderExcluir
  20. aah, obtrigada, consegui fazer no 3.5 msm, ensina muito bem, :))

    ResponderExcluir
  21. eu aprendi a fazer bg com esse blog, vei é massa. obg vcs :))) me siguem no meu fc hsushsush
    @OtaLerdaDoLulis

    ResponderExcluir
  22. AMEI! Meu BG ficou perfeito!

    ResponderExcluir
  23. Novela Violetta,
    Se o problema só foi o de não conseguir colocar no twitter deve ter acontecido alguns outros probleminhas:
    1-O BG ultrapassou os 2 MB de tamanho
    2- Conexão lenta
    3-problemas técnicos no twitter

    ResponderExcluir
  24. AMEI TUDO, ESTOU TENTANDO PRATICAR AGORA :)
    voce pode fazer um bg nadessa pra mim ou um modelo ? beijos

    ResponderExcluir
  25. Oi Rafa!
    Que bom que gostou e esta praticando suas edições!
    Nasser e Andressa? rsrs
    Olha, não faço encomendas mas poderei pensar em seu caso rsrs
    bjs e abraços
    p.s. obrigada por ler e comentar

    ResponderExcluir
  26. Flor, meu nome é Ana Paula...
    Eu queria saber se você poderia fazer um novo post que nem esse só que com o modelo do photoscape v3.6.2 ?
    É que algumas coisas eu consegui perfeitamente, só que na hora de colocar o "FRAME" não acho e não a tal opção "MAIS" será que você pode fazer ou então me explicar?
    Meu e-mail é: apnm2204@hotmaial.com

    ResponderExcluir
  27. Oi, Ana Paula!
    É inviável pra mim refazer todos os tutoriais de editores como o Photoscape a cada versão.
    Façamos assim:
    vou te enviar umas dicas por email, me aguarde ok? Abraços

    ResponderExcluir