With a multitude of different screen resolutions and sizes to consider, designing for a range of mobile devices can sometimes be a difficult and time-consuming exercise. Having said that there are a few things to consider, specifically in Photoshop, to make your life easier and make sure your files will be useful again in the future.
Photoshop is traditionally a bitmap editing package but with careful use of “Shape Layers” and “Smart Objects” the problems associated with resizing bitmaps can be reduced or eradicated altogether. Using Photoshop in a non-destructive way is key to ensuring designs can be easily manipulated for these different screen sizes whilst also ensuring your files are future proof. This is achieved by working predominantly in vector instead of using bitmaps. These vector shapes can be imported from Illustrator for example, or drawn directly in Photoshop, which is often the quicker and easier option.
Here at Mubaloo we work in this way when using Photoshop. This may feel foreign to people coming from a photography background but by using vector “Shape Layers” interface designs can easily be resized and shaped to accommodate the target device or devices. A design created by us can simply be doubled in size for retina displays without any degradation in quality. Careful attention should be paid to grids and the “Snap to Pixels” function, to keep designs crisp and sharp. When vector shape layers are doubled for retina displays, you can sometimes experience problems with half pixels resulting in slightly blurred edges to the shape. But with the correct snap settings these problems can be avoided.
Using vector shapes means elements can be manipulated so the app can be rolled out over different devices with ease. This non-destructive way of working means elements are not “Rasterized” or “Flattened” (converted to a bitmap). A rasterized bitmap button would degrade in quality when resized and you may experience problems with uneven rounded corners, for example.
If photos or complex textures are the order of the day, then of course a bitmap image will need to be used but this should always be attached to a vector shape. When doing this, consider the largest screen resolution of the app and make sure the bitmap you use is of an adequately high resolution. It’s essential to set this bitmap layer as a ”Smart Object” in Photoshop. This retains the high-resolution of the original image when the object is resized. As long as you don’t make it any bigger than its true resolution, no quality is lost. You can often get away with a bit of enlargement for a texture anyway, especially if the layer has other blending options attached to it (which will be rendered for each re-size). Often these textures will need to be made into a smaller repeatable pattern to ensure app file sizes are kept to a minimum. It is a good idea to learn how to make an effective repeatable pattern, which you can supply to your developer.
Conversely, remember that fairly complex graphics can be built by clever use of vector layers. With a bit of sweat and determination you can build your own vector textures and detailed designs.
Designer, Peter Horsham