Adobe Photoshop is constantly evolving; new features are added with each release, while existing features are improved. There is, however, one area which is still quite outdated; the way we slice our designs in Photoshop hasn’t changed since the web was table-based.
The dawn of resolution independence (think Retina) has meant that we’re relying less and less on bitmaps for our websites. Web fonts, CSS3 and Scalable Vector Graphics are all examples of modern techniques which move us away from worrying about pixels. Sometimes we do still need to slice up our PSDs and use the resultant images, but it’s time for us to do so in a more responsible way.
Enter Cut&Slice me, a CS6 plugin developed by Daniel Peruho. Cut&Slice me aims to speed up the modern slicing process and offers many powerful features. It’s free, it’s easy to use and it works.
Some of the things it offers include taking a group of layers and treating it as a single object. It then trims all unnecessary pixels and exports the group as an image file. When designing buttons, once the layers are named according to the format required by the plugin, it can auto-slice the multiple states of that button. Eager to learn more? Let’s dive in.
Getting Started
To get started, you’ll firstly need to be running Photoshop CS6. You’ll then need to have the plugin installed on your machine. Head on over to the Cut&Slice me home page and download the latest version of the plugin. Also, download the sample file which we’ll use to demonstrate how the plugin works.
Once downloaded, double-click the CutAndSliceMe.zxp file to trigger the plugin’s installation. When Adobe Extension Manager shows up, just follow the instructions.
Launch Photoshop and choose Window > Extensions > Cut and Slice me. You should now be able to see the “Cut&Slice me” panel.
Next, extract the CutAndSliceMe_sample.zip file and open the sample file. You should see the following:
This is a mobile design with properly named layers according to the plugin’s requirements. Shortly, we’ll see how it works, but before we do that there are a couple of things you should be aware of:
- Firstly, you need to go to the General section of the Preferences panel and check the Snap Vector Tools and Transforms to Pixel Grid option (you’ll see why a little bit later).
- Secondly, it’s important to understand from the very beginning that you have to design for the highest resolution. This is retina for Apple devices and xhdpi for Android devices (in both cases effectively x2). This is because the plugin takes the size of your design as full resolution, exporting it to different sizes by scaling down.
- Also, when Cut&Slice me exports to iPhone and Android, all unsupported characters in the file name are removed.
The Plugin in Action
Make sure that the button with the iPhone icon is selected, then click on Cut All assets. When slicing is done, navigate to the sample file directory and open the “CutAndSlice_sample_iPhone_assets” folder which is created automatically by the plugin.
You will see each asset in two sizes; one for Retina (which is actually the full resolution size used in your PSD file), and another which is the scaled down version of the original.
Now let’s repeat our exercise, this time exporting for Android. Change the plugin’s mode by clicking on the button with Android icon, then click on Cut All assets again. This time the “CutAndSlice_sample_Android_assets” folder is created with four subfolders; one for each asset size. The size we originally designed can be found in the xhdpi folder, all other assets being scaled down versions of these.
How it Works
Now we’ve seen more or less what the plugin does, it’s time to find out how it works.
The most important aspect to consider is layer organizing, in terms of naming and grouping. Organize your elements in groups, as if they were objects. Then append @ to the end of all group names you want to be exported, and finally click on Cut All assets. The contents of each group will be exported as a PNG file, trimming all transparent pixels.
Note: For the sake of performance Cut&Slice me only checks group names, so in order to be exported your layers need to be in a group.
Sometimes you might not want to export all assets; you’ll perhaps want to export only the assets you’ve put inside a particular group. If this is the case just click on Cut Subgroups and Cut&Slice me will export all your @ layers inside the selected group.
When you want to slice only a single group or single layer, select it and click on Cut Selected.
Slicing Different States
Finally, when dealing with buttons we often have several states for them. In order to export them properly you need to add groups containing your various button states, naming them as follows:
normalhoverclicked/pressedselecteddisabled
Then put these groups inside another group with _BTN appended to its name. Note that the _BTN suffix can be used with any element which has states.
Defining Asset Sizes
As already mentioned, Cut&Slice me crops bitmaps tightly, removing all surrounding transparent pixels you don’t want. But what happens when you want all your button’s states to be the same size? In this case you can use a rectangular vector layer, named #, on the very top of your group, representing the area you want to export. Your group will be exported at the size of the vector shape, without exporting the vector layer itself. This is valid for all groups, not only for buttons. The plugin uses a vector layer for this feature because if the Snap Vector Tools and Transforms to Pixel Grid option is checked, as I mentioned above, your vector shape will be pixel perfect with no blurred edges.
To test this process, select the layer immediately below login_BTN group. Then set Opacity to 100% and Fill to 40%. Now you will be able to see the shape above the button. Change its size as you wish and export it. Now open the assets folder and check the size of exported button. It should be the size you have just defined.
A Real World Example
We now have a solid understanding of how we can use the plugin, so it’s time to test it in the real world. Here I’m not going to teach you how to design a website template from scratch, instead I’ll use a pre-made template in order to show you how to name and organize your layers properly.
Let’s start by downloading this free website template from CSS Author. The template has a web version and a mobile version. Download both, then open the web version of the template.
You may already notice that the naming and structure of the layers is a far cry from what we need. We’ll have to carry out some rearranging and renaming in order to meet the plugin’s requirements. In the following screenshot you can see a comparison of the layer structure before and after our edits. Alter your layers (in red) to match those on the right (green).
On this occasion we want to export for web, so change the mode by clicking on the button with the Monitor icon then click on Cut All assets. The following screenshot demonstrates what you should see. If your view differs, check your layers for eventual errors and try again.
Congratulations! You have just sliced your first design successfully. For further practice, open and slice the mobile version of the template.
In this case, when you edit the file, export for iPhone and Android and check if everything is correct. If so, you are ready to take this to the next level and slice your own design.
Sprites
You’ll probably have noticed that when exporting our assets we’ve ended up with a lot of PNG files. And, as we know, pulling more individual image files from a web server means more HTTP requests, slowing down the rendering of your web pages. To solve the problem you may consider turning all of your PNGs (or some of them) into a single image sprite file.
Fortunately, this is an easy task these days and there are many ways to approach it. There are plenty online tools which can help out with the process. Have a look at the following sprite generators:
..see which suits best your needs.
So far so good, but there is one more thing we need to point out. With technologies like CSS3 and SVG we don’t rely solely on images anymore. We can now easily use SVG icons or CSS3-powered buttons in our designs. The major benefit of using SVG and CSS3 graphics is that they’re resolution-independent and work very well within a responsive design. Also, you can change and tweak them right in your code without need of using image editor. But wait! This doesn’t means that images are completely inappropriate. They can still be used for photos, complex graphics and graphic elements, and so on. CSS3 and SVG are great, but browser support isn’t completely reliable yet, so you need to be mindful when you use them.
Conclusion
The ability to automate our design tasks is extremely important in today’s rapidly changing web world. Fortunately, tools like Cut&Slice me give us just such automation and save an enormous amount of our time. As you can see, with a little bit of discipline when we name and organize our layers, we can slice even complex designs quickly and easily. With just a few clicks we have all the assets we need properly cut and ready to be used.