Jump to content


Photo

Fixing squish on custom backgrounds / splash screen

back background wallpaper splash splash screen ratio aspect ratio stretch square distort

  • Please log in to reply
No replies to this topic

#1 jverz

jverz
  • Members
  • 2 posts

Posted 06 February 2015 - 05:00 PM

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.
Attached File  wallpaper-splash-923x480.jpg   56.63KB   10 downloads

 

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.

Attached File  instruction_001.jpg   16.64KB   6 downloads

 

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.

Attached File  instruction_002.jpg   16.45KB   5 downloads

 

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.

Attached File  wallpaper-splash-922x480.jpg   37.99KB   8 downloads

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.

Attached File  wallpaper-splash-800x480.jpg   53.39KB   9 downloads

 

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. ;)







Also tagged with one or more of these keywords: back, background, wallpaper, splash, splash screen, ratio, aspect ratio, stretch, square, distort

0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users