generate a custom background image for the dmg installer with drag instructions

Author: Sayitobar

.github/actions/create-dmg/action.yml

@@ -21,6 +21,15 @@ runs:
       run: |
         brew install create-dmg
 
+    - name: Set up Python
+      uses: actions/setup-python@v5
+      with:
+        python-version: '3.x'
+
+    - name: Install dependencies
+      shell: bash
+      run: pip install Pillow
+
     - name: Stage app for DMG
       shell: bash
       run: |
@@ -30,7 +39,12 @@ runs:
         cp -R "${{ inputs.app_path }}" "dmg-stage/CopyShot.app"
         ln -s /Applications "dmg-stage/Applications"
 
-    - name: Create drag-to-Applications DMG
+    - name: Generate background image
+      shell: bash
+      run: |
+        python3 .github/actions/create-dmg/scripts/generate_background.py "dmg-stage/background.png"
+
+    - name: Create polished drag-to-Applications DMG
       shell: bash
       run: |
         set -euo pipefail
@@ -41,8 +55,9 @@ runs:
         # Window and icon sizes/positions are in pixels.
         create-dmg \
           --volname "${{ inputs.volname }}" \
-          --window-pos 200 120 \
-          --window-size 700 450 \
+          --background "dmg-stage/background.png" \
+          --window-pos 400 300 \
+          --window-size 700 500 \
           --icon-size 140 \
           --icon "CopyShot.app" 180 225 \
           --icon "Applications" 520 225 \

.github/actions/create-dmg/scripts/generate_background.py

@@ -0,0 +1,53 @@
+#!/usr/bin/env python3
+import sys
+from PIL import Image, ImageDraw, ImageFont
+
+def create_background(output_path):
+    width, height = 700, 500
+    background_color = (240, 240, 240)  # Light gray
+    arrow_color = (100, 100, 100)       # Dark gray
+    text_color = (80, 80, 80)           # Darker gray
+
+    # Create image
+    img = Image.new('RGB', (width, height), color=background_color)
+    draw = ImageDraw.Draw(img)
+
+    # Coordinates
+    icon_y = 225 + 70  # Center of icon (roughly)
+    start_x = 180 + 70 + 20 # Right edge of app icon
+    end_x = 520 - 20        # Left edge of Applications icon
+    
+    # Draw arrow
+    # Line
+    draw.line([(start_x, icon_y), (end_x, icon_y)], fill=arrow_color, width=4)
+    # Arrowhead
+    arrow_head = [(end_x, icon_y), (end_x - 15, icon_y - 10), (end_x - 15, icon_y + 10)]
+    draw.polygon(arrow_head, fill=arrow_color)
+
+    # Add text
+    text = "Drag CopyShot to Applications"
+    try:
+        # Try to use a system font
+        font = ImageFont.truetype("/System/Library/Fonts/Helvetica.ttc", 24)
+    except IOError:
+        # Fallback to default if system font not found (e.g. on Linux runner)
+        font = ImageFont.load_default()
+    
+    # Calculate text position (centered above arrow)
+    text_bbox = draw.textbbox((0, 0), text, font=font)
+    text_width = text_bbox[2] - text_bbox[0]
+    text_x = start_x + (end_x - start_x - text_width) // 2
+    text_y = icon_y - 40
+    
+    draw.text((text_x, text_y), text, fill=text_color, font=font)
+
+    # Save
+    img.save(output_path)
+    print(f"Background saved to {output_path}")
+
+if __name__ == "__main__":
+    if len(sys.argv) < 2:
+        print("Usage: generate_background.py <output_path>")
+        sys.exit(1)
+    
+    create_background(sys.argv[1])