DEV Community

Cover image for How I Built a Free Tool to Generate Play Store Screenshots 🎨
gleamso
gleamso

Posted on

1

How I Built a Free Tool to Generate Play Store Screenshots 🎨

Hey dev community! 👋

The Problem

As a developer, I've always found creating Play Store screenshots painful. Either spend hours in Figma/Photoshop or settle for basic screenshots. Neither option felt right.

The Solution

I built a simple tool that generates Play Store feature graphics in seconds - no design skills needed. Here's how it works:

Key Features

  1. Perfect Dimensions: Auto-exports at 1024x500px
  2. Templates: Start with professional layouts

Tech Stack

  • Next.js 14 (App Router)
  • TypeScript
  • shadcn/ui
  • Tailwind CSS
  • Sharp for image processing

Implementation Highlights

interface PlayStoreTemplate {
  id: string;
  name: string;
  category: 'game' | 'app' | 'business' | 'education';
  thumbnail: string;
  config: {
    background: BackgroundConfig;
    elements: PlayStoreElement[];
    safeZone: boolean;
    deviceFrame?: DeviceFrameConfig;
  };
}

interface PlayStoreElement {
  type: 'text' | 'image' | 'shape' | 'screenshot';
  id: string;
  props: {
    x: number;
    y: number;
    width?: number;
    height?: number;
    content?: string;
    style?: ElementStyle;
    constraints?: SafeZoneConstraints;
  };
}
Enter fullscreen mode Exit fullscreen mode

Try It Out

The tool is completely free: gleam.so

What's Next

  • More templates
  • Additional platforms
  • Advanced customization
  • API access

Let me know what features you'd like to see! Drop your suggestions in the comments 👇

Sentry blog image

The Visual Studio App Center’s retiring

But sadly….you’re not. See how to make the switch to Sentry for all your crash reporting needs.

Read more

Top comments (0)

Cloudinary image

Zoom pan, gen fill, restore, overlay, upscale, crop, resize...

Chain advanced transformations through a set of image and video APIs while optimizing assets by 90%.

Explore

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay