Difference between revisions of "Making Karts: Shadow Files"

m (Rollback github-sync breakage)
m (Clean up syntax to prepare to add to new kart tutorial)
Line 1: Line 1:
Last update july 8th 2011  
+
Last major update: July 8, 2011
 +
Last minor update: October 18, 2017
  
This short tutorial explains how to make a perfect shaped kart shadow, using the kart model in Blender and a graphics editing software as The GIMP. See the [[Kart resources index]] for more information about karts.
+
This short tutorial explains how to make a perfect shaped kart shadow, using the kart model in Blender and a graphics editing software as The GIMP.
  
 
The following manipulations will have to be done every time you'll change the kart model a way that impacts its top view look (eg. up-scale and down-scale transformations). So you may want to finalize the model before making the shadow.
 
The following manipulations will have to be done every time you'll change the kart model a way that impacts its top view look (eg. up-scale and down-scale transformations). So you may want to finalize the model before making the shadow.
  
=Taking screenshot=
+
== Taking screenshot ==
  
 
+
<gallery mode=packed widths=800 heights=500>
[[Image : Shadow_tutorial_1.jpg|800px]]
+
File:Shadow_tutorial_1.jpg
 +
</gallery>
  
 
Jump to top-view (numpad 7) fullscreen (Ctrl + up) orthogonal mode (numpad 5 to switch persp/ortho) in Blender, making sure you will be able later to locate the (-1, -1) (1, -1) (1, 1) (-1, 1) square on the (X, Y) plane even without seeing its edges. Here, the screen's side and the View>"Background Image" Blender property window will enable to locate the square.
 
Jump to top-view (numpad 7) fullscreen (Ctrl + up) orthogonal mode (numpad 5 to switch persp/ortho) in Blender, making sure you will be able later to locate the (-1, -1) (1, -1) (1, 1) (-1, 1) square on the (X, Y) plane even without seeing its edges. Here, the screen's side and the View>"Background Image" Blender property window will enable to locate the square.
  
 
+
<gallery mode=packed widths=800 heights=500>
 
+
File:Shadow_tutorial_2.jpg
[[Image : Shadow_tutorial_2.jpg|800px]]
+
</gallery>
  
 
Add a  colored background in Blender. It creates a high contrast with the model in shaded view mode. Don't forget to increase the background's size in the property window if you use a small image.
 
Add a  colored background in Blender. It creates a high contrast with the model in shaded view mode. Don't forget to increase the background's size in the property window if you use a small image.
  
 +
== Cropping screenshot ==
  
 +
<gallery mode=packed widths=800 heights=500>
 +
File:Shadow_tutorial_3.jpg
 +
</gallery>
  
=Cropping screenshot=
+
Then, open your screenshot image with your favorite graphics editing program. Simply crop your image following the square we made easy to identify earlier. Thanks to this, the shadow will have the right scale on the shadow image.
[[Image : Shadow_tutorial_3.jpg|800px]]
 
  
Then, open your screenshot image with your favorite graphics editing program. Simply crop your image following the square we made easy to identify earlier. Thanks to this, the shadow will have the right scale on the shadow image.
+
== Getting shadow shape ==
  
=Getting shadow shape=
+
<gallery mode=packed widths=800 heights=500>
[[Image : Shadow_tutorial_4.jpg|800px]]
+
File:Shadow_tutorial_4.jpg
 +
</gallery>
  
 
With the fuzzy select tool (aka magical wand), select the colored background (don't forget to click in every closed area), then invert the selection so it corresponds to the kart's shape
 
With the fuzzy select tool (aka magical wand), select the colored background (don't forget to click in every closed area), then invert the selection so it corresponds to the kart's shape
  
 
+
<gallery mode=packed widths=800 heights=500>
 
+
File:Shadow_tutorial_5.jpg
[[Image : Shadow_tutorial_5.jpg|800px]]
+
</gallery>
  
 
Feather the selection by roughly 10px (this value may need to be adjusted following your screen resolution), then eventually grow it by 2 or 3px, to smooth the shadow.
 
Feather the selection by roughly 10px (this value may need to be adjusted following your screen resolution), then eventually grow it by 2 or 3px, to smooth the shadow.
  
=Filling shadow=
+
== Filling shadow ==
  
[[Image : Shadow_tutorial_6.jpg|800px ]]
+
<gallery mode=packed widths=800 heights=500>
 +
FileShadow_tutorial_6.jpg
 +
</gallery>
  
 
Create a transparent layer, and fill your selection with black opacity 50% using the bucket tool.
 
Create a transparent layer, and fill your selection with black opacity 50% using the bucket tool.
  
=Saving=
+
== Saving ==
  
[[Image : Shadow_tutorial_7.jpg|800px]]
+
<gallery mode=packed widths=800 heights=500>
 +
File:Shadow_tutorial_7.jpg
 +
</gallery>
  
 
Then, resize your image to 256x256 (or even 128x128 if it does not contain a lot of details), hide or delete your green layer, and save the image as a PNG file, with transparency.
 
Then, resize your image to 256x256 (or even 128x128 if it does not contain a lot of details), hide or delete your green layer, and save the image as a PNG file, with transparency.
  
 
+
<gallery mode=packed widths=256 heights=256>
 
+
File:Shadow_tutorial_end.png
[[Image : Shadow_tutorial_end.png]]
+
</gallery>
  
 
Here is your final shadow. To polish it, you can also add some darker areas as in Puffy's one :
 
Here is your final shadow. To polish it, you can also add some darker areas as in Puffy's one :
  
[[Image : Puffy_shadow.png]]
+
<gallery mode=packed widths=256 heights=256>
 
+
File:Puffy_shadow.png
 +
</gallery>
  
If you have remarks or feedback about this tutorial, don't hesitate to post them [http://forum.freegamedev.net/viewtopic.php?f=18&t=1370 on the forum], and if you see any mistakes please tell, or even correct them !
+
When you're done with your shadow image, enter its file name in the '''Shadow''' box in the SuperTuxKart Scene Properties panel. Don't forget to copy it with your exported kart files.

Revision as of 02:20, 19 October 2017

Last major update: July 8, 2011 Last minor update: October 18, 2017

This short tutorial explains how to make a perfect shaped kart shadow, using the kart model in Blender and a graphics editing software as The GIMP.

The following manipulations will have to be done every time you'll change the kart model a way that impacts its top view look (eg. up-scale and down-scale transformations). So you may want to finalize the model before making the shadow.

Taking screenshot

Jump to top-view (numpad 7) fullscreen (Ctrl + up) orthogonal mode (numpad 5 to switch persp/ortho) in Blender, making sure you will be able later to locate the (-1, -1) (1, -1) (1, 1) (-1, 1) square on the (X, Y) plane even without seeing its edges. Here, the screen's side and the View>"Background Image" Blender property window will enable to locate the square.

Add a colored background in Blender. It creates a high contrast with the model in shaded view mode. Don't forget to increase the background's size in the property window if you use a small image.

Cropping screenshot

Then, open your screenshot image with your favorite graphics editing program. Simply crop your image following the square we made easy to identify earlier. Thanks to this, the shadow will have the right scale on the shadow image.

Getting shadow shape

With the fuzzy select tool (aka magical wand), select the colored background (don't forget to click in every closed area), then invert the selection so it corresponds to the kart's shape

Feather the selection by roughly 10px (this value may need to be adjusted following your screen resolution), then eventually grow it by 2 or 3px, to smooth the shadow.

Filling shadow

Create a transparent layer, and fill your selection with black opacity 50% using the bucket tool.

Saving

Then, resize your image to 256x256 (or even 128x128 if it does not contain a lot of details), hide or delete your green layer, and save the image as a PNG file, with transparency.

Here is your final shadow. To polish it, you can also add some darker areas as in Puffy's one :

When you're done with your shadow image, enter its file name in the Shadow box in the SuperTuxKart Scene Properties panel. Don't forget to copy it with your exported kart files.