Tutorial/Vídeo-aula - Aprenda a fazer telas de logins com loginboxs modificadas!

[BiaFoox 119]

APRENDA A FAZER TELAS DE LOGINS

COM LOGINBOXS MODIFICADAS!

CROSS FIRE

 

Olá membros! Bom, eu havia prometido á algumas pessoas que criaria um tutorial ou uma vídeo aula ensinando a criar uma tela de login com loginbox modificada/personalizada.

Para quem não sabe do que se trata, vejam alguns exemplos:

 

• http://www.webcheats.com.br/forum/cross-fire-skins/2283289-tela-de-login-assassin-s-creed-new.html
  
• http://www.webcheats.com.br/forum/cross-fire-skins/2282111-tela-de-login-bleach-new.html
  
• http://www.webcheats.com.br/forum/cross-fire-skins/2215673-tela-de-login-ac-dc.html
  
• http://www.webcheats.com.br/forum/cross-fire-skins/2194440-tela-de-login-red.html
  
• http://www.webcheats.com.br/forum/cross-fire-skins/2098527-tela-de-login-batlefield-4-a.html
  
• http://www.webcheats.com.br/forum/cross-fire-skins/2187988-tela-de-login-ancient-soldier.html
  
• http://www.webcheats.com.br/forum/cross-fire-skins/2181072-tela-de-login-god-war-ascension.html
  
• http://www.webcheats.com.br/forum/cross-fire-skins/2319667-tela-de-login-sword-art-online.html
  
• http://www.webcheats.com.br/forum/cross-fire-skins/2318347-tela-de-login-shingeki-no-kyojin.html
  

 

Talvez, ou provavelmente, na vídeo aula eu deixe de explicar algumas coisas. Então se eu esquecer de explicar algo, podem perguntam aqui no tópico, que eu farei o possível para ajudar.

 

Eu havia feito um tutorial com imagens, mas o destino foi mal comigo, e fez com que eu fechasse a aba do google chrome e o auto saved não pegou as informações do meu tópico. E era muito grande, tinha umas 80 prints, e eu não estava muito afim de criar um novamente, até desanimei.

 

Então percebi que com a vídeo aula iria ser muito mais fácil para vocês compreenderem o conteúdo. O fato de eu não querer ter criado é, estou sem microfone. Eu normalmente utilizo a webcam do meu primo, que tem o microfone embutido, mas não posso ficar furtando a todo o momento as coisas dele.

 

Mas foi até bom, porque eu gaguejo muito quanto estou nervosa, eu tenho uma vergonha imensa de fazer vídeo aulas com áudio, raramente faço. E quando faço, só esqueço mais e mais coisas para ser explicadas no tutorial.

 

OS PROGRAMAS UTILIZADOS NA VÍDEO AULA, FORAM OS SEGUINTES:

 

• Paint.NET

Salva os arquivos em formato .TGA. Que é o formato dos arquivos em muitas pastas de Skins do Cross Fire, sem ele, não tem como modificar uma tela de login.

É necessário se cadastrar para acessar o conteúdo.

• Entre
• ou
• Cadastre-se

 

• Photoshop CS6.

Paint.NET também é um editor, mas eu recomendo que utilizem o Photoshop (qualquer versão). É um sistema bem mais avançado e com muito mais recursos. Mesmo assim, PhotoScape, entre outros programas para edição, também podem ser utilizados.

 

Provavelmente muitos não estão afim de baixar o photoshop original no pc, afinal é muito pesado, e uma demora imensa. Então, eu recomendo que utilizem o Photoshop Portable. É uma versão mais leve, e mais pratica de usar. Não há muitas diferenças entre o original e o portable.

 

Há algum tempo atrás, eu postei o download do mesmo na design zone: Photoshop CS6.

 

Se não conseguirem baixar pelo tópico acima, procurem no google. Há vários sites que disponibilizam o download dele.

 

SEGUE A VÍDEO AULA:

 

[video=youtube;60BD0Y0UX3I]

 

Não achem que eu sou uma ninja por escrever tão rápido.

O vídeo tinha quase 2h de duração, tive que acelerar porque se não eu demoraria 3h para enviar no youtube.

E mais 7h convertendo para formato em vídeo.

Teve até umas pausas no vídeo, porque eu demore na verdade 4h para fazer a tela de login. :3

 

OUTROS COMENTÁRIOS:

 

Sim, meu mouse no vídeo ficou mega ultra zicadamente bugadasso. Vai ficar assim mesmo, porque não tô afim de enviar novamente. :3

 

Talvez eu hospede o vídeo e coloque para vocês baixarem.

 

Já evitando a maravilhosa pergunta, que sei que provavelmente alguém irá perguntar, quais os nomes das músicas que tocam no vídeo?

 

1. Austin Mahone - What About Love
   
2. Sebastian Ingrosso, Tommy Trash & John Martin - Reload
   
3. Lana Del Rey - Summertime Sadness (Radio Mix)
   
4. DVBBS & Borgeous - TSUNAMI
   
5. Lady Gaga feat. R. Kelly - Do What U Want
   
6. Lorde - Royals

 

ALGUNS TUTORIAIS ÚTEIS:

 

Tutoriais que serviram de auxilio para possíveis dúvidas ao decorrer do vídeo:

 

• http://www.webcheats.com.br/forum/tutoriais-design/1038192-tudo-que-voce-precisa-saber-sobre-photoshop-suas-ferramentas.html
  
• http://www.webcheats.com.br/forum/tutoriais-design/1413655-mini-guia-de-iniciantes.html
  
• http://www.webcheats.com.br/forum/tutoriais-design/1820682-materiais-e-ferramentas-para-o-photoshop-tutorial-combo.html
  
• http://www.webcheats.com.br/forum/tutoriais-design/503928-explicacao-sobre-iluminacao.html
  
• http://www.webcheats.com.br/forum/tutoriais-design/1704880-mega-tutorial-ferramentas-de-tratamento.html
  
• http://www.webcheats.com.br/forum/tutoriais-design/1659526-tutorial-tratamento-basico-para-iniciantes.html
  
• http://www.webcheats.com.br/forum/tutoriais-design/495549-oque-e-tipografia.html
  
• http://www.webcheats.com.br/forum/tutoriais-design/302604-6-dicas-de-tipografia.html
  
• http://www.webcheats.com.br/forum/tutoriais-design/1462537-tutorial-tipografia-conceito-e-cores.html
  
• http://www.webcheats.com.br/forum/tutoriais-design/1739775-video-br-aprenda-o-basico-do-photoshop.html
  
• http://www.webcheats.com.br/forum/tutoriais-design/1751467-mega-quick-list.html

 

Nesta área vocês podem baixar recursos para serem utilizados no photoshop (fontes, texturas, entre outros): Recursos.

Se tenham uma dúvida que não tem haver com o meu tutorial, e sim ao o photoshop mesmo: Design - Dúvidas/Ajuda.

 

E o mais importante de tudo, visite a Design Zone. :)

Irá aprender a apreciar a verdadeira a arte, e muitas outras coisas.

 

ALGUMAS DICAS:

 

• Usem sempre planos de fundo com mais de 1200 de largura e 1000 de altura. Não tente fazer milagres com pequenas imagens... não irá dar muito certo.
  
• Não exagere no tratamento, não deixe uma coisa muito escura, ou muito clara. Faça uma coisa mediana e agradável.
  
• Faça com que a loginbox combine com o plano de fundo em si.
  
• Abuse da sua criatividade para criar diferentes loginboxs.
  
• Você pode usar um script de posicionamento da loginbox de outras telas de logins, e usar a loginbg delas como base para criar a sua.
  
• Use fontes agradáveis, não muito grandes, com cores visíveis. Não muito escuras, e nem muito claras.
  
• Não utilize fontes estranhas ou extravagantes, faça com que a tipografia interaja com toda a tela de login.
  
• Nunca se esqueça de adicionar os seus créditos no trabalho (o que ocorreu comigo no fim do vídeo). Isso evita plágio, e valoriza seu trabalho.
  
• Tente fazer telas de logins com temas que os players realmente usariam, caso você as faça para compartilhar com os outros. Enquanto estiver procurando um tema para fazer, pense: ''eles iriam realmente usar isso? Qual seria um ótimo tema para uma tela de login do Cross Fire?''.
  
• E o mais importante de tudo: faça com que a loginbox interaja com o plano de fundo. É mais que importante fazer isso.

 

Mais tarde postarei o download da tela de login que fiz ao decorrer do tutorial, caso alguém queria utiliza-la.

 

Espero que gostem, dúvidas, perguntem!

 

Abraços.

['Rimas 818]

Parabéns Bia,já baixei o paint.net,estou baixando ps.

Quando termina irei ver o vídeo,obrigado ótimo tópico e bom conteúdo.

[BiaFoox 119]

Sem problemas, jovem Ruan. :3

 

Editei o tópico com alguns links de tutoriais de design, e adicionei uma parte de dicas também.

 

Abraços. :)

['Gabriel 54]

Tava esperando esse tutorial faz tempo *u*

Tópico ultra super hiper organizado, com cores e bem centralizado. Parabéns!

Fixado!

[MamationGorgoflex 0]

A Bia' saiu do global e continua fazendo mais do que alguns mods juntos aí.

 

Enfim, agora é a minha vez, vou ficar treinando até minha conta ser desbanida e voltar com as minhas telas (so eu, seu amiguinho Lozaki).

[BadDog_ 0]

Vo aprende e qndo minha conta desbanir tbm vo faze uma..

[GodinBR]

[Jamaica 9]

Ai sim eim bia !

 

Ah tempos q vc tava devendo este tutorial pra gente eim UAHUEHAUEHAUHE !

 

Excelente tutorial ! Segura meu THX !

[deadpoolhk 0]

parabéns pelo tópico

[xnose 0]

Agora eu posso fazer minhas proprias telas de login ;D vlw u.u

[MacaCoBranco2s 0]

muito organizado ótimo topico.

[Dante_devil 0]

vlw mano ajudo muito ótimo topico :piscadela: