<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:dc="http://purl.org/dc/elements/1.1/">
  <channel>
    <title>DEV Community: Intenseloop Team</title>
    <description>The latest articles on DEV Community by Intenseloop Team (@stewones).</description>
    <link>https://dev.to/stewones</link>
    <image>
      <url>https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F4215441%2F567e0d25-4f61-4a22-8b44-5aed4977f404.jpg</url>
      <title>DEV Community: Intenseloop Team</title>
      <link>https://dev.to/stewones</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://dev.to/feed/stewones"/>
    <language>en</language>
    <item>
      <title>How to make App Store and Google Play screenshots in the browser (sizes, panorama layouts, localization)</title>
      <dc:creator>Intenseloop Team</dc:creator>
      <pubDate>Thu, 29 Oct 2026 13:40:24 +0000</pubDate>
      <link>https://dev.to/stewones/how-to-make-app-store-and-google-play-screenshots-in-the-browser-sizes-panorama-layouts-4jop</link>
      <guid>https://dev.to/stewones/how-to-make-app-store-and-google-play-screenshots-in-the-browser-sizes-panorama-layouts-4jop</guid>
      <description>&lt;p&gt;Screenshots are the part of a store listing most people actually look at: many visitors swipe through the first few images and decide without reading the description. Yet they're often made the night before release.&lt;/p&gt;

&lt;p&gt;This is a practical checklist for doing them properly without a design team: the sizes Apple and Google accept today, how to build a "panorama" set that reads as one scene, and how to keep localized versions under control.&lt;/p&gt;

&lt;h2&gt;
  
  
  1. Start from the sizes, not the design
&lt;/h2&gt;

&lt;p&gt;Getting the canvas wrong is a common reason an upload fails, so pick sizes first.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;App Store (iPhone)&lt;/strong&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;6.9″ display: 1320 × 2868, 1290 × 2796 or 1260 × 2736 (portrait). This is the set Apple asks for.&lt;/li&gt;
&lt;li&gt;6.5″ display: 1284 × 2778 or 1242 × 2688. Only needed if you don't provide a 6.9″ set.&lt;/li&gt;
&lt;li&gt;Smaller iPhones are scaled down from these automatically, so you rarely need to make them yourself.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;strong&gt;App Store (iPad)&lt;/strong&gt;, only if your app runs on iPad:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;13″ display: 2064 × 2752 or 2048 × 2732.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Apple accepts 1 to 10 screenshots per set, as PNG or JPEG, and &lt;strong&gt;no alpha channel&lt;/strong&gt;. A PNG exported with transparency is rejected even when it looks opaque, so flatten it before uploading.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Google Play&lt;/strong&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;JPEG or 24-bit PNG, no alpha.&lt;/li&gt;
&lt;li&gt;Each side between 320 and 3840 px, and the long side can't be more than twice the short side.&lt;/li&gt;
&lt;li&gt;At least 2 screenshots, up to 8 per device type (phone, 7″ tablet, 10″ tablet, and so on).&lt;/li&gt;
&lt;li&gt;To be eligible for Google's larger recommendation surfaces, apps need at least 4 screenshots at 1080 px or more: 1080 × 1920 portrait or 1920 × 1080 landscape.&lt;/li&gt;
&lt;li&gt;The feature graphic is a separate, fixed 1024 × 500 image.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;One trap: modern iPhone screenshots are taller than 2:1 (1284 × 2778 is about 2.16), so you can't reuse your App Store files on Google Play. Plan for a separate 9:16 set, usually 1080 × 1920.&lt;/p&gt;

&lt;h2&gt;
  
  
  2. Design the first two screenshots as a headline
&lt;/h2&gt;

&lt;p&gt;In search results the store shows only the first few images, often cropped. Treat screenshot one and two as your pitch:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;One idea per screenshot, written as a short benefit ("Split bills in seconds"), not a feature name ("Bill Splitting Module").&lt;/li&gt;
&lt;li&gt;Big type. Store thumbnails are small, so check every caption at thumbnail size before you call it done.&lt;/li&gt;
&lt;li&gt;Show real UI with real-looking data. Empty states and lorem ipsum read as unfinished.&lt;/li&gt;
&lt;li&gt;Keep text away from the edges. Google notes that text near the edges can be cut off on some surfaces, especially for tablets.&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;
  
  
  3. Panorama layouts: one wide canvas, cut into slides
&lt;/h2&gt;

&lt;p&gt;A "panorama" set is designed as one long image and then cut into individual screenshots. When someone swipes, a background shape, a gradient or a tilted phone continues across the seam, and the set feels like one story instead of five unrelated posters.&lt;/p&gt;

&lt;p&gt;How to do it by hand:&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;Make a canvas whose width is N × the slide width. For five iPhone slides at 1284 × 2778 that's 6420 × 2778.&lt;/li&gt;
&lt;li&gt;Add guides at every multiple of the slide width. These are your seams.&lt;/li&gt;
&lt;li&gt;Put captions and the main device of each slide inside its own section, with a safe margin from the seams.&lt;/li&gt;
&lt;li&gt;Let only decorative elements (backgrounds, shapes, a secondary device) cross a seam. Never put a caption or a key part of the UI on one.&lt;/li&gt;
&lt;li&gt;Export the full canvas, then slice it into N files at exactly the slide width.&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;Step 5 is where people lose an evening: a slice that is one pixel off fails validation. Whatever tool you use, export at the exact pixel sizes above and check the dimensions of every file before uploading.&lt;/p&gt;

&lt;h2&gt;
  
  
  4. Localization without copying files around
&lt;/h2&gt;

&lt;p&gt;If your app is translated, your screenshots should be too. Localized captions often matter more than localized UI, because the caption is what people read first. A few habits keep this manageable:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Separate text from artwork.&lt;/strong&gt; Keep captions as live text layers, not baked into images, so a translation is a text change and not a redesign.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Design for the longest language.&lt;/strong&gt; German or Finnish captions often run noticeably longer than English. Leave room, or allow two lines.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Keep a caption sheet.&lt;/strong&gt; One table with a row per screenshot and a column per language makes reviews and updates much easier than opening ten design files.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Start with your top markets.&lt;/strong&gt; Localize where your installs come from first.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Swap the UI screenshots too&lt;/strong&gt; when the app shows a lot of text, so the caption and the phone agree.&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;
  
  
  Doing it in the browser
&lt;/h2&gt;

&lt;p&gt;You can do all of this in Figma or Photoshop with a template and some patience. If you'd rather not set up the canvas, guides and slicing yourself, we build a free browser editor for exactly this at Intenseloop: &lt;a href="https://appscreen.pro" rel="noopener noreferrer"&gt;AppScreen&lt;/a&gt;. It lays your screenshots out on one panorama canvas with iPhone and Android phone frames and exports slides at the store sizes, and your work stays in your browser.&lt;/p&gt;

&lt;p&gt;Whatever tool you pick, the rules above are what matter: exact sizes, no transparency, a strong first two slides, and captions you can translate without starting over.&lt;/p&gt;

</description>
      <category>ios</category>
      <category>android</category>
      <category>appstore</category>
      <category>design</category>
    </item>
  </channel>
</rss>
