Como eu criei a capa da página do Photoshop PT no Facebook?

Por Joana Claudino
Em Artigos
abr 11th, 2012
50 Comentários
1041 Views

Detalhes do tutorial

  • Categoria: Design
  • Dificuldade: Intermédia
  • Tempo de realização: 45-60 minutos
  • Versão do Photoshop: É possível realizar no Photoshop CS3 e superiores
  • Descrição: Neste tutorial eu explico-lhe como criei e ensino-lhe a criar uma capa para sua página no Facebook igual à da página do Photoshop PT.

Recursos necessários

1. Início da criação do fundo

Abra o Photoshop e crie um documento com 851 x 315 pixeis (naturalmente, você pode usar outras dimensões para o documento mas se pretender criar uma capa para a sua página no Facebook, é essa a dimensão que o documento deve ter). Depois preencha a Background Layer/Camada de Fundo de preto. A seguir, crie um grupo (Ctrl+G/Cmd+G) e dê-lhe o nome de ‘Fundo’. Por fim, crie uma nova Layer/Camada nesse grupo e preencha-a com a cor #01144e e depois mude a sua Opacity/Opacidade para 50%.

tutorial_capa_facebook_1

Crie outra Layer/Camada dentro do grupo ‘Fundo’ e dê-lhe o nome de ‘Cor’. Depois agarre num Soft Brush/Pincel Suave com tamanho de 48 px e com cor #00ccff e use-o para fazer algo semelhante à imagem em baixo:

tutorial_capa_facebook_2

Dê um clique-direito na última Layer/Camada que criou e escolha a opção Convert to Smart Object/Converter para Objeto Inteligente. Depois vá a Filter>Blur>Motion Blur/Filtro>Desfoque>Desfoque de Movimento e defina os parâmetros abaixo:

tutorial_capa_facebook_3

O resultado será o seguinte:

tutorial_capa_facebook_4

Duplique (Ctrl+J/Cmd+J) a Layer/Camada ‘Cor’. Depois vá Edit>Free Transform/Editar>Transformação Livre (Ctrl+T/Cmd+T) e reduza o tamanho da cópia enquanto aperta Shift.

tutorial_capa_facebook_5

Quando terminar de reduzir o tamanho, aperte Enter/Inserir. Reduza a Opacity/Opacidade para 20%. Depois vá a Layer>Layer Style>Color Overlay/Camada>Estilo de Camada>Sobreposição de Cor e defina os parâmetros abaixo.

tutorial_capa_facebook_6

Agora baixe a imagem de stock ‘Cosmos Lighting 1‘ e abra-a no seu documento. Depois use o comando Free Transform/Transformação Livre (Ctrl+T/Cmd+T) para reduzir o seu tamanho. A seguir vá a Filter>Blur>Motion Blur/Filtro>Desfoque>Desfoque de Movimento e defina os parâmetros abaixo:

tutorial_capa_facebook_7

Reduza a Opacity/Opacidade da Layer/Camada para 60% e mude o Blend Mode/Modo de Mesclagem para Screen/Divisão. O resultado será o seguinte:

tutorial_capa_facebook_8

2. Adição de alguns elementos ao fundo

Baixe a imagem ‘Fune-stock_stars2‘ e abra-a no seu documento. Use o comando Free Transform/Transformação Livre (Ctrl+T/Cmd+T) para ajustar o seu tamanho e depois reduza a Opacity/Opacidade desta Layer/Camada para 20%.

tutorial_capa_facebook_9

Crie um novo Grupo (Ctrl+G/Cmd+G) e dê-lhe o nome de ‘Efeitos de Luz’. Depois, crie uma nova Layer/Camada dentro desse grupo. Agarre num Soft Brush/Pincel Suave com tamanho de 50 px e use-o para fazer algo semelhante ao de baixo:

tutorial_capa_facebook_10

Dê um clique-direito nesta Layer/Camada e escolha a opção Convert to Smart Object/Converter para Objeto Inteligente. Depois vá a Filter>Blur>Motion Blur/Filtro>Desfoque>Desfoque de Movimento e defina os parâmetros abaixo:

tutorial_capa_facebook_11

Depois vá a Filter>Other>Maximum/Filtro>Outro>Máximo e defina os parâmetros abaixo:

tutorial_capa_facebook_12

O resultado é o seguinte:

tutorial_capa_facebook_13

3. Criação de feixes de luz

Crie outra Layer/Camada dentro do grupo ‘Efeitos de Luz’. Agarre na Rectangular Marquee Tool/Ferramenta Letreiro Retangular (M) para criar uma seleção como a da imagem abaixo.

tutorial_capa_facebook_14

Depois, use um degradê do branco para o transparente do topo para a parte de baixo da seleção.

tutorial_capa_facebook_15

Aperte Ctrl+D/Cmd+D para cancelar a seleção. Depois, com a Eraser Tool/Ferramenta Borracha (E) apague os cantos do degradê.

tutorial_capa_facebook_16

Por fim, mude o Blend Mode/Modo de Mesclagem do grupo ‘Efeitos de Luz’ para Color Dodge/Subexposição de Cores.

tutorial_capa_facebook_17

Vá a Filter>Noise>Add Noise/Filtro>Ruído>Adicionar Ruído e defina os parâmetros abaixo.

tutorial_capa_facebook_18

Reduza a Opacity/Opacidade da Layer/Camada para 30%. Depois, vá a Edit>Free Trasnform/Editar>Transformação Livre (Ctrl+T/Cmd+T) para rodar a Layer/Camada em -45º.

tutorial_capa_facebook_19

Agora, posicione a Layer/Camada num “local estratégico”, ou seja, em cima de um dos locais mais iluminados. Veja na imagem em baixo.

tutorial_capa_facebook_20

Faça várias cópias (Ctrl+J/Cmd+J) desta Layer/Camada e coloque-as também em “locais estratégicos”.

tutorial_capa_facebook_21

4. Início da criação do texto

Agora vamos criar o texto. Portanto, crie um novo grupo (Ctrl+G/Cmd+G) e dê-lhe o nome de ‘Texto’. Agarre na Horizontal Type Tool/Ferramenta Texto Horizontal (T) e escreva o seu texto com a fonte Insaniburger, com tamanho de 120 px e com cor branca.

tutorial_capa_facebook_22

5. Criação de um padrão

Para criar as riscas do texto, você tem de criar outro documento no Photoshop. Portanto, crie um novo documento (Ctrl+N/Cmd+N) com 100 x 100 px e com fundo transparente. Para ter a certeza de que o padrão se dispõe corretamente, verifique se “Snap/Ajustar” está selecionado no menu View/Visualizar. Para além disso, aconselho que você use uma guia no centro do documento. Para isso, você tem de ter as Rulers/Réguas ativas (aperte Ctrl+R/Cmd+R ou vá a Window>Rulers/Janela>Réguas) e depois arraste o cursor do rato desde a régua da esquerda para criar uma guia vertical.

tutorial_capa_facebook_23

Agarre na Rectangle Tool/Ferramenta Retângulo (U) e com a opção Shape Layers/Camadas de Forma selecionada na barra de opções, faça um retângulo no centro do documento com a cor #559fdc.

tutorial_capa_facebook_24

Agora precisamos de mais duas riscas. Para isso aperte Alt/Option e mova a risca central para a duplicar. Depois coloque a cópia no lado esquerdo, mas deixe que apenas se veja a sua metade. Volte a apertar Alt/Option para duplicar a risca novamente e posicione esta cópia no lado direito e deixe também que se veja apenas a sua metade. Depois mude a cor das duas cópias para #63b9ff.

tutorial_capa_facebook_25

Uma vez que o padrão está concluído, selecione as Shape Layers/Camadas de Forma, dê um clique-direito e escolha Rasterize/Rasterizar. Depois vá a Edit>Define Pattern/Editar>Definir Padrão e dê-lhe o nome que desejar.

tutorial_capa_facebook_26

6. Utilização do padrão no texto

Volte ao seu documento original e crie uma nova Layer/Camada por cima da Text Layer/Camada de Texto dentro do grupo ‘Texto’.  Depois agarre na Paint Bucket Tool/Ferramenta Lata de Tinta (G) e na barra de opções escolha Pattern/Padrão e depois abra o menu de padrões. No fim, você encontrará o padrão que criou.

tutorial_capa_facebook_27

Use-o para preencher a última Layer/Camada que criou.

tutorial_capa_facebook_28

Agora dê um clique-direito nesta Layer/Camada e escolha a opção Create Clipping Mask/Criar Máscara de Corte.

tutorial_capa_facebook_29

Agora use o comando Free Transform/Transformação Livre (Ctrl+T/Cmd+T) para ajustar o padrão à sua vontade. Eu, por exemplo, rodei o padrão em 45º.

tutorial_capa_facebook_30

7. Aplicação de alguns Layer Styles/Estilos de Camada ao texto

Agora vamos tornar o texto mais interessante ao aplicar-lhe alguns estilos. Portanto, selecione a Text Layer/Camada de Texto, vá a Layer>Layer Style/Camada>Estilo de Camada e aplique-lhe os seguintes estilos:

Drop Shadow/Sombra Projetada

tutorial_capa_facebook_31

Inner Shadow/Sombra Interna

tutorial_capa_facebook_32

Stroke/Traçado

tutorial_capa_facebook_33

Depois disto, o seu texto ficará assim:

tutorial_capa_facebook_34

Conclusão

Se você tem mais do que uma Text Layer/Camada de Texto (tal como eu), repita todo o processo que executou para a outra Text Layer/Camada de Texto. O tutorial está concluído e foi assim que eu criei a capa da página do Photoshop PT no Facebook! Espero que tenha gostado do tutorial, se tiver alguma dúvida não hesite em deixar um comentário. Fica o resultado em baixo.

tutorial_capa_facebook_final

Tutorial criado por Joana Claudino.

About the Author

- É a fundadora do Criatividade Plus (+). Apaixonada por design gráfico, desenho, pelo Photoshop e pelas artes em geral, está sempre atenta às novidades destas áreas. Tradutora da Adobe TV.

50 Respostas para “Como eu criei a capa da página do Photoshop PT no Facebook?”

  1. [...] Como eu criei a capa da página do Photoshop PT no Facebook? [...]

  2. Gabriela disse:

    Eu baixei o Photoshop, mas não estou conseguindo fazer as linhas!

  3. Gabriel disse:

    Não consegui colocar a cor de fundo… Teria como fazer um video explicando como fazer???
    Att

    • Joana Claudino disse:

      Olá Gabriel,
      eu tenho todo o gosto em fazer um video para o ajudar mas neste momento não tenho meios para fazer o video, no entanto, se você não se importar de esperar algum (pouco) tempo eu poderei colocar um video a ensinar a fazer isso.
      Abraços!

  4. Emanuel disse:

    Como faso o download?

  5. Pedro disse:

    Como faz esse degradê do branco para o transparente de cima para baixo?
    vlw

  6. Georgia disse:

    Oi Joana! Tenho uma dúvida, na parte onde você utiliza o motion blur na imagem “Cosmo Lightning”, como você fez pra que ficasse ainda aparecendo os detalhes da imagem (aquela faixa brilhante)? Pois quando eu utilizei ela ficou do mesmo modo que a imagem do background, borrada. Outra dúvida é, qual a finalidade do color overlay com a cor #ffd200? Quando fiz esta parte do tutorial a minha imagem ficou mais amarelada e não como mostra na sua imagem! Eu utilizdo o Ps CS5 Extended caso ajude na resposta! Obrigada e parabéns pelo site, aprendi ótimas dicas com você! =)

    • Joana Claudino disse:

      Olá Georgia! Em relação à sua primeira pergunta, se você fez tudo o que está indicado no tutorial talvez você tenha esse problema com a imagem “Cosmo Lightning” devido ao tamanho da mesma, ou seja, você deve estar a usar a imagem com um tamanho diferente do que eu usei no tutorial, mas a culpa é minha pois não indiquei qual o tamanho da imagem que deveria ser usado. Use a Free Transform Tool/Ferramenta de Transformação Livre (Ctrl+T/Cmd+T) para “jogar” um pouco com o tamanho da imagem de modo a que ela fique como é mostrado no tutorial. Em relação à sua segunda dúvida, você tem de reduzir a Opacity/Opacidade dessa Layer/Camada onde aplicou o Color Overlay/Sobreposição de Cor para 20%, esse também foi um erro meu, peço desculpa. Se ainda assim, você continuar com alguma dúvida pode falar comigo sempre que quiser! Muito obrigado e fico contente por a ter ajudado!

      • Georgia disse:

        Ah ok então, agora entendi melhor e vou refazer o tutorial pra ver se consigo os mesmos resultados! Obrigada pelo esclarecimento e atenção!! Continue com o blog por que agora sou uma leitora dele heheh… e parabéns novamente!!

  7. Sabrina disse:

    Olá, eu criei uma capa pro meu facebook, mais na hora de salvar eu salvei, deu tudo certo, ate consegui abrir, mais eu nao consigo “colocar” no meu facebook, tipo, lá nao mostra a capa :/

    • Joana Claudino disse:

      Olá Sabrina! Você salvou o arquivo em que formato? Salve o arquivo em formato .jpeg e depois, no Facebook, passe com o mouse por cima da capa e clique no texto “alterar capa” que aparece no canto inferior direito da sua capa actual, depois clique em “Carregar foto” e selecione a capa que você criou. Diga aqui nos comentários se assim deu certo. Abraço!

  8. Sandrinnh disse:

    Joana Claudino,
    Será que vc tem algumas Brushes ae pramim ? Que serve para fazer capa para o facebook?

    Se tive bota pra download ai, Obrigado.

  9. Sandrinnh disse:

    Obrigado!

  10. scheidt disse:

    Nção consegui essa parte,naum consegui essa opção Shape Layers
    Agarre na Rectangle Tool/Ferramenta Retângulo (U) e com a opção Shape Layers/Camadas de Forma selecionada na barra de opções, faça um retângulo no centro do documento com a cor #559fdc.

  11. Luan disse:

    Como faço pra ir em Layer Style>Color Overlay/Camada>Estilo de Camada>Sobreposição de Cor? Sou mei noob!

  12. Nicolle disse:

    eu ñ consigui fazer nada eu ñ sei mecher!!

    • Joana Claudino disse:

      Oi Nicolle, se você não sabe trabalhar com o Photoshop, dê uma olhada nos nossos tutoriais mais básicos… Espero que os tutoriais a ajudem!

  13. Juliana disse:

    Eu queria saber como corta a foto e como se cola!

    • Joana Claudino disse:

      Oi Juliana! Para copiar e colar, você seleciona a parte que pretende copiar e vai a Edit>Copy/Editar>Copiar (Ctrl+c/Cmd+C) e depois, para colar, você vai a Edit>Paste/Editar>Colar (Ctrl+V/Cmd+V). Espero que a tenha ajudado!

  14. Thiago disse:

    qual a versao do photoshop?

    • Joana Claudino disse:

      Oi Thiago! Eu usei o Photoshop CS5, mas você pode fazer isto no Photoshop CS3 e superiores (está a dizer lá em cima)…
      Abraço

  15. gloria disse:

    não consegui meu Photoshop ta diferente das orientação que vc ta pedindo me perdi no primeiro passo kkk

    • Joana Claudino disse:

      Oi Gloria, em qual parte do primeiro passo você se perdeu? eheh
      Eu reparei que havia um erro no primeiro passo na parte em que diz para criar um grupo pois a seguir estava (Ctrl+N/Cmd+N) quando o atalho correcto é Ctrl+G/Cmd+G… Foi esse o problema?

  16. Gustavo disse:

    Joana, qual o nome desse efeito?
    Por favor responda o mais rápido possivel!
    Obrigado

    • Joana Claudino disse:

      Oi Gustavo, o efeito não nenhum nome específico… foi apenas um efeito que surgiu enquanto eu fazia algumas experiências para a capa do site. Com pena minha, não sei como posso ajudá-lo. Só por curiosidade, por que motivo você queria saber o nome do efeito?
      Abraço

  17. evelyn disse:

    eu nao consegue como faz todo isso

    • Joana Claudino disse:

      Oi Evelyn, eu sei que a minha resposta não a vai ajudar muito mas você apenas tem de seguir os passos descritos no tutorial. Leia com atenção cada passo e aí se tiver alguma dúvida específica, me pergunte que eu responderei. Fico à espera :)

  18. Paola Minado disse:

    Eu Queria Saber Como Coloca Imagem

  19. Maino Design disse:

    Gosteido Post, Me ajudo Baste como criar um Back Ground!!!

    DE MAISSSSSSSSSSSS!!!!!!!!!

  20. Alessandra disse:

    você poderia me mandar o link de algum programa para fazer capas de facebook??

  21. flavia disse:

    eu nao comsigo baixar o o negosso que faz capas como se faz para baixar

Deixe uma resposta

O seu endereço de email não será publicado Campos obrigatórios são marcados *

Você pode usar estas tags e atributos de HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>