DPI & Bezels

[AviateArtiste]

Hi all. I am a commercial pilot that also runs a small flight simulation business. In addtion to hardware design and fabrication I also dabble in virtual panel design (for instrumentation) I have succesfully done this in the past just using MS Paint as my needs are really basic but Im ready to spread my wings into something more advanced and greatly appreciate the free availability of Paint.net.

Below is a brief checklist of what I need to accomplish as this is my standard modus operandi for all of my panel design work.

#1 -- In the past my routine has been to build a 24-bit bitmap backdrop that is typically sized to a pre-set monitor resolution such as 1680 x 1050 for example. This can then be used on any various 16:10 ratio LCDs from say 19" up to 24" . A key drawback to this however is that I have never gotten to a point of actually being able to design panels and the gauge bezels from the outset on a true 1:1 scale.

I'd now like to start with the real exact size and then "back-export" to 16:10 so that if it gets used on a 24" then it is in full 1:1 scale but if a customer has 20" LCDs then it is still properly scaled but obviously the gauges will be a little smaller than real world. (which is fine.. as I just want to offer true 1:1 scale for anyone using using a 24" LCD)

FYI simulation gauges themselves are separate C++ or XML code with 1 to 100 of their own imbedded bitmaps and then the cohesive set of bitmaps and code act as a single gauge which then gets placed onto the main panel 'backdrop" image with another program. This part I am very experienced in.

Anyway, I have recently decided that I really want to work at full 1:1 scale using 24" 16:10 LCDs. as using two 24" monitors side by side yields the average size of a general aviation panel (like in a Cessna 172 for example). Likewise, using three 24" LCDs with the middle one turned sideways yields the average full scale size of a jet panel. This is actually how I roll but I design all types having built over 40 panel sets already.

As an example, a standard round gauge like an airspeed indicator in any aircraft is 3" in diameter and you typically have six to twelve of these circular type gauges in front of the pilot (in an analog GA aircraft) So, I guess what I'm getting at here is I think I would like to start with a base layer that I would call "the panel backdrop" that is sized in MM or Inches (rather than pixels) to the exact height and width screen size of a 24" 16:10 LCD. This will yield something like 13" tall x 20" wide.. (don't know exactly yet as my LCDs will arrive next week). So while it will be 16:10..it would instead be initailly sized in MM or inch.

#2 -- Once the base layer is appropriately sized, I then need to color it (light grey, or dark grey, or tan, etc. ) and then once colored I would also like to add a slightly mottled texture to give it a little depth and realism apart from just a solid color. I have no idea how to do this with Paint.net (and it can't be done with MS Paint).

#3 -- I then need to create a second layer (or more) and create perfect circles that are the exact 3" inch size I mentioned before so that when rendered on the 24" monitor it would yield the very real world like 1:1 size ratio. Again, I do not know how to do this and I need to make say six to ten of these and then move them into their apporpriate position. I will also need to make some smaller circles like 2" wide and then a few smaller rectangles like 1" x 1.5" for things like fuel and oil gauges, voltmeters, etc. These could all be on the same layer or layer 3 or 4 or 6 etc. In some designs (like for jets) I will need to make larger squares (say 6" x 6") for jet glass displays and would likely want to then create their own bezels on a separate layer.

I had played around with this the other day and was essentially able to make 3" a circle on a second layer using the inch ruler on the layer border but I could not figure out how to then grab the whole circle and move it around to the final position I liked. Again, I need to do this six to twelve times on one layer or maybe create a separate layer for each gauge. (although that sounds like a little of a hassle) Lastly, in case I wasn't clear earlier, these will all just be colored plain back as once each shape is in the final position they are simply providing a reference point and size as to where I then drop the real gauge onto / over the image. What is not provided however is added shading nor perspective of relief, embossing, etc to the edges and perimeters of these shapes. So...

#4 -- Once the black circles, squares, rectancles, etc..are all set in their final positions I would then like to create some shadows and shading around them and possibly create a look of some of them sitting up off the layer 1 panel backdrop or possibly look a little recessed down into the layer 1 panel.

Other than that...that is about it. Im sure this process is much simpler than what most people use Paint.net for but I'm just a noob here.

#5 -- Lastly, I must them export all the layers into a single bitmap image (sized at 16:10 / 1680 x 1050) and then I use the other program mentioned earler to create a config code file which places all the C++ or XML gauges onto (or rather over) the backdrop. At some point I may also want to create some artwork for gauges themselves as I have done this before with MS Paint but all that is a little more tricky and I am only a novice when it comes to virtual gauge design. I have made some smashing autopilots though!

Any and all help would be greatly appreicated and please list out the steps in a checklist fashion as that is how my aviating brain works best.

Regards, -- Jeff.

Edited April 28, 2012 by Ego Eram Reputo

[Ego Eram Reputo]

This is not a tutorial, so does not belong in the Tutorials section of the forum.

<moved>

To achieve what you're after, you need to have an understanding of the image's DPI setting. The reason for this is that dimensioning an image in mm or inches is not the only factor that determines the size.

Example:

An image 400px x 600px is 4 inches by 6 inches when viewed at 100dpi.

The same image covers just 1 inch by 1.5 inches when printed at 400dpi.

If you work is only ever going to be viewed on a screen, you can reasonably assume that the DPI of the screen will be 96. If your screen is 24 inches wide, then thats 24x96=2304 pixels wide.

This excellent tutorial by David.Attwell is well worth reading: http://forums.getpaint.net/index.php?/topic/17049-dpi-and-you-understanding-resolution-for-print-and-web/

To change the size and dpi settings of an image you need to use the Resize or Canvas Size dialogs: http://www.getpaint.net/doc/latest/ImageMenu.html

[AviateArtiste]

Ahh yes.. sorry, Im glad you moved it to the proper bin. 96dpi is indeed fine I will read those tutorials..

The LCD screen I will use is not 24" wide. All LCD screens are measured diagonally and this length changes with different screen displays resolutions (4:3, 16:9, 16:10 etc..) http://en.wikipedia.org/wiki/File:Vector_Video_Standards4.svg

So Im looking for what will work best with a 24" 16:10 ratio LCD. Generally speaking the max pixel resolution is either 1680 x 1050 or 1920 x 1200. I can set the background to either of these at 96dpi. This was already the basic plan.

My second question is how to create a textured look on that backdrop once I paint it a solid color and then secondly on another layer how do I create a circle that is exactly 3" wide. (or other objects to an exact size. I guess it may seem like a stupid question but I just want to make sure that I do this right the first time. I tried using Frosted Glass but it does nothing on a solid colored backdrop. Does the effect need to be on its own layer?

[Ego Eram Reputo]

Re: textures. Try here: http://forums.getpaint.net/index.php?/forum/28-textures/

#2. When you drag out a shape, the status bar at the bottom of the screen shows the size of the shape. Set the units via the Tool Bar.

[AviateArtiste]

Ok, so I got a background set up via the Canvas Size option. I selected By Absolute Size, 96dpi and 1920 x 1200 which yielded a Print size of 20" x 12.5" which seems fine as my current 22" 16:10 LCDs are a little smaller than this.

I then created a second layer, named it "gauge bezels" and created a single circle that is 3.00" x 3.00" exactly by using the size reference (in inches) at the lower left of the screen. Before this I had been looking for some sort of addtional dialog box to set the exact size as I am used to doing it that way with a 2D architectural program I use.

So.. I then colored the circle to near black., I then chose the elliptical selector tool, selected the circle, went up to edit, copy, and then pasted five more circles onto the same layer. At first I thought I'd done something wrong as I thought it would paste the new image in the top left corner like regular MS Paint does instead of pasting the copy directly over your original image.. (kind of counter intuitive to me but I figured it out. I then used the ellipse selection tool to reselect each one and the top right pointer to move them into a final position. Houston, ..we have liftoff.

Now I just need a directional steer on how to make some shading / shadows on each one around the entire circumference of each circle as well pull the shading down a little more at the bottom of the circles. Secondly, can shading like this be done to all obects on a layer at once or must I do it to one object (in my case circles) at a time? ...and should this shading be created on a separate layer?

Again, thanks for the help!

Edited April 27, 2012 by AviateArtiste

[Ego Eram Reputo]

These are bezels right? Have a look here:

I've always been impressed with how the surround of these Interface Orbs look just like a bezel.

[Ego Eram Reputo]

^^ Bezel heaven!

BTW I'm renaming this thread with a more descriptive title.