===== Modificando Texturas de Roupas ===== ==== Visão Geral ==== Este tutorial irá guiá-lo pelo processo de construção de uma roupa personalizada para sua modelo. Apesar de não ter a intenção de ser um tutorial para Photoshop, nós iremos lhe ensinar algumas técnicas úteis, que devem ajudá-lo com qualquer editor de imagem. Especificamente, nós usaremos camadas, máscaras, transformações livres, seleções, modos de mistura e alguns pincéis. Se você estiver usando um programa diferente não tem problema, já que os programas de desenho mais modernos suportam arquivos PSD com camadas e possuem uma funcionalidade similar. Este tutorial supõe que você possui um conhecimento básico do [[br:editors:modeleditor|Editor de Customização]] e acesso a um programa como o Photoshop. **DICA:** Se você não tiver Photoshop, pode usar essas alternativas grátis que suportam arquivos PSD: Artweaver, Paint.Net e GIMP. O GIMP é o mais poderoso, mas possui uma interface um pouco mais confusa que os outros. Paint.net é uma alternativa “média” que precisa de um plug-in grátis para suportar arquivos PSD. Artweaver é o pacote mais simples e não possui o poder dos outros dois, mas é muito fácil de usar e realiza as funções básicas adequadamente. ===Coisas Específicas que Você Aprenderá=== * Como ver mods de textura na modelo dentro do jogo. * Trabalhar com camadas e grupos de camadas no Photoshop. * Desenhar em uma camada e ver a mudança na modelo dentro do jogo. * Usar Transformação Livre para dimensionar e mover partes da imagem. * Trabalhar com modos de mistura de camada para criar um fluxo de trabalho flexível. * Mudar a transparência de uma camada para criar um tecido transparente. * Ajustar uma máscara em uma camada para criar cortes de tecido. ---- ==== Baixe o tutorial de mod de textura ==== O mod de textura que nós usaremos para este tutorial é [[inserir o link aqui- chame-o de tutorial de roupa (esperando a imagem UV antes de carregá-lo)]]. \\ Veja [[br:installing_a_texture_mod|instalando mods de textura]] para ajuda sobre como instalar. \\ Você também precisará do arquivo PSD que pode ser baixado {{:en:howto:outfitmod:tutorial_outfit.zip|aqui}}. Uma vez que você tiver instalado e ativado o mod de textura, você deve ver uma nova pasta dentro da sua pasta "mod/activemod/" chamada "outfit_tutorial". Ela terá esses três arquivos dentro dela: - F_Top001_White.png – esta é a textura que é usada dentro do jogo. - F_Top001_White.psd – este é o arquivo do Photoshop com todas as camadas. - F_Top001_White.txf – este arquivo define como a textura será mostrada no jogo (transparente, aditiva, etc). - clothtexture.jpg – uma amostra de textura de tecido pra dar um pouco de fibra a este tutorial. ---- ==== Teste o Mod em uma Modelo ==== Antes de começarmos a mexer com a textura, vamos confirmar que o mod de textura está aparecendo no jogo. {{:br:howto:outfitmod:om_pick_blouse.png|}} Vá até o editor de customização e abra o seletor de Blusa/Vestido/Casaco. {{:en:howto:outfitmod:om_blouses.png|}} \\ \\ \\ \\ \\ A versão modificada da roupa terá o mesmo ícone da roupa padrão. Ela provavelmente estará em uma posição diferente, baseando-se nos outros pacotes e outros mods que você tenha instalado. Procure pelo ícone {{:en:howto:outfitmod:om_blouse_icon.png|}}. Será um desses, se ele estiver funcionando corretamente. \\ {{:en:howto:outfitmod:om_outfit_start.png|}}Deve ficar assim na modelo. ---- ==== O Arquivo PSD ==== Vamos dar uma olhada nas camadas no arquivo PSD, para ter uma ideia do que faremos a seguir. \\ \\ {{:en:howto:outfitmod:tutorial_psd.png|}} Esta é a textura "plana" que é usada pelo jogo. As partes da blusa estão com cores diferentes para que possamos identificá-las facilmente. \\ \\ IMPORTANTE: As peças de roupas não podem ser movidas nesta imagem, senão elas não aparecerão no lugar correto na modelo! // // // // // // // // {{:en:howto:outfitmod:om_startmodel.png|}}// // É assim que a textura deve ficar na modelo (frente e costas). \\ {{:en:howto:outfitmod:om_layers.png|}} \\ \\ Este arquivo PSD foi dividido em camadas para que seja fácil modificá-lo. Você pode abrir a janela de camadas no Photoshop em "Janela -> Camadas"\\ \\ {{:wiki:bullet01.png?}} Colarinho, mangas, frente e costas são grupos de camadas que contém outras camadas. \\ {{:wiki:bullet01.png?}} Clique no ícone {{:en:howto:outfitmod:om_layer_vis.png|}} para mostrar e ocultar camadas. \\ \\ \\ \\ {{:en:howto:outfitmod:om_layers_back.png|}} O grupo "back" pode ser aberto clicando no pequeno triângulo. \\ {{:wiki:bullet01.png?}} Dentro do grupo estão as camadas "color" e "detail". \\ {{:wiki:bullet01.png?}} A camada "color" é a cor da seleção das costas. Você pode desenhar nesta camada para mudar a cor na parte de trás da blusa. \\ {{:wiki:bullet01.png?}} A camada "detail" é colocada em cima da camada de cor. Elas se "multiplicam" juntas para combinar visualmente.\\ \\ O grupo "back" também possui uma máscara anexada a ele. É a forma de camiseta branca. Se você pensar no grupo "back" como uma caixa, a máscara é como um buraco que permite que você veja dentro dela. As camadas "color" e "detail" estão dentro do grupo "back" para que sejam combinadas na imagem final. \\ ---- ==== Mude a Cor ==== Vamos tentar mudar a cor da camada na modelo: {{:en:howto:outfitmod:om_brush_tool.png|}} Escolha a ferramenta pincel. Ela deve estar na sua paleta de ferramentas (use //Janela -> Ferramentas// se você não ver a paleta de Ferramentas). \\ \\ {{:en:howto:outfitmod:om_brushbigger.png|}} Escolha um pincel maior ou diferente, se você precisar. \\ \\ {{:en:howto:outfitmod:om_fg_color.png|}} Escolha uma cor \\ \\ {{:en:howto:outfitmod:om_select_color_layer.png|}} Selecione a camada de cor dentro do grupo "back". Quando você desenha com o pincel, ele aparecerá na camada selecionada. \\ \\ {{:en:howto:outfitmod:om_texture_02.png|}} Desenhe algo. \\ \\ Salve o arquivo. Selecione //Arquivo -> Salvar Como// no menu. Salve sobre o arquivo //F_Top001_White.png// na pasta Activemod/outfit_tutorial. {{:en:howto:outfitmod:om_outfit_mod01.png|}} Agora é a parte divertida. Volte ao jogo e pressione {{:key_alt.png|}}+{{:key_r.png|}} para recarregar a textura. Uhuul! \\ \\ **DICA:** Você pode mudar as outras partes, modificando as texturas de cor dentro daqueles grupos (Ex: front). Experimente! ---- ==== Adicione uma textura ==== {{:en:howto:outfitmod:om_clothtexture.png|}} No arquivo tutorial_outfit.zip, você encontrará uma textura chamada "clothtexture.jpg". \\ Arraste-a para seu programa de edição de imagens. **DICA:** Para várias texturas de tecido grátis, visite [[http://cgtextures.com]]. Digite CTRL+A para selecionar tudo ou no menu em //Selecionar -> Tudo// (se você estiver usando Photoshop). Isto selecionará tudo na imagem "clothtexture". \\ Digite CTRL+C para copiar a seleção. \\ {{:en:howto:outfitmod:om_select_color_front.png|}} Mude para a textura de roupa. Abra o grupo "front" e selecione a camada "color". \\ {{:en:howto:outfitmod:om_paste_jeans.png|}} Pressione {{:key_ctrl.png|}}+{{:key_v.png|}} para colar a textura do tecido como uma nova camada. \\ Agora você deve ver a textura ‘jeans’ ao invés da textura de cor na frente. Se você olhar nas camadas, você verá que a textura de tecido não //substituiu// realmente a textura de cor. Ela foi adicionada como uma nova camada sobre ela. Camadas que estão acima de outras camadas ocultarão as camadas abaixo. Como se você estivesse colocando folhas de papel uma em cima da outra. {{:en:howto:outfitmod:om_layer_rename.png|}} Renomeie sua nova camada. Clique duas vezes no nome da camada para editá-lo. Pressione {{:key_enter.png|}} quando tiver terminado de editar.\\ A textura de tecido é bem "aproximada". Nós ajustaremos na próxima seção para que fique melhor. ---- ==== Transformando uma Camada ==== Com a camada da textura de tecido selecionada, pressione {{:key_ctrl.png|}}+{{:key_t.png|}} ou selecione //Editar -> Transformação Livre //no menu (no Photoshop). \\ {{:en:howto:outfitmod:om_transform.png|}} Você deve ver o controle de Transformação Livre ao redor da imagem. \\ {{:en:howto:outfitmod:om_transform_controls.png|}} \\ \\ Existem milhões de maneiras de usar a ferramenta de Transformação Livre, mas nós só nos importamos com o básico. Se você passar o cursor do mouse nas bordas da ferramenta você verá que ele muda para símbolos diferentes. \\ \\ O controle {{:en:howto:outfitmod:om_FT_scale.png|}} irá dimensionar a imagem e o controle {{:en:howto:outfitmod:om_FT_rotate.png|}} permitirá que você gire ela. \\ \\ \\ \\ \\ \\ \\ \\ \\ \\ \\ Use os controles de Transformação Livre para ajustar o tamanho da textura para que ela fique menor e se encaixe melhor na peça da frente. Quando você terminar, clique duas vezes dentro da ferramenta para salvar a modificação da textura. Se você quiser reverter, você pode pressionar {{:key_ctrl.png|}}+{{:key_z.png|}} para desfazer. **DICA:** Pressione a tecla SHIFT enquanto você está dimensionando para manter as mesmas proporções. **DICA:** Para uma referência completa de como usar a ferramenta de Transformação Livre, confira este [[http://www.tutorialkit.com/tutorials/Using-Photoshop-Free-Transform-Command-57657.html|link]]. Agora é uma boa hora para salvar sua imagem novamente (lembre-se: //Salvar Como --> F_Top001_White.png//). Depois, volte para o Sexvilla e pressione {{:key_ctrl.png|}}+{{:key_r.png|}} para atualizar a textura.\\ ---- ==== Multiplicação e outros Modos de Mistura ==== Nós conseguimos substituir a cor com uma textura de tecido, mas agora ela está uma pouco acinzentada. Nós vamos mudar o modo de mistura da camada da textura de tecido para que possa combinar melhor com a camada de cor abaixo dela. {{:en:howto:outfitmod:om_blend_box.png|}} Selecione a camada da textura de tecido e clique no modo de mistura no topo da paleta de camadas. \\ {{:en:howto:outfitmod:om_multiply_mode.png|}} Selecione o modo //multiplicação// . \\ {{:en:howto:outfitmod:om_outfit_multiply.png|}} Pronto! A textura de tecido agora está //multiplicando// com a cor abaixo dela. **Mas o que isso significa?** Tecnicamente: Quando você multiplica qualquer coisa com preto, ela se tornará preta. Se você multiplica qualquer coisa com branco, ela não sofre mudanças. \\ Explicação fácil: Em qualquer lugar que a imagem de cima for preta, a imagem de baixo ficará preta também. Se sua imagem do topo estiver em escala de cinza (sem cor), a multiplicação não irá alterar as cores na imagem de baixo. Imagens coloridas também funcionarão. Elas só serão um pouco menos previsíveis. O resultado final é que mantemos as informações da cor e da textura separadas. Tente pintar a camada de cor novamente. Você verá que a textura de tecido não é afetada. Experimente alguns dos outros modos de mistura também. Divisão, Luz Suave, Clarear e Sobrepor lhe darão efeitos de mistura similares. Neste tutorial eu vou definir o modo de mistura em Luz Suave, pois ele é muito bonito. **DICA:** Para uma explicação completa sobre modos de mistura, visite [[http://www.myinkblog.com/2009/07/14/an-explanation-of-photoshop-blend-modes/]] ---- ==== Mudando Transparência/ Opacidade ==== Nós vamos dar uma rápida olhada sobre como mudar a transparência/opacidade do tecido. Você pode mudar a transparência de camadas diferentes ou do grupo todo. DICA: Opacidade é o oposto de transparência. 0% de opacidade é o mesmo que 100% de transparência. Vamos começar mudando a opacidade da camada do //tecido//. {{:en:howto:outfitmod:om_select_cloth.png|}} Selecione a camada de tecido (supondo que você a tenha nomeado assim). \\ \\ {{:en:howto:outfitmod:om_opacity1.png|}} Clique no controle de //opacidade// no topo da paleta de //camadas.// \\ \\ {{:en:howto:outfitmod:om_opacity2.png|}} Deslize e observe como a textura de tecido está aparecendo e desaparecendo. \\ \\ Você pode mudar a opacidade de cada camada individualmente. Agora vamos mudar a opacidade do grupo todo para conseguir um visual bem transparente. {{:en:howto:outfitmod:om_select_frontmask.png|}} Selecione o grupo “front”. \\ \\ {{:en:howto:outfitmod:om_opacity1.png|}} Clique no controle //opacidade// no topo da paleta das //camadas//. \\ \\ {{:en:howto:outfitmod:om_opacity2.png|}} Deslize uns 50%. \\ \\ Para ver a transparência na nossa modelo, precisaremos desativar a camada de cor de fundo. {{:en:howto:outfitmod:om_select_background.png|}} Selecione a camada da cor de fundo e clique em {{:en:howto:outfitmod:om_layer_vis.png|}} para ocultar a camada. \\ \\ Salve sua imagem novamente (//Save As --> F_Top001_White.png//). Volte para o Sexvilla e pressione {{:key_ctrl.png|}}+{{:key_r.png|}} para atualizar a textura. \\ {{:en:howto:outfitmod:om_outfit_mod02.png|}} Minha nossa! É disso que eu estou falando. \\ \\ Nota Importante: Para ver as texturas transparentes, o arquivo .txf que corresponde à textura deve estar definido como "RGBA_8888" "%%AlphaBlend%%". Veja [[:br:txf_files|arquivos TXF]] para mais informações. ---- ==== Cortando o Tecido ==== Agora, nós vamos tentar cortar o tecido para que fique um pouco menor. A transparência também pode ser usada para "cortar" partes do tecido e criar buracos ou um look completamente diferente. Para conseguir isso, vamos editar a máscara diretamente. * Antes de começarmos, salve o arquivo PSD (//arquivo->salvar//) para que você possa restaurá-lo mais tarde, se você quiser. * {{:key_ctrl.png|}}+{{:mouse_left.png|}} na máscara para definir a seleção na área da máscara. * opcional: salve a seleção (abra uma nova página para isso). {{:en:howto:outfitmod:om_opacity3.png|}} Eu vou mudar a opacidade do grupo "front" de volta para 100%. Você pode deixá-la parcialmente transparente, se você preferir. {{:en:howto:outfitmod:om_select_frontmask.png|}} Selecione o grupo "front" e clique na máscara para que ela seja destacada com uma pequena caixa branca ao seu redor. Isso irá selecionar a parte da máscara da camada. {{:en:howto:outfitmod:om_brush_tool.png|}} Escolha o pincel e, se precisar, mude seu tamanho. **DICA:** Você pode mudar o tamanho do pincel usando {{:key_ctrl.png|}}+{{:mouse_right.png|}} e arrastando dentro da área da imagem. * Certifique-se de que a cor do seu primeiro plano é preta. **Dica:** clique em {{:en:howto:outfitmod:om_swapcolors.png|}} acima de {{:en:howto:outfitmod:om_fg_color.png|}} para trocar a cor do primeiro plano com o plano de fundo. Seu pincel sempre irá pintar com a cor do primeiro plano. {{:en:howto:outfitmod:om_cutaway.png|}} Pinte a máscara de preto onde você quiser cortar o tecido (atenção: você deve pintar na área da imagem e não na paleta da camada!). \\ Você pode pintar de branco, se você quiser colocar o tecido de volta. {{:en:howto:outfitmod:om_background_off.png|}} Desligue a camada do plano de fundo para que a transparência funcione. {{:en:howto:outfitmod:om_outfit_mod03.png|}} Salve e veja na modelo. Oba Oba! ---- ---- ===== Outras coisas que podem ser adicionadas ===== === Faça a Parte de Trás Corresponder à da Frente (opcional) === * copie a camada de textura de tecido do grupo de trás [ensinar: copiando camadas]. * crie uma nova camada acima da de cor [ensinar: criando camadas]. * copie a cor da camada da frente. * desligue as camadas acima dela para ver a cor. * use a ferramenta de conta-contas [ensinar: usando o conta-gotas]. * pinte em uma nova camada. * selecione a ferramenta do pincel. * ATENÇÃO: elas não irão corresponder perfeitamente porque os detalhes das camadas não correspondem entre si. ---- === Adicionando Detalhes (uma camada de lantejoulas) === * carregue a imagem das lantejoulas. * copie e cole sobre a camada de cor na frente. * mude o modo de mistura para luz direta [ensinar: diferentes modos de mistura]. * adicione uma máscara de camada [ensinar: criando uma máscara de camada]. * Pinte tudo de branco. * escolha um pincel macio de tamanho 45 [ensinar: trabalhando mais com pincéis]. * defina a opacidade do pincel em 22% [ensinar: definindo a opacidade do pincel]. * selecione branco e pinte alguns destaques. === Algumas outras coisas que poderiam ser adicionadas === * Trabalhando com conjuntos de textura que não estão definidos como este. * Explicação de imagem UV (não existe uma para esta roupa ainda. Seria nos PSDs para básico 5). * Uma ilustração de como multiplicar modos de trabalho. * Uma página de dicas de Photoshop.