Texture Lecture #1: Let's Get it Bumpin

● ARCHIVED · READ-ONLY
Started by Dymdez 6 posts View original ↗
  1. Dymdez
    #1 Source
    First tutorial here, I want to show you how to add texture to your paths (or whatever you wish to add texture to) so your game can look beautiful and have "depth." Let's get to it!

    First, let's start a new file with GIMP

    n5rnXUj.png

    Let's highlight our Clone Tool and select a grass pattern and let's make a beautiful green square.

    (don't know what a grass pattern is?! WELL THEN! check this out!

    Spoiler
    Copy some grass from one of the A2 exterior tiles (psst, Celianna's is my favorite) and copy the grass like this

    vMEzIYb.jpg

    Then right click and select "Edit > Paste As > New Pattern" and name your new pattern and VOILA! you can now use that pattern! So Select the Clone Tool, select your new Grass Pattern and lets fill the whole screen up shall we?
    jfSLgm8.png

    Wow, that's a delightfully green square.

    Now, let's grab our Clone Tool again, selecting our Dirt Pattern (same as grass above, just get some dirt! Psst! I prefer Celianna's for this one as well!!)

    And let's make a beautiful winding, realistic path (lol).

    m9tRyFM.png

    Wow, your path looks crazy good, it's psycho-pathic. Amaze. Alright nice job, let's wrap it up, great path!

    PSYCHE. Now we need to do the hard part, but it'll be easy if you listen close. Let's make a new layer and lets title it "Bump Map."

    THEN, we need to select the Bucket Fill Tool and fill the whole bump map with GREY "808080" as such:

    wHzK1Ra.png

    Next, we need to select the Paintbrush Tool and we need to change our color back to black. Check it out!

    8fnu8JO.png

    Now, listen close. Uncheck the eyeball so we dont see the grey screen from the bump map, but make sure that layer remains highlighted, because we want to ensure that our next edits occur on the bump map and not our literally perfect path. Carefully draw your path with the black paintbrush (I use the Acryllic 01 paintbrush) and make sure the width of the brush is the same as (or close to) the width of the path. Carefully draw the path onto our invisible bump map, like this

    8VEVobN.png

    Awesomesauce. We are almost there. Now select the Path layer and let's float on up to the top toolbar and select Filters > Map > Bump Map and you should see this screen. Make sure the Bump Map is selected in the top right for the bump map select because that map that is selected is going to be the one that is referenced here.

    ctkwygt.png

    Lots of big words and confusing stuff. If you have "preview" on then you can tamper with the controls to get an idea of what each thing does. The three most important for you will be the depth, elevation, and azimuth. Mess with them until the preview looks decent (you can always undo and tinker with it until it is perfect!) and then WHAM BAM check this out:

    yX0rKNM.png

    Not bad ehh? Compare it to the path a few images above -- it looks WAY more realistic. And then once you've gotten really good, you can do this!

    DAk3x5t.png
  2. The Stranger
    #2 Source
    Thank you so much for this tutorial! It has helped me tremendously.
  3. Tsukitsune
    #3 Source
    Bumping because those Paths are gorgeous.

    If only I could find out how to do that in photoshop.
  4. Dymdez
    #4 Source
    I can't imagine it's that different in PS. I can find out if you'd like. Also GIMP is free. I'm nearly certain it's called a bump map regardless of the program.
  5. Tsukitsune
    #5 Source
    If you could find out that'd be great.  I can't find anything too similar to what GIMP offers in Photoshop.  I'd rather not have to run two programs just to work a ground graphic but I might have to lol.
  6. Marquise*
    #6 Source
    XD This is really cool for Parallaxing! I should do that just for my old battered world maps effects when I don't wanna get futuristic. :D