PxCook X Sketch tutorial: Rest and learn ~ 🐶
● Open the PxCook plugin ●
After installing PxCook 3.9.4 and above (long press the qr code at the bottom right of the picture below to see the latest version 😄). When you start PxCook for the first time, you have installed the new Flavor graph cutting plug-in. Open Sketch (if it is, you need to restart Sketch to ensure that the plug-in is loaded correctly.) Plug-ins will appear in the right sidebar of Sketch, as shown below:
● Marking texture and size Settings ●
① Method: create a cut map with the same size as the image
Select the layer, group of layers, or Symbol that you want to slice, and then select Make Exportable from the bottom right corner of the screen
② Method: Create a custom size slice diagram
Select the layer, layer group or Symbol that you want to Slice, then select Slice from the upper left corner of the interface or press the shortcut key S to activate Slice. Draw the desired size in the area of the image that you want to Slice.
If you want to cut out a transparent background layer, group the slices and the layers of the cut image in a folder. Do the same as selecting slice and selecting Export Group Contents Only
● Export artboard and cut image to PxCook ●
① Selection of equipment and resolution
Go to the Flavor plugin toolbar on the right side of Sketch and activate the first export tool. The following panel appears:
The device type and draft resolution options will only determine the size of the markup cut, which will be scaled to the size required for the current project based on the draft resolution you set.
Such as: You have a mark cut with the size of 20×20 px in a drawing board of Sketch. If you set the current design resolution of the export panel to iOS 1x, the mark cut will be output as 20×20 px 1x and 40×40 px 2x at the same time. And a 60×60 px triple cut. Another example: if you set the current design resolution of the export panel above to iOS 2X, the marked cut will be output as 10×10 px 1x, 20×20 px 2x, and 30×30 px 3x.
💡 Device type and design resolution options do not affect the size of your exported drawings.
For Android Sketch, you need to select the correct resolution based on the size of the current Sketch.
For example: one of your artboards in Sketch is 375×667 px, and it will be 375×667 px when exported to PxCook.
② Export artboard and cutout to PxCook
Export the following Sketch palette to PxCook with the Settings shown below:
In PxCook, enter the artboard and switch to the development mode. You can see the following artboard and cutting data in the right sidebar:
♦️ Summary: That brings us to the end of the Sketch tutorial, although it’s a bit messy. But it’s practical. For the future work can save a lot of time ~. Cutting map setting benchmark resolution is particularly critical!
These are the optimization results of the Sketch cutting function.
Interested partners come to experience it! For “production ● set ● research” and born!
Wechat official account: Pixel Chef PxCook
Get more design information and tips for drawing