Olá, pessoal
Não é verdade que um bem elaborado background (imagem de fundo) associado ao Twitter, causa uma excelente impressão, quando já demonstra, já passa qual o estilo da pessoa, o que ela faz e o que se pode esperar de seus twittes?
Então, neste tutorial, veremos, em primeira mão, como eu desenvolvi o background do meu Twitter.
Pré-Requisitos
Familiaridade com o Fireworks CS3 ou CS4
Objetivos
Criar um background personalizado para o Twitter
Conteúdo
1º Passo – Aplicando a Dimensão Correta
Analisando bem a interface gráfica dos perfis do Twitter, onde os twittes são publicados, juntamente com a barra lateral, ocupam aproximadamente 763 px de largura. Para o background percebe-se as seguintes divisões e dimensões:
Olá, pessoal
Não é verdade que um bem elaborado background (imagem de fundo) associado ao Twitter, causa uma excelente impressão, quando já demonstra, já passa qual o estilo da pessoa, o que ela faz e o que se pode esperar de seus twittes?
Então, neste tutorial, veremos, em primeira mão, como eu desenvolvi o background do meu Twitter.
Pré-Requisitos
Familiaridade com o Fireworks CS3 ou CS4
Objetivos
Criar um background personalizado para o Twitter
Conteúdo
1º Passo – Aplicando a Dimensão Correta
Analisando bem a interface gráfica dos perfis do Twitter, onde os twittes são publicados, juntamente com a barra lateral, ocupam aproximadamente 763 px de largura. Para o background percebe-se as seguintes divisões e dimensões:
![Como fazer um backround para o Twitter Fig01-dimensoes](https://2img.net/h/www.mxstudio.com.br/wp-content/uploads/2010/01/fig01-dimensoes.jpg)
Minha intenção é criar um background para resoluções de no mínimo 1280 x 1024px. Vale a pena lembrar que devemos criar uma imagem em 72 dpi e com, no máximo, 800 KB.
No meu caso aqui, minha intenção é divulgar quem eu sou e o que faço na lateral esquerda e na direita, inserir alguns ícones das tecnologias, linguagens, aplicativos de que domino ou utilizo no meu dia-a-dia de trabalho.
Então, criemos um arquivo nas dimensões 1280 x 1024 px, mas utilizaremos a área útil como sugerido acima.
2º Passo – Criando a Textura e o Efeito do Background
Aqui vai entrar o gosto de cada um. Eu tenho minhas preferências, principalmente pela cor verde.
Um dia desses uma amiga minha me questionou:
""Carlos, por que você gosta tanto da cor verde?"
Acredita que nem soube direito o porquê? Depois que aprendi sobre a influência que as cores têm sobre as pessoas e os ambientes, aí sim, descobri o lado bom do verde .O detalhe é que meu logotipo tem e teve verde desde o início e, para realçar, gosto de mesclar tons de escuro do verde, branco e um cinza ou preto. É o que faremos agora.
Vamos criar um retângulo com as mesmas dimensões do arquivo (1280 x 1024px), aplicar um preenchimento gradiente radial a começar do canto superior esquerdo até um pouco ao centro e inserir um textura como é mostrado na imagem a seguir:
![Como fazer um backround para o Twitter Fig02-preenchimento](https://2img.net/h/www.mxstudio.com.br/wp-content/uploads/2010/01/fig02-preenchimento.jpg)
Uma outra opção é aplicar texturas externas, que não são “nativas” do Fireworks, mas que podem ser incorporadas a ele. Abaixo vão algumas texturas:
![Como fazer um backround para o Twitter Textura01-300x103](https://2img.net/h/www.mxstudio.com.br/wp-content/uploads/2010/01/textura01-300x103.jpg)
![Como fazer um backround para o Twitter Textura02-300x103](https://2img.net/h/www.mxstudio.com.br/wp-content/uploads/2010/01/textura02-300x103.jpg)
![Como fazer um backround para o Twitter Textura03-300x103](https://2img.net/h/www.mxstudio.com.br/wp-content/uploads/2010/01/textura03-300x103.jpg)
Escolhida a textura, vamos criar um novo retângulo com as mesmas dimensões do anterior e colocar sobre ele.
Em seguida, com este novo retângulo selecionado, aplicaremos a nova textura:
![Como fazer um backround para o Twitter Fig03-escolha-textura-300x266](https://2img.net/h/www.mxstudio.com.br/wp-content/uploads/2010/01/fig03-escolha-textura-300x266.jpg)
E, na imagem abaixo, vemos o resultado com e sem a aplicação de mais um efeito: Blend Mode > Overlay, localizado na barra Properties.
![Como fazer um backround para o Twitter Fig04-blendmode-300x135](https://2img.net/h/www.mxstudio.com.br/wp-content/uploads/2010/01/fig04-blendmode-300x135.jpg)
E, para finalizarmos, aplicaremos um fade neste retângulo pelo menu Commands > Creative > Auto Vector Mask, isso para o FW CS4, para o CS3, acesse o menu Commands > Creative > Fade Image:
![Como fazer um backround para o Twitter Fig05-fade-300x270](https://2img.net/h/www.mxstudio.com.br/wp-content/uploads/2010/01/fig05-fade-300x270.jpg)
E o resultado até aqui é este:
![Como fazer um backround para o Twitter Fig06-resultado-parcial1-300x240](https://2img.net/h/www.mxstudio.com.br/wp-content/uploads/2010/01/fig06-resultado-parcial1-300x240.jpg)
3º Passo – Inserindo Logotipo e Informações Gerais
Como nosso foco é divulgar um Webdesigner Freelancer, vamos colocar sua logo e um resumo do profissional e dos serviços que ele presta. E tudo isso vai ficar na lateral esquerda, como mostrado na imagem abaixo:
![Como fazer um backround para o Twitter Fig07-resultado-parcial-2](https://2img.net/h/www.mxstudio.com.br/wp-content/uploads/2010/01/fig07-resultado-parcial-2.jpg)
4º Passo – Enviando o Background para o Twitter
Background criado, agora vamos inseri-lo ao Twitter. Obviamente, estando logado, acessemos Settings > Design > Change background image e selecionemos a nossa imagem que deve ter sido exportada num formato GIF, PNG ou JPG, lembrando que não poderá ultrapassar 800 KB.
![Como fazer um backround para o Twitter Fig08-envio-do-background](https://2img.net/h/www.mxstudio.com.br/wp-content/uploads/2010/01/fig08-envio-do-background.jpg)
![Como fazer um backround para o Twitter Fig09-resultado-parcial-3-300x203](https://2img.net/h/www.mxstudio.com.br/wp-content/uploads/2010/01/fig09-resultado-parcial-3-300x203.jpg)
5º Passo – Ajustando as Cores do Twitter
E para finalizarmos, é preciso melhorar a combinação de cores do Twitter com o novo background, não acham?
Pois bem, vejamos como acertar nesta combinação, criando uma paleta de cores:
![Como fazer um backround para o Twitter Fig10-paleta-de-cores-300x203](https://2img.net/h/www.mxstudio.com.br/wp-content/uploads/2010/01/fig10-paleta-de-cores-300x203.jpg)
E o resultado é:
Clique aqui e veja o resultado.
Até mais (:
Não é verdade que um bem elaborado background (imagem de fundo) associado ao Twitter, causa uma excelente impressão, quando já demonstra, já passa qual o estilo da pessoa, o que ela faz e o que se pode esperar de seus twittes?
Então, neste tutorial, veremos, em primeira mão, como eu desenvolvi o background do meu Twitter.
Pré-Requisitos
Familiaridade com o Fireworks CS3 ou CS4
Objetivos
Criar um background personalizado para o Twitter
Conteúdo
1º Passo – Aplicando a Dimensão Correta
Analisando bem a interface gráfica dos perfis do Twitter, onde os twittes são publicados, juntamente com a barra lateral, ocupam aproximadamente 763 px de largura. Para o background percebe-se as seguintes divisões e dimensões:
Olá, pessoal
Não é verdade que um bem elaborado background (imagem de fundo) associado ao Twitter, causa uma excelente impressão, quando já demonstra, já passa qual o estilo da pessoa, o que ela faz e o que se pode esperar de seus twittes?
Então, neste tutorial, veremos, em primeira mão, como eu desenvolvi o background do meu Twitter.
Pré-Requisitos
Familiaridade com o Fireworks CS3 ou CS4
Objetivos
Criar um background personalizado para o Twitter
Conteúdo
1º Passo – Aplicando a Dimensão Correta
Analisando bem a interface gráfica dos perfis do Twitter, onde os twittes são publicados, juntamente com a barra lateral, ocupam aproximadamente 763 px de largura. Para o background percebe-se as seguintes divisões e dimensões:
![Como fazer um backround para o Twitter Fig01-dimensoes](https://2img.net/h/www.mxstudio.com.br/wp-content/uploads/2010/01/fig01-dimensoes.jpg)
Minha intenção é criar um background para resoluções de no mínimo 1280 x 1024px. Vale a pena lembrar que devemos criar uma imagem em 72 dpi e com, no máximo, 800 KB.
No meu caso aqui, minha intenção é divulgar quem eu sou e o que faço na lateral esquerda e na direita, inserir alguns ícones das tecnologias, linguagens, aplicativos de que domino ou utilizo no meu dia-a-dia de trabalho.
Então, criemos um arquivo nas dimensões 1280 x 1024 px, mas utilizaremos a área útil como sugerido acima.
2º Passo – Criando a Textura e o Efeito do Background
Aqui vai entrar o gosto de cada um. Eu tenho minhas preferências, principalmente pela cor verde.
Um dia desses uma amiga minha me questionou:
""Carlos, por que você gosta tanto da cor verde?"
Acredita que nem soube direito o porquê? Depois que aprendi sobre a influência que as cores têm sobre as pessoas e os ambientes, aí sim, descobri o lado bom do verde .O detalhe é que meu logotipo tem e teve verde desde o início e, para realçar, gosto de mesclar tons de escuro do verde, branco e um cinza ou preto. É o que faremos agora.
Vamos criar um retângulo com as mesmas dimensões do arquivo (1280 x 1024px), aplicar um preenchimento gradiente radial a começar do canto superior esquerdo até um pouco ao centro e inserir um textura como é mostrado na imagem a seguir:
![Como fazer um backround para o Twitter Fig02-preenchimento](https://2img.net/h/www.mxstudio.com.br/wp-content/uploads/2010/01/fig02-preenchimento.jpg)
Uma outra opção é aplicar texturas externas, que não são “nativas” do Fireworks, mas que podem ser incorporadas a ele. Abaixo vão algumas texturas:
![Como fazer um backround para o Twitter Textura01-300x103](https://2img.net/h/www.mxstudio.com.br/wp-content/uploads/2010/01/textura01-300x103.jpg)
![Como fazer um backround para o Twitter Textura02-300x103](https://2img.net/h/www.mxstudio.com.br/wp-content/uploads/2010/01/textura02-300x103.jpg)
![Como fazer um backround para o Twitter Textura03-300x103](https://2img.net/h/www.mxstudio.com.br/wp-content/uploads/2010/01/textura03-300x103.jpg)
Escolhida a textura, vamos criar um novo retângulo com as mesmas dimensões do anterior e colocar sobre ele.
Em seguida, com este novo retângulo selecionado, aplicaremos a nova textura:
![Como fazer um backround para o Twitter Fig03-escolha-textura-300x266](https://2img.net/h/www.mxstudio.com.br/wp-content/uploads/2010/01/fig03-escolha-textura-300x266.jpg)
E, na imagem abaixo, vemos o resultado com e sem a aplicação de mais um efeito: Blend Mode > Overlay, localizado na barra Properties.
![Como fazer um backround para o Twitter Fig04-blendmode-300x135](https://2img.net/h/www.mxstudio.com.br/wp-content/uploads/2010/01/fig04-blendmode-300x135.jpg)
E, para finalizarmos, aplicaremos um fade neste retângulo pelo menu Commands > Creative > Auto Vector Mask, isso para o FW CS4, para o CS3, acesse o menu Commands > Creative > Fade Image:
![Como fazer um backround para o Twitter Fig05-fade-300x270](https://2img.net/h/www.mxstudio.com.br/wp-content/uploads/2010/01/fig05-fade-300x270.jpg)
E o resultado até aqui é este:
![Como fazer um backround para o Twitter Fig06-resultado-parcial1-300x240](https://2img.net/h/www.mxstudio.com.br/wp-content/uploads/2010/01/fig06-resultado-parcial1-300x240.jpg)
3º Passo – Inserindo Logotipo e Informações Gerais
Como nosso foco é divulgar um Webdesigner Freelancer, vamos colocar sua logo e um resumo do profissional e dos serviços que ele presta. E tudo isso vai ficar na lateral esquerda, como mostrado na imagem abaixo:
![Como fazer um backround para o Twitter Fig07-resultado-parcial-2](https://2img.net/h/www.mxstudio.com.br/wp-content/uploads/2010/01/fig07-resultado-parcial-2.jpg)
4º Passo – Enviando o Background para o Twitter
Background criado, agora vamos inseri-lo ao Twitter. Obviamente, estando logado, acessemos Settings > Design > Change background image e selecionemos a nossa imagem que deve ter sido exportada num formato GIF, PNG ou JPG, lembrando que não poderá ultrapassar 800 KB.
![Como fazer um backround para o Twitter Fig08-envio-do-background](https://2img.net/h/www.mxstudio.com.br/wp-content/uploads/2010/01/fig08-envio-do-background.jpg)
![Como fazer um backround para o Twitter Fig09-resultado-parcial-3-300x203](https://2img.net/h/www.mxstudio.com.br/wp-content/uploads/2010/01/fig09-resultado-parcial-3-300x203.jpg)
5º Passo – Ajustando as Cores do Twitter
E para finalizarmos, é preciso melhorar a combinação de cores do Twitter com o novo background, não acham?
Pois bem, vejamos como acertar nesta combinação, criando uma paleta de cores:
![Como fazer um backround para o Twitter Fig10-paleta-de-cores-300x203](https://2img.net/h/www.mxstudio.com.br/wp-content/uploads/2010/01/fig10-paleta-de-cores-300x203.jpg)
E o resultado é:
Clique aqui e veja o resultado.
Até mais (:
» # Hack3ad By LosOwn3d# ~ AmigoID
» [Evento] Ganhe Moedas Fácil
» $ Hack3D bY AmigoID~Own3D#
» [Apresentação] Fullest Strike
» [Pedido] Logotipo
» Template Cria HP
» HACK3D By AMIGOID
» OWN3D By AmigoID
» Enfiar o dedo na tomada pode aumentar suas notas na escola
» [Tutorial] Ranger Red Sign
» [Tutorial] ~ Fazendo Piso Falso ~
» Loja - Emblemas de Times de Futebol
» [Loja] Retirar Ocorrências
» [#] Hack3d By Amig0ID