Tutorial - Como criar skins para Proton Bus e OMSI usando Photoshop CS6

Caso você já tenha explorado o blog da RJSkins, talvez tenha se deparado com duas abas específicas: 

  

 

O conteúdo dessas duas abas tem ajudado diversas pessoas a criarem novas skins para mods de forma independente, sem precisar esperar por criadores que aceitem pedidos ou sugestões. Além disso, esse material também tem contribuído para que outros criadores gerem renda, oferecendo seus serviços e aceitando encomendas pagas.

 Mas, você já se perguntou como você poderia utilizar o conteúdo dessas páginas de maneira correta? É justamente isso que vamos fazer agora. ;D

Para isso, utilizaremos o Photoshop CS6. Embora seja um software pago, existem alternativas gratuitas que você pode utilizar. Sabemos que o famoso “jeitinho brasileiro” sempre aparece, mas, por motivos óbvios, não recomendamos que você recorra a meios não oficiais para obter o programa. Não é como se você pudesse simplesmente clicar bem aqui e ser redirecionado para um link de download da versão Portable do programa via MediaFire... Esqueça essa possibilidade. Isso jamais aconteceria.

 

Mãos a obra!

 Depois de você ter salvado as imagens das bases e imagens no seu computador e a base do mod que você deseja utilizar, basta abrir as imagens no menu de Arquivo.

 

 

 

 Ao abrir todas as imagens, os arquivos ficarão abertos dentro de janelas do próprio programa. É possível começar os trabalhos dessa forma, mas é possível organizar as janelas a seu gosto no menu Janela > Organizar.

 

 

 

 Na imagem abaixo, você vai entender como que funciona o manuseio das janelas dentro do programa.

Agora estamos prontos para começar nossa skin. Inicialmente, começaremos pela pintura do ônibus. Vamos utilizar uma das bases de skin da Viação Acari, disponibilizada aqui no blog, na aba "Bases de pinturas". 

 Para aplicar a pintura do ônibus à base de skin, o processo é simples. Na imagem que contém a pintura, selecione a parte desejada e utilize o comando Ctrl + C para copiar o conteúdo selecionado. Em seguida, acesse a imagem da base do ônibus e pressione Ctrl + V para colar o conteúdo.

 

 Você também pode utilizar os comandos Ctrl+(mais) e Ctrl-(menos) para aumentar ou diminuir o zoom da imagem, facilitando a visualização e a edição dos detalhes.

 

Após colar o trecho da imagem copiada, pressione Ctrl + T para ativar a ferramenta de transformação livre. Com ela, você poderá mover o conteúdo selecionado e ajustar seu tamanho conforme necessário.

Para redimensionar a imagem sem distorcer suas proporções, mantenha a tecla Shift pressionada enquanto arrasta uma das alças dos cantos.

 

Uso de camadas e mesclagens

Algo que será essencial para a criação de suas skins é entender como funcionam as camadas e os modos de mesclagem do Photoshop.

Imagine várias folhas transparentes empilhadas umas sobre as outras. Cada folha representa uma camada, que pode conter uma parte diferente da imagem, como a pintura, os adesivos, os vidros ou os detalhes da carroceria. A vantagem é que você pode editar cada elemento individualmente, sem precisar alterar os demais.

As camadas também podem ser reorganizadas, ocultadas ou ter sua transparência ajustada. Já os modos de mesclagem permitem controlar como o conteúdo de uma camada interage visualmente com as camadas que estão abaixo dela. Dominar esses recursos facilitará bastante o processo de criação e edição de suas skins.

Para começar, se atente ao menu do lado direito.

Na imagem acima, a Camada 0 é a base do ônibus, enquanto a Camada 1 é a parte da pintura que acabamos de colar. Assim, você consegue editar cada parte separadamente, sem alterar diretamente as outras.

O menu Normal, por sua vez, permite mudar a maneira como uma camada se mistura com as que estão abaixo dela. Já a Opacidade controla o quanto ela fica transparente.

Para mesclar a pintura com a base da skin, basta acessar o modo de mesclagem da camada, que vem definido como Normal por padrão, e alterá-lo para Multiplicação.

É recomendável utilizar grupos para organizar as camadas e facilitar esse processo. Mas, já que tocamos nesse assunto...

CTRL+G e CTRL+J

O comando Ctrl + G serve para agrupar camadas. Imagine uma pasta onde você guarda várias folhas: elas continuam separadas, mas ficam organizadas em um só lugar. Isso ajuda a manter sua skin organizada, principalmente quando você trabalha com pintura, adesivos e outros detalhes. Você também pode selecionar várias camadas de uma vez segurando a tecla CTRL, e depois de selecionadas, agrupá-las todas de uma vez.

Caso deseje, você pode clonar uma camada quantas vezes quiser com o comando Ctrl+J. Esse comando também funciona se você quiser copiar apenas a parte selecionada de uma imagem.

 

Atalhos adicionais do Photoshop:

Ctrl + E: mescla as camadas selecionadas, transformando-as em uma única camada. Isso ajuda a unir elementos que já estão prontos.

 Ctrl + Alt + A: seleciona todas as camadas do arquivo de uma só vez, facilitando ações que precisam ser aplicadas a várias camadas. 

Atenção: ao mesclar camadas, elas deixam de ser editáveis separadamente. Por isso, utilize esse recurso apenas quando tiver certeza de que deseja uni-las.

Adicionando adesivos na skin

Primeiro, clique na imagem da pintura que deseja transferir. Ela aparecerá no painel Camadas, à direita da tela. Em seguida, clique sobre essa camada e, mantendo o botão do mouse pressionado, arraste-a até a aba do arquivo da skin. Solte-a sobre a área de edição para adicionar o adesivo ao arquivo do ônibus como uma nova camada, permitindo ajustar sua posição e seu tamanho com o comando Ctrl + T.

 

Ferramenta de texto 

A Ferramenta de Texto (T) permite adicionar palavras, números e frases à sua skin, como nomes de empresas, números de ordem e outras identificações presentes nos ônibus reais.

Para utilizá-la, selecione a ferramenta na barra lateral ou pressione T no teclado. Depois, clique no local desejado da imagem e comece a digitar. Na barra superior, você pode alterar a fonte, o tamanho, a cor e outros detalhes do texto.

Assim como os outros elementos, o texto aparece em uma nova camada, permitindo movê-lo, redimensioná-lo e editá-lo sem alterar diretamente a pintura do ônibus.

 

Você pode utilizar o comando Ctrl + T para ativar a ferramenta de Transformação Livre. Com ela, é possível mover o texto e ajustar seu tamanho conforme necessário. Para redimensioná-lo sem distorcer suas proporções, mantenha a tecla Shift pressionada enquanto arrasta uma das alças dos cantos, assim como faria com qualquer outra camada de imagem.

Também é possível alterar o tamanho da fonte pelo menu correspondente na barra superior. No entanto, dependendo da resolução ou das dimensões da base do mod, esse método pode não ser tão prático.

Nesse mesmo menu, você pode ajustar o espaçamento entre as letras, tanto na horizontal quanto na vertical, permitindo adaptar melhor o texto ao padrão utilizado na pintura original do ônibus.

  

Algumas empresas utilizam fontes específicas em seus ônibus que não vêm instaladas por padrão no Photoshop ou no próprio Windows. Nesses casos, será necessário procurar e baixar essas fontes na internet.

Para facilitar esse processo, disponibilizo o nome das fontes utilizadas na base da skin, ajudando você a encontrar e instalar as fontes corretas para reproduzir as pinturas com mais fidelidade.

 Para instalar uma fonte nova, é bem simples. Basta clicar duas vezes no arquivo da fonte (normalmente é um arquivo com extensão .ttf), e logo após, clicar em instalar. Após reiniciar o Photoshop, a fonte já aparecerá na lista.

 

Máscaras ou "Base Preta"

 Algumas empresas utilizam uma máscara preta em volta das janelas das laterais, para-brisa e vigia traseiro. Caso o mod que você escolheu não possua uma base preta disponível, você pode criar uma do 0 utilizando a ferramenta caneta do Photoshop CS6. Caso a opção marcada inicialmente não seja a Ferramenta Caneta, você pode permanecer clicando no botão indicado abaixo, e selecionar a ferramenta caneta.

Após selecionar a ferramenta caneta, selecione a cor que você deseja no local abaixo:

Como a ideia é criar máscaras ao redor das janelas laterais, você pode escolher uma cor mais escura, de preferência, próxima ao preto.

Com a Ferramenta Caneta (P) selecionada, basta clicar ao redor das janelas para contorná-las. Caso seja necessário criar curvas para acompanhar o formato dos vidros, faça uma linha reta e adicione um ponto de ancoragem no meio do traçado. Em seguida, segure a tecla Ctrl, clique sobre esse ponto e arraste-o para ajustar a curva conforme necessário.

A rasterização transforma o objeto criado com a ferramenta Caneta em uma imagem comum, formada por pixels. Isso permite utilizar outras ferramentas do Photoshop para editar o objeto, como pintar sobre ele ou aplicar determinados filtros.

Por exemplo, se você desenhar o contorno de um adesivo com a Caneta, poderá rasterizá-lo para pintar diretamente sobre ele, ou para excluir partes do que você fez usando a ferramenta selecionar. Porém, depois disso, não será mais possível ajustar o contorno usando os pontos criados originalmente. Por isso, rasterize apenas quando necessário.

A Ferramenta Laço Poligonal (L) permite selecionar uma área da imagem criando um contorno com linhas retas. Basta clicar em diferentes pontos para contornar a área desejada e fechar a seleção no ponto inicial.

Ela é muito útil na criação de skins para selecionar partes específicas da pintura, como janelas, portas e detalhes da carroceria, permitindo editar essas áreas sem afetar o restante da imagem.

 Caso a opção marcada inicialmente não seja o laço poligonal, você pode permanecer clicando no botão indicado, e selecionar o laço poligonal.

 

Caso a máscara original não possua curvas, você também poderá utilizar a Ferramenta Retângulo (U) para criá-la. Assim como a Ferramenta Caneta, ela utiliza a mesma caixa de cores do Photoshop, permitindo definir a cor de preenchimento desejada.

Caso a opção marcada inicialmente não seja a Ferramenta Retângulo, você pode permanecer clicando no botão indicado, e selecionar a ferramenta Retângulo.

 

Você também pode modificar o formato de um retângulo ou de outras formas criadas com as ferramentas do Photoshop. Para isso, selecione a ferramenta Caneta, mantenha a tecla Ctrl pressionada e clique sobre um ponto do contorno da forma. Assim, você poderá mover os pontos existentes e ajustar o formato conforme necessário.

 

Mas e se a base da skin já tiver as máscaras? Talvez você não queira que a pintura fique passando por cima delas. Para resolver isso, vamos utilizar a Ferramenta Varinha Mágica (W).

Imagine que você queira selecionar apenas uma área de determinada cor, sem precisar contornar tudo manualmente. A Varinha Mágica faz justamente isso: basta clicar em uma área da imagem, e ela selecionará automaticamente partes com cores semelhantes.

Assim, podemos utilizar essa ferramenta para selecionar a área desejada da carroceria e evitar que a pintura ultrapasse os limites das máscaras.

No painel Camadas, selecione a camada da base da skin e utilize a Varinha Mágica para selecionar a máscara preta. Em seguida, volte ao painel Camadas e selecione a camada da pintura que você adicionou, sem desfazer a seleção anterior.

Agora, pressione Delete no teclado para apagar a parte da pintura que ficaria por cima da máscara preta. Dessa forma, a pintura respeitará os limites da máscara, mantendo o resultado mais fiel à base original.

Salvando e exportando:

 Caso não seja possível terminar sua skin no momento, basta salvar sua skin como arquivo PSD. Depois, ao abrir esse arquivo, você poderá voltar exatamente de onde parou.

 Caso você já tenha terminado sua skin, e deseja salvar como PNG para ler sua skin dentro do jogo, o passo a passo é o mesmo, mas em vez de salvar como PSD, utilize PNG.

 

 

 

 

Espero que este tutorial tenha ajudado você a entender melhor as ferramentas básicas do Photoshop e a dar os primeiros passos na criação de suas próprias skins. Com prática e criatividade, você poderá desenvolver pinturas cada vez mais detalhadas e realistas para seus ônibus.

Agora é com você! Explore as ferramentas, teste novas possibilidades e não tenha medo de experimentar. 

Ah, e fique a vontade pra compartilhar suas skins feitas aqui na aba de comentários desse tutorial. Forte abraço!