Snap-perfect Story mockups without opening Snapchat
Snapchat Stories have a distinct look, the username overlay at the top, the timer bar, the bitmoji-style avatar, and that characteristic full-screen vertical format. Recreating this in Photoshop takes thirty minutes of layer positioning. This tool does it in thirty seconds.
Set up your username, pick a background color or upload an image, add overlay text, and configure the viewer count and story timer. The canvas renders everything in Snapchat’s exact layout, progress bar segments at the very top, username info below it, your content in the center, and the swipe-up prompt at the bottom.
Creating your Story
The background is your canvas. Pick a solid color like Snapchat’s signature purple (#2D1B69) or upload a photo. Photos fill the entire screen, just like camera snaps do in the real app.
Add overlay text and position it vertically using the slider. You control the font size, text color, and whether the text has a background highlight (that semi-transparent dark box Snapchat puts behind text). Move the text anywhere between the top and bottom of the screen.
Set the username and timestamp (“2h ago”), these appear in the top-left corner with the avatar circle. The story progress bar at the very top shows your segment count and which segment is currently active.
At the bottom, the “Swipe up” area can be toggled on if you need to show a link prompt. This matches Snapchat’s call-to-action for stories with attached links.
Where these mockups shine
Social media marketers planning Snapchat campaigns. Show clients exactly what their Story ad or branded content will look like before spending any ad budget. The mockup communicates the visual impact instantly.
UI/UX designers referencing Snapchat’s Story format for their own apps. Story-style interfaces are everywhere now, Instagram, YouTube Shorts, LinkedIn Stories. Having an accurate Snapchat reference helps nail the proportions and layout.
Educators creating social media literacy materials. Show students what Snapchat Stories look like without needing actual accounts or worrying about inappropriate content appearing in real screenshots.
Meme creators and content producers making “POV” or scenario-based content. Snapchat Story frames add context and authenticity to hypothetical situations.
Getting the details right
The progress bar at the top uses Snapchat’s exact segment math, thin white bars separated by tiny gaps, with the active segment highlighted. The inactive segments are semi-transparent white.
Username display includes the avatar circle (colored with initial by default, or your uploaded image) plus the username text and “Xh ago” timestamp. The font matches Snapchat’s bold sans-serif style.
Overlay text with the background highlight option renders that rounded rectangle behind the text, matching the semi-transparent black box (#00000080) Snapchat uses. Without the highlight, text appears directly on the background.
The swipe-up chevron and “More” text at the bottom use Snapchat’s animated bounce position. In the static mockup, it appears in its resting state.
Output dimensions are 390x844 pixels, a standard phone viewport that looks natural as a screenshot.
FAQ
Can I upload a photo as the Story background? Yes. Click the image upload area to use any photo as the full-screen background. The overlay text, username, and controls render on top of it.
Does the timer bar work with multiple segments? Set the total number of segments and which one is “active.” The tool draws the correct number of bars with the active one highlighted, exactly like a multi-snap Story.
What about the Bitmoji avatar? You can upload any image as the avatar. If you have a Bitmoji PNG, upload it for an authentic look. Otherwise, a colored circle with the username initial works as the default.
Is the swipe-up feature optional? Yes. Toggle it on or off depending on whether your Story mockup needs a link call-to-action at the bottom.
Can I change the overlay text position? The vertical slider lets you move text anywhere from the top to the bottom of the screen. Combined with font size and color controls, you get full creative control over text placement.