Author Topic: Tutorial: Creating bg sceneries with Gimp.  (Read 9307 times)

0 Members and 1 Guest are viewing this topic.

Offline VirtualTT

  • Veteran
  • *****
  • Posts: 1026
Tutorial: Creating bg sceneries with Gimp.
« on: February 26, 2009, 07:48:01 am »
"Your pony died because it wasn't pretty enogh..."
х_Х

This illustrated tutorial shows basic methods and sequence of making bg sceneries for caves/bunkers in Gimp. It should take less then 15 min.


I'm using bunker from tw_Next as example. You can find source xcf file here.

1. Take screenshot of the part of the map you want to make a scenery for. Make sure that zoom is 100% (press '*' in PW) so the scenery will fit the map. It's a necessary thing to turn everything off at the display panel and set bg color in pw to some simple color like green so you can later easily separate background from polygons.


2. Open Gimp and paste screenshot into it (Edit=>Paste as=>New image). Select the bunker and tonnel with Rectangle select tool. Cut it to clipboard and paste into new image. It will be the base for scenery.


3. Select green area with Select by color tool. Note that threshhold shouldn't be big, even 0 should be fine.


4. Then delete it (Edit=>Clear).


5. Colorize layer to red (Color=>Colorize).


6. Rename it to "polygons", set opacity to ~50% and lock. It it used only as a helper. Now create new layer (Layer=>New layer), name it "cave bg", set Layer fill type to Tranparency.


7. Open texture for cave bg and copy it to clipboard (i used landscape_91). Fill cave bg layer with it. Add layer mask (Layer=>Mask=>Add layer mask), set Initialize layer mask to to Transfer layer's alpha channel. Actually you can use Eraser tool instead, but i prefer to use layer mask since this method gives some additional opportunities.


8. Remove all unnecessay parts. Use Pencil tool for rough edit and brush for exits. Fg color should be pure black. Apply layer mask (Layer=>Mask=>Apply layer mask).


9. Create "bunker bg" layer (Layer=>New layer) and add background for the bunker by analogy (i used default ananas texture).


10. Now it's time to add some shading. Set "cave bg" as active layer and select transparent area with Fuzzy select tool. Don't forget to check Select transparent areas at tool's settings. Invert selection (Select=>Invert). Create "cave shading" layer (Layer=>New layer) and set it as active.


11. Switch to Blend tool. Set Gradient to Fg to transparent. Set Shape to Shaped (spherical). Fill selection with gradient.


12. Switch to Paintbrush tool. Select Galaxy small brush.


13. Add some additional shading to the middle area.


14. Basic shading for the tonnel is finished now. It's time to change it considering light from outside and two lapms in the tonnel. Add Transfer alpha channel mask to "cave shading" layer. Switch to Blend tool. Set Gradient to Fg to transparent. Set Shape to Linear. Set color to black. Add gradient to exits to show the beam of light that goes from the outside.


15. Set Shape to Radial. Add gradients for lamps. (Usually i put light sources before adding shading so i don't forget where light is coming from, but in this tutorial i tried to keep things in proper order and places lamps togather with other junk).


16. Shading for tonnel is finished. Apply layer mask. Add "bunker shading" layer. Select floor with Rectangle select tool. Switch to Blend tool. Set Gradient to Fg to transparent. Set Shape to Linear. Add some shading to the floor.


17. Select area inside of the bunker using different Modes of Rectangle select tool. Switch to Blend tool. Set Opacity to ~50%. Add some shading to the bunker.


18. Select window area using different Modes of Rectangle select tool. Switch to Blend tool. Add some shading to the window.


19. Create "stuff" layer. Add two lamps to the tonnel (i used st_light). Basically, when you add some scenery to you project, you open scenery file; if it is bmp with green mask you select mask with Select by color tool, then invert selection (Select=>Invert) and then copy it to clipboard; if it is png with alpha channel you can just copy it whole without selecting anything.


20. Add cs_crate_2, m_blood_2_sk and some raato body. Draw some bullet holes with Paint brush.


21. Now our bg scenery has nice texture, shading and some objects, but it looks ugly. It is time to adjust colours/brightness/contrast for the scenery to make it look solid with the map. Duplicate "cave bg" layer (Layer=>Duplicate layer). Colorize it (Color=>Colorize).


22. Set mode of "cave bg copy" layer to Soft light and opacity to ~80%. Now tonnel looks much better.


23. Duplicate "bunker bg" layer (Layer=>Duplicate layer). Select area inside of the bunker using different modes of Rectangular select tool. Colorize it (Color=>Colorize).


24. Make "stuff" layer active and select crate. Adjust it's brightness (Color=>Brightness/Contrast).


25. That crate also needs a shadow. Make "bunker bg" layer active, select area to the left of the crate with Rectangular select tool and add shadow with Blend tool.


26. Our bg scenery is ready. It's better to save it as xcf so it would be possible to edit it in the future.


27. Export it to Scenery-gfx folder as png.


28. After saving scenery as png open it again and go to Image=>Autochop image. Then open Canvas size dialog (Image=>Canvas size). Uncheck lock between Width and Height, increase both of them by 2 px, set Offset to Center and Resize layers to All layers. Resize image and then save. (This last step isn't necessary in case of this scenery but not doing this can sometimes lead to ugly glow effect around edges.)



29. This is how does it look in the PW.



Tutorial is finished so here is some conclusions:

Process of making bg scenery consists of four basic steps:
- filling bg with texture
- adding shades
- adding junk
- adjusting colours/brightness/contrast

Always give siutable names to layers and save layer backups before perfoming operations with them such as colorizing (just duplicate layer and turn copy's visibility off).

Using different modes of selecting tools it's possible to select almost any desired area to work with.

Different mix modes for layers/tools can create intresting effects, try experimenting.
« Last Edit: February 26, 2009, 12:11:26 pm by VirtualTT »

Offline jrgp

  • Administrator
  • Flamebow Warrior
  • *****
  • Posts: 5037
Re: Creating bg sceneries with Gimp
« Reply #1 on: February 26, 2009, 08:11:53 am »
Awesome tutorial. Do you make most of your maps like this? I find it really interesting and cool that someone's using Gimp instead of Photoshop to make maps.
There are other worlds than these

Offline Dragstie

  • Camper
  • ***
  • Posts: 250
  • Soldat mapper
Re: Creating bg sceneries with Gimp
« Reply #2 on: February 26, 2009, 08:21:18 am »
i cant see any of the last pictures....

Offline VirtualTT

  • Veteran
  • *****
  • Posts: 1026
Re: Creating bg sceneries with Gimp
« Reply #3 on: February 26, 2009, 08:33:40 am »
please wait untill tutorial is finished... i haven't uploaded those pictures yet

Offline Dragstie

  • Camper
  • ***
  • Posts: 250
  • Soldat mapper
Re: Creating bg sceneries with Gimp [under construction]
« Reply #4 on: February 26, 2009, 10:48:47 am »
[Under construction]

im just such an idiot......

Offline VirtualTT

  • Veteran
  • *****
  • Posts: 1026
Re: Tutorial: Creating bg sceneries with Gimp.
« Reply #5 on: February 26, 2009, 12:13:08 pm »
Now it's finally ready! I hope it would be helpfull. ^^

Offline Dragstie

  • Camper
  • ***
  • Posts: 250
  • Soldat mapper
Re: Tutorial: Creating bg sceneries with Gimp.
« Reply #6 on: February 26, 2009, 01:12:43 pm »
now i cant see picture 2-3-4 xD

Offline Serial K!ller

  • Camper
  • ***
  • Posts: 408
    • Soldat Mods Archive
Re: Tutorial: Creating bg sceneries with Gimp.
« Reply #7 on: February 26, 2009, 03:27:21 pm »
Nice tutorial! This is really useful for making detailed maps without having to much frame drop on older PC's or avoiding the scenery limit.

Offline Wraithlike

  • Global Moderator
  • Veteran
  • *****
  • Posts: 1349
  • The Ichthyologist
Re: Tutorial: Creating bg sceneries with Gimp.
« Reply #8 on: February 26, 2009, 11:13:45 pm »
Props, one of the best and most useful tutorials I've seen in a while, I'm going to sticky it for about a month, and link it in the tutorial list.

Offline As de Espada

  • Moderator
  • Veteran
  • *****
  • Posts: 1493
  • Mapper
    • My maps
Re: Tutorial: Creating bg sceneries with Gimp.
« Reply #9 on: March 12, 2009, 11:12:26 pm »
nice tutorial, but I don't like those scenerys.
they are rarely reusable, and make your soldat folder a lot heavier, besides all that fancy "3 folders rar"
All my maps | my latest map: SoldatX Racing Mappack
me making a map on youtube: ctf_FastMade

Offline Kinky noob

  • Camper
  • ***
  • Posts: 353
  • This is shugo he likes to eat his fingers!
Re: Tutorial: Creating bg sceneries with Gimp.
« Reply #10 on: August 24, 2009, 06:06:08 pm »
If only GIMP did not suck so hard.

Offline Norbo

  • Camper
  • ***
  • Posts: 338
Re: Tutorial: Creating bg sceneries with Gimp.
« Reply #11 on: January 16, 2010, 03:16:03 am »
Very helpfull tut, helped me alot with my ttw map im making.
However i am more familiar with photoshop, and its better too, so if you could make another tutorial in photoshop it would be awesome.
Thanks.

Offline jrgp

  • Administrator
  • Flamebow Warrior
  • *****
  • Posts: 5037
Re: Tutorial: Creating bg sceneries with Gimp.
« Reply #12 on: January 22, 2010, 01:10:16 pm »
Very helpfull tut, helped me alot with my ttw map im making.
However i am more familiar with photoshop, and its better too, so if you could make another tutorial in photoshop it would be awesome.
Thanks.

Not everyone can afford PS and whether or not it's better is a matter of personal preference, especially since both are good at different things.
There are other worlds than these

Offline VirtualTT

  • Veteran
  • *****
  • Posts: 1026
Re: Tutorial: Creating bg sceneries with Gimp.
« Reply #13 on: January 22, 2010, 01:27:25 pm »
Actually i must agree that PS is much better almost in any aspect...
The reason i'm using Gimp is that i'm used to AutoCAD-like Pan and Zoom which can't be achieved in PS...

This tutorial doesn't have any Gimp-specific stuff so it can be done in PS in almost exactly the same way.