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

gleamso

gleamso

Posted on November 24, 2024

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 👇

💖 💪 🙅 🚩
gleamso
gleamso

Posted on November 24, 2024

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related