Posted on 03/09/2014 in Tutorials
There is no way around it: nowadays ‘retina ready’ is a mandatory requirement for any website to ensure sharp looking visual across multiple devices. What is not mandatory though is the time-consuming process of manually producing the retina assets needed to fulfill said requirement. If this sounds like news to you, then you will be happy to hear what I’m about to tell you.
Unless you’ve been visiting relatives on a remote island in Polynesia for the past couple of years, you have certainly heard about responsive web design (RWD) and it is very likely you are experiencing it on a daily basis. Brought on by the rise of the multi-device era, RWD is a new method to ensure a uniform cross-platform user experience by taking into account the wide variety of screen sizes and the resolution requirements of retina displays. With the introduction of this new kind of display by Apple for the iPhone 4 release, screens doubled in pixel density and the digital community has had to modify their workflow to ensure that their work is ‘retina ready’ - by creating retina assets. That is a secondary set of high resolution assets to be supplied at exactly twice the size of the original set.
“At Onespacemedia we were fast to join the 'retina revolution' and we promptly adapted to the new requirements, because no matter the size of the client, we always push our work to the next level of quality. Whether it’s copy or asset generation we ensure that the experience is as engaging as possible - across all devices and screen sizes”, says our Creative Director, James Dellar.
Now, there’s no way around it — no matter how strong your Photoshop kung-fu might be, churning out both standard and retina assets can be a horribly time-consuming, mind-numbing process. But what if we told you our design team has a way to get around all the heavy lifting?
Save the heavy lifting for the gym
At Onespacemedia we export assets as standard and retina versions from Photoshop comps and then pass them on to the development team. We can do this extremely fast with Slicy, an application by MacRabbit - the same team behind the popular web editor, Espresso. We are able to leave the endless sequence of “flatten, select, copy, make a new document, paste, save” behind, saving enormous amounts of time on every project and ensuring a streamlined collaboration between designers and developers.
Where’s the catch you say? Nowhere!
Slicy is easy to setup as well as to operate — you just need to tell Slicy which layers in your Psd you want to export as assets by renaming them accordingly and then proceed to drag and drop the Psd inside the Slicy window. That’s it! Let’s now go through it step by step.
Feel free to hover over or tap the images to see a small animation showing the actions described.
Step 1 - checking your standard assets
First of all you should check that all your standard assets in the signed off Psd comp are shape layers. This type of vector format ensures that objects can be scaled up or down without any blurring. This is really a best practise, but also a key requirement in order to achieve great looking assets when using Slicy.
Step 2 - renaming the layers
Keeping your Psd comp open, proceed to rename the layers or layer groups which make up each of your assets. Make sure you are using the exact same name you want your final assets to have, including the file extension and with the addition of the “@2x” suffix (i.e. you will rename the layer containing the asset for your logo as “firstname.lastname@example.org”).
Step 3 - creating a collection of your assets
You can now go ahead and duplicate all the layers you’ve just renamed onto a new Psd file which you can save as “assets.psd”. This file will act as a collection of all the assets needed for your design.
Step 4 - creating the retina assets
In the newly created Psd file, select all your assets and double them up in size using the transform tool to create your high resolution “retina assets”. When doing this, make sure the maintain aspect ratio optition is selected or simply hold down the “shift” key.
Step 5 - drag and drop
Fire up Slicy and simply drag and drop your Psd file inside the application window. Sit back and enjoy the sleek animation while Slicy extracts all your assets for you. You will then be asked for the location where you want to save the files and you will also be given the opportunity to benefit from Slicy automatic update feature. The application will in fact ask you if you would like it to repeat the export process any time changes are made to you Psd file.
There are other methods to create standard and retina assets using Slicy, but we think the method we’ve described is the best way to go about it. It has the advantage of collecting all the assets needed for your design in one single place, which can be extremely handy.
We’ve grown incredibly fond of Slicy due its elegant and effortless “drag and drop” interface which allows us to keep our workflow agile without compromising on the quality of our digital assets. It is undoubtedly a must have tool for any designer.
Follow us on Twitter.