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 πŸ‘‡

Image of Datadog

How to Diagram Your Cloud Architecture

Cloud architecture diagrams provide critical visibility into the resources in your environment and how they’re connected. In our latest eBook, AWS Solution Architects Jason Mimick and James Wenzel walk through best practices on how to build effective and professional diagrams.

Download the Free eBook

Top comments (0)

Image of Docusign

πŸ› οΈ Bring your solution into Docusign. Reach over 1.6M customers.

Docusign is now extensible. Overcome challenges with disconnected products and inaccessible data by bringing your solutions into Docusign and publishing to 1.6M customers in the App Center.

Learn more