UI Panel - how to do it ?

[semar]

Dear all,

I would like to draw an UI-Panel like the one in the picture (right side), from within the player can choose units. I'm quite new about Paint.net, and what I really need is someone that takes my hand and point me toward the plugins/techniques I could use in order to make such a panel, such bevel, emboss, buttonize, gradient, and the likes.

Right now I can design it with the shape tool, but the result is waaay far from what I would like - it should not be exactly the same, but at least be appealing.

Any help would be greatly appreciated.

Thanks in advance for your attention,

Sergio

My (miserable) attempt:

 

Edited April 26 by semar

[Pixey]

You would first have to learn how to use/write code.  Please read here:  https://boltbait.com/pdn/CodeLab/help/tutorial.php

[semar]

Thanks Pixey for your answer, but I think there is a misunderstood.. why should I learn how to code a plug-in ? This is not my target at the moment.

I just need some hint on about how to draw a panel like that in the first picture, and use some plug-in to better accomplish such a task..

 

Sorry if my question was not clear enough.

 

My goal is to draw a panel that resembles the one in the picture ( is a screenshot of the game "Command and Conquer" ).

Actually I'm developing a similar game, and I would like to learn how to use Paint.net and its plugins, in order to draw a panel like that 😉

Edited April 26 by semar

[Pixey]

1 hour ago, semar said:

My goal is to draw a panel that resembles the one in the picture ( is a screenshot of the game "Command and Conquer" ).

 

Ahh - I thought you wanted to make a plugin image/interface. 

 

If you are looking on how to make buttons, there is a tutorial here.

The PDF should still have the original pictures intact.

 

It may be a good idea to take a look in the Tutorials thread, on how to make things using Paint.net

 

 

[Ego Eram Reputo]

Hi Sergio,

 

I'd start with the image size.

1. What will the image dimensions be?
2. Are you making a one-to-one replacement for the panel shown in the image, or do you have a different size in mind?
3. Is the image going to be viewed on a screen or printed out. Both?

[Apollo702]

Keep some things in mind:

 

PDN comes with a bunch of tools built in and there are gobs of plugins that give it some massive firepower!

 

Learn to get good with them- and as others above^ have indicated, there are plenty of good tutorials to get everyone up and running. Once you get the knack of it, it is possible to get lightning fast at art and have some serious fun fun fun while doing it!

[semar]

Thanks all for the kind suggestions so far.

Learn by doing is the key, I guess I have to "try" out each plugin and see what it makes.

@Ego Eram Reputo:
1 image size not yet set, however it should fit right on the screen. It will be shown and hidden by using a key (I'll probably use the tabulator for this purpose).

2 no, it can be any size, fact is, I don't have a lot of assets right now, that have to be organized in such a panel, at least at this development stage. I *guess* a 3X4 grid would be fine. The original "size" ( 3x6 ) has the advantage, that I could in the future "insert" new objects in it, like buildings, tanks, and the like.

3 the image will only be viewed on the screen, like in the original game.

And now it's time to be creative 😉

Have a nice day,
Sergio

Edited April 30 by semar

[semar]

Work in progress:

[Ego Eram Reputo]

Nice!! I really like your palette.

 

Something looks a little 'off' with the bevel of the grey space. I'd try removing (or reducing) the bevel on the right & bottom edges. Also, if these are intended as shadows, try softening the corners.

 

 

 

[semar]

Thanks Ego Eram Reputo for your kind comment - and thanks Rick Brewster too !

These feedbacks are for me a source of motivation. Sometime I have the feeling that I'm just scratching the surface with PdN, and such comments - from you experts -  help me to go ahead and learn further. Appreciated 🙂

Yes indeed, I guess I made something wrong with the Inner Shadow plugin. Actually, I wanted to apply a shadow to all the 4 sides, in other terms I wanted to show a "computer monitor", which has usually the borders ( the frame ) "beveled", while the flat screen is "inset", if you get what I mean (sorry for the convoluted description ).

That area should show a miniaturized playfield of the whole map sent from a satellite, that's why it should resemble a "display monitor".

Since I don't know how to accomplish this effect, I though that by applying the shadow twice (once up left and then bottom right) should suffice, but I did perhaps some mistake.

Thanks for pointing this out !

 

Quote

try softening the corners

I guess there's a plugin for that ? Or a tutorial ? It's time to research.. 😉

 

By the way, it would be nice when a saved project (  .pdn ) could retain all the history activities made before. That way I could always follow/inspect what was done before and with which plugins, in order to replicate the artwork from the beginning. For this purpose I'm using an extra layer where I write notes about the plugins used, but that is a bit cumbersome.. 

 

Anyway.. the more I use Paint.net the more I like it. It's realy very powerful.

Edited May 1 by semar

[Tactilis]

1 hour ago, semar said:

For this purpose I'm using an extra layer where I write notes about the plugins used, but that is a bit cumbersome.. 

That works and does keep the notes in the .pdn file with the rest of the project, but as you say, it is cumbersome.

IMO, it's much easier to write notes in a separate .txt file or a Word .docx document that you name the same as the .pdn and save to the same folder.  If you use a Word file you can also include snippets of the image to help illustrate the steps you took.

[semar]

10 minutes ago, Tactilis said:

IMO, it's much easier to write notes in a separate .txt file or a Word .docx document that you name the same as the .pdn and save to the same folder.  If you use a Word file you can also include snippets of the image to help illustrate the steps you took.

Thanks Tactilis, that's indeed a good idea !

[Ego Eram Reputo]

On 5/2/2024 at 7:27 AM, semar said:

Actually, I wanted to apply a shadow to all the 4 sides, in other terms I wanted to show a "computer monitor", which has usually the borders ( the frame ) "beveled", while the flat screen is "inset", if you get what I mean (sorry for the convoluted description ).

That area should show a miniaturized playfield of the whole map sent from a satellite, that's why it should resemble a "display monitor".

 

Let's unwrap this a bit. I'll try to explain what I'm seeing and what I'd try.

 

 

 

Ignoring the small inset square for the moment, the rest of the panel has three parts which are at different heights:

1. Main body
2. bevelled surround of the grey panel - this is higher than the body
3. grey panel is inset (lower) than the body

Assuming the lighting is illuminating the scene from top left, we can apply highlights to all raised edges facing the light. Similarly, apply darkening to the edges facing away from the light. Bevel Object plugin is great for this!

 

Those raised pieces will cast shadows from the darkened edges. Use Drop Shadow to create these. Remember these shadows are cast away from the light source and are soft-edged. The thicker the object, the longer the shadow should be.

 

The grey panel will only have shadows cast on it by the body and raised bevel. It will create no shadows of it's own.

 

Final assembly

 

I've over-emphasised these for demonstration purposes. You will want to apply the effects much more subtly.

 

If you create your elements each on their own layer, applying the same effect to multiple items is a breeze. I used the same drop shadow settings for the bevelled surround and the body, but applied the effect twice to the body (assuming it was twice as thick).

[semar]

Hello Ego Eram Reputo,

thousend thanks for this mini tutorial, I'll study it and let's see how further I come.

Very nice of you - really appreciated 😀

 

Have a nice weekend,

Sergio

[semar]

Getting there..

However, the color-palette is not yet the right one. I wanted olny share my progress 😉

 

 

Edited May 7 by semar

[Ego Eram Reputo]

Suggestion: Try light-blue & dark-blue bevels on the raised panel. Light: 107,222,255. Dark: 18,74,114. Then play with the strength and depth settings until it is optically difficult to see the transition from one color to another.

[semar]

Hello Ego Eram Reputo,

these are the gems that make the difference !

 

Many Thanks for your tip - and your time 🙂 - , I'll definately try out your suggestion.

Best regards,
Sergio.