Difference between revisions of "Rock Textures Creation"

From Valve Developer Community
Jump to: navigation, search
(The Tutorial)
(Putting the texture to use: keys)
 
(20 intermediate revisions by 12 users not shown)
Line 1: Line 1:
Skill Level: <font color="#009900"> Easy</font>
+
{{cleanup}}
[[Category:Material_System]]
+
== Overview ==
 +
This tutorial will take you through a step by step explanation on how to create a rock texture, and producing a bumpmap/normal map that will bring out depth to the texture.
 +
 
 +
=== Requirements ===
 +
* Photoshop with [http://nemesis.thewavelength.net/index.php?p=39 Nem's VTF Plugin]
 +
* [http://developer.nvidia.com/object/photoshop_dds_plugins.html nvTools Normal Map] and DDS plugin for Photoshop
 +
* A [[text editor]] (ex. {{wiki|Notepad}})
 +
 
 +
== Finding the right texture ==
 +
Use any of the available online image search engines to find your texture source. Make sure to check if its publicly available and free to use.
 +
{{warning|You must ensure that the license behind the image of your choosing gives you the right to use it freely. If not, the original owner can bring on legal actions to your project. You can also check out the [[Material Download Sites]] here on VDC to download a texture pack or handpick a good seamless dirt texture from the links.}}
 +
 
 +
For tutorial purposes, use the following image:
 +
[[Image:Dirttexture.gif|thumb|256px|left| Follow the image link to load its full, 512px version. Save a copy to your hard drive.]]
 +
{{clr}}
 +
{{note|The image doesn't look a lot like a rock face, but this is intentional as it's best not to use a texture that has ''too'' many shadows or large depth to it. In other words, for now, this is just a seamless ground texture.}}
 +
 
 +
=== Putting the texture to use ===
 +
Now that you have the dirt texture to use, you can either right click it to copy, or save it to the hard drive.
 +
 
 +
Start Photoshop, when the program has finished loading, either open the existing file, or go to file menu and click <code>New</code>, don't change anything then click <code>OK</code>, then {{key|Ctrl|V}} or click <code>Edit</code> at the top and click <code>Paste</code>.
 +
 
 +
[[Image:Screen1.jpg|256px]]
 +
 
 +
There, now the texture is in Photoshop. Now we are going to export it to VTF for use with HL2. Once you have the [http://nemesis.thewavelength.net/index.php?p=39 VTF plugin] for Photoshop installed, this shouldn't be a problem, as the VTF save format is in the format list when saving. Click on <code>File</code> then down to <code>Save As</code>.
 +
 
 +
[[Image:Screen2.jpg|256px]]
 +
 
 +
Change the format to VTF and save the file as "<code>rock_diffuse.vtf</code>". Save this file into your Materials folder of your mod. Then click <code>Save</code>.
 +
 
 +
[[Image:Screen3.jpg|256px]]
 +
 
 +
If you get an error just like the image above, then you must convert the image into RGB format. To do this, click on <code>Image</code> at the top menu, then click <code>Mode</code> then <code>RGB Color</code>, then click <code>OK</code>. Now do the same step to save to VTF.
 +
 
 +
=== Creating the normal map ===
 +
Now that the file has saved successfully, create a new image file with the same dimensions at the dirt image, then click <code>New</code>. See the image notes for additional steps:
 +
 
 +
[[Image:Screen4.jpg|256px]]
  
==What will you accomplish in this tutorial==
+
Now that you have an image with the clouds effect applied to it, now click <code>Image</code>, then <code>Adjustments</code>, then <code>Levels</code>. Here you can play around with the levels of the image. The left most arrow will make the darker colors darker when moved to the right. The right arrow will make light colors lighter when moved to the left. The middle will change the moderate colors  to whatever direction you want (Left - lighter, Right - darker). By playing around with it, you may make an image looking like this, depending on how you played with the levels:
In this tutorial, I'll take you through a step by step detail on how to create a rock texture, and producing a bumpmap/normal map that will bring out depth to the texture.
 
  
==Requirements==
+
[[Image:Screen5.jpg|256px]]
*Photoshop w/[http://nemesis.thewavelength.net/index.php?p=39 Nem's VTF Plugin]<br>
 
*[http://nemesis.thewavelength.net/index.php?p=39 Nem's VTF Plugin for Photoshop 7+]
 
*[http://developer.nvidia.com/object/photoshop_dds_plugins.html nvTools Normal Map] and DDS plugin for Photoshop
 
*Notepad
 
  
==The Tutorial==
+
Now you got a reasonable rock texture bumpmap, go to <code>Filters</code>, then <code>nvTools</code>, then <code>NormalMapFilter</code>. Now set all the settings to the following image.
  
==Finding the Right Texture for the Job==
+
[[Image:Screen6.jpg|256px]]
<div id='gameplay' {{CategoryBox}}>
 
There are two ways of getting this step done. One is by searching for a texture using any image search, then checking to see if its publicly available and free to use, unless you get special rights to the image.<br>
 
<font color="#ff0000">'''REMEMBER:''' You must make sure that the image you choose give you the right to use it freely. If not, the original owner can bring on legal actions to your project.</font>
 
  
'''OR'''
+
Click <code>Ok</code>, and the normal map is complete. Save the file in VTF format, similarly to the diffuse map. Save it as "<code>rock_normal.vtf</code>".
  
You can check out the [[Free texture resources]] here on VDC to download a texture pack or hand pick a good seamless dirt texture from the links.
+
=== Putting it all together ===
 +
Now that the diffuse and normal map are finished, you will need to create a [[VMT]] file which tells the game that the texture files are here. So now, open up notepad, and copy and paste the following into it:
 +
"LightmappedGeneric"
 +
{
 +
"$baseTexture" "rock_diffuse"
 +
"$bumpmap" "rock_normal"
 +
}
 +
Now save it as "<code>rock_texture.vmt</code>" in the same folder you saves the VTF's. Be sure that you have "<code>All Files</code>" instead of "<code>Text Document</code>" selected in the Notepad save dialog, otherwise, it may try to save it as "<code>rock_texture.vmt.txt</code>". Now it should be usable in-game. Open Hammer and add the texture to a wall or terrain surface to test it.
  
----
+
=== The end result ===
 +
This is a sample of a map with water, a low saturated grayscale post process, [[HDR]], and the rock texture added onto a cliff-side terrain map at 1:1 texture scale. Here is the outcome:
  
For tutorial purposes we will use this one:<br>
+
[[Image:Screen7.jpg|256px]]
[[Image:Dirttexture.gif|180px|Right Click to Copy or Save to Hard Drive]]<br>
 
Notice that it doesn't even look like a rock wall or which can be used as one. This is because for now, we don't want to use a texture that has TOO many shadows or large depth to it. In other words, we are just using a seamless ground texture.
 
</div>
 
<div class='capcontent' style='text-align: left'>
 
  
==Putting the Texture to Use==
+
[[Category:Tutorials]]
<div id='gameplay' {{CategoryBox}}>
+
[[Category:Material_System]]
Now that we have the dirt texture we will use, please either right click it to copy, or save it to the hard drive.
 
<br><br>
 
Open up Photoshop. When the program has finished loading, either open up the file in which you save onto the harddrive, or go to file and click 'New', don't change anything then click 'ok', then 'Ctrl+V' or click 'Edit' at the top and click 'Paste'.<br><br>
 
[[Image:Screen1.jpg|256px]]<br>
 
There, now the texture is in photoshop. Now we are going to export it to VTF for use with HL2. Since you should have the VTF plugin for Photoshop installed, this shouldn't be a problem. Click on 'File' then down to 'Save As'.
 
<br><br>[[Image:Screen2.jpg|256px]]<br>
 
Change the format to VTF and save the file as 'rock_diffuse.vtf'. Save this file into your Materials folder of your mod. Then click 'Save'.
 
<br><br>[[Image:Screen3.jpg|256px]]<br>
 
If you get an error just like the image above, then you must convert the image into RBG format. To do this, click on 'Image' at the top menu, then click 'mode' then 'RBG Color', then click ok. Now do the same step to save to VTF.
 
<br><br>
 
</div>
 
<div class='capcontent' style='text-align: left'>
 
==Creating the Normal Map==
 
<div id='gameplay' {{CategoryBox}}>
 
Now that the file has saved successfully, create a new image file with the same dimensions at the dirt image, then click 'New'. Now do everything as said in the next image:<br>
 
[[Image:Screen4.jpg|256px]]<br>
 
Now that you have an image with the clouds effect applied to it, now click 'Image', then 'Adjustments', then 'Levels'. Here you can play around with the levels of the image. The left most arrow will make the darker colors darker when moved to the right. The right arrow will make light colors lighter when moved to the left. The middle will change the moderate colors  to whatever direction you want (Left: Lighter, Right: Darker). By playing around with it, you may make an image looking like this, depending on how you played with the levels:
 
<br>[[Image:Screen5.jpg|256px]]<br>
 
Now you got a reasonable rock texture bumpmap, go to 'Filters', then 'nvTools', then 'NormalMapFilter'. Now set all the settings to the following image.
 
<br>[[Image:Screen6.jpg|256px]]<br>
 
<br> Click 'Ok'. Now the normal map is complete. Save the file in vtf format just like we did with the diffuse map. Save it as 'rock_normal.vtf'
 
</div>
 
<div class='capcontent' style='text-align: left'>
 
==Putting It All Together==
 
<div id='gameplay' {{CategoryBox}}>
 
Now we got the diffuse and normal map finished. Now whats next? Well we need to create a [[vmt]] file which tells the game that the texture files are here. So now, open up notepad, and copy and paste the following into it:
 
<br><br>
 
::::::::::'''''"LightmappedGeneric"<br>'''''
 
::::::::::'''''{<br>'''''
 
::::::::::'''''"$baseTexture" "rock_diffuse"<br>'''''
 
::::::::::'''''"$bumpmap" "rock_normal"<br>'''''
 
::::::::::'''''}<br>'''''<br><br>
 
Now save as 'rock_texture.vmt' in the same folder you save the vtf's. Now it should be useable ingame. Open up Hammer and Add the texture to a wall or a terrain surface. Enjoy!
 
</div>
 
<div class='capcontent' style='text-align: left'>
 
==What it looks like in the end?==
 
<div id='gameplay' {{CategoryBox}}>
 
I created a map with water and a low saturated grayscale post process, hdr, and added the texture onto a cliff-side terrain map at 1.00x1.00 texture size. Here is the outcome:<br>
 
[[Image:Screen7.jpg|640px]]<br>
 
</div>
 
 
</div>
 
<div class="capbotbrown" width: 800px'><div></div></div>
 
</div>
 
</div>
 

Latest revision as of 12:20, 2 March 2011

Overview

This tutorial will take you through a step by step explanation on how to create a rock texture, and producing a bumpmap/normal map that will bring out depth to the texture.

Requirements

Finding the right texture

Use any of the available online image search engines to find your texture source. Make sure to check if its publicly available and free to use. Warning: You must ensure that the license behind the image of your choosing gives you the right to use it freely. If not, the original owner can bring on legal actions to your project. You can also check out the Material Download Sites here on VDC to download a texture pack or handpick a good seamless dirt texture from the links.

For tutorial purposes, use the following image:

Follow the image link to load its full, 512px version. Save a copy to your hard drive.
Note:The image doesn't look a lot like a rock face, but this is intentional as it's best not to use a texture that has too many shadows or large depth to it. In other words, for now, this is just a seamless ground texture.

Putting the texture to use

Now that you have the dirt texture to use, you can either right click it to copy, or save it to the hard drive.

Start Photoshop, when the program has finished loading, either open the existing file, or go to file menu and click New, don't change anything then click OK, then Ctrl+V or click Edit at the top and click Paste.

Screen1.jpg

There, now the texture is in Photoshop. Now we are going to export it to VTF for use with HL2. Once you have the VTF plugin for Photoshop installed, this shouldn't be a problem, as the VTF save format is in the format list when saving. Click on File then down to Save As.

Screen2.jpg

Change the format to VTF and save the file as "rock_diffuse.vtf". Save this file into your Materials folder of your mod. Then click Save.

Screen3.jpg

If you get an error just like the image above, then you must convert the image into RGB format. To do this, click on Image at the top menu, then click Mode then RGB Color, then click OK. Now do the same step to save to VTF.

Creating the normal map

Now that the file has saved successfully, create a new image file with the same dimensions at the dirt image, then click New. See the image notes for additional steps:

Screen4.jpg

Now that you have an image with the clouds effect applied to it, now click Image, then Adjustments, then Levels. Here you can play around with the levels of the image. The left most arrow will make the darker colors darker when moved to the right. The right arrow will make light colors lighter when moved to the left. The middle will change the moderate colors to whatever direction you want (Left - lighter, Right - darker). By playing around with it, you may make an image looking like this, depending on how you played with the levels:

Screen5.jpg

Now you got a reasonable rock texture bumpmap, go to Filters, then nvTools, then NormalMapFilter. Now set all the settings to the following image.

Screen6.jpg

Click Ok, and the normal map is complete. Save the file in VTF format, similarly to the diffuse map. Save it as "rock_normal.vtf".

Putting it all together

Now that the diffuse and normal map are finished, you will need to create a VMT file which tells the game that the texture files are here. So now, open up notepad, and copy and paste the following into it:

"LightmappedGeneric"
{
	"$baseTexture" "rock_diffuse"
	"$bumpmap" "rock_normal"
}

Now save it as "rock_texture.vmt" in the same folder you saves the VTF's. Be sure that you have "All Files" instead of "Text Document" selected in the Notepad save dialog, otherwise, it may try to save it as "rock_texture.vmt.txt". Now it should be usable in-game. Open Hammer and add the texture to a wall or terrain surface to test it.

The end result

This is a sample of a map with water, a low saturated grayscale post process, HDR, and the rock texture added onto a cliff-side terrain map at 1:1 texture scale. Here is the outcome:

Screen7.jpg