I'm working on a tile editor for a game. I want a full range of painting and drawing tools and I am trying to create the buttons for the tool window. I modeled the actual tool representations in Blender and I am happy with those. They have a sort or cartoonish look I was going for. However, the background, as shown, was created in Axialis' Icon Workshop from stock icon objects. They look great as icons! However, I need 3D buttons. I like the glossy look, but I cannot replicate this effect in Blender and I do not have the tools or the knowhow to recreate this otherwise. How do I do this? I need two sets per tool, one raised and one inset (clicked). I'm not an artist and could really use some help, even if it is a link to a tool that can automatically do this for me. For the record, I am a hobbyist, not a professional. I am remaking a game my dad was making in the early 90's, but abandoned. There is no budget for this game and the artwork is preexisting. I am trying to do this as cheaply as possible (read: free). Here is where I'm at right now. Each tool icon is 256 x 256. They wont be that big when finished. Any help would be appreciated.

I have found that a basic way to create a 3d button effect is to flip the shadow and light spots on the images.

Quote: Original post by adam4813
I have found that a basic way to create a 3d button effect is to flip the shadow and light spots on the images.

I tried that, but it didn't work. If you look at the backgrounds, you'll see that they are a really bad approximation of 3D. There isn't a single 3D object in the backgrounds. They are created by compositing multiple transparent images.

The only 3D objects in the image I posted are the tools I created.

Here is what I've come up with in Blender:

The button is an actual 3D object (profile view):


Here is the button with correct lighting for both raised and pushed. In this case, to get the pushed image I rotated the object 180° and flipped the normals. The light source stayed at the top of the button for both renderings. I don't like this one all that much, even though it is technically correct. The lack of a noticeable highlight on the pushed rendering is quite apparent.


In this case, I did not rotate the object, but rather moved the light to the bottom. I like the look of the highlight on the pushed version, but this is not correct and it is noticeable.

OK, I think I'm happy!

I took one of the tool models and placed it in from of the button model and with a bit of ambient occlusion, I got this:



I was originally going to use the pre-rendered images of the tools as a texture on the button, but it just didn't look correct. The shadow from the tool onto the button makes this work.

Quote: Original post by maspeir
I took one of the tool models and placed it in from of the button model and with a bit of ambient occlusion, I got this:

I've never really done any work in Blender before, but from the perspective of an amateur game artist I wouldn't recommend using that drop shadow for the tool - and especially at such an angle. Right now it looks like the tool is hovering 10cm above the button.

I think that this one was the best of the buttons you have created. Just remember that the tool should look as if "printed" on the button, so the tool would have the same kind of shadow or light on it as the button itself. The highlight may be a little bit too intense, although I suppose it depends on how large the buttons will be in the game. Hope this helped.

I'm actually going to skip the whole button idea and implement something along the lines of OS X' dock. I like the effect and I can just use the renderings of the tools.