Jump to content
AVIC411.com
jverz

Fixing squish on custom backgrounds / splash screen

Recommended Posts

I didn't find much for instructions on making custom backgrounds.  So, if this is redundant I apologize.  But, it's actually instruction on fixing the aspect ratio for your backgrounds.

 

Model: AVIC-8000NEX

Problem: Backgrounds appear stretched

Cause: Display pixels are not 1:1 ratio
Resolution: Squish image in the opposite direction before upload

 

Pretty much the first thing I did after installing my stereo was change the splash screen.  I wanted the Nissan hamburger logo to load when I turned my car on.  Unfortunately, that nice circular logo was showing up as an oval.
post-34332-0-44995900-1423242166_thumb.jpg

 

Quick math led me to realize that the screen being 800x480 pixels was  5:3 (~1.67) ratio when the actual screen size is advertised 16:9 (~1.78) ratio.  This means the pixel ratio is not 1:1 like it is on my computer screen. So, what I saw while designing the wallpaper was not what would show on the stereo.  I assumed the software would automatically size the image properly as it does a video stream. But, I was wrong.  The fix is easy if you have image editing software like Photoshop; and the method will work for any display where this is an issue.

Step 1: Find the native resolution of the screen: The AVIC-8000NEX is advertised to be 800x480 pixels.

post-34332-0-24511400-1423237781_thumb.jpg

 

Step 2: Measure the size of the screen: (you can skip this step if you already know the ratio):  Measure the width and height of the image on the display, not just the outer edge of the screen. You're trying to account for the difference in pixels. Using my scale ruler I got 12.3 x 6.4 (12/24 in) which measures out to 6.15 x 3.2 (in). The actual measurements aren't important. Just the ratio, so keeping the numbers in scale is just fine. Use whatever method or units you find to be the most accurate.

post-34332-0-99329700-1423237809_thumb.jpg

 

Step 3: Calculate actual aspect ratio of the display: Surprise! The AVIC-8000NEX is not 1.78 ratio. It's closer to 1.92. This explains why the first time I tried this adjustment based on the advertised 16:9 ratio, the image was still not quite square.  That's what happens when you assume.

 

Step 4: Design or crop your image to the ratio you measured: I always make wallpapers at the native resolution of the display.  I don't trust leaving it up to the OS to scale them.  Since the actual ratio is WIDER than the image ratio, I make my image 480 pixels high (the height of the native resolution), and (480 * 1.92 = ) 922 pixels wide.  If the actual ratio is TALLER than the image ratio (say, 3:2 for example), then, base your dimension on the width.  800 pixels wide by (800 times 2/3 = ) 533 pixels high.

post-34332-0-12830000-1423241380_thumb.jpg

Step 5: Re-size (scale, don't crop) the image to the native resolution of the screen: In this case, 800x480.  It should look distorted on your computer.

post-34332-0-16790600-1423241416_thumb.jpg

 

Now, upload the image to your stereo and see how it looks.  If you measured correctly, you should have a perfectly non-distorted image.

 

Update:

I found in another thread that the physical measurements of the AVIC-8000NEX screen are 156.6 × 81.6 (mm).  Thank you, jhren.  So, base your original artwork at 921x480 pixels. My measurements were 1 pixel off. ;)

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×