Tutorial - Separador de Perfil no Photoshop Cs5


Eai sapinhos, como vão? espero que bem
Pediram na ask da Luu-chan um tutorial de como fazer separador no Photoshop, mas como ela não dá muito bem com ele, ela pediu para mim fazer. Basicamente esse tutorial foi feito por nos duas, por que ela fez o modelo do separador no PhotoFiltre e eu passei para o photoshop.  É o post maior que eu fiz até hoje e.e, é um tutorial bem fácil de seguir, ele tem vários prints para ficar mais fácil de entender. então vamos lá?
~mais informações~
Esse tutorial dá para ser feito no Photoshop CS6, não fiz nele por que o meu não queria abrir '^'

Primeiramente, se você não tiver o PS Cs5, aqui tem o link, esse é o Portable, não tem muita diferença do Extended, tem todas as ferramentas que precisa para esse tutorial. O Portable não precisa de instalação, é só fazer o Download e abrir e pronto, é só usar. Antes eu só usava ele, só que eu queria usar gifs e infelizmente  não dá para abrir os benditos gifs pelo menos esse, então tive que correr para o Extended. Enfim,  não sou uma expert no photoshop mas vou ensinar a fazer esse separador.
Antes de começar o separador aconselho já ter o Welcome pronto, pois a partir dele sai o modelo, e para o perfil ficar agradável o bom é eles ter a mesma fonte e a mesma cor, mas isso não é uma regra, vai de cada pessoa e depende da criatividade. 
Enfim, Vamos ao Tutorial

Vamos começar montando a base, abram o PS e vão em "Arquivo - Novo" ou usem o atalho "Ctrl + N"
Irá abrir uma janela, nessa janela vocês irão ajustar o tamanho, nome, resolução e etc...
em "Nome" vocês colocaram o nome do que vocês estão fazendo, tipo "Separador", "welcome" "edição"...
fica a critério de vocês mesmo. Eu, por exemplo não modifico o nome agora, apenas no final quando eu vou salvar e.e
Em "Largura" vocês colocam 390 Pixels, é um tamanho bom, dá para fazer bastante coisa nesse espaço
em "Altura", coloque 100 Pixels, provavelmente não ocupará toda essa altura, mas no final dá para cortar e deixar certinho :3
Em "conteúdo de plano de fundo" deixe em transparente, para a imagem ficar em PNG.
não mexa nas outras opções. Deverá ficar assim (print). Dê Ok!
Irá abir um espaço para fazer o separador, então vá nas ferramentas e clique em "ferramenta retângulo" ou pelo atalho "U" (print). Então vocês irá fazer um retângulo do tamanho que querem o separador (print)
Feito isso, vá novamente em "ferramenta retângulo" e faça um retângulo menor , posicione ele dessa forma (print). O retângulo menor tem que ficar em baixo do maior, se não tiver é só mudar nas camadas. Geralmente a janelinha de camadas fica do lado direito, mas se caso vocês não encontrarem, vá em "janela" que fica lá no topo, e clique em "camadas" ou pelo atalho "F7". 
Façam uma nova camada, clicando no ícone que parece uma folhinha de papel :3
vá nas ferramentas e na ferramenta laço você clica com o botão direito e clique na ferramenta "laço poligonal" (print)
Então façam façam um triangulo desse jeito

Novamente vá em ferramentas e clique na lata de tinta, com o botão direito clique na opção "ferramenta lata de tinta" e clique dentro do triangulo que foi feito. Irá aparecer uma janela falando em converter forma, dão ok, cliquem de novo dentro do triangulo. 
Pronto a base foi finalizada.


Agora chegou a parte que talvez seja a mais complicada, na minha opinião. Não por que é difícil , mas sim pelo fato que é as cores que define como será todo seu perfil. Qualquer cor fora do tom, ficará estranho. Aconselho que vocês usem palhetas de cores, assim é mais fácil e não corre risco de dar errado, ou então pegar as cores mais usadas no Welcome. Por isso eu digo que é melhor fazer o welcome primeiro.
Tem um aplicativo para o Google Chrome, que vocês fazem uma palheta de acordo com a imagem desejada. Eu sempre uso ele quando estou com duvidas e é muito útil. Então se vocês quiserem usar esse app eu deixarei o link no fim do post >w<
Enfim, vamos colocar as cores no separador.
Em Camadas, irá ter uns quadradinhos das cores, vocês clicam neles, e define a cor.
Na camada do triângulozinho, não terá esse quadradinho de cor, então vocês dão um clique duplo e irá abrir uma janela, vá na opção "sobreposição de cor" e coloque a cor desejada
#dica: Nesse triangulo, coloque uma cor um pouco mais escura, para dar o efeito certo.

Agora chegou a parte da criatividade de vocês criarem asa, adicionem efeitos, Styles, tudo o que vocês quiserem. No meu separador eu coloque uma Style (estilo) com listrinhas, no fim do post deixarei o link para download.
Parte 2 finalizada.



Vamos colocar as letras e os enfeites na base. 
Primeiro vamos colocar um linha pressionada na base, para dar um toque fofinho, Clique com o botão direito em  "ferramenta linha" fica no mesmo lugar da "ferramenta retângulo". Lá em cima, vai ter "peso" então coloque "1 px" que é o tamanho da linha. Vá no separador e faça uma linha assim (print)
Para deixar a linha pressionada eu uso uma style, no final do post também deixarei ela, no quadradinho onde muda a cor, vocês coloque esse código: 877a80. coloque ele no espaço que está o "#"
Clique em "ferramenta Texto", ou pelo atalho "T". Vocês iram abrir um espaço e escrever o que quer, feito isso selecione o texto, e lá no topo terá uma caixinha para mudar a cor do texto, então coloquem esse codigo: 504c4e
O meu ficou assim:
o texto também foi usado Style
Agora, vá novamente em "ferramenta Linha" e lá em cima em "peso" coloque "13 px" e faça da seguinte maneira (print), vá nas camadas, coloque a cor em branco e clique com o botão direito, e clique em "Duplicar camada", irá aparecer uma janelinha, de ok!
agora vocês irão colocar essa camada que foi duplicada por ultimo. só arrastar ela para baixo. então vá em ferramentas e clique no primeiro ícone "ferramenta mover" ou pelo atalho "V", vá no separador e arraste a camada para ela ficar dessa forma 
Ainda não mudei a cor para branco avá
Vá em "Ferramenta Texto" e clique com o botão direito e clique em "Ferramenta Texto Vertical", e escreva no espaço branco uma pequena descrição. (No final do post também deixarei as fontes que usei)
Agora salve essa imagem (x)
Vá em "Arquivo - Inserir", abra a imagem que foi salva e ajuste ela de maneira que fique dentro do separador. vá nas camadas, clique na camada do ornamento, e coloque a opacidade em 32%.
O separador foi finalizado, agora se você quiser cortar ele certinho só usar o atalho "M" e selecionar em volta do separador certinho, feito isso vá em "Imagem - Cortar".
Agora para salvar é só ir em "Arquivo - Salvar" e selecione a opção "PNG".
Mas eu não salvo dessa forma e.e
quando eu vou salvar eu vou em "Arquivo - Salvar para a Web e Dispositivos" e lá onde que está "Gif" eu seleciono a opção "PNG-24" e salvo.
As duas maneiras salva igual, e eu nem sei porque salvo dessa maneira, mas sempre foi assim '-'.
(salve da maneira que eu salvo, para não dar nada errado)
Separador finalizado e salvo, como o meu ficou:




Estamos chegando no final, e vou dar algumas dicas para vocês
#1 - Tenha no computador fontes variadas, de todos os tipos, a escolha da fonte conta muito. Fontes mais simples, fontes cursivas, fontes Pixels é uma maravilha para te ajudar a fazer suas edições.
Aqui Alguns links: Fontes pixels (fonte pixel é essa pequena que eu usei para fazer a descrição no separador).
Essas são apenas alguns tipo de fontes, existe outros tipos, outras formas, tudo que você imaginar, é só procurar que encontra muita, muita coisa!
Nas fontes pixels quando for usa-la, no lugar de trocar o tamanho e tal irá ter "Nenhuma" "Nítida" "Bem definida" "Sólida" "Suave", deixe em "nenhuma". Para não alterar os pixels dela ^^

#2 - Acho que essa é uma dica muito boba e que todos devem saber, mas eu vou passa-las para vocês e.e
quando vocês forem fazer uma base para perfil, ao invés de refazer o separador varias vezes, só troquem as palavras. 

#3 - Façam e refaçam e façam de novo, é só assim para adquirir pratica quanto com o PS, quanto nas edições.

Links
Paleta do Google
Pack com todas as coisas usadas no Tutorial
(preferi juntar tudo para ficar fácil)
nenhuma das coisas que contem no pack foi eu que fiz, não me lembro onde peguei por que faz muito tempo. Gomenasai.
Como Colocar Style no PS

----------

Pronto pessoal! é isso por enquanto.
Espero que vocês tenham compreendido, qualquer duvida só peguntar ali na ask.
Até a próxima, bye and kissu :*

4 comentários

  1. Amei! ♥◡♥

    ResponderExcluir
  2. Adorei o tutorial ^ω^
    Eu só não entendi uma parte... Aquela que diz para dar duplo click no quadradinho e escolher "sobreposição de cor". Você pode enviar um print? Se não for incômodo.
    Você é muito talentosa! Eu nem sabia que dava para fazer algo tão fofinho assim! 〜(^∇^〜)
    Beijos doces e quentes!

    ResponderExcluir
  3. Adorei o tutorial ^ω^
    Só não entendi uma parte... Aquela que diz para dar duplo click no quadradinho e escolher "sobreposição de cor". Você pode enviar um print? Se não for incômodo.
    Você é muito talentosa! Eu nem sabia que dava para fazer algo tão fofo assim! 〜(^∇^〜)
    Beijos doces e quentes!

    ResponderExcluir

Yoo *-* Obrigado por comentar
♥ comentários maldosos serão apagados
♥ aceitamos criticas, mas claro, com educação
♥ Sem palavrões e linguagem SMS
♥ Quer que eu visite seu blog? Só deixar o link no fim do comentário ^^
♥ Comentários do tipo: "seguindo, segue de volta?" Não será aceito :B

Emoticons, Expresse:
ლ(╹◡╹ლ) (✿◠‿◠) (◡‿◡✿) (◕‿◕✿) (✖╭╮✖)(≧◡≦)
(¬_¬) (◑‿◐) (◕‿-) ✖‿✖ (-’_’-) (╥_╥) (╯_╰) (╯3╰) (o_-) (¬‿¬)
(◣_◢) (∪ ◡ ∪) (∩︵∩) (。◕‿◕。) (⊙_◎) (~ ̄▽ ̄)~ (︶ω︶) (+_+)
(。♥‿♥。) (✿ ♥‿♥) (≧ω≦) (´ー`) (つд`) ( ̄。 ̄) (*~▽~) ( ^▽^) )~O~)
(=゜ω゜) (´ω`) (ノ_・。) (-_- )ノ (´ヘ`;) (^^;) (ノ◕ヮ◕)ノ (⊙ヮ⊙) ᕦ(ò_óˇ)ᕤ
ᕙ(⇀‸↼‶)ᕗ( ಠ◡ಠ ) (•⊙ω⊙•)