Page 2 of 4

Re: Mugenjohncel's Quick, Dirty and Cheap Tutorials

Posted: Fri Jul 31, 2009 4:45 am
by mugenjohncel
Here we go again...

Image

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...

Image
      http://www.sendspace.com/file/h1z5ss
Image
Image
Image
Image
      Here is Jake's suggestions earlier...
      http://lemmasoft.renai.us/forums/viewto ... 490#p75490
Image
Image
Image

"POOF" Disappears

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

Re: Mugenjohncel's Quick, Dirty and Cheap Tutorials

Posted: Fri Jul 31, 2009 4:53 am
by 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.

Re: Mugenjohncel's Quick, Dirty and Cheap Tutorials

Posted: Fri Jul 31, 2009 5:02 am
by mugenjohncel
Adorya wrote: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)

Re: Mugenjohncel's Quick, Dirty and Cheap Tutorials

Posted: Fri Jul 31, 2009 5:33 am
by Adorya
20 min...let me hire you in my office as a drawing plan team leader :mrgreen:

Re: Mugenjohncel's Quick, Dirty and Cheap Tutorials

Posted: Fri Jul 31, 2009 6:15 am
by Jake
mugenjohncel wrote: 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...)

Re: Mugenjohncel's Quick, Dirty and Cheap Tutorials

Posted: Sat Aug 01, 2009 3:25 am
by Samu-kun
Pfft. I'm still not impressed until you make me an entire FOREST using this technique, mugen.

Re: Mugenjohncel's Quick, Dirty and Cheap Tutorials

Posted: Sat Aug 01, 2009 7:06 am
by mugenjohncel
Samu-kun wrote: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)

Re: Mugenjohncel's Quick, Dirty and Cheap Tutorials

Posted: Sat Aug 01, 2009 7:59 am
by Guest
Samu-kun wrote:Pfft. I'm still not impressed until you make me an entire FOREST using this technique, mugen.
Well can you draw better than that?

Re: Mugenjohncel's Quick, Dirty and Cheap Tutorials

Posted: Sat Aug 01, 2009 11:16 am
by 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...).

Re: Mugenjohncel's Quick, Dirty and Cheap Tutorials

Posted: Sat Aug 01, 2009 12:23 pm
by 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

Re: Mugenjohncel's Quick, Dirty and Cheap Tutorials

Posted: Sat Aug 01, 2009 6:50 pm
by Nessiah
Samu-kun wrote: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 :twisted:

Re: Mugenjohncel's Quick, Dirty and Cheap Tutorials

Posted: Sun Aug 02, 2009 3:17 am
by 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? ^^

Re: Mugenjohncel's Quick, Dirty and Cheap Tutorials

Posted: Mon Aug 03, 2009 5:49 am
by mugenjohncel
Hey Samu-Kun here's your forest... damn you! :mrgreen: 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...
Image

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

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

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

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...
Image
 
Image
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...
Image

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

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

Do the following...
Image

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

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

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

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...
Image

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...
Image

Press delete and watch all those ugly white parts leaving only a beautifully cropped tree with delicious transparency...
Image
Image
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...
Image

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

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...
Image

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

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...
Image

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

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?)
Image

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...

Image
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...
Image

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

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...
Image

Flatten
Image

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

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

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

"POOF" (Disappears)

Re: Mugenjohncel's Quick, Dirty and Cheap Tutorials

Posted: Mon Aug 03, 2009 6:12 am
by Samu-kun
This tutorial has cost me US$37
Just as planned!

Image

Re: Mugenjohncel's Quick, Dirty and Cheap Tutorials

Posted: Mon Aug 03, 2009 6:37 am
by adrix89