Tutorial: Good, fast 3D shading in PSP, Photoshop, or Gimp

[Taehl]

Ever need to shade that interface gun you'd just spent an hour carefully detailing, and don't want to do it by hand? Well, neither did I, so I developed this method. I hope someone finds it helpful. It comes in Paint Shop Pro 7, Photoshop 6, and GIMP methods (scroll down until you find your favorite).


Paint Shop Pro (version 7, and most likely higher versions)
(Credit to me!  )

1) Open the picture (duh.)


2) Select all the Invisible Green areas (Magic Wand is handy for this).

3) Use the file menu to select "Selection->Invert". Also, un-select any thin details (like the trigger guard in my example). So now you have the body of your gun selected.


4) Create a new raster layer (Layers->New Raster Layer). Use the Flood Fill to paint #808080 grey over your gun. (This step isn't totally necessary, but it does allow you to easily choose how much you want the shading effect added to the graphic, via the new layer's opacity.)

5) Use "Effects->3D Effects->Inner Bevel" to create the lighting and shadow you want.


6) Set the layer with the now-shaded grey blob to the "Hard Light" blend mode.


7) Should be done, so save it (as a BMP, remember). If you have mysterious bright green pixels in-game, recolor the Invisible Green areas Invisible Green (they might have gotten shaded by accident if an IG area was still selected by step 4).


Photoshop (version 6, and most likely higher versions)
(Credit to Mistercharles)

1) Open the picture (duh.)


2) Copy and paste the image. Delete the original bg layer.

3) Using paint bucket, set the mode to clear, opacity 100%, not contiguous, aliased, 0 tolerance. Paint the green area.

4) Go to layer properties, and add "Bevel and Emboss" to create the lighting and shadow you want.


5) Create a new, completely 0,255,0 green layer under the gun layer, and then flatten the layers.

6) If desired, re-draw the gun outline with the pencil tool.

7) Save as BMP.


The GIMP
(Credit to xtishereb)

1. Hit Shift+O to select regions by color. Click on the green, then shift-click on the black outline of the gun. If you wish, hit R and shift-click select the places you don't want to shade.

2. Hit Ctrl+I to invert the selection, hit Ctrl+C to copy, then Ctrl+V to paste. In the Layers box, right-click on the newly created "Floating Selection (Pasted Layer)" and choose "New Layer..." You can hide the Background layer.

3. Optional: In The GIMP's main window, chose Bucket Fill. Under "Finding Similar Colors", set "Threshold" to 255. Change the foreground color to 50% gray (#808080), and fill in the layer.

4. In the image's window, choose Filters -> Light Effects -> Lighting Effects.

5. Play around. You can set the level of transparency in the duplicated image to give the original image some more shading to it.

[Mr Killer]

How to do that with GIMP?

[Keron Cyst]

I hope The GIMP has Inner Bevel, 'cuz frankly, Photoshop's roughly $750, man.

[Taehl]

I used Paint Shop Pro 7, not Photoshop. I hate Photoshop's HSV color method.

And I can't tell you how to do it in the GIMP. I don't like it, and don't want to bother with it enough to find out how, sorry. It should have something that does the same thing, though. All "Inner Bevel" does is apply 3D shine and shadow to the selected area.

[xtishereb]

Okay, I messed around in GIMP and found out how to make it happen.

1. Hit Shift+O to select regions by color. Click on the green, then shift-click on the black outline of the gun. If you wish, hit R and shift-click select the places you don't want to shade.

2. Hit Ctrl+I to invert the selection, hit Ctrl+C to copy, then Ctrl+V to paste. In the Layers box, right-click on the newly created "Floating Selection (Pasted Layer)" and choose "New Layer..." You can hide the Background layer.

3. Optional: In The GIMP's main window, chose Bucket Fill. Under "Finding Similar Colors", set "Threshold" to 255. Change the foreground color to 50% gray (#808080), and fill in the layer.

4. In the image's window, choose Filters -> Light Effects -> Lighting Effects.

5. Play around. You can set the level of transparency in the duplicated image to give the original image some more shading to it.

Okay, have fun.

[O.R.I.O.N.]

Okay, quick question, but how the freaking heck are you supposed to download GIMP?  All of the ftp sites and mirrors give me all of these wierd files that my comp doesn't even recognise.

[Mistercharles]

I used Paint Shop Pro 7, not Photoshop. I hate Photoshop's HSV color method.

Photoshops 6.0 and up all have rgb, hsv, and hex rgb. This tutorial can be done just as easily in photoshop. For example:

1) Open the picture (duh.)


2) Copy and paste the image. Delete the original bg layer.

3) Using paint bucket, set the mode to clear, opacity 100%, not contiguous, aliased, 0 tolerance. Paint the green area.

4) Go to layer properties, and add "Bevel and Emboss" to create the lighting and shadow you want.


5) Create a new, completely 0,255,0 green layer under the gun layer, and then flatten the layers.

6) If desired, re-draw the gun outline with the pencil tool.

7) Save as BMP.

[Vltava]

Okay, quick question, but how the freaking heck are you supposed to download GIMP?  All of the ftp sites and mirrors give me all of these wierd files that my comp doesn't even recognise.

Windows: Click.

You'll need GTK+ if you haven't downloaded any GTK+ runtime programs:

Windows 2000 and higher: Click.

Windows 98: Click.

Next time utilize Google more effectively.

[O.R.I.O.N.]

I thank you.  Now, my custom weapons will look less crappy.

[Taehl]

Photoshops 6.0 and up all have rgb, hsv, and hex rgb.

What about HSL? That's what I prefer, by far. RGB/Hex is okay, but I just really like HSL.

Also, good job figuring out how to work this in Gimp and Photoshop. I don't like them, but to each their own. I'll add Photoshop and Gimp methods to the first post now.

[numgun]

I prefer manual shading, much nicer IMO.

[Taehl]

Perhaps, but I didn't want to manually shade every single weapon in Soldat after I'd just spent 5 days making all of them. Perhaps lazy, but it can turn out very nicely with some tweaking.

[Taehl]

I took my time. I looked up dozens of real weapons and their stats, decided if they'd fit into the mod, and then very carefully hand-pixelled interface and weapon gfx for them. And I didn't mean 5 days all day, I also did a lot of playtesting. I also came up with sfx during that time. So yea, 5 days to make LandWarrior.

[Evil-Ville]

O_O it took 5 days to make all the weapons? lol xD
Seriously, I make weapons in 10-20 mins/weapon with high quality + weapons gfx and such. its really easy and fast.

Your weapons high quality? Hahahaha.

[numgun]

O_O it took 5 days to make all the weapons? lol xD
Seriously, I make weapons in 10-20 mins/weapon with high quality + weapons gfx and such. its really easy and fast.

Your weapons high quality? Hahahaha.

Better than your crap.

[Anubis]

sweet i've had paint shop pro for a while and didn't even know how to do this...Thx you jus made alot of things easier for me

[xtishereb]

Good news: Turns out GIMP has a bulit-in Script-Fu command called "Add Bevel". So now I've got a tutorial spilt for that, since I also found out how to get "Lighting Effects" to kick more butt.
Tutorial updated, also changed some stuff too.
EDIT: Improved step 3 and step 6 for add bevel.

1. Hit Shift+O to select regions by color. Click on the green, then shift-click on the black outline of the gun. If you wish, hit R and shift-click select the places you don't want to shade.

2. Hit Ctrl+I to invert the selection, hit Ctrl+C to copy, then Ctrl+V to paste. In the Layers box, right-click on the newly created "Floating Selection (Pasted Layer)" and choose "New Layer..." You can hide the Background layer.

3. While still in the layer's main path, duplicate the pasted layer. In The GIMP's main window, chose Bucket Fill. Change the foreground color to 50% gray (#808080), shift-click on the new layer and this will fill it in.

If you want to use "Lighting Effects"...

4. In the image's window with the gray layer selected, choose Filters -> Light Effects -> Lighting Effects. If "Keep Transparency" isn't checked in the Layers window, do so now.

5. Go to the "Bump Map" tab. Check "Enable bump maping". For the bump map image, choose the non-gray copyed layer from step 2. You can choose the curve and maximum height yourself, depending on the ammount you want your gun to "pop out". I found a logarithmical curve looked the best.

6. Under "Light" make sure the light you're using is directional. Play around with the settings untill you get something that looks nice, it's helpful to have "Interactive" under the preview image checked. For finer tweaking, you can mess with the "Material" tab. Hit "OK" in the lower-right when you're done.

7. Delete the first pasted layer. If you hid the Background, unhide it now. You should now see the gray layer with shading over the original green background with a black outline. Set the mode of the shaded gray layer to "Value". Congradulations, you now have a cool-looking gun.

If you want to use "Add Bevel"...

4. With the gray layer selected, go to Script-Fu -> Decor -> Add Bevel.
Optional: Duplicate the original gray layer first, then use "Add Bevel" on the copy.

5. De-check "Work On Copy". You can change the Bevel Ammount if you want.
Optional Continued: Check "Keep Bitmap".

6. Set the newly Bevel'd layer's mode to Value or Darken Only. Ta-da, bevel-like stuff.
Optional Continued: Delete the Bevel'd layer. Select the first gray layer, then choose Filters -> Map -> Bump Map. You can now fine-tune the bevel lighting effects.

Combine both of the effects for even more 3-D action!

[O.R.I.O.N.]

W00T!  Thanks, xtishereb.