iOS App Store Screenshot Icon Generator in Python

Click image to view on GitHub

If you build native iOS, iPad mobile or desktop applications you know that you need to create screenshots for the App Store. This can be a tedious process, especially if you have a lot of screenshots to create. In this tutorial, we are going to build a Python script that will generate screenshots for the App Store.

Let's dive into how we can build this script.

Prerequisites and Dependencies

To run this Python script, you need:

1. Python 3.x installed
2. PIL (Pillow) for image manipulation
3. A TrueType font (in this example, Baloo-Regular.ttf)

Install Pillow with pip:

pip install pillow

The Python Script to Generate App Store Screenshots

• Create a new directory somewhere of your choice.

  mkdir app-store-screenshots

• Create a new file called generate_screenshots.py and paste the following code into it.

import sys
from PIL import Image, ImageDraw, ImageFont
from datetime import datetime


def round_corners(image, radius):
    mask = Image.new("L", image.size, 0)
    draw = ImageDraw.Draw(mask)

    draw.rectangle([(0, 0), (image.width, image.height)], fill=0)
    draw.ellipse([0, 0, radius * 2, radius * 2], fill=255)
    draw.ellipse([image.width - radius * 2, 0, image.width, radius * 2], fill=255)
    draw.ellipse([0, image.height - radius * 2, radius * 2, image.height], fill=255)
    draw.ellipse(
        [
            image.width - radius * 2,
            image.height - radius * 2,
            image.width,
            image.height,
        ],
        fill=255,
    )
    draw.rectangle([0, radius, image.width, image.height - radius], fill=255)
    draw.rectangle([radius, 0, image.width - radius, image.height], fill=255)

    image.putalpha(mask)
    return image


def add_to_canvas(canvas, image, x_offset, y_offset):
    canvas.paste(image, (x_offset, y_offset), image)


def resize_and_maintain_aspect(image, max_width, max_height):
    aspect_ratio = image.width / image.height
    new_width = min(max_width, int(max_height * aspect_ratio))
    new_height = min(max_height, int(max_width / aspect_ratio))
    return image.resize((new_width, new_height), Image.LANCZOS)


if len(sys.argv) < 4:
    print(
        "Usage: python script.py <path_to_original_image> <marketing_title> <marketing_tagline1> <marketing_tagline2>"
    )
    sys.exit(1)

original_file, marketing_title, marketing_tagline1, marketing_tagline2 = (
    sys.argv[1],
    sys.argv[2],
    sys.argv[3],
    sys.argv[4],
)

# Define the dimensions for each device
device_dimensions = {
    "iPhone_6_7": (1290, 2796),
    "iPhone_6_5": (1242, 2688),
    "iPhone_5_5": (1242, 2208),
    "iPad_Pro_6th_Gen": (2048, 2732),
    "iPad_Pro_2nd_Gen": (2048, 2732),
    ## Add more devices here
}

# Current time in YYYYMMDDHHMMSS format
timestamp = datetime.now().strftime("%Y%m%d%H%M%S")

# Loop through each device and generate the marketing image
for device, dimensions in device_dimensions.items():
    width, height = dimensions

    # Create a new canvas with the background color
    canvas = Image.new("RGBA", (width, height), "#1f1f1f")
    canvas = round_corners(canvas.convert("RGBA"), 100)
    draw = ImageDraw.Draw(canvas)

    # Load the Baloo font
    title_font = ImageFont.truetype("Baloo-Regular.ttf", 100)
    subtitle_font = ImageFont.truetype("Baloo-Regular.ttf", 60)

    # Center the marketing text
    title_w, title_h = draw.textsize(marketing_title, font=title_font)
    title_x = (width - title_w) // 2
    title_y = (200 - title_h) // 2  # Assuming the header area is 200px high

    subtitle1_w, subtitle1_h = draw.textsize(marketing_tagline1, font=subtitle_font)
    subtitle1_x = (width - subtitle1_w) // 2
    subtitle1_y = title_y + title_h + 15  # 15px below the title

    subtitle2_w, subtitle2_h = draw.textsize(marketing_tagline2, font=subtitle_font)
    subtitle2_x = (width - subtitle2_w) // 2
    subtitle2_y = subtitle1_y + subtitle1_h + 10  # 10px below the first tagline

    draw.text(
        (title_x, title_y), marketing_title, font=title_font, fill=(255, 255, 255)
    )
    draw.text(
        (subtitle1_x, subtitle1_y),
        marketing_tagline1,
        font=subtitle_font,
        fill=(255, 255, 255),
    )
    draw.text(
        (subtitle2_x, subtitle2_y),
        marketing_tagline2,
        font=subtitle_font,
        fill=(255, 255, 255),
    )

    # Open the original image and resize it while maintaining aspect ratio
    with Image.open(original_file) as img:
        max_height = height - 400
        img_resized = resize_and_maintain_aspect(img, width - 40, max_height - 40)

        # Round corners of the screenshot
        img_resized = round_corners(img_resized.convert("RGBA"), 100)

        x_offset = (width - img_resized.width) // 2
        y_offset = ((max_height - img_resized.height) // 2) + 400

        add_to_canvas(canvas, img_resized, x_offset, y_offset)

    # Remove alpha channel before saving
    canvas = canvas.convert("RGB")

    output_file = f"marketing_{device}_{timestamp}.png"
    canvas.save(output_file)

print("Images generated with marketing headers and saved.")

How It Works

The script takes an original image and layers it with marketing text to create device-specific screenshots. It performs several operations:

1. Rounding Corners: round_corners() function rounds the corners of an image.
2. Text Addition: Marketing titles and taglines are added to the canvas.
3. Image Placement: The original image is resized and placed on the canvas.
4. Saving: The final canvas is saved as a PNG file.

Customization

1. Canvas Color: Change the "#1f1f1f" in Image.new() to your desired background color.
2. Font: Replace "Baloo-Regular.ttf" with another TrueType font.
3. Device Dimensions: Edit device_dimensions dictionary to add/remove devices.
4. Text Position: Modify title_y, subtitle1_y, and subtitle2_y to adjust text positioning.

How to Use

1. Save the script as generate_screenshots.py.
2. Download or create a .ttf font file and place it in the same directory as the script.
3. Place the original image in the same directory.

Run the script:

python generate_screenshots.py original.png "My App" "Best App Ever" "Download Now"

Benefits

1. Automated: Generate multiple screenshots with a single command.
2. Consistent: Ensures uniformity across all device-specific screenshots.
3. Efficient: Reduces manual effort and human error.

Results

Once the script is run, it will generate PNG files in the format marketing_{device}_{timestamp}.png and they will look like this:

Click image to download Confetti Clock for iOS

I hope this post helps you speed up your iOS App Store screenshot creation process. If you have any questions or comments, please contact me!

Happy coding!

Supporting My Work

Please consider Buying Me A Coffee. I work hard to bring you my best content and any support would be greatly appreciated. Thank you for your support!

Eric David Smith

Father / Software Engineer / Musician / Entrepreneur