Jump to content
  • Advertisement
Sign in to follow this  
Sereath

How to create User Interface's Graphics with a 3d look ?

This topic is 2373 days old which is more than the 365 day threshold we allow for new replies. Please post a new topic.

If you intended to correct an error in the post then please contact us.

Recommended Posts

Hi,

I would like to know how to create graphics for my user interfaces.

I would like to create graphics that look "kind of 3D", such as this :

crestron_template.jpg


...with all the experience and patience I have with inkscape, I could not go further than this :

2-18.png

I cannot find a way to create the "fake 3d" effect,
I am advanced in the knowledge of 3D graphics (Blender) and I could just trash all this nonsense and create the whole thing in 3D, but I fear it is not a good idea. Indeed I have found with the past that, Ironically, fake 3D graphics usually look a lot better than actual 3D graphics.

Thus I have been unsuccessfully looking on the web for about 1-2 hours now for a software that would take my images and give it a fake 3D look or maybe just create the whole graphics. Anything that would give me a 3D or modern look would be great, but I found nothing. All I know right now is that inkscape has filters that would let me do that. But to be honest, after many unsuccessful attempts, a few spots on my head where hair will never grow again and lot of time lost that I will never find back, I would rather do any graphic interface in blender than using inkscape's filters.

Anyway, if you helpful folks out there have any idea on how to create modern 3d graphics, your reply to this post would be extremely appreciated.


PS : I admit it, this is for a software ATM, but this knowledge would also be greatly useful for my games later on.

Share this post


Link to post
Share on other sites
Advertisement
This look is very likely created in Photoshop using layer blend styles. You can overlay gradients, stroke/outline elements and so on. Look up some Photoshop Interface tutorials, there are plenty out there. It's not easy making your own designs though, art never is... :)

Share this post


Link to post
Share on other sites
EASIEST: Don't bother. I want my UI to look consistent with the rest of the system. I despise the trend for every app to re-skin itself. If I want skins, I'll go get a program that does it for me. I personally prefer a simple UI that has perfect consistency with my expectation. Windows has its own common controls. MacOS has its own common controls. Swing has its own common controls. If you are using a Windows app and suddenly see a Swing-style tab list, it is a jarring experience. If you are using a Mac and encounter a Windows-style tab list, it is a jarring experience.

If you are using a system and experience exactly the expected UI elements there is zero mental work required. That is the ideal for most systems, yet sadly people feel the urge to get creative thereby meaning more work, more bugs, and more mental work for every user.


NORMAL ROUTE: Get help from an actual artist. Let them do that extra crap that helps slow down the system and gives the system less usability.

HARDER: Learn how to use art programs AND develop artistic talent. The simple curves and light are only part of it; you will need to understand how colors and textures interplay as well. You will need to understand the difference between just looking nice and also being functional, and find the intersection of the two.

Share this post


Link to post
Share on other sites
Yeah that kind of thing is a bit more suited for doing in photoshop or gimp. Also possible to do it in a 3D program then render the results. But there are some kinds of shadows and highlights you can do in inkscape. For example, say you have a square button. You want it to look like steel, so you make it gray. Then you edit the color to turn it into a reflected gradient. For a metallic look you can make the gray vary from a more purple or blue, through the original gray, through a brighter gray white, and back. Move the gradient around so the bright spot is off to one side, depending on what your desired light direction in the gui as a whole is. If you want you can rotate the gradient to make the shine go at an angle.

So now you have your basic buttone, whether it's a circle or a rectangle or what. But you want to make it look 3D, so you put a shadow around the edge. This most easily done by duplicating the image in place, then making the upper one smaller. The large one will now show just a bit around the bottom. Or you can do it the other way around: duplicate the image in place, draw a new shape outlining where you want the lower level to show through. Then use the path tools to subtract this shape from the upper layer. Either way, now adjust the color to make it darker, voila a shadow. This is a sharp-edged shadow, if you want a fuzzier one you have to use blur on the upper-level image.

Share this post


Link to post
Share on other sites
I don't know about 3D but the sparing use of a few gradients can make your interface appear less flat. For example the red button:
60677821.jpg

this is quickest way I found to do away with the flat look.

Share this post


Link to post
Share on other sites
Thanks you for your answers d k h & sunandshadow, I was hoping there would be a software that does that for me but I guess doing it in Photoshop or Gimp directly is the only possibility ATM. Il look into it and see if I have the skills.

Thanks you for your reply Frob, I absolutely agree with you when you say that it is likely that a graphic improvement such as the one I am seeking may improve the look at the cost of usability and performance. It help me question if my motives are founded. Maybe a "consistent" GUI is all what users of my software need.

Thanks a lot prh99 for helping me understand the mighty power of gradients. With just a little works I could make this plain GUI look a lot more interesting. Good job on that red button !

Share this post


Link to post
Share on other sites
Glad I could help. Pixel2life.com has tutorials for these kinds of effects for various software packages including Gimp, I am sure there are other sources as well. Play with it enough and you can probably start deconstructing images like the first one you posted to some degree and have an idea how the effects where achieved.

For example that bar along the bottom in said picture; one can reasonably duplicate it in Gimp using a sold background color and the HSV noise filter set to a value of roughly 13. Then applying a transparent to white Bi-linear Gradient and adjusting the layer opacity (probably should have raised the jpeg compression quality it's got a few artifacts). Not perfect, but not that bad either. :) Anyway hope this helps.

barcr.jpg

Share this post


Link to post
Share on other sites
Sign in to follow this  

  • Advertisement
×

Important Information

By using GameDev.net, you agree to our community Guidelines, Terms of Use, and Privacy Policy.

Participate in the game development conversation and more when you create an account on GameDev.net!

Sign me up!