Cutting and slicing in the design process is undoubtedly time-consuming work. Moreover, it becomes more and more complicated when you have to cut and slice hundreds of layers in different scale.
Of course, there are copy merged, export layers to files or slice features in photoshop. But those approaches have not helped much in making the cutting and slicing process faster. What you need is a plugin.
Cut&Slice Me is a Photoshop extension for simplifying the process of cutting and slicing design. You can then export your layers for iPhone, Android or Desktop devices. The exported files come with various scales and resolutions as well, such as retina for iPhone or HDPI, LDPI, MDPI and XHDPI for Android.
Cut&Slice Me Installation
To use the Cut&Slice Me plugin, you need at least Adobe Photoshop CS6/CC installed on your machine. Download the plugin (and the sample PSD file that we’ll be working on later).
Once your download has finished, double click the CutAndSliceMe.zxp file and installation will automatically begin by Adobe Extension Manager. Follow the instructions and restart your Photoshop if it was already open.
To make the plugin visible in your Photoshop right panel, simply go to Window > Extensions > Cut and Slice me.
Cut&Slice Me is easy to use but you have to do a bit of work first to make sure the plugin works efficiently during cutting and slicing.
First, you have to organize your layer objects into folders as Cut&Slice Me checks only group names. You also need to add the “@” symbol at the end of the layer group name you want to export.
Slicing Defined Size
All unnecessary transparent pixels are removed in the exporting process. To keep the exported file in yrou desired size:
1. Make sure you have checked the ‘Snap Vector Tools and Transforms to Pixel Grid’ setting in Edit > Preferences > General.
2. Then, create a rectangular vector layer for the size you want.
3. Place this shape at the very top of the group, so it will tell the plugin the area size you wish to export in. Lastly, name the shape “#”.
Image source: Cut&Slice Me Basic Tutorial
Different State Asset
When dealing with buttons, which often has different states, you can use a special method.
1. In exporting a button, create a new layer group for the button and include a “_BTN” label in its name.
2. Inside the group button, create another group containing button states and name them according to the states. The group state names should be as follows:
Aside from buttons, this rule can also be applied for other elements that may have different states, like the following screenshot.
Using Cut&Slice Me
Now let’s look at how Cut@Slice Me can help you with your designs. As mentioned earlier, we’ll be using the sample PSD design file from the Cut&Slice Me homepage.
As mentioned before, currently Cut&Slice Me lets you export to iPhone, Android and Web. You can choose to slice all assets, subgroups or selected layers. Slice and export the sample design to iPhone.
After the exporting process is finished, you will find the result files are located in the original PSD file location (see image).
So far, I assume you have a solid understanding about how the plugin works already. So, let’s try using the plugin with another design.
For simplicity’s sake, we’ll only use half of the design for exporting. The following screenshot is a comparison of how the layers are structured before and after they are ready for use.
On the left (in red) are the original layers. After rearranging and renaming the layers’ states, we arrive at what is on the right (in blue).
As the design template will be used for the web, in the plugin panel, choose the device mode for desktop (monitor icon). Hit Cut All assets.
Now, the defined asset had been sliced successfully, like so.
Note that, if you are slicing your own design, you need to have it in the highest resolution since final images are for xhdpi in Android and retina in Apple devices. This plugin carries out the full resolution of the design then scales it down for export into different sizes.
No time is wasted when you cut and slice using this Photoshop plugin. With a little bit more discipline in layer organization, even complex designs can be sliced with precision and ease.