How I Built a Free Tool to Generate Play Store Screenshots 🎨
gleamso
Posted on November 24, 2024
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
- Perfect Dimensions: Auto-exports at 1024x500px
- 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;
};
}
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
Posted on November 24, 2024
Join Our Newsletter. No Spam, Only the good stuff.
Sign up to receive the latest update from our blog.