Search Unity

  1. Megacity Metro Demo now available. Download now.
    Dismiss Notice
  2. Unity support for visionOS is now available. Learn more in our blog post.
    Dismiss Notice

Realistic-to-stylized textures: A tutorial

Discussion in 'Made With Unity' started by lucidcoder, Oct 29, 2011.

  1. lucidcoder

    lucidcoder

    Joined:
    Mar 23, 2010
    Posts:
    138
    EDIT: This tutorial is now available on the wiki, with versions for both GIMP and Photoshop: http://www.unifycommunity.com/wiki/index.php?title=Stylized_Texture_Tutorial

    Hey guys, just thought I'd share with you a cheap and easy method that allows you to take a 'realistic' texture and give it a more hand-painted appearance, using nothing but the free GIMP tool (for those of us who either dislike Photoshop or prefer not to use it).

    Textures look great with the Unity Toon Shaders applied.

    This is a very simple process, and if you memorize the steps, you can probably process a single texture and have it ready in under a minute. Here's the basic gist of the process:

    Step 1: Find a texture you want to convert, and assess how detailed this texture is.

    This is one of the most important steps, because the last steps in the process absolutely depend on your assessment. Google Images is great for this, however I personally prefer CGTextures, because they're free (and royalty-free!) and they have an incredible variety of textures that can be scaled to a reasonable resolution of 512x512 (and still tile properly!) when you're done.

    For example, let's take a grass texture:

    Image reduced to link due to dimensions

    This texture in particular is too detailed, because of the sheer number of places in which the colors contrast from each other in terms of luminosity (brightness)--in other words, there's far too many places on the texture where different regions of dark colors touch different regions of lighter colors.

    A better alternative would be this texture:



    While there are still many spots where the colors contrast, this is a more ideal texture in that it doesn't have as much contrasting regions throughout.

    Note that it is not necessarily a bad idea to use more detailed textures, it's just difficult to deal with textures that have more contrasting regions.

    Now, forgive me for using grass as an example, because when using this method to create a stylized texture, grass is actually incredibly difficult to get right without over-doing it, simply because it's hard to find base textures that aren't within the range of detail you want. For this example, we'll be using a small, non-seamless texture with details that will bring out what this method is capable of doing--a simple concrete wall texture.



    Step 2: Open the image in GIMP (available for Windows at SourceForge)

    This should be self explanitory. Once you open the image up, your screen should look similar to this:

    Image reduced to link due to dimensions

    Step 3: Go to Filters > Enhance > Despeckle.

    WARNING: Skip this step if your texture has any transparency applied to it. Not skipping this step while processing a transparent image will result in artifacts appearing around the edges of the non-transparent portions of the image!

    You should have a window on your screen that looks similar to this:



    Leave all of the default values in place, and press OK. This should strip out some of the less necessary details in order to maintain the 'hand painted' appearance.

    Step 4: Go to Filters > Enhance > Sharpen.

    You should see a window similar to this:



    Set the value to be 40, and click OK. This should bring back some of the details accidentally lost in Step 3 as as side effect to removing the ones we don't want. We're almost done!

    Step 5: Go to Filters > Blur > Selective Gaussian Blur.

    You should see a window similar to this:



    This is the most important step, so you must know your texture well (as outlined in Step 1) in order to make the decisions necessary for this texture to look good in the end.

    The Max Delta setting looks for contrasting regions in the image, hence the name "delta" (delta meaning "change in," as in "change in time" or "change in contrast"). Higher values in this field will result in more blurry textures (reducing the hand-painted look), lower values result in negligible blurring, negating the effect this process attempts to pull off.

    The Blur Amount setting is essentially just a measure of how blurry you want the regions that don't contrast more than the Max Delta setting allows, giving the appearance of different 'paints' being mixed together to create a color.

    For this example, we're going to set the blur radius to 5 and the Max Delta to 20. Press OK, save the finished texture, and you should have a result looking something like this:



    Here's the original texture, for comparison purposes:



    And finally, here's an example of a different texture--in this case, a brown stone/brick texture--with the toon shaders applied to it to demonstrate how it looks in-game:



    This method is not meant to totally replace hand-painting, but acts as a great alternative to people who don't own drawing tablets or who want to experiment with a cartoonish art style from the beginning, without any painting experience whatsoever.

    I was able to crank out 100 complete textures in just a few hours using this method (on a really crappy internet connection, and an old laptop barely able to run Windows 7).

    Post some of the things you've created using this method!
     
    Last edited: Oct 31, 2011
  2. larvantholos

    larvantholos

    Joined:
    Oct 29, 2009
    Posts:
    668
    Thanks, I needed this - you have no idea ;) lol.
     
  3. hellraizerhhh

    hellraizerhhh

    Joined:
    May 26, 2010
    Posts:
    619
    Your whole game will just look blurry :)
     
  4. lucidcoder

    lucidcoder

    Joined:
    Mar 23, 2010
    Posts:
    138
    I intend to make a demo map for my game that will totally refute this statement :)
     
  5. Duskling

    Duskling

    Joined:
    Mar 15, 2011
    Posts:
    1,196
    Thanks for this! Bookmarked.

    I will be back to learn!
     
  6. TehWut

    TehWut

    Joined:
    Jun 18, 2011
    Posts:
    1,577
    I was doing this before actually, gives everything a cartoony -ish look :)
     
  7. lucidcoder

    lucidcoder

    Joined:
    Mar 23, 2010
    Posts:
    138
    Just looking back at this thread today guys, wondering if you think it'd be beneficial for me to place this on the wiki so that people don't have to dig through the forums. I'll also include a Photoshop variant of the tutorial if it's deemed beneficial enough :)
     
  8. larvantholos

    larvantholos

    Joined:
    Oct 29, 2009
    Posts:
    668
  9. Duskling

    Duskling

    Joined:
    Mar 15, 2011
    Posts:
    1,196
    Yeah!
     
  10. carking1996

    carking1996

    Joined:
    Jun 15, 2010
    Posts:
    2,608
  11. gioworks

    gioworks

    Joined:
    Oct 12, 2011
    Posts:
    138
    awesome
     
  12. Broken-Toy

    Broken-Toy

    Joined:
    Jan 16, 2010
    Posts:
    455
    A trick for further control is to play with your image scale before applying filters.

    For example, a 512 image scaled up to 1024 before filtering will retain more details when scaled back to 512.
    $Grass.jpg
     
    Last edited: Oct 30, 2011
  13. hellraizerhhh

    hellraizerhhh

    Joined:
    May 26, 2010
    Posts:
    619
    Im curious to see a scene or a few objects textured this way. I'm still of the mindset that it will just look blurry. Having a cartoon texture is all about the painted shadows and specular hits, I don't think just bluring will give you a cartoon look but i'm curious to see the results.
     
  14. Kellyrayj

    Kellyrayj

    Joined:
    Aug 29, 2011
    Posts:
    936
    This kind of a texture look appears very similar to what Team Fortress 2 has and that game doesn't look blurry. I might even venture out to say that a cartoonish game will be more believable with textures that contain minimal detail.
     
  15. lucidcoder

    lucidcoder

    Joined:
    Mar 23, 2010
    Posts:
    138
    http://i44.tinypic.com/mmshn6.png

    ^ A (very) simple screenshot of a scene demonstrating how this method doesn't make your game look blurry. Toon shaders and lightmapping applied in this example.
     
  16. lucidcoder

    lucidcoder

    Joined:
    Mar 23, 2010
    Posts:
    138
  17. SteveJ

    SteveJ

    Joined:
    Mar 26, 2010
    Posts:
    3,085
    Another method I like to use in Photoshop:

    1) Open texture
    2) Filter --> Blur --> Gaussian Blur: Radius between 2.5 5.0
    3) Edit --> Fade Gaussian Blur: Opacity between 75% 100%, Darken mode

    Can produce some very nice hand-painted effects given the right textures.
     
  18. Ratchet

    Ratchet

    Joined:
    Apr 8, 2009
    Posts:
    46
    I'm very interested in making stylish texture with some cartoon taste.
    I target Prince Of Persia style :

    http://www.ps3attitude.com/2008/10/prince-of-persia-new-screenshots.html

    Gimp 2 have some cool plugin also : "Gimpressionist" that allow to adjust a lot of effects, and it has also a simple effect
    "hand painted" filter.
    I'll post a grass texture made with Gimp filters looking in some way like the last Zelda Skylight incoming title.
     
    Last edited: Nov 9, 2011
  19. larvantholos

    larvantholos

    Joined:
    Oct 29, 2009
    Posts:
    668
    I've found that in photoshop, you can get a much better result with cutout - sometimes applying cutout and then using the origonal texture as a blend layer to add back in some detail to get everything balanced.
     
  20. Ratchet

    Ratchet

    Joined:
    Apr 8, 2009
    Posts:
    46
    Some interesting tips , just browse this site :

    http://www.jeroendessaux.be/

    And this tutorial is great help to make better level design in Team Fortress 2 style also :

    http://jeroendessaux.be/TF2Tut.doc

    In the docuement , the author states , that the artists that made Team Fortress 2 didn't used any
    photo source, they directly used Photoshop.
    So you don't have to necesseraly use photo sources to make your cartoon style textures also.
     
    Last edited: Nov 9, 2011