<?xml version="1.0" encoding="utf-8" standalone="yes"?><rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom"><channel><title>StoreGallery on RmondJone的博客</title><link>https://rmondjone.github.io/tags/storegallery/</link><description>Recent content in StoreGallery on RmondJone的博客</description><generator>Hugo -- gohugo.io</generator><language>zh-cn</language><lastBuildDate>Mon, 07 Jul 2025 10:08:56 +0800</lastBuildDate><atom:link href="https://rmondjone.github.io/tags/storegallery/index.xml" rel="self" type="application/rss+xml"/><item><title>Store Gallery 一键生成满意的App Store 预览图</title><link>https://rmondjone.github.io/posts/opc/opc_store_gallery/</link><pubDate>Mon, 07 Jul 2025 10:08:56 +0800</pubDate><guid>https://rmondjone.github.io/posts/opc/opc_store_gallery/</guid><description>&lt;h2 id="一背景">一、背景&lt;/h2>
&lt;p>做独立开发的朋友应该都有过类似的体会：好不容易把 App 功能开发完、Bug 测差不多了，准备上架 App Store 或 Google Play 的时候，却常常卡在最后一脚——&lt;strong>制作应用宣传截图（App Store Preview Screenshots）&lt;/strong>。&lt;/p>
&lt;p>找专业的 UI 设计师做一套宣传图，成本太高；自己掏出 Photoshop 或 Figma 调尺寸、找手机外壳模型贴图、对齐文案，随随便便大半天时间就折腾过去了。有些收费的 3D 效果渲染工具（比如 Rotato 等）虽然视觉效果不错，但不仅收费高昂，而且普遍不支持“跨画布/多屏连贯展示”的效果。另外，我也试过用 AI 直接跑应用宣传图，但生成出来的文字要么错乱变形，机模细节也经不起细看，很难直接拿去提交审核。&lt;/p>
&lt;p>对于缺乏设计能力又想快速上架的独立开发者来说，市面上现有的免费工具要么分辨率尺寸不全，要么样式过于单一。既然找不到一款用着真正称心的工具，干脆我们就自己写了一个——&lt;strong>Store Gallery&lt;/strong>。它的出发点很纯粹：让开发者零设计门槛，几分钟内一键生成好看、规范、专业的多平台应用商店宣传图。&lt;/p>
&lt;h2 id="二工具官网及功能详情">二、工具官网及功能详情&lt;/h2>
&lt;p>官网在线体验地址：&lt;a class="link" href="https://storegallery.hanruinet.com/" target="_blank" rel="noopener"
>Store Gallery&lt;/a>&lt;/p>
&lt;h3 id="1模板预设与历史工程本地隐私存储">1、模板预设与历史工程（本地隐私存储）&lt;/h3>
&lt;p>进入工具后，你可以看到内置好的各种设计风格模板。双击喜欢的模板就能一键载入编辑工作区；如果你之前制作过截图，也可以在“历史工程”列表里找到过去的草稿继续编辑。&lt;/p>
&lt;p>在这里想特别提醒大家一句&lt;strong>关于数据安全与隐私&lt;/strong>：Store Gallery 所有的编辑数据、上传的界面截图和本地工程项目，都&lt;strong>100% 存在你自己的本地浏览器缓存（IndexedDB / LocalStorage）中&lt;/strong>。没有后台上传，也不会有任何图像数据提交到我们的服务器，大家完全可以放心把未发布的 App 界面拿来做图。&lt;/p>
&lt;p>
&lt;div class="post-img-view">
&lt;a data-fancybox="gallery" href="https://rmondjone.github.io/images/store_gallery_1.png">
&lt;img src="https://rmondjone.github.io/images/store_gallery_1.png" alt="" />
&lt;/a>
&lt;/div>
&lt;/p>
&lt;h3 id="2截图编辑工作区与全平台尺寸支持">2、截图编辑工作区与全平台尺寸支持&lt;/h3>
&lt;p>
&lt;div class="post-img-view">
&lt;a data-fancybox="gallery" href="https://rmondjone.github.io/images/store_gallery_2.png">
&lt;img src="https://rmondjone.github.io/images/store_gallery_2.png" alt="" />
&lt;/a>
&lt;/div>
&lt;/p>
&lt;p>在编辑面板左侧的工具栏里，第一项就是&lt;strong>画布尺寸设置&lt;/strong>。做过上架的朋友都知道，苹果 App Store、Google Play 以及国内的小米应用市场等平台对截图的宽高像素要求极其严格，稍有偏差提交后台就会报错。&lt;/p>
&lt;p>Store Gallery 把目前主流平台的适配尺寸都做了整理和内置，大家不需要再去查官方文档，直接勾选即可切换画布：&lt;/p>
&lt;table>
&lt;thead>
&lt;tr>
&lt;th style="text-align:left">目标平台 / 分类&lt;/th>
&lt;th style="text-align:left">规格名称&lt;/th>
&lt;th style="text-align:left">分辨率 (宽 × 高 px)&lt;/th>
&lt;th style="text-align:center">是否推荐&lt;/th>
&lt;th style="text-align:left">适用场景与描述&lt;/th>
&lt;/tr>
&lt;/thead>
&lt;tbody>
&lt;tr>
&lt;td style="text-align:left">App Store (iPhone)&lt;/td>
&lt;td style="text-align:left">iPhone 6.9&amp;quot; Display&lt;/td>
&lt;td style="text-align:left">1320 × 2868&lt;/td>
&lt;td style="text-align:center">⭐&lt;/td>
&lt;td style="text-align:left">适用于 iPhone 16 Pro Max, 17 等最高规格 (推荐)&lt;/td>
&lt;/tr>
&lt;tr>
&lt;td style="text-align:left">App Store (iPhone)&lt;/td>
&lt;td style="text-align:left">iPhone 6.7&amp;quot; Display&lt;/td>
&lt;td style="text-align:left">1290 × 2796&lt;/td>
&lt;td style="text-align:center">-&lt;/td>
&lt;td style="text-align:left">适用于 iPhone 15 Pro Max, 15 Plus, 14 Pro Max&lt;/td>
&lt;/tr>
&lt;tr>
&lt;td style="text-align:left">App Store (iPhone)&lt;/td>
&lt;td style="text-align:left">iPhone 6.5&amp;quot; Display&lt;/td>
&lt;td style="text-align:left">1242 × 2688&lt;/td>
&lt;td style="text-align:center">-&lt;/td>
&lt;td style="text-align:left">适用于 iPhone 11 Pro Max, XS Max&lt;/td>
&lt;/tr>
&lt;tr>
&lt;td style="text-align:left">App Store (iPhone)&lt;/td>
&lt;td style="text-align:left">iPhone 5.5&amp;quot; Display&lt;/td>
&lt;td style="text-align:left">1242 × 2208&lt;/td>
&lt;td style="text-align:center">-&lt;/td>
&lt;td style="text-align:left">适用于 iPhone 8 Plus, 7 Plus&lt;/td>
&lt;/tr>
&lt;tr>
&lt;td style="text-align:left">App Store (iPad)&lt;/td>
&lt;td style="text-align:left">iPad Pro 13&amp;quot; 横屏 Display&lt;/td>
&lt;td style="text-align:left">2732 × 2048&lt;/td>
&lt;td style="text-align:center">⭐&lt;/td>
&lt;td style="text-align:left">适用于 iPad Pro 13&amp;quot; / 12.9&amp;quot; 横屏 App 上架截图 (推荐规格)&lt;/td>
&lt;/tr>
&lt;tr>
&lt;td style="text-align:left">App Store (iPad)&lt;/td>
&lt;td style="text-align:left">iPad Pro 13&amp;quot; 竖屏 Display&lt;/td>
&lt;td style="text-align:left">2048 × 2732&lt;/td>
&lt;td style="text-align:center">-&lt;/td>
&lt;td style="text-align:left">适用于 iPad Pro 13&amp;quot; / 12.9&amp;quot; 竖屏 App 上架截图&lt;/td>
&lt;/tr>
&lt;tr>
&lt;td style="text-align:left">Google Play&lt;/td>
&lt;td style="text-align:left">Google Play 手机标准&lt;/td>
&lt;td style="text-align:left">1080 × 1920&lt;/td>
&lt;td style="text-align:center">⭐&lt;/td>
&lt;td style="text-align:left">16:9 标准手机截图 (1080 × 1920)&lt;/td>
&lt;/tr>
&lt;tr>
&lt;td style="text-align:left">Google Play&lt;/td>
&lt;td style="text-align:left">Google Play 手机全面屏&lt;/td>
&lt;td style="text-align:left">1080 × 2400&lt;/td>
&lt;td style="text-align:center">-&lt;/td>
&lt;td style="text-align:left">20:9 现代长屏手机截图 (1080 × 2400)&lt;/td>
&lt;/tr>
&lt;tr>
&lt;td style="text-align:left">Google Play&lt;/td>
&lt;td style="text-align:left">Google Play 置顶图&lt;/td>
&lt;td style="text-align:left">1024 × 500&lt;/td>
&lt;td style="text-align:center">-&lt;/td>
&lt;td style="text-align:left">Feature Graphic 应用顶部宣传大图&lt;/td>
&lt;/tr>
&lt;tr>
&lt;td style="text-align:left">小米应用市场&lt;/td>
&lt;td style="text-align:left">小米标准截图&lt;/td>
&lt;td style="text-align:left">1080 × 2400&lt;/td>
&lt;td style="text-align:center">⭐&lt;/td>
&lt;td style="text-align:left">适用于 Redmi &amp;amp; 小米主流机型屏幕 (1080 × 2400)&lt;/td>
&lt;/tr>
&lt;tr>
&lt;td style="text-align:left">小米应用市场&lt;/td>
&lt;td style="text-align:left">小米 2K 屏旗舰截图&lt;/td>
&lt;td style="text-align:left">1440 × 3200&lt;/td>
&lt;td style="text-align:center">-&lt;/td>
&lt;td style="text-align:left">适用于 小米 14 Pro / 15 Pro 等 2K 旗舰屏&lt;/td>
&lt;/tr>
&lt;tr>
&lt;td style="text-align:left">小米应用市场&lt;/td>
&lt;td style="text-align:left">小米高清截图&lt;/td>
&lt;td style="text-align:left">1080 × 1920&lt;/td>
&lt;td style="text-align:center">-&lt;/td>
&lt;td style="text-align:left">适用于 16:9 传统全面屏&lt;/td>
&lt;/tr>
&lt;tr>
&lt;td style="text-align:left">PC 网页端&lt;/td>
&lt;td style="text-align:left">PC 网页 Banner (16:9)&lt;/td>
&lt;td style="text-align:left">1920 × 1080&lt;/td>
&lt;td style="text-align:center">⭐&lt;/td>
&lt;td style="text-align:left">全高清 1080P 桌面网页宣传展位 (推荐)&lt;/td>
&lt;/tr>
&lt;tr>
&lt;td style="text-align:left">PC 网页端&lt;/td>
&lt;td style="text-align:left">PC 网页 MacBook 展位 (16:10)&lt;/td>
&lt;td style="text-align:left">1440 × 900&lt;/td>
&lt;td style="text-align:center">-&lt;/td>
&lt;td style="text-align:left">适用于 16:10 笔记页面展示&lt;/td>
&lt;/tr>
&lt;tr>
&lt;td style="text-align:left">PC 网页端&lt;/td>
&lt;td style="text-align:left">PC 网页 2K 展示图&lt;/td>
&lt;td style="text-align:left">2560 × 1440&lt;/td>
&lt;td style="text-align:center">-&lt;/td>
&lt;td style="text-align:left">高分辨 2K 官网展示 Header Banner&lt;/td>
&lt;/tr>
&lt;/tbody>
&lt;/table>
&lt;h3 id="33d-手机外壳与跨画布联动展示">3、3D 手机外壳与跨画布联动展示&lt;/h3>
&lt;p>在左侧侧边栏切换到“外壳”菜单，这里支持多种经典的矢量模型以及逼真的 3D 实机机模。你只需要点击选中对应的手机外观，并将自己的 App 界面图片拖入贴图即可。&lt;/p>
&lt;p>特别值得介绍的是它的 &lt;strong>3D 视角与跨画布效果&lt;/strong>：&lt;/p>
&lt;ul>
&lt;li>&lt;strong>3D 姿态操控&lt;/strong>：在画布上按住鼠标左键拖拽，可以任意旋转手机机模的角度；按住 &lt;code>Shift&lt;/code> 键 + 鼠标左键则可以自由平移机模位置，轻松摆出各种好看的展示角度。&lt;/li>
&lt;li>&lt;strong>外观细节调整&lt;/strong>：对于矢量模型，你还能随心调整机身边框粗细、背部渐变阴影以及外壳颜色等。&lt;/li>
&lt;li>&lt;strong>跨画布展示&lt;/strong>：你可以建立多张连续的画布，把同一个 3D 机模横跨放置在相邻的两张甚至三张画布上，实现很多大厂应用宣传图中那种震撼的“跨屏连续连贯”效果。&lt;/li>
&lt;/ul>
&lt;p>
&lt;div class="post-img-view">
&lt;a data-fancybox="gallery" href="https://rmondjone.github.io/images/store_gallery_3.png">
&lt;img src="https://rmondjone.github.io/images/store_gallery_3.png" alt="" />
&lt;/a>
&lt;/div>
&lt;/p>
&lt;h3 id="4标题文案与字体调整">4、标题文案与字体调整&lt;/h3>
&lt;p>在左侧侧边栏选择“文字标题”菜单，可以单独对主标题和副标题进行设置。&lt;/p>
&lt;p>除了基本的内容修改外，还支持自由调整文字颜色、字体、字号大小、文本粗细、倾斜度以及行间距，文字在画布上的具体显示位置也可以通过拖拽或精细调参来确定，确保配文能够完美衬托产品画面。&lt;/p>
&lt;p>
&lt;div class="post-img-view">
&lt;a data-fancybox="gallery" href="https://rmondjone.github.io/images/store_gallery_4.png">
&lt;img src="https://rmondjone.github.io/images/store_gallery_4.png" alt="" />
&lt;/a>
&lt;/div>
&lt;/p>
&lt;h3 id="5截图背景自定义">5、截图背景自定义&lt;/h3>
&lt;p>想要让宣传图更有质感，背景颜色至关重要。&lt;/p>
&lt;p>在左侧的“背景定制”菜单中，我们预置了丰富的单色背景与多色渐变配色方案。如果你有自己专有的品牌 VI 调性或特定的设计素材，也支持一键上传自定义背景图片。&lt;/p>
&lt;p>
&lt;div class="post-img-view">
&lt;a data-fancybox="gallery" href="https://rmondjone.github.io/images/store_gallery_5.png">
&lt;img src="https://rmondjone.github.io/images/store_gallery_5.png" alt="" />
&lt;/a>
&lt;/div>
&lt;/p>
&lt;h3 id="6一键-aso-翻译与多语种生成">6、一键 ASO 翻译与多语种生成&lt;/h3>
&lt;p>对于做出海或打算上架全球各区的 App 来说，做多语言宣传图往往非常繁琐——过去需要为英语、日语、韩语、德语等几十个语言区重复复制多个文件修改文案。&lt;/p>
&lt;p>在 Store Gallery 左侧侧边栏中，你可以直接勾选想要导出的目标语言。在导出截图时，系统会基于翻译引擎将你的标题文案自动翻译成多个语种，并批量生成对应语言的独立截图包。独立开发者再也不用做大量重复机械劳动，只需要专注于打磨好一套主语言排版即可。&lt;/p>
&lt;p>另外，工具还支持&lt;strong>自定义翻译引擎&lt;/strong>，你可以填写自己的翻译 API Key（例如 OpenAI / DeepL 等）来进行更自然精准的翻译。需要再次强调的是：&lt;strong>所有的 API Key 及相关配置均只保存在你的本地浏览器缓存中&lt;/strong>，绝不会上传到服务器，安全又省心。&lt;/p>
&lt;p>
&lt;div class="post-img-view">
&lt;a data-fancybox="gallery" href="https://rmondjone.github.io/images/store_gallery_6.png">
&lt;img src="https://rmondjone.github.io/images/store_gallery_6.png" alt="" />
&lt;/a>
&lt;/div>
&lt;/p></description></item></channel></rss>