Creating Pixel Perfect AppStore Previews in Sketch with Image Fills
Improve your workflow 10x with Magic Mirror 3 plugin
As we know, Sketch allows you to color fill and gradient fill in shapes easily. But you can also image fill as well.
This opens up a lot of rooms for productivity hack, including creating AppStore previews with your design.
- Lets use this AppStore Template by Ryan Houk and select the “Replace Screen” layer
2. Click on the Fill > Switch to the Image Fill palette.
3. Drag your screen design into the image well, and set to the Fill mode in the drop down.
4. Export your screen, say @3x.
5. Looking at the final export
Explaination
When it comes to image fill, the original source’s resolution plays an important role.
Let’s do the math here. Our original screen export is at 1x (375 * 667), our template design is at 1x (375 * 667), but we wanted to output a @3x resolution, which is expected to be (1125 * 2001)
It’s basically scaling up your design.
But the other parts (e.g. the iPhone, labels, etc) looks crystal clear…
Ans: Because the backing image itself has sufficient resolution, and some other parts like the text are actually vector graphics in Sketch.
“Vector graphics is the use of polygons to represent images in computer graphics. Vector graphics are based on vectors, which lead through locations called control points or nodes.”
“The parameters of objects are stored and can be later modified. This means that moving, scaling, rotating, filling etc. doesn’t degrade the quality of a drawing. Moreover, it is usual to specify the dimensions in device-independent units, which results in the best possible rasterization on raster devices.”
— Wikipedia
In short, vector graphics can be scaled up or down without sacrificing quality. In contrast, if a bitmap itself has insufficient resolution, scaling it up will results in blurry image because it doesn’t have enough details.
Right now, iPhone 6/7 Plus have a @3x retina display, and some Android devices are have xxxhdpi displays, that’s as large as @4x resolution.
It quickly become a problem if you’ve multiple screens that you need to generate AppStore previews in different sizes and resolutions.
Not to mention when there are changes, you’ll need to go through all the exporting and importing in to each layer of the Sketch template.
Rescue Your Workflow With Magic Mirror 3 Plugin
You may already know that Magic Mirror is a plugin to transform your designs into perspective shapes.
But you can actually use it as a quick way to generate artboard previews without necessarily creating a transforming effect for your design.
Magic Mirror 3 automatically determines the exact size needed to export from your source according to your shape’s size and preferred image quality setting. Then it fits the result into your specific shape.
By linking an artboard directly with a shape, when you’ve changes, simply hitting the refresh button will update all the assets in matter of seconds!
It’s recommended you include all your UI design and AppStore preview in one single sketch file to make the best of out this productivity boost.
Resources
I hope you like this tip and save hours.
Thanks for reading! Please hit ❤ Recommend
