Scharf Beobachtet

Tech Know How

App Store Screenshots automatisch pixelgenau resizen

2021-12-14 18:25:16

Wer kennt es nicht, man hat eine App erstellt und die soll nun in den Store.

Da gilt es natürlich, zu dem Build upload noch allerhand an Einstellungen vorzunehmen.

Der aus meiner Sicht nervigste Punkt sind aber immer die Screenshots. Für Android und Ios benötigt man unterschiedliche, bei Ios geht es sogar nich granularer zu.

Collage von App Screenshots - zusammengeführt
Besonders nervig zu erstellen – Collage von App Screenshots – zusammengeführt

Gibt’s das nicht was von Python? Ja klar! Hier nun ein Skript, wo man Screenshots aus seinen Apps nur in bestimmte Verzeichnisse ablegen muss, und daraus die korrekten Größen resized werden.

Aufgeteilt ist das ganze dann in mehrere Code-Snippets. Angefangen mit einer Konfigurations-Datei, die Pfadnamen und zu erstellende Bilder und Verzeichnisse beinhält.

device_configuration.py

input_path = 'input/'
output_path = 'output/'

configurations = {
    'Android-App-Icon': {
        'sizes': (512, 512)
    },
    'Android-Vorstellungsgrafik': {
        'sizes': (1024, 500)
    },
    'Android-Phone': {
        'sizes': (1080, 1920)
    },
    'Android-Tablet7': {
        'sizes': (1200, 1920)
    },
    'Android-Tablet10': {
        'sizes': (1800, 2560)
    },
    'Iphone-6.5': {
        'sizes': (1242, 2688)
    },
    'Iphone-5.5': {
        'sizes': (1242, 2208)
    },
    'IpadPro-12.9': {
        'sizes': (2048, 2732)
    }
}

Hier die Datei mit allen Funktionen, zum Verzeichnisse erstellen oder Bilder aufbereiten.

folder_creator.py

import glob
import os


def get_list_of_apps(base_path):
    list_of_apps = []
    for file in os.listdir(base_path):
        d = os.path.join(base_path, file)
        if os.path.isdir(d):
            list_of_apps.append(d.replace(base_path, ''))
    return list_of_apps


def provide_app_device_folders(app_name, configurations, base_path):
    for config in configurations:
        check_make_folder(base_path + app_name + "/" + config)


def check_make_folder(path_to_folder):
    if not os.path.exists(path_to_folder):
        os.makedirs(path_to_folder)


def images_from_path(path_to_folder):
    path_to_folder = path_to_folder + "/*.png"
    image_list = []
    for filename in glob.glob(path_to_folder):
        image_list.append(filename)
    return image_list

Einfach mit dem Skript Das Verzeichnis mit dem App Namen anlegen und dann den Generator durchlaufen lassen.

Erstellte Verzeichnisse für App und Devices
Erstellte Verzeichnisse für App und Devices

add_app.py

from device_configuration import configurations, input_path
from folder_creator import provide_app_device_folders

print("Für eine neue App wird der Name benötigt, in dem dann Unterverzeichnisse angelegt werden")
app_name = input("Name der neuen App: ")

print("app_name: " + app_name)

provide_app_device_folders(app_name, configurations, input_path)
Hier erstellte Vorstellungsgrafik aus einzel Screenshots
Hier erstellte Vorstellungsgrafik aus Einzel-Screenshots

Zum Schluss noch die eigentliche Generator-Datei.

image_generator.py

from PIL import Image

from device_configuration import configurations, output_path, input_path
from folder_creator import check_make_folder, images_from_path, get_list_of_apps, provide_app_device_folders

check_make_folder(output_path)

list_of_apps = get_list_of_apps(input_path)


def generate_image(file_name, size, increment, output_path, app_name, config):
    image = Image.open(file_name)
    w, h = size
    resized_image = image.resize(size)  #
    new_image_path = output_path + app_name + "/" + config + "/Screenshot-" + config + "_" + str(w) + "x" + str(
        h) + "_" + str(increment) + ".png"
    resized_image.save(new_image_path)


def generate_collage(list_of_images, size, output_path, app_name, config):
    increment = 0

    collage = Image.new(mode="RGB", size=size, color=(255, 255, 255))
    offset_left = 20
    for file_name in list_of_images:
        image = Image.open(file_name)
        w, h = size

        calc_h = h - 20
        hpercent = (calc_h / float(image.size[1]))
        calc_w = int((float(image.size[0]) * float(hpercent)))
        resized_image = image.resize((calc_w, calc_h))
        new_image_path = output_path + app_name + "/" + config + "/Layered-" + config + "_" + str(w) + "x" + str(
            h) + "_" + str(increment) + ".png"
        resized_image.save(new_image_path)

        offset = (offset_left, 10)
        offset_left = offset_left + 20 + calc_w
        collage.paste(resized_image, offset)
        increment += 1

        if increment >= 3:
            break

    collage_image_path = output_path + app_name + "/" + config + "/Collage.png"
    collage.save(collage_image_path)


for app_name in list_of_apps:
    provide_app_device_folders(app_name, configurations, output_path)
    for config in configurations:

        app_config_path = input_path + app_name + "/" + config
        list_of_images = images_from_path(app_config_path)
        if config == "Android-Vorstellungsgrafik":
            generate_collage(list_of_images, configurations[config]['sizes'], output_path, app_name, config)
        else:
            counter = 0
            for image_path in list_of_images:
                counter += 1
                generate_image(image_path, configurations[config]['sizes'], counter, output_path, app_name, config)

print("done")

Herrlich, was für eine Arbeitserleichterung!

Ausgeführt dann so:

python add_app.py
python image_generator.py
Zurück