Canvas shape and device shape
When a product visual feels cramped, the problem is often the relationship between the canvas and the frame. A tall phone inside a wide canvas can become a small object with too much empty space. A desktop screen forced into a portrait composition can lose the detail that makes the interface useful. Tokokino treats these as two related choices: the canvas aspect ratio sets the publishing space, while the device frame sets the shape and context of the screenshot inside it.
Start by deciding where the image will be seen. A square post, a social story, an Open Graph card, and an App Store screenshot each give the screen a different amount of room. Then choose a frame that supports the content. A bare screenshot keeps the interface large. A phone or tablet makes a mobile flow immediately recognisable. A browser frame gives a website a familiar setting. Glass frames add depth without tying the composition to a particular brand of hardware.
Tokokino measures the screen hole inside each device asset, so the screenshot is clipped and positioned to match the bezel. The outer device ratio and the inner screen ratio are separate. That is why a mockup can preserve rounded corners and a correct fit when you change its size or rotate it. A warning may appear when a canvas and frame have very different shapes, but it is a soft warning: the composition still renders and you can decide whether the extra space is useful.
Choose an aspect ratio
Open the aspect ratio picker and choose a preset from Basic, a destination platform, or App Store. Basic includes Auto, Square (1:1), Standard (4:3), Classic (3:2), Phi Ratio (1.618:1), Photo (5:4), 16:10, Widescreen (16:9), and Ultrawide (21:9). Auto follows the source when you want the screenshot to determine the starting shape.
The social presets cover X, Instagram, YouTube, TikTok, Pinterest, LinkedIn, Facebook, Threads, Dribbble, Reddit, and Open Graph. They include square, portrait, landscape, story, cover, profile, carousel, thumbnail, and card formats. For example, Instagram Portrait is 1080 x 1350 at 4:5, YouTube Shorts is 1080 x 1920 at 9:16, and a standard Open Graph image is 1200 x 630 at 1.91:1. These dimensions are useful starting canvases for composition. They do not replace the destination's current upload documentation.
The picker also includes Play Store and Chrome Extension presets. Play Store offers phone, app icon, and 7-inch or 10-inch tablet shapes. Chrome Extension offers store banner, small promo, large promo, and screenshot shapes. Choose the ratio before arranging several screenshots, because a layout that works in 16:9 may need different spacing in 9:16. If you change it later, check each frame's scale, padding, and text placement again.
Prepare App Store screenshots
For an App Store set, choose the App Store group in the picker. The available presets are iPhone 6.7 inch at 1284 x 2778, iPhone 6.5 inch at 1242 x 2688, iPhone 6.1 inch at 1179 x 2556, iPad 12.9 inch at 2048 x 2732, iPad 11 inch at 1668 x 2388, Apple TV at 1920 x 1080, and Mac at 2880 x 1800. The picker displays simplified ratio labels for these presets. Use the actual width and height values when matching a required size. They give you a canvas with the expected shape for planning a screenshot, including room for a headline, a frame, or a short explanatory label.
Treat those values as Tokokino canvas presets, not a promise that every current App Store submission accepts every size. Apple changes its submission rules and can distinguish between required, optional, and display-specific sizes. Before uploading, check Apple's official screenshot specifications and confirm the exact output dimensions, file type, and count required for your app and platform.
For a readable set, give each screenshot one idea. Use the first image to establish the product, then show the workflow or feature that follows. Keep the headline position, type scale, frame treatment, and background family consistent. If you use device frames, pick a frame whose orientation agrees with the canvas. A portrait iPhone frame can hold a full-height mobile screen, while a landscape iPad or Mac frame may be better for a dashboard or editor.
Phone mockups
Phone frames are useful when the device itself helps explain the product. The catalogue includes iPhone 17, iPhone 17 Pro, iPhone 17 Pro Max, Galaxy S24 Ultra, Nothing Phone, and Pixel 7. iPhone 17 is available in black, lavender, mist blue, sage, and white, in portrait and landscape. iPhone 17 Pro has cosmic orange, deep blue, and silver, also in both orientations. iPhone 17 Pro Max has the same three colors and both orientations.
Galaxy S24 Ultra is available in grey, portrait and landscape. Nothing Phone is available in black and white, portrait and landscape. Pixel 7 is available in hazel, obsidian, and snow, portrait and landscape. Choose portrait for an app flow, chat, or mobile web page. Choose landscape when the screen is showing a game, video, map, or a composition where horizontal space carries the point. The frame's color is a presentation choice, so keep it stable across a release set unless the color itself communicates a variant.
Tablet mockups
Tablet frames give a mobile interface more breathing room and are a good fit for drawing apps, reading layouts, split views, and responsive tablet designs. The catalogue includes iPad Air in gray, portrait and landscape; iPad mini in starlight, portrait and landscape; iPad Pro 11 M4 in silver and space gray, portrait and landscape; and iPad Pro 13 M4 in silver and space gray, portrait and landscape.
Use the smaller iPad mini when scale and portability matter. iPad Air and the Pro models work well for a larger canvas with a sidebar, multi-column layout, or detailed illustration. A portrait tablet can support a long reading or browsing sequence. A landscape tablet can make a productivity interface easier to inspect. The inner screen geometry differs between models, so place important text inside the visible screen area and use the editor preview to check the crop after changing device or orientation.
Laptops and desktop displays
For desktop software and web products, the catalogue includes MacBook Air 13 Gen 4 in midnight, landscape; MacBook Pro 14 5th Gen in silver, landscape; MacBook Pro 16 5th Gen in silver, landscape; iMac 24 in blue, green, orange, purple, red, silver, and yellow, landscape; Pro Display XDR in silver, landscape; and Studio Display in silver, landscape.
MacBook frames put a laptop product in context while leaving enough screen area for a real interface. The 14-inch frame is a useful middle ground for a feature card or landing page image. The 16-inch frame can carry a denser dashboard. iMac adds a distinctive all-in-one silhouette and a choice of bright colors, which can help a set distinguish itself visually. Pro Display XDR and Studio Display are suited to a monitor-focused visual or a high-resolution creative application where the stand and display establish scale.
These are landscape assets. If your canvas is portrait, you can still use one, but expect more surrounding space and consider making the display one element in a larger composition rather than the whole composition. Browser frames may be a better fit when the page matters more than the hardware.
Apple Watch mockups
The watch catalogue includes Apple Watch 10 42mm Aluminum Sport Band in black and light blush, portrait, and Apple Watch Ultra 2 Natural Alpine in dark green, navy, and tan, portrait. These are narrow, tall frames suited to a glanceable complication, workout screen, timer, notification, or small status view.
Because a watch screen is compact, simplify the composition around it. Use a short label and a restrained background. Keep the key interface state large enough to read at the final export size. A watch frame can also work as one member of a device family: pair it with an iPhone or iPad screenshot when you want to show a handoff or a feature that travels across devices.
Browser and glass frames
Browser frames surround the screenshot with browser controls instead of physical hardware. Tokokino includes Safari, Chrome, and Arc, each with dark and light appearances. The address field is editable through the frame address setting, which makes a website or web app feel situated without adding a physical bezel. Use Safari for an Apple-oriented presentation, Chrome for a broadly familiar browser context, or Arc when its distinctive chrome fits the visual language. A bare screenshot is often better when browser controls would distract from the interface.
Glass frames use the same canvas and frame controls while giving you a hardware-neutral treatment. Glass Card has one slightly offset rear pane. Glass Cascade has two stacked panes under the canvas. Glass Crown has two panes behind and above the canvas. Each is available in dark and light. Choose Glass Card for a simple translucent surround, Cascade for a layered stack, and Crown when the offset panes should become part of the composition. The background, pattern, ASCII grid, or image can show through the frost, so keep enough contrast behind the screen.
Glass is useful for a presentation image where the product needs depth but a branded device would make the context too specific. Browser and glass frames also work with video. When you export, Tokokino prepares their chrome and glass treatment for the still or motion output so the surrounding layers remain aligned with the media.
Build a consistent set
Start with one reference canvas. Set its ratio, choose the frame family, place the screenshot, and decide how much padding surrounds it. Then reuse those decisions across the rest of the set. Multiple canvases and layout presets make it easier to keep spacing related, while bulk editing helps apply a shared change to several canvases.
For a mobile launch, you might use the iPhone 17 Pro in deep blue for every portrait screenshot, with one Apple Watch Ultra 2 image as a companion. For a desktop update, use a MacBook Pro 14 for the overview, then a browser frame for a close-up of the web interface. Keep the same background treatment and label position even when the frame changes. The viewer should notice the product state first and the device choice second.
Check the frame at the actual reading size. Small interface text that looks clear at editor zoom can disappear in a social thumbnail or a store gallery. Use padding to protect the screen from nearby labels, and keep annotations outside the screen when they would cover a control. A slight tilt can separate overlapping screens, but a straight-on frame is usually easier to read for dense UI.
Export at the right size
Tokokino's still export offers PNG, JPEG, and WebP. Its HD, 4K, and 8K width choices are 1920, 3840, and 7680 pixels. Those are export widths, not App Store preset dimensions. A 1284 x 2778 App Store canvas does not become an App Store submission merely because you choose HD, and an 8K export may be larger than a platform accepts. Use the canvas preset to compose the shape, then verify the exact final dimensions required by the destination before submitting.
PNG is a sensible choice for interface screenshots and sharp text. JPEG or WebP can reduce file size when the destination supports them. For an App Store upload, follow Apple's current specifications for the relevant device and use an output whose pixel dimensions match those specifications. If you need a different exact size after exporting, resize with a tool that preserves the aspect ratio and inspect the result again.
Before export, switch through each canvas and check the frame color, orientation, crop, and text. Make sure a browser address is correct, a glass pane has enough contrast, and a phone screen is not being used to hide an important annotation. Then open Tokokino, choose the destination ratio, select a frame, and build the first screenshot in your set.