Mugenjohncel's Quick, Dirty and Cheap Tutorials

[mugenjohncel]

Here we go again...



Butthurt, pride trampled and ego bruised, our protagonist mugenjohncel who is currently sulking in some dark corner of the house while munching pringles.

Code: Select all

init:
    image somedarkcornerofthehouse = "somedarkcornerofthehouse.jpg"
    image rainbowsandflowers = "rainbowsandflowers.jpg"
    image thecolorblack = "thecolorblack.jpg"

    #Characters
    $ m01 = Character('Mugen',color="#F9CE8B",window_left_padding=220,show_side_image=Image ("mugen_sulk.png", xalign=0.0, yalign=1.0),)
    $ m02 = Character('Mugen',color="#F9CE8B",window_left_padding=220,show_side_image=Image ("mugen_awesome.png", xalign=0.0, yalign=1.0),)

label start:
    scene thecolorblack
    $ renpy.pause(5.0, hard=True) #For more dramatic entrance
    $ renpy.block_rollback() #Bye-Bye Rollback! 
    scene somedarkcornerofthehouse with fade
    $ renpy.block_rollback()
    m01 "Insert Expletives Here... Japanese professional my ass... Bah!"
    $ renpy.block_rollback()
    m01 "Insert More Expletives Here... Fucking ungrateful bastards..."
    $ renpy.block_rollback()
    "Stares at image"
    $ renpy.block_rollback()
    m01 "Well, if you looked at it... he is right..."
    $ renpy.block_rollback()
    m01 "Those black lines really do look ugly."
    $ renpy.block_rollback()
    m02 "FUCK! I'll show him!"
    $ renpy.block_rollback()
    scene rainbowsandflowers with dissolve
    $ renpy.block_rollback()
    m02 "I'll show him what a mugenjohncel in serious mode can do."
    $ renpy.block_rollback()
    m02 "I'm gonna make a professional looking BG and be worshipped by everyone!"
    $ renpy.block_rollback()
    m02 "BWAHAHAHAHAHA!!!"
    $ renpy.block_rollback()
    return

As always, real life once again interrupted. Exhausted from todays negotiations and motivation at critically dangerously low levels, our protagonist mugenjohncel has only 2 hours freetime left for today before his scheduled beautysleep. But his urge to reclaim his pride and ego is still burning fiercely...

Let's see...

- Beauty Sleep
- 2 hours freetime
- Pride and Ego

Beautysleep is a must so that can't be changed. Unfortunatelly, so is pride and ego... can't get a good night sleep without them intact but with only 2 hours remaining before scheduled beautysleep...

we now have no choice but to once again resort to cheap, quick and dirty techniques...

So here we are once again... I now proudly present you...


      http://www.sendspace.com/file/h1z5ss




      Here is Jake's suggestions earlier...
      http://lemmasoft.renai.us/forums/viewto ... 490#p75490




"POOF" Disappears

Edit:
Here is the final image attached in case you wanted to see how it turned out...

[MaiMai]

Ahhh, this is awesome Mugen. *_* I've been attempting to do bgs myself and this is really inspiring me. Looks like I might have something decent for people to look at when I finish my next game.

[mugenjohncel]

I also would like to know how much time was taken to do the step 2 in the whole process.

Probably around 12 to 20 minutes... very basic shapes and sloppy in some places... downloading time for texture is not included.

"POOF" (Disappears)

[Adorya]

20 min...let me hire you in my office as a drawing plan team leader

[Jake]

Probably around 12 to 20 minutes... very basic shapes and sloppy in some places...

They may be basic and sloppy in places, but 12-20 minutes is still pretty damn impressive!

(I have a staircase BG I've been working on too-sporadically for about a year now, the lineart for which took me around 3.5-4 hours, as I recall...)

[Samu-kun]

Pfft. I'm still not impressed until you make me an entire FOREST using this technique, mugen.

[mugenjohncel]

Pfft. I'm still not impressed until you make me an entire FOREST using this technique, mugen.

A forest you say... I accept the challenge... wait till I get home tommorow... Oh boy!...

"POOF" (Disappears)

[Guest]

Pfft. I'm still not impressed until you make me an entire FOREST using this technique, mugen.

Well can you draw better than that?

[KimiYoriBaka]

the second page of this thread has completely baffled me.

I liked your first version better. The "ugly black lines" prevent the picture from looking like a 3d rendering done for an old fps. (I just finished replaying the original doom, so I am saying that with reference) Even after you improved light and shadow, the lack of thickness in the lines makes it too obvious that the shades of the the walls don't change a they go around corners or while approaching them. I don't think you should are such an artist that needs to worry about random people telling you your art doesn't look professional enough (which in my experience is usually bs anyway...).

[Deji]

Your BG skills are impressive Mugen :O
I wish I could do good on step 2, lol, I absolutely fail at planning environments and in perspective "Orz

[Nessiah]

Pfft. I'm still not impressed until you make me an entire FOREST using this technique, mugen.

I second this.
I'd wait for it Sir Mugen

[Koveras]

Hi mugenjohncel, thank you for the tutorials. I've followed the first one up to step 9 but I have trouble drawing the shadows. Mine just don't look natural, no matter how many times I try. Could you perhaps write a Shadows For Dummies guide, too? ^^

[mugenjohncel]

Hey Samu-Kun here's your forest... damn you! This tutorial has cost me US$37 (Read: United States of American Dollars) to purchase high resolution Tree Textures (Next time... I'll make sure to keep my credit cards somewhere remote and far from reach whenever I'm online). Though the actual thing only took 30 minutes to do, the tutorial took me nearly 4 hours to create...

Step 1:
Download the biggest "free" tillable grass texture you could find on the internet using google.

I got mine from here...
http://free-textures.got3d.com/natural/ ... re-024.jpg

Step 2:
Download the biggest "free" tillable dirt texture you could find on the internet using google.

I got mine from here...
http://ryane.com/wp-content/uploads/2007/09/dirt_01.jpg

Step 3:
Using google, type "Tree Texture" and go download as many "free" tree texture as you can, the more the better.

Sorry, I purchased mine so you're on your own on this one but they should look like this...


Step 4:
Open the grass and dirt texture your downloaded earlier in Photoshop...


Step 5:
Click, Hold and Drag the grass into the dirt window. Now the grass layer is on top of the dirt layer... see


Step 6:
Using Transform (CTRL + T) Stretch the grass layer to fill the whole window... or until you don't see the dirt layer...


Step 7:
Click on the eraser tool (E) preferrably choosing large feathery brush and erase parts of the grass to show some dirt below... in this case to make a sort of path...

 

Flatten all layers and save it as "ground.jpg"

Step 8:
Create a new 800px by 600px dpi300 white document and drag the "ground.jpg" you created layer and using transform (CTRL + T) skewer and stretch it like this...


If done correctly, it will look something like this...


Step 9:
Open your downloaded tree textures in photoshop... see?...


Do the following...


Step 10:
Make sure you have the topmost layer active and do this...


With the topmost image in B/W, open brightness/contrast adjustment...


And copy these settings... if done correctly, the tree should be all solid black now...


Step 11:
With the topmost layer still active... use the magic wand (W) copy these settings (See the settings on the top of the image?... copy that) and click on the white part of the image... if done correctly, the white parts will now be selected...


See those creepy eye thingy on the layer window?... Click and disable the eye thingy on the top and bottom layer to hide them... now, only the middle layer is visible. Click on the middle layer on the layers window to make the middle layer the active layer...


Press delete and watch all those ugly white parts leaving only a beautifully cropped tree with delicious transparency...


Repeat the steps for all the tree textures you have downloaded and save them as PSD's with transparency...

Step 11:
Let's drag the transparent tree in our main canvas shall we...

Hmm... OK, so we have this tree but look closely... something is not right... let's fix that...


Using the smudge tool, copy those settings and "smudge" the bottom of the three to create roots...


Step 12:
Before we continue you have to remember the following... the farther you go, the smaller the tree becomes... for this you should use transform (CTRL + T) to adjust tree sizes...


Repeat the procedure (You know, Drag Tree into canvas, Transform and repeat) until you have something that resembles a forest...


OK, so I assume you now have a forest full of trees in your canvas... scroll all the way down to the most bottom tree layer and click it on the layer window to make it the active layer. Then following the image below, you link the rest of the tree layers...


Press (CTRL + E) to and see all the tree layers are now just one layer.


Step 12:
Create a new layer between the trees layer and the ground layer and copy those layer settings... (See, Layer Multiply transparency and so forth... you know how to use photoshop right?)


Step 13:
Click on the newly created layer to make it the active layer. Choose a very VERY dark green color and paint the shadows on that layer... see...


Create a new layer on top of the tree layers and copy the layer settings you used for the forest shadow earlier into the new layer and paint another layer of shadow but this time in the lower parts of the trees... but used black instead...


See that white layer at the bottom?... Delete it...

 


Then merge all visible to retain transparency and download some sky from google and insert it below in what was now your only remaining layer...


Flatten


Step 14:
Duplicate your only layer and desaturate (SHIFT + CTRL + U) and gaussian blur at 1.0


See the settings on the desaturated image?.... copy them and see the image glow beautifully...


Step 15:
Create a new layer above and use a large feathery brush to paint a bit of sunshine... and done!


"POOF" (Disappears)

[Samu-kun]

This tutorial has cost me US$37

Just as planned!

[adrix89]

For tree textures you can use a tree generator
http://ngplant.sourceforge.net/#overviewanc
http://yorik.orgfree.com/tutorials/treemaking.html
http://blender-archi.tuxfamily.org/Greenhouse
http://povrayscrapbook.awardspace.com/