Proper Image Canvas Ratio

In order for your chosen overlay to avoid looking squished or stretched the canvas size for your overlay image must match the “usable” chat area in Kik. It is important to do this without resizing the elements contained within the image, but only change the canvas size itself. While this walk-through will focus on how to do this on a mobile Android device, the same task can easily be done on a computer by using the appropriate software (such as the Gnu Image Manipulation Program).

NON-TRANSPARENT IMAGES
If you make use of an image without transparent areas then you can save the image as JPG or PNG. Non-transparent images will cover over the entire usable chat area. 

TRANSPARENT IMAGES
If you use an image with transparency then you MUST save it as PNG. While images with transparencies still cover the entire usable chat area, the transparent elements enable you to see the chat’s natural background underneath your overlay image. 

NEEDED FOR THIS WALK-THROUGH:

• Internet access
• APP: Photo Editor
• The ability to read and some common sense
   

1. USABLE CHAT AREA
            
   Determine your resolution for the usable chat area on your device. The usable chat area is the part inside a chat group that scrolls, and it excludes elements such as the group title bar at the top and the buttons and text box at the bottom.
   1. On your device take a screenshot from inside a group, and crop the screenshot to only include the scrollable area.
   2. Use any image viewer on your device that will report the dimensions of the screenshot image.
       
2. ASPECT RATIO
    
   Go to https://toolstud.io/photo/aspect.php and enter in the resolution reported in step 1.2 and press the Calculate! button. This will provide you with a number of details. For the purposes of this walk-through we are only interested in the Aspect Ratio. Different devices may have different ratios.
    
3. DISCOVER NEEDED CANVAS SIZE
   Most mobile devices have a portrait orientation. This means we would leave the width size as is and adjust the height to allow the canvas size to match our desired aspect ratio. For landscape orientated devices you would instead adjust the width. 
   1. If you don’t already have the dimensions for your desired overlay image, use the same app as in step 1.2 to get them.
   2. Enter the image resolution into the width & height fields from the website in step 2 and press the Calculate! button. Take note of the Aspect Ratio.
   3. Adjust the height by increasing or decreasing the numbers until the same ratio as in step 2 has been found. Then use those width & height dimensions as the canvas size for your overlay image.
       
4. CHANGE IMAGE CANVAS SIZE
   Armed with the correct canvas resolution that matches the ratio needed for the overlay image, it is time to change the image canvas size without resizing the existing elements within the image.
    
   1. Open Photo Editor and then open the image that will be edited.
      
       
   2. Scroll the bottom toolbar to the right until you see the button labeled Fit. Press it.
      
       
   3. Press the background color button.
      
       
   4. Verify the Opacity slider is all the way to the left to make it transparent, then press OK.
      
       
   5. Notice the white border around the image. That is the canvas edge. Select the edit icon (pencil inside a box).
      
       
   6. Enter the width & height from step 3.3 and press APPLY. The canvas size will be changed without resizing the other elements within the image.
      
       
   7. Notice the white border has been changed. The canvas edge has been extended while keeping the elements centered. Press the checkmark to accept the change.
      
       
   8. Press the save logo.
      
       
   9. Select PNG as the file type and then choose a save method (Save As,  Save As (Storage),  or Overwrite).
         
      1. Change location if desired.
      2. Change file name if desired.
      3. Then press SAVE.

Done.
If you followed the instructions correctly your overlay will be perfectly proportioned. It is normal behavior for it to get pushed while the keyboard is open. The point is to have a proper image while scrolling the chat.
Lock-n-load your newly unsquished overlay image.