![]() In the image below you can see my typical workflow. Obviously, you can do the first step in almost any design editor, but the Gravit’s Slice Tool allows you to grab them on the fly while working on your website layout. To prepare a CSS-sprite you need an image as a container for the multiple images and CSS code to show only a single image at once. This practice allows us to reduce the number of server requests and thus make a website to load faster. Preparing tutorials and manuals in Gravit DesignerĬSS-sprite is a technique of using a single image to render several images on the web pages.In the second part of this tutorial I want to focus on the real world examples of the Slice Tool application: When you are done, click the Export… icon and bring up a familiar dialog box to pick up the desktop folder for your asset. Here you can specify the size, file format and set a suffix for your own convenience. Once you are happy with the size and position, head over to the bottom left corner of the document and locate Make Exportable section within the Layers Panel.Ĭlick on the small Plus icon to bring up the Export Options Panel. Here you can also select the option to trim the transparent pixels (3). Drag the bounding box to resize the slice.You can operate the slice in a way you operate with the Rectangle( R) in Gravit Designer: This area (let’s call it a slice) has a green semitransparent background. Holding Left Mouse Button draw a marquee around the object you want to export. Use the S on your keyboard to do the same. ![]() How To Use The Slice Tool Locate the Slice Tool in GravitĬlick on the arrow icon near the Pointer tool icon to bring up the selection tool menu. Slice Tool ( S) is a selection tool, that allows you to slice a part of the artwork and export it into the four file formats. Gravit Designer interface images if you are preparing tutorial or the Gravit documentation.Then I am going to show you three real-world applications of the slice tool: I will guide you through the step-by-step process of the creation of the slice for export, I will explain how to adjust the background, size, and position of the slice to suit your needs. In today’s tutorial, you will learn how to use a Slice Tool.
0 Comments
Leave a Reply. |